modularize oxui

source/js/Ox.MenuItem.js

@@ -0,0 +1,117 @@
+Ox.MenuItem = function(options, self) {
+
+    var self = self || {},
+        that = new Ox.Element('tr', self)
+            .defaults({
+                bind: [], // fixme: what's this?
+                checked: null,
+                disabled: false,
+                group: '',
+                icon: '',
+                id: '',
+                items: [],
+                keyboard: '',
+                menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
+                position: 0,
+                title: [],
+            })
+            .options($.extend(options, {
+                keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
+                title: Ox.toArray(options.title || self.defaults.title)
+            }))
+            .addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
+            /*
+            .attr({
+                id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
+            })
+            */
+            .data('group', self.options.group); // fixme: why?
+
+    if (self.options.group && self.options.checked === null) {
+        self.options.checked = false;
+    }
+
+    // construct
+    that.append(
+            that.$status = $('<td>', {
+                'class': 'OxCell OxStatus',
+                html: self.options.checked ? Ox.UI.symbols.check : ''
+            })
+        )
+        .append(
+            that.$icon = $('<td>', {
+                'class': 'OxCell OxIcon'
+            })
+            .append(self.options.icon ?
+                $('<img>', {
+                    src: self.options.icon
+                }) : null
+            )
+        )
+        .append(
+            that.$title = $('<td>', {
+                'class': 'OxCell OxTitle',
+                html: self.options.title[0]
+            })
+        )
+        .append(
+            $('<td>', {
+                'class': 'OxCell OxModifiers',
+                html: $.map(self.options.keyboard.modifiers, function(modifier) {
+                    return Ox.UI.symbols[modifier];
+                }).join('')
+            })
+        )
+        .append(
+            $('<td>', {
+                'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
+                html: self.options.items.length ? Ox.UI.symbols.triangle_right :
+                        Ox.UI.symbols[self.options.keyboard.key] ||
+                        self.options.keyboard.key.toUpperCase()
+            })
+        );
+
+    function parseKeyboard(str) {
+        var modifiers = str.split(' '),
+            key = modifiers.pop();
+        return {
+            modifiers: modifiers,
+            key: key
+        };
+    }
+
+    self.onChange = function(key, value) {
+        if (key == 'checked') {
+            that.$status.html(value ? Ox.UI.symbols.check : '')
+        } else if (key == 'disabled') {
+            that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change
+        } else if (key == 'title') {
+            self.options.title = Ox.toArray(value);
+            that.$title.html(self.options.title[0]);
+        }
+    }
+
+    that.toggle = function() {
+        // toggle id and title
+    };
+
+    that.toggleChecked = function() {
+        that.options({
+            checked: !self.options.checked
+        });
+    };
+
+    that.toggleDisabled = function() {
+
+    };
+
+    that.toggleTitle = function() {
+        //Ox.print('s.o.t', self.options.title)
+        that.options({
+            title: self.options.title.reverse()
+        });
+    };
+
+    return that;
+
+};