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)
           });
@@ -166,66 +170,89 @@
 
     elementKeydown: function(e) {
       switch (e.keyCode) {
-      case 9: //tab
+        case 9: //tab
-      case 27: // escape
+        case 27: // escape
-        this.updateFromElementVal();
+          this.updateFromElementVal();
-        break;
-      case 37: // left arrow
-        e.preventDefault();
-        this.highlightPrevUnit();
-        break;
-      case 38: // up arrow
-        e.preventDefault();
-        switch (this.highlightedUnit) {
-        case 'hour':
-          this.incrementHour();
-          this.highlightHour();
           break;
-        case 'minute':
+        case 37: // left arrow
-          this.incrementMinute();
+          e.preventDefault();
-          this.highlightMinute();
+          this.highlightPrevUnit();
           break;
-        case 'second':
+        case 38: // up arrow
-          this.incrementSecond();
+          e.preventDefault();
-          this.highlightSecond();
+          switch (this.highlightedUnit) {
+            case 'hour':
+              this.incrementHour();
+              this.highlightHour();
+              break;
+            case 'minute':
+              this.incrementMinute();
+              this.highlightMinute();
+              break;
+            case 'second':
+              this.incrementSecond();
+              this.highlightSecond();
+              break;
+            case 'meridian':
+              this.toggleMeridian();
+              this.highlightMeridian();
+              break;
+          }
+          this.update();
           break;
-        case 'meridian':
+        case 39: // right arrow
-          this.toggleMeridian();
+          e.preventDefault();
-          this.highlightMeridian();
+          this.highlightNextUnit();
           break;
-        }
+        case 40: // down arrow
-        this.update();
+          e.preventDefault();
-        break;
+          switch (this.highlightedUnit) {
-      case 39: // right arrow
+            case 'hour':
-        e.preventDefault();
+              this.decrementHour();
-        this.highlightNextUnit();
+              this.highlightHour();
-        break;
+              break;
-      case 40: // down arrow
+            case 'minute':
-        e.preventDefault();
+              this.decrementMinute();
-        switch (this.highlightedUnit) {
+              this.highlightMinute();
-        case 'hour':
+              break;
-          this.decrementHour();
+            case 'second':
-          this.highlightHour();
+              this.decrementSecond();
+              this.highlightSecond();
+              break;
+            case 'meridian':
+              this.toggleMeridian();
+              this.highlightMeridian();
+              break;
+          }
+          this.update();
           break;
-        case 'minute':
+        case 8: // backspace - ignore
-          this.decrementMinute();
-          this.highlightMinute();
           break;
-        case 'second':
+        default:
-          this.decrementSecond();
+          // all other keys
-          this.highlightSecond();
+          // if cursor position is at the end of hour, jump to minute
-          break;
+          switch (this.getCursorPosition()) {
-        case 'meridian':
+            case 1:
-          this.toggleMeridian();
+              this.highlightMinute();
-          this.highlightMeridian();
+              break;
-          break;
+            case 3:
-        }
 
-        this.update();
+          }
-        break;
       }
     },
 
+    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() {
       var input = this.$element.get(0);
 
@@ -436,61 +463,38 @@
       }
     },
 
+    setSelectionRange: function(a, b) {
+      var $element = this.$element.get(0);
+
+      if ($element.setSelectionRange) {
+        setTimeout(function() {
+          $element.setSelectionRange(a, b);
+        }, 0);
+      }
+    },
+
     highlightHour: function() {
-      var $element = this.$element.get(0),
-          self = this;
-
       this.highlightedUnit = 'hour';
-
+      this.setSelectionRange(0, 2);
-			if ($element.setSelectionRange) {
-				setTimeout(function() {
-          $element.setSelectionRange(0,2);
-				}, 0);
-			}
     },
 
     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) {
-				if (this.showSeconds) {
+				this.setSelectionRange(9,11);
-					setTimeout(function() {
+			} else {
-            $element.setSelectionRange(9,11);
+				this.setSelectionRange(6,8);
-					}, 0);
-				} else {
-					setTimeout(function() {
-            $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;
 
-      this.update(ignoreWidget);
+      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() {