form elements rewrite, part 3

demos/form2/js/form.js

@@ -48,25 +48,25 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
                 },
                 {
                     options: {
-                        title: [
+                        values: [
-                            {id: "one", title: "right"},
+                            {id: "collapsed", title: "right"},
-                            {id: "two", title: "down"},
+                            {id: "expanded", title: "down"},
                         ],
                         type: "image"
                     },
-                    title: "Multi-Title Image Button"
+                    title: "Multi-Value Image Button"
                 },
                 {
                     options: {
                         selectable: true,
-                        title: [
+                        value: 'on',
+                        values: [
                             {id: "off", title: "Off"},
-                            {id: "on", title: "On"},
+                            {id: "on", title: "On"}
                         ],
-                        width: 32,
+                        width: 32
-                        value: 'on'
                     },
-                    title: "Multi-Title Selectable Text Button"
+                    title: "Multi-Value Selectable Text Button"
                 }
             ],
             "ButtonGroup": [

source/Ox.UI/css/Ox.UI.css

@@ -934,7 +934,7 @@ OxRange
 }
 .OxRange > .OxTrack > .OxThumb.OxTransparent {
     border: 1px solid white;
-    background: transparent;
+    background: rgba(255, 255, 255, 0.25);
     box-shadow: 0 0 1px white inset;
 }
 /*

source/Ox.UI/js/Core/Ox.Element.js

@@ -236,7 +236,6 @@ Ox.Element = function(options, self) {
     }
 
     function mousemove(e) {
-        //Ox.Log('Core', 'mousemove!!')
         that.$tooltip.options({
             title: self.options.tooltip(e)
         }).show(e);

source/Ox.UI/js/Form/Ox.Button.js

@@ -8,18 +8,20 @@ Ox.Button <f:Ox.Element> Button Object
     (options) ->       <f> Button Object
     (options, self) -> <f> Button Object
     options <o> Options object
-        disabled   <b|false> disabled
+        If a button is both selectable and has two values, its value is the
-        group      <b|false> is part of group
+        selected id, and the second value corresponds to the selected state
-        id:        <s|''> button id
+        disabled    <b|false>       If true, button is disabled
-        overlap    <s|none> overlap
+        group       <b|false>       If true, button is part of group
-        selectable <b|false> is selecatable
+        id          <s|''>          Element id
-        size       <s|medium> button size
+        overlap     <s|'none'>      'none', 'left' or 'right'
-        style      <s|default> // can be default, checkbox, symbol, or tab
+        selectable  <b|false>       If true, button is selectable
-        title      <s|a|''> title, can be array
+        style       <s|'default'>   'default', 'checkbox', 'symbol' or 'tab'
-        tooltip    <s|a|''> tooltip, can be array (per title)
+        title       <s|''>          Button title
-        type <s|text>   button type, text or image, (for image, title must be symbolTitle.svg must be availabe)
+        tooltip     <s|[s]|''>      Tooltip
-        value      <b|false> is selected
+        type        <s|text>        'text' or 'image'
-        width <s|auto>  button width
+        value       <b|s|undefined> True for selected, or current value id
+        values      <[o]|[]>        [{id, title}, {id, title}] 
+        width       <s|'auto'>      Button width
     self <o>    Shared private variable
     click    <!> non-selectable button was clicked
     change   <!> selectable button was clicked
@@ -41,7 +43,8 @@ Ox.Button = function(options, self) {
                 title: '',
                 tooltip: '',
                 type: 'text',
-                value: false,
+                value: void 0,
+                values: [],
                 width: 'auto'
             })
             .options(options ? Ox.extend(Ox.clone(options), {
@@ -65,30 +68,35 @@ Ox.Button = function(options, self) {
             .mousedown(mousedown)
             .click(click);
 
-    if (Ox.isArray(self.options.title)) {
+    if (self.options.values.length) {
-        self.options.title = self.options.title.map(function(title) {
+        self.options.values = self.options.values.map(function(value) {
             return {
-                id: title.id || title,
+                id: value.id || value,
-                title: title.title || title
+                title: value.title || value
             };
         });
-        self.options.value = self.options.value || self.options.title[0].id;
+        self.value = Ox.getPositionById(self.options.values, self.options.value);
+        if (self.value == -1) {
+            self.value = 0;
+            self.options.value = self.options.values[0].id;
+        }
+        self.options.title = self.options.values[self.value].title;
+    } else if (self.options.selectable) {
+        self.options.value = self.options.value || false;
     }
 
     setTitle();
 
-    if (options.tooltip) {
+    options.tooltip && that.options({
-        self.tooltips = Ox.toArray(options.tooltip);
+        tooltip: Ox.isArray(options.tooltip)
-        that.options({tooltip: self.tooltips[self.selectedTitle]});
+            ? options.tooltip[self.value]
-    }
+            : options.tooltip
+    });
 
     function click() {
         if (!self.options.disabled) {
-            if (Ox.isArray(self.options.title)) {
+            if (self.options.values.length || self.options.selectable) {
-                that.toggleTitle();
+                that.toggle();
-                that.triggerEvent('change', {value: self.options.value});
-            } else if (self.options.selectable) {
-                that.toggleSelected();
                 that.triggerEvent('change', {value: self.options.value});
             } else {
                 that.triggerEvent('click');
@@ -104,63 +112,53 @@ Ox.Button = function(options, self) {
     }
 
     function setTitle() {
-        var title = Ox.isArray(self.options.title)
-            ? Ox.getObjectById(self.options.title, self.options.value).title
-            : self.options.title;
         if (self.options.type == 'image') {
             that.attr({
                 src: Ox.UI.getImageURL(
-                    'symbol' + title[0].toUpperCase() + title.substr(1)
+                    'symbol' + self.options.title[0].toUpperCase()
+                    + self.options.title.substr(1)
                 )
             });
         } else {
-            that.val(title);
+            that.val(self.options.title);
         }
     }
 
     self.setOption = function(key, value) {
         if (key == 'disabled') {
-            that.attr({disabled: value})
+            that.attr({disabled: value}).toggleClass('OxDisabled');
-                .toggleClass('OxDisabled');
         } else if (key == 'tooltip') {
             that.$tooltip.options({title: value});
         } else if (key == 'title') {
             setTitle();
         } else if (key == 'value') {
+            if (self.options.values.length) {
+                self.options.title = Ox.getObjectById(self.options.values, value).title;
+                setTitle();
+            }
             self.options.selectable && that.toggleClass('OxSelected');
         } else if (key == 'width') {
-            that.$element.css({
+            that.$element.css({width: (value - 14) + 'px'});
-                width: (value - 14) + 'px'
-            });
         }
     };
 
-    that.toggleSelected = function() {
+    that.toggle = function() {
-        self.options.value = !self.options.value;
+        var index;
-        that.toggleClass('OxSelected');
+        if (self.options.values.length) {
-    };
+            index = 1 - Ox.getPositionById(self.options.values, self.options.value);
-
+            self.options.title = self.options.values[index].title;
-    /*@
+            self.options.value = self.options.values[index].id;
-    toggleTitle <f>
-        () -> <o> toggle through titles
-    @*/
-    that.toggleTitle = function() {
-        self.options.value = self.options.title[
-            1 - Ox.getPositionById(self.options.title, self.options.value)
-        ].id;
             setTitle();
-        self.options.selectable && that.toggleClass('OxSelected');
             // fixme: if the tooltip is visible
             // we also need to call show()
             that.$tooltip && that.$tooltip.options({
-            title: self.tooltips[self.selectedTitle]
+                title: self.options.tooltips[index]
             });
-        return that;
+        } else {
+            self.options.value = !self.options.value;
+        }
+        self.options.selectable && that.toggleClass('OxSelected');
     }
-
-    that.value = function() {
-        return self.options.title;
-    };
 
     return that;
 

source/Ox.UI/js/Form/Ox.ButtonGroup.js

@@ -34,8 +34,10 @@ Ox.ButtonGroup = function(options, self) {
 
     self.options.buttons = self.options.buttons.map(function(button) {
         return Ox.extend({
+            disabled: button.disabled,
             id: button.id || button,
-            title: button.title || button
+            title: button.title || button,
+            tooltip: button.tooltip,
         }, self.options.selectable ? {
             selected: Ox.toArray(self.options.value).indexOf(button.id || button) > -1
         } : {});

source/Ox.UI/js/Form/Ox.Checkbox.js

@@ -72,9 +72,9 @@ Ox.Checkbox = function(options, self) {
     self.$button = Ox.Button({
             disabled: self.options.disabled,
             id: self.options.id + 'Button',
-            title: ['none', 'check'],
             type: 'image',
-            value: self.options.value ? 'check' : 'none'
+            value: self.options.value ? 'check' : 'none',
+            values: ['none', 'check']
         })
         .addClass('OxCheckbox')
         .bindEvent({

source/Ox.UI/js/Form/Ox.CheckboxGroup.js

@@ -97,14 +97,6 @@ Ox.CheckboxGroup = function(options, self) {
         }
     }
 
-    that.value = function() {
-        return self.options.checkboxes.filter(function(checkbox) {
-            return checkbox.value;
-        }).map(function(checkbox) {
-            return checkbox.id;
-        });
-    };
-
     return that;
 
 };

source/Ox.UI/js/Form/Ox.Input.js

@@ -893,8 +893,9 @@ Ox.Input = function(options, self) {
         return that;
     };
 
-    // fixme: deprecate, options are enough
+    // FIXME: deprecate, options are enough
     that.value = function() {
+        if (arguments.length == 0) {
             var value = self.$input.hasClass('OxPlaceholder') ? '' : self.$input.val();
             if (self.options.type == 'float') {
                 value = parseFloat(value);
@@ -902,6 +903,9 @@ Ox.Input = function(options, self) {
                 value = parseInt(value); // cannot have leading zero
             }
             return value;
+        } else {
+            return that.options({value: arguments[0]});
+        }
     };
 
     return that;
@@ -1876,7 +1880,7 @@ Ox.Range_ = function(options, self) {
         }, self.options.animate ? animate : 0, function() {
             if (self.options.thumbValue) {
                 $thumb.value(
-                    value: self.options.valueNames
+                    self.options.valueNames
                         ? self.options.valueNames[self.options.value]
                         : self.options.value
                 );