modularize oxui

source/js/Ox.CollapsePanel.js

@@ -0,0 +1,83 @@
+/**
+*/
+Ox.CollapsePanel = function(options, self) {
+    var self = self || {},
+        that = new Ox.Panel({}, self)
+            .defaults({
+                collapsed: false,
+                extras: [],
+                size: 16,
+                title: ''
+            })
+            .options(options)
+            .addClass('OxCollapsePanel'),
+        // fixme: the following should all be self.foo
+        title = self.options.collapsed ?
+            [{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
+            [{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
+        $titlebar = new Ox.Bar({
+                orientation: 'horizontal',
+                size: self.options.size,
+            })
+            .dblclick(dblclickTitlebar)
+            .appendTo(that),
+        $switch = new Ox.Button({
+                style: 'symbol',
+                title: title,
+                type: 'image',
+            })
+            .click(toggleCollapsed)
+            .appendTo($titlebar),
+        $title = new Ox.Element()
+            .addClass('OxTitle')
+            .html(self.options.title/*.toUpperCase()*/)
+            .appendTo($titlebar),
+        $extras;
+    if (self.options.extras.length) {
+        $extras = new Ox.Element()
+            .addClass('OxExtras')
+            .appendTo($titlebar);
+        self.options.extras.forEach(function($extra) {
+            $extra.appendTo($extras);
+        });
+    }
+    that.$content = new Ox.Element()
+        .addClass('OxContent')
+        .appendTo(that);
+    // fixme: doesn't work, content still empty
+    // need to hide it if collapsed
+    if (self.options.collapsed) {
+        that.$content.css({
+            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;
+        marginTop = self.options.collapsed ? -that.$content.height() : 0;
+        that.$content.animate({
+            marginTop: marginTop + 'px'
+        }, 200);
+        that.triggerEvent('toggle', {
+            collapsed: self.options.collapsed
+        });
+    }
+    self.onChange = function(key, value) {
+        if (key == 'collapsed') {
+
+        } else if (key == 'title') {
+            $title.html(self.options.title);
+        }
+    };
+    that.update = function() { // fixme: used anywhere?
+        self.options.collapsed && that.$content.css({
+            marginTop: -that.$content.height()
+        });
+    };
+    return that;
+};