adding symbols

demos/form2/js/form.js

@@ -104,6 +104,7 @@ Ox.load('Geo', function() {
                             { id: "", title: "redo" },
                             { id: "", title: "unlock" },
                             { id: "", title: "lock" },
+                            { id: "", title: "volume" },
                             { id: "", title: "mount" },
                             { id: "", title: "unmount" },
                             { id: "", title: "sync" },
@@ -113,17 +114,21 @@ Ox.load('Geo', function() {
                             { id: "", title: "check" },
                             { id: "", title: "embed" },
                             { id: "", title: "bracket" },
-                            { id: "", title: "delete" },
+                            { id: "", title: "upload" },
                             { id: "", title: "download" },
+                            { id: "", title: "click" },
+                            { id: "", title: "delete" },
                             { id: "", title: "edit" },
                             { id: "", title: "find" },
                             { id: "", title: "flag" },
+                            { id: "", title: "icon" },
                             { id: "", title: "like" },
                             { id: "", title: "publish" },
                             { id: "", title: "set" },
                             { id: "", title: "star" },
                             { id: "", title: "user" },
-                            { id: "", title: "view" }
+                            { id: "", title: "view" },
+                            { id: "", title: "loading" }
                         ],
                         id: "buttonGroupImage",
                         type: "image"

source/Ox.UI/js/List/Ox.List.js

@@ -554,6 +554,11 @@ Ox.List = function(options, self) {
          return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength);
     }
 
+    function getPageLength(page) {
+        var mod = self.listLength % self.pageLength;
+        return page < self.pages - 1 || mod == 0 ? self.pageLength : mod;
+    }
+
     function getPositionById(id) {
         // fixme: is this really needed?
         var pos = -1;
@@ -679,11 +684,9 @@ Ox.List = function(options, self) {
             self.$items[pos].appendTo(that.$content);
         });
         self.selected.length && scrollToPosition(self.selected[0]);
-    }
+        // that.triggerEvent('init', {items: self.options.items.length});
-
+        // fixme: do async lists need to trigger init?
-    function getPageLength(page) {
+        // will this only be reached in async lists?
-        var mod = self.listLength % self.pageLength;
-        return page < self.pages - 1 || mod == 0 ? self.pageLength : mod;
     }
 
     function loadPage(page, callback) {

source/Ox.UI/js/List/Ox.TextList.js

@@ -422,7 +422,7 @@ Ox.TextList = function(options, self) {
         } else if (format) {
             value = Ox.isObject(format) ?
                 Ox['format' + Ox.toTitleCase(format.type)]
-                .apply(this, $.merge([value], format.args)) :
+                .apply(this, Ox.merge([value], format.args || [])) :
                 format(value, data);
         } else if (Ox.isArray(value)) {
             value = value.join(', ');

source/Ox.UI/js/Panel/Ox.CollapsePanel.js

@@ -47,6 +47,7 @@ Ox.CollapsePanel = function(options, self) {
             .html(self.options.title/*.toUpperCase()*/)
             .appendTo($titlebar),
         $extras;
+
     if (self.options.extras.length) {
         $extras = Ox.Element()
             .addClass('OxExtras')
@@ -55,6 +56,7 @@ Ox.CollapsePanel = function(options, self) {
             $extra.appendTo($extras);
         });
     }
+
     that.$content = Ox.Element()
         .addClass('OxContent')
         .appendTo(that);
@@ -65,11 +67,13 @@ Ox.CollapsePanel = function(options, self) {
             marginTop: -that.$content.height() + 'px'
         });
     }
+
     function dblclickTitlebar(e) {
         if (!$(e.target).hasClass('OxButton')) {
             $switch.trigger('click');
         }
     }
+
     function toggleCollapsed() {
         var marginTop;
         self.options.collapsed = !self.options.collapsed;
@@ -81,6 +85,7 @@ Ox.CollapsePanel = function(options, self) {
             collapsed: self.options.collapsed
         });
     }
+
     /*@
     setOption <f> setOption
         (key, value) -> <u> set key to value
@@ -101,5 +106,7 @@ Ox.CollapsePanel = function(options, self) {
             marginTop: -that.$content.height()
         });
     };
+
     return that;
+
 };

source/Ox.UI/themes/classic/_index.html

@@ -60,10 +60,11 @@
                     'center', 'zoom', 'grow', 'shrink', 'fill', 'fit',
                     'unmute', 'volumeUp', 'volumeDown', 'mute',
                     'undo', 'redo', 'unlock', 'lock',
-                    'mount', 'unmount', 'sync',
+                    'volume', 'mount', 'unmount', 'sync',
                     'info', 'warning', 'help',
                     'check', 'embed', 'bracket',
-                    'delete', 'download', 'edit', 'find', 'flag', 'like',
+                    'upload', 'download', 
+                    'click', 'delete', 'edit', 'find', 'flag', 'icon', 'like',
                     'publish', 'set', 'star', 'user', 'view', 'loading'
                 ].forEach(function(symbol) {
                     var $symbol, src = 'svg/symbol' + Ox.toTitleCase(symbol) + '.svg';

source/Ox.UI/themes/classic/svg/symbolIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <path d="M 64,32 l 128,0 a 32,32 0 0,1 32,32 l 0,128 a 32,32 0 0,1 -32,32 l -128,0 a 32,32 0 0,1 -32,-32 l 0,-128 a 32,32 0 0,1 32,-32" fill="none" stroke="#404040" stroke-width="32"/>
+</svg>

source/Ox.UI/themes/classic/svg/symbolVolume.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <g stroke="#404040" stroke-width="32">
+        <rect x="32" y="160" width="192" height="64" fill="none"/>
+        <path d="M 32,160 l 24,-128 144,0 24,128" fill="none"/>
+    </g>
+</svg>

source/Ox.js

@@ -171,13 +171,13 @@ Ox.compact = function(arr) {
 Ox.flatten = function(arr) {
     // fixme: can this work for objects too?
     var ret = [];
-    arr.forEach(function(v) {
+    arr.forEach(function(val) {
-        if (Ox.isArray(v)) {
+        if (Ox.isArray(val)) {
-            Ox.flatten(v).forEach(function(v) {
+            Ox.flatten(val).forEach(function(val) {
-                ret.push(v);
+                ret.push(val);
             });
         } else {
-            ret.push(v);
+            ret.push(val);
         }
     });
     return ret;
@@ -468,6 +468,9 @@ Ox.forEach = function(obj, fn) {
     }
     for (key in obj) {
         key = isObject ? key : parseInt(key);
+        // fixme: some code somewhere (jQuery wrapper?) relies on looping over the prototype
+        // ... but the hasOwnProperty call should be uncommented!
+        // +fixme: fn.call(context, obj[key], key, obj) may be more standard...
         if (/*hasOwnProperty.call(obj, key) && */fn(obj[key], key) === false) {
             break;
         }
@@ -1640,6 +1643,7 @@ Ox.element = function(str) {
     return {
         //@ 0 <e> The DOM element itself
         0: str[0] == '<' ? document.createElement(str.substr(1, str.length - 2)) :
+            // fixme: why only take the first match?
             str[0] == '.' ? document.getElementsByClassName(str.substr(1))[0] :
             str[0] == '#' ? document.getElementById(str.substr(1)) :
             document.getElementsByTagName(str)[0],
@@ -1651,7 +1655,7 @@ Ox.element = function(str) {
         addClass: function(str) {
             this[0].className = this[0].className ? Ox.unique(
                 (this[0].className + ' ' + str).split(' ')
-            ) : str;
+            ).join(' ') : str;
             return this;
         },
         /*@
@@ -1713,6 +1717,14 @@ Ox.element = function(str) {
             return ret;
         },
         /*@
+        hasClass <f> Returns true if the element has a given class
+            (className) -> <b> True if the element has the class
+            className <s> Class name
+        @*/
+        hasClass: function(str) {
+            return this[0].className.split(' ').indexOf(str) > -1;
+        },
+        /*@
         html <f> Gets or sets the inner HTML
             ()     -> <s> The inner HTML
             (html) -> <o> This element
@@ -1734,6 +1746,7 @@ Ox.element = function(str) {
             callback <f> Callback function
                 event <o> The DOM event
         @*/
+        // fixme: why not a generic bind?
         mousedown: function(callback) {
             this[0].onmousedown = callback;
             return this;