modularize oxui

source/js/Ox.ButtonGroup.js

@@ -0,0 +1,74 @@
+Ox.ButtonGroup = function(options, self) {
+
+    /**
+        options
+            buttons     array of buttons
+            max         integer, maximum number of selected buttons, 0 for all
+            min         integer, minimum number of selected buttons, 0 for none
+            selectable  if true, buttons are selectable
+            type        string, 'image' or 'text'
+        methods:
+        events:
+            change  {id, value}     selection within a group changed
+    */
+
+    var self = self || {},
+        that = new Ox.Element({}, self)
+            .defaults({
+                buttons: [],
+                max: 1,
+                min: 1,
+                selectable: false,
+                size: 'medium',
+                style: '',
+                type: 'text',
+            })
+            .options(options || {})
+            .addClass('OxButtonGroup');
+
+    if (self.options.selectable) {
+        self.optionGroup = new Ox.OptionGroup(
+            self.options.buttons,
+            self.options.min,
+            self.options.max,
+            'selected'
+        );
+        self.options.buttons = self.optionGroup.init();
+    }
+
+    self.$buttons = [];
+    self.options.buttons.forEach(function(button, position) {
+        var id = self.options.id + Ox.toTitleCase(button.id)
+        self.$buttons[position] = Ox.Button({
+                disabled: button.disabled,
+                group: true,
+                id: id,
+                selectable: self.options.selectable,
+                selected: button.selected,
+                size: self.options.size,
+                style: self.options.style,
+                title: button.title,
+                type: self.options.type
+            })
+            .bindEvent('select', function() {
+                selectButton(position);
+            })
+            .appendTo(that);
+    });
+
+    function selectButton(pos) {
+        var toggled = self.optionGroup.toggle(pos);
+        if (toggled.length) {
+            toggled.forEach(function(pos, i) {
+                self.$buttons[pos].toggleSelected();
+            });
+            that.triggerEvent('change', {
+                selected: $.map(self.optionGroup.selected(), function(v, i) {
+                    return self.options.buttons[v].id;
+                })
+            });
+        }
+    }
+
+    return that;
+};