Spinner: Introduce page option to configure page size. Use that for timespinner demo...

diff --git a/demos/spinner/time.html b/demos/spinner/time.html
index 2f55d0f09d88f1e9caa9347b90b89d38ab2edbdb..4913a6307ae409284029bd7a7a2db0706fbf98f9 100644 (file)
--- a/demos/spinner/time.html
+++ b/demos/spinner/time.html
@@ -8,7 +8,6 @@
        <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>\r
        <script type="text/javascript" src="../../external/glob.js"></script>\r
        <script type="text/javascript" src="../../external/glob.de-DE.js"></script>\r
-       <script type="text/javascript" src="../../external/glob.ja-JP.js"></script>\r
        <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>\r
        <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>\r
        <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>\r
@@ -16,25 +15,31 @@
        <link type="text/css" href="../demos.css" rel="stylesheet" />\r
        <script type="text/javascript">\r
        $.widget("ui.timespinner", $.ui.spinner, {\r
+               options: {\r
+                       // seconds\r
+                       step: 60 * 1000,\r
+                       // hours\r
+                       page: 60\r
+               },\r
+               \r
                _parse: function(value) {\r
                        if (typeof value == 'string') {\r
-                               // TODO use Globalization to parse time\r
-                               var parts = value.split(":");\r
-                               return parseInt(parts[0]) * 60 + parseInt(parts[1]);\r
+                               return +Globalization.parseDate(value)\r
                        }\r
                        return value;\r
                },\r
                _format: function() {\r
-                       if (!this.options.value) {\r
-                               this.element.val( "00:00" );\r
-                       }\r
-                       // TODO use Globalization to format time\r
-                       this.element.val( parseInt(this.options.value / 60) + ":" + (this.options.value % 60) );\r
+                       this.element.val( Globalization.format(new Date(this.options.value), "t") );\r
                }\r
        })\r
        $(function() {\r
-               $("#spinner").timespinner({\r
-                       step: 60\r
+               $("#spinner").timespinner();\r
+               \r
+               \r
+               $("#culture").change(function() {\r
+                       var current = $("#spinner").timespinner("value");\r
+                       Globalization.preferCulture($(this).val());\r
+                       $("#spinner").timespinner("value", current);\r
                });\r
        });\r
        </script>\r
@@ -44,7 +49,14 @@
 <div class="demo">\r
 <p>\r
        <label for="spinner">Decimal spinner:</label>\r
-       <input id="spinner" name="spinner" value="15:30" />\r
+       <input id="spinner" name="spinner" value="08:30 PM" />\r
+</p>\r
+<p>\r
+       <label for="culture">Select a culture to use for formatting:</label>\r
+       <select id="culture">\r
+               <option value="en-EN" selected="selected">English</option>\r
+               <option value="de-DE">German</option>\r
+       </select>\r
 </p>\r
 </div>\r
 \r

diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js
index 7f32adbd80386f91dc2e9f565d91658194d18d4e..39a498359cc223910e1d517cbcd6c1aa88fb84f5 100644 (file)
--- a/ui/jquery.ui.spinner.js
+++ b/ui/jquery.ui.spinner.js
@@ -13,15 +13,13 @@
  */
 (function($) {
 
-// shortcut constants
-var pageModifier = 10;
-
 $.widget('ui.spinner', {
        options: {
                incremental: true,
                max: null,
                min: null,
                numberformat: null,
+               page: 10,
                step: null,
                value: null
        },
@@ -161,10 +159,10 @@ $.widget('ui.spinner', {
                        this._repeat(null, -1, event);
                        return false;
                case KEYS.PAGE_UP:
-                       this._repeat(null, pageModifier, event);
+                       this._repeat(null, this.options.page, event);
                        return false;
                case KEYS.PAGE_DOWN:
-                       this._repeat(null, -pageModifier, event);
+                       this._repeat(null, -this.options.page, event);
                        return false;
                        
                case KEYS.ENTER:
@@ -340,11 +338,11 @@ $.widget('ui.spinner', {
        },
        
        pageUp: function(pages) {
-               this.stepUp((pages || 1) * pageModifier);               
+               this.stepUp((pages || 1) * this.options.page);          
        },
        
        pageDown: function(pages) {
-               this.stepDown((pages || 1) * pageModifier);             
+               this.stepDown((pages || 1) * this.options.page);                
        },
        
        value: function(newVal) {