timepicker: fluid typing, fluid stepping

app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js

@@ -9,6 +9,8 @@
  *    - template: false
  *    - showInputs: false
  *    - maxHours
+ *    - automatically jump from hours to minutes when typing in a number
+ *    - continue stepping from manually input value
  *
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
@@ -53,6 +55,7 @@
           'focus.timepicker': $.proxy(this.highlightUnit, this),
           'click.timepicker': $.proxy(this.highlightUnit, this),
           'keydown.timepicker': $.proxy(this.elementKeydown, this),
+          'keyup.timepicker': $.proxy(this.elementKeyup, this),
           'blur.timepicker': $.proxy(this.blurElement, this),
           'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)
         });
@@ -69,6 +72,7 @@
             'focus.timepicker': $.proxy(this.highlightUnit, this),
             'click.timepicker': $.proxy(this.highlightUnit, this),
             'keydown.timepicker': $.proxy(this.elementKeydown, this),
+            'keyup.timepicker': $.proxy(this.elementKeyup, this),
             'blur.timepicker': $.proxy(this.blurElement, this),
             'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)
           });
@@ -220,10 +224,33 @@
               this.highlightMeridian();
               break;
           }
-
           this.update();
           break;
+        case 8: // backspace - ignore
+          break;
+        default:
+          // all other keys
+          // if cursor position is at the end of hour, jump to minute
+          switch (this.getCursorPosition()) {
+            case 1:
+              this.highlightMinute();
+              break;
+            case 3:
+
           }
+      }
+    },
+
+    elementKeyup: function(e) {
+      var ignored = [
+        8, // backspace
+        9, // tab
+        27, // escape
+        37, 38, 39, 40 // arrows
+      ]
+
+      if(ignored.indexOf(e.keyCode) == -1)
+        this.updateFromElementVal(true);
     },
 
     getCursorPosition: function() {
@@ -436,61 +463,38 @@
       }
     },
 
-    highlightHour: function() {
+    setSelectionRange: function(a, b) {
-      var $element = this.$element.get(0),
+      var $element = this.$element.get(0);
-          self = this;
-
-      this.highlightedUnit = 'hour';
 
       if ($element.setSelectionRange) {
         setTimeout(function() {
-          $element.setSelectionRange(0,2);
+          $element.setSelectionRange(a, b);
         }, 0);
       }
     },
 
+    highlightHour: function() {
+      this.highlightedUnit = 'hour';
+      this.setSelectionRange(0, 2);
+    },
+
     highlightMinute: function() {
-      var $element = this.$element.get(0),
-          self = this;
-
       this.highlightedUnit = 'minute';
-
+      this.setSelectionRange(3, 5);
-			if ($element.setSelectionRange) {
-				setTimeout(function() {
-          $element.setSelectionRange(3,5);
-				}, 0);
-			}
     },
 
     highlightSecond: function() {
-      var $element = this.$element.get(0),
-          self = this;
-
       this.highlightedUnit = 'second';
-
+      this.setSelectionRange(6,8);
-			if ($element.setSelectionRange) {
-				setTimeout(function() {
-          $element.setSelectionRange(6,8);
-				}, 0);
-			}
     },
 
     highlightMeridian: function() {
-      var $element = this.$element.get(0),
-          self = this;
-
       this.highlightedUnit = 'meridian';
 
-			if ($element.setSelectionRange) {
 			if (this.showSeconds) {
-					setTimeout(function() {
+				this.setSelectionRange(9,11);
-            $element.setSelectionRange(9,11);
-					}, 0);
 			} else {
-					setTimeout(function() {
+				this.setSelectionRange(6,8);
-            $element.setSelectionRange(6,8);
-					}, 0);
-				}
 			}
     },
 
@@ -718,7 +722,7 @@
       }
     },
 
-    setTime: function(time, ignoreWidget) {
+    setTime: function(time, ignoreWidget, silent) {
       if (!time) {
         this.clear();
         return;
@@ -831,7 +835,9 @@
       this.second = second;
       this.meridian = meridian;
 
+      if (!silent) {
         this.update(ignoreWidget);
+      }
     },
 
     showWidget: function() {
@@ -918,8 +924,8 @@
       this.$element.val(this.getTime()).change();
     },
 
-    updateFromElementVal: function() {
+    updateFromElementVal: function(silent) {
-      this.setTime(this.$element.val());
+      this.setTime(this.$element.val(), undefined, silent);
     },
 
     updateWidget: function() {