Slider: Some more refactoring and cleanup

diff --git a/tests/unit/spinner/spinner_core.js b/tests/unit/spinner/spinner_core.js
index 6e3edafc8a24c03cb07032810762a6a7709e4bf3..88603708f4d6d6b7bf3f5fbc70e5a75b7ab7c40a 100644 (file)
--- a/tests/unit/spinner/spinner_core.js
+++ b/tests/unit/spinner/spinner_core.js
@@ -35,7 +35,7 @@ test("keydown UP on input, increases value not greater than max", function() {
        }\r
        equals(el.val(), 100);\r
        \r
-       el.val(50);\r
+       el.spinner("value", 50);\r
        simulateKeyDownUp(el, $.ui.keyCode.UP);\r
        equals(el.val(), 60);\r
 });\r
@@ -55,7 +55,7 @@ test("keydown DOWN on input, decreases value not less than min", function() {
        }\r
        equals(el.val(), -100);\r
        \r
-       el.val(50);\r
+       el.spinner("value", 50);\r
        simulateKeyDownUp(el, $.ui.keyCode.DOWN);\r
        equals(el.val(), 40);\r
 });\r
@@ -75,7 +75,7 @@ test("keydown PGUP on input, increases value not greater than max", function() {
        }\r
        equal(el.val(), 500);\r
        \r
-       el.val(0);\r
+       el.spinner("value", 0);\r
        simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP);\r
        equals(el.val(), 100);\r
 });\r
@@ -95,7 +95,7 @@ test("keydown PGDN on input, decreases value not less than min", function() {
        }\r
        equals(el.val(), -500);\r
        \r
-       el.val(0);\r
+       el.spinner("value", 0);\r
        simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN);\r
        equals(el.val(), -100);\r
 });\r
@@ -110,11 +110,11 @@ test("mouse click on buttons", function() {
        $(".ui-spinner-down").trigger("mousedown").trigger("mouseup");\r
        equals(el.val(), --val, "mouse click to down");\r
        \r
-       el.val(50);\r
+       el.spinner("value", 50);\r
        $(".ui-spinner-up").trigger("mousedown").trigger("mouseup");\r
        equals(el.val(), 51);\r
 \r
-       el.val(50);\r
+       el.spinner("value", 50);\r
        $(".ui-spinner-down").trigger("mousedown").trigger("mouseup");\r
        equals(el.val(), 49);\r
 });\r

diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js
index 09d056f500c18473596f8af5a5d77cdbf2110840..d671bdf48ac29d9deb2cc5120b7e64465d88d08b 100644 (file)
--- a/ui/jquery.ui.spinner.js
+++ b/ui/jquery.ui.spinner.js
@@ -14,10 +14,7 @@
 (function($) {\r
 \r
 // shortcut constants\r
-var hover = 'ui-state-hover',\r
-       active = 'ui-state-active',\r
-       namespace = '.spinner',\r
-       pageModifier = 10;\r
+var pageModifier = 10;\r
 \r
 $.widget('ui.spinner', {\r
        options: {\r
@@ -49,6 +46,7 @@ $.widget('ui.spinner', {
                this._mousewheel();\r
                this._aria();\r
        },\r
+       \r
        _draw: function() {\r
                var self = this,\r
                        options = self.options;\r
@@ -63,11 +61,11 @@ $.widget('ui.spinner', {
                                // add behaviours\r
                                .hover(function() {\r
                                        if (!options.disabled) {\r
-                                               $(this).addClass(hover);\r
+                                               $(this).addClass('ui-state-hover');\r
                                        }\r
                                        self.hovered = true;\r
                                }, function() {\r
-                                       $(this).removeClass(hover);\r
+                                       $(this).removeClass('ui-state-hover');\r
                                        self.hovered = false;\r
                                });\r
 \r
@@ -78,7 +76,7 @@ $.widget('ui.spinner', {
                }\r
 \r
                this.element\r
-                       .bind('keydown'+namespace, function(event) {\r
+                       .bind('keydown.spinner', function(event) {\r
                                if (self.options.disabled) {\r
                                        return;\r
                                }\r
@@ -87,7 +85,7 @@ $.widget('ui.spinner', {
                                }\r
                                return true;\r
                        })\r
-                       .bind('keyup'+namespace, function(event) {\r
+                       .bind('keyup.spinner', function(event) {\r
                                if (self.options.disabled) {\r
                                        return;\r
                                }\r
@@ -96,14 +94,14 @@ $.widget('ui.spinner', {
                                        self._change(event);                                    \r
                                }\r
                        })\r
-                       .bind('focus'+namespace, function() {\r
-                               uiSpinner.addClass(active);\r
+                       .bind('focus.spinner', function() {\r
+                               uiSpinner.addClass('ui-state-active');\r
                                self.focused = true;\r
                        })\r
-                       .bind('blur'+namespace, function(event) {\r
+                       .bind('blur.spinner', function(event) {\r
                                self.value(self.element.val());\r
                                if (!self.hovered) {\r
-                                       uiSpinner.removeClass(active);\r
+                                       uiSpinner.removeClass('ui-state-active');\r
                                }               \r
                                self.focused = false;\r
                        });\r
@@ -163,66 +161,7 @@ $.widget('ui.spinner', {
                        this.disable();\r
                }\r
        },\r
-       _uiSpinnerHtml: function() {\r
-               return '<div role="spinbutton" class="ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all"></div>';\r
-       },\r
-       _buttonHtml: function() {\r
-               return '<a class="ui-spinner-button ui-spinner-up ui-corner-tr"><span class="ui-icon ui-icon-triangle-1-n">&#9650;</span></a>' +\r
-                               '<a class="ui-spinner-button ui-spinner-down ui-corner-br"><span class="ui-icon ui-icon-triangle-1-s">&#9660;</span></a>';\r
-       },\r
-       _start: function(event) {\r
-               if (!this.spinning && this._trigger('start', event, { value: this.value()}) !== false) {\r
-                       if (!this.counter) {\r
-                               this.counter = 1;\r
-                       }\r
-                       this.spinning = true;\r
-                       return true;\r
-               }\r
-               return false;\r
-       },\r
-       _spin: function(step, event) {\r
-               if (!this.counter) {\r
-                       this.counter = 1;\r
-               }\r
-               \r
-               var newVal = this.value() + step * (this.options.incremental && this.counter > 100\r
-                       ? this.counter > 200\r
-                               ? 100 \r
-                               : 10\r
-                       : 1);\r
-               \r
-               // cancelable\r
-               if (this._trigger('spin', event, { value: newVal }) !== false) {\r
-                       this.value(newVal);\r
-                       this.counter++;                 \r
-               }\r
-       },\r
-       _stop: function(event) {\r
-               this.counter = 0;\r
-               if (this.timer) {\r
-                       window.clearTimeout(this.timer);\r
-               }\r
-               this.element[0].focus();\r
-               this.spinning = false;\r
-               this._trigger('stop', event);\r
-       },\r
-       _change: function(event) {\r
-               this._trigger('change', event);\r
-       },\r
-       _repeat: function(i, steps, event) {\r
-               var self = this;\r
-               i = i || 100;\r
-\r
-               if (this.timer) {\r
-                       window.clearTimeout(this.timer);\r
-               }\r
-               \r
-               this.timer = window.setTimeout(function() {\r
-                       self._repeat(self.options.incremental && self.counter > 20 ? 20 : i, steps, event);\r
-               }, i);\r
-               \r
-               self._spin(steps*self.options.step, event);\r
-       },\r
+       \r
        _keydown: function(event) {\r
                var o = this.options,\r
                        KEYS = $.ui.keyCode;\r
@@ -247,9 +186,10 @@ $.widget('ui.spinner', {
                \r
                return true;\r
        },\r
+       \r
        _mousewheel: function() {\r
                var self = this;\r
-               this.element.bind("mousewheel", function(event, delta) {\r
+               this.element.bind("mousewheel.spinner", function(event, delta) {\r
                        if (self.options.disabled) {\r
                                return;\r
                        }\r
@@ -270,22 +210,75 @@ $.widget('ui.spinner', {
                        event.preventDefault();\r
                });\r
        },\r
-       value: function(newVal) {\r
-               if (!arguments.length) {\r
-                       return this._parse(this.element.val());\r
+       \r
+       _uiSpinnerHtml: function() {\r
+               return '<div role="spinbutton" class="ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all"></div>';\r
+       },\r
+       \r
+       _buttonHtml: function() {\r
+               return '<a class="ui-spinner-button ui-spinner-up ui-corner-tr"><span class="ui-icon ui-icon-triangle-1-n">&#9650;</span></a>' +\r
+                               '<a class="ui-spinner-button ui-spinner-down ui-corner-br"><span class="ui-icon ui-icon-triangle-1-s">&#9660;</span></a>';\r
+       },\r
+       \r
+       _start: function(event) {\r
+               if (!this.spinning && this._trigger('start', event, { value: this.options.value}) !== false) {\r
+                       if (!this.counter) {\r
+                               this.counter = 1;\r
+                       }\r
+                       this.spinning = true;\r
+                       return true;\r
                }\r
-               this._setOption('value', newVal);\r
+               return false;\r
        },\r
-       _getData: function(key) {\r
-               switch (key) {\r
-                       case 'min':\r
-                       case 'max':\r
-                       case 'step':\r
-                               return this['_'+key]();\r
-                               break;\r
+       \r
+       // TODO tune repeat behaviour, see http://jsbin.com/aruki4/2 for reference\r
+       _repeat: function(i, steps, event) {\r
+               var self = this;\r
+               i = i || 100;\r
+\r
+               if (this.timer) {\r
+                       window.clearTimeout(this.timer);\r
+               }\r
+               \r
+               this.timer = window.setTimeout(function() {\r
+                       self._repeat(self.options.incremental && self.counter > 20 ? 20 : i, steps, event);\r
+               }, i);\r
+               \r
+               self._spin(steps*self.options.step, event);\r
+       },\r
+       \r
+       _spin: function(step, event) {\r
+               if (!this.counter) {\r
+                       this.counter = 1;\r
+               }\r
+               \r
+               var newVal = this.options.value + step * (this.options.incremental && this.counter > 100\r
+                       ? this.counter > 200\r
+                               ? 100 \r
+                               : 10\r
+                       : 1);\r
+               \r
+               // cancelable\r
+               if (this._trigger('spin', event, { value: newVal }) !== false) {\r
+                       this.value(newVal);\r
+                       this.counter++;                 \r
                }\r
-               return this.options[key];\r
        },\r
+       \r
+       _stop: function(event) {\r
+               this.counter = 0;\r
+               if (this.timer) {\r
+                       window.clearTimeout(this.timer);\r
+               }\r
+               this.element[0].focus();\r
+               this.spinning = false;\r
+               this._trigger('stop', event);\r
+       },\r
+       \r
+       _change: function(event) {\r
+               this._trigger('change', event);\r
+       },\r
+       \r
        _setOption: function(key, value) {\r
                if (key == 'value') {\r
                        value = this._parse(value);\r
@@ -299,31 +292,24 @@ $.widget('ui.spinner', {
                $.Widget.prototype._setOption.call( this, key, value );\r
                this._afterSetData(key, value);\r
        },\r
+       \r
        _afterSetData: function(key, value) {\r
                switch(key) {\r
+                       case 'value':\r
+                               this._format(this.options.value);\r
                        case 'max':\r
                        case 'min':\r
                        case 'step':\r
-                               if (value != null) {\r
-                                       // write attributes back to element if original exist\r
-                                       if (this.element.attr(key)) {\r
-                                               this.element.attr(key, value);\r
-                                       }\r
-                               }\r
                                this._aria();\r
-                               break;\r
-                       case 'value':\r
-                               this._format(this._parse(this.options.value));\r
-                               this._aria();\r
-                               break;\r
                }\r
        },\r
+       \r
        _aria: function() {\r
                // TODO remove check, as soon as this method doesn't get called anymore before uiSpinner is initalized\r
                this.uiSpinner && this.uiSpinner\r
                                .attr('aria-valuemin', this.options.min)\r
                                .attr('aria-valuemax', this.options.max)\r
-                               .attr('aria-valuenow', this.value());\r
+                               .attr('aria-valuenow', this.options.value);\r
        },\r
        \r
        _parse: function(val) {\r
@@ -337,9 +323,9 @@ $.widget('ui.spinner', {
                        }\r
                        val = window.Globalization && this.options.numberformat ? Globalization.parseFloat(val) : +val;\r
                }\r
-               console.log("input", input, "parsed", val)\r
                return isNaN(val) ? null : val;\r
        },\r
+       \r
        _format: function(num) {\r
                this.element.val( window.Globalization && this.options.numberformat ? Globalization.format(num, this.options.numberformat) : num );\r
        },\r
@@ -354,10 +340,11 @@ $.widget('ui.spinner', {
                        .removeAttr('disabled')\r
                        .removeAttr('autocomplete')\r
                        .removeData('spinner')\r
-                       .unbind(namespace);\r
+                       .unbind(".spinner");\r
                \r
                this.uiSpinner.replaceWith(this.element);       \r
        },\r
+       \r
        enable: function() {\r
                this.element\r
                        .removeAttr('disabled')\r
@@ -366,6 +353,7 @@ $.widget('ui.spinner', {
                this.options.disabled = false;\r
                this.buttons.button("enable");\r
        },\r
+       \r
        disable: function() {\r
                this.element\r
                        .attr('disabled', true)\r
@@ -374,21 +362,32 @@ $.widget('ui.spinner', {
                this.options.disabled = true;\r
                this.buttons.button("disable");\r
        },\r
+       \r
        stepUp: function(steps) {\r
                this._spin((steps || 1) * this.options.step, null);\r
                return this;\r
        },\r
+       \r
        stepDown: function(steps) {\r
                this._spin((steps || 1) * -this.options.step, null);    \r
                return this;\r
        },\r
+       \r
        pageUp: function(pages) {\r
                return this.stepUp((pages || 1) * pageModifier);                \r
        },\r
+       \r
        pageDown: function(pages) {\r
                return this.stepDown((pages || 1) * pageModifier);              \r
        },\r
        \r
+       value: function(newVal) {\r
+               if (!arguments.length) {\r
+                       return this.options.value;\r
+               }\r
+               this._setOption('value', newVal);\r
+       },\r
+       \r
        widget: function() {\r
                return this.uiSpinner;\r
        }\r