bootstrap-timepicker-rails-addon 0.3.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9c43149fd64f5a73bfac3fabf476ba171f611fec
-  data.tar.gz: 6574c731da5c59d6d19b6f3a4bff706e4b78d2d4
+  metadata.gz: d53e7c7b6dc408b23358a61a8a105affdd3a1894
+  data.tar.gz: fafa6ddbf978c829658e6ff259686b3afd9eb50b
 SHA512:
-  metadata.gz: b336fca9f09bb8f2bc2af8681341a118da95b4cbcf4106ed214652df218964a674ee843999a69170a1b89c192b6f192d86aeb1afcc8b2db775fd0085cb58c2ab
-  data.tar.gz: 678ffdfc30c0fd73e8d93936a7b192cd705941e7175ba679e56d78c71bded94be9f9e9614965d8198b19a224de4672e176292b1461578302e4347dbd8f235a5e
+  metadata.gz: 0591e472cfe6a3dc622a12e67fb6ea46ce74a22afb0118fd008743ada85f54cfe5c935d2bbaa664526d2960a4b85791208d4f9735b69465763c220441f14d26b
+  data.tar.gz: d721ffc180649f5c0953fe8542d87b92172dd43d992c5945bfc6833294d67db60df60928720d6785e04deffae2d785e168c33db0cf60e057d3f140157ff9983b

data/README.md

@@ -1,19 +1,28 @@
 # Bootstrap::Timepicker::Rails::Addon
 This is the GEMified version of [bootstrap-timepicker](https://github.com/jdewit/bootstrap-timepicker)
 
-bootstrap-timepicker-rails-addon project integrates Timepicker for Twitter Bootstrap with Rails 3 and 4 assets pipeline.
+bootstrap-timepicker-rails-addon project integrates Timepicker for Twitter Bootstrap 3 with Rails 3 and 4 assets pipeline.
 
 ## Installation
 
 Add this line to your application's Gemfile:
 
+1) if you used Bootstrap 3 version,
+```ruby
+    gem 'bootstrap-sass', '~> 3.3.5'
+    gem 'bootstrap-timepicker-rails-addon', '~> 0.5.1'
+```
+
+2) if you used Bootstrap 2 version,
+```ruby
     gem 'bootstrap-sass', '~> 2.3.2.0'
-    gem 'bootstrap-timepicker-rails-addon'
+    gem 'bootstrap-timepicker-rails-addon', '0.3.0'
+```
 
-Or you can install from latest build:
+Or you can install from latest build(only support Bootstrap 3 version in master branch):
 
 ```ruby
-gem 'bootstrap-sass', '~> 2.3.2.0'
+gem 'bootstrap-sass', '~> 3.3.5'
 gem 'bootstrap-timepicker-rails-addon', :require => 'bootstrap-timepicker-rails-addon',
                                         :git => 'git://github.com/ywjno/bootstrap-timepicker-rails-addon.git'
 ```
@@ -32,9 +41,9 @@ Add this line to app/assets/javascripts/application.js
 
     //= require bootstrap-timepicker
 
-Add this line to app/assets/stylesheets/application.css
+Add this line to app/assets/stylesheets/application.css.scss
 
-    *= require bootstrap-timepicker
+    @import "bootstrap-timepicker";
 
 Just call timepicker() with any selector in view.
 
@@ -45,9 +54,9 @@ $('#timepicker').timepicker();
 And here is the html code sample.
 
 ```html
-<div class="input-append bootstrap-timepicker">
-  <input id="timepicker" type="text" class="input-small">
-  <span class="add-on"><i class="icon-time"></i></span>
+<div class="input-group bootstrap-timepicker timepicker">
+  <input id="timepicker1" type="text" class="form-control input-small">
+  <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
 </div>
 ```
 

data/lib/bootstrap-timepicker-rails-addon/version.rb

@@ -2,7 +2,7 @@ module Bootstrap
   module Timepicker
     module Rails
       module Addon
-        VERSION = "0.3.0"
+        VERSION = "0.5.1"
       end
     end
   end

data/vendor/assets/javascripts/bootstrap-timepicker.js

@@ -8,7 +8,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-(function($, window, document, undefined) {
+(function($, window, document) {
   'use strict';
 
   // TIMEPICKER PUBLIC CLASS DEFINITION
@@ -23,14 +23,26 @@
     this.modalBackdrop = options.modalBackdrop;
     this.orientation = options.orientation;
     this.secondStep = options.secondStep;
+    this.snapToStep = options.snapToStep;
     this.showInputs = options.showInputs;
     this.showMeridian = options.showMeridian;
     this.showSeconds = options.showSeconds;
     this.template = options.template;
     this.appendWidgetTo = options.appendWidgetTo;
     this.showWidgetOnAddonClick = options.showWidgetOnAddonClick;
-    this.maxHours = options.maxHours-1;
-
+    this.maxHours = options.maxHours;
+		this.explicitMode = options.explicitMode; // If true 123 = 1:23, 12345 = 1:23:45, else invalid.
+
+    this.handleDocumentClick = function (e) {
+      var self = e.data.scope;
+      // This condition was inspired by bootstrap-datepicker.
+      // The element the timepicker is invoked on is the input but it has a sibling for addon/button.
+      if (!(self.$element.parent().find(e.target).length ||
+          self.$widget.is(e.target) ||
+          self.$widget.find(e.target).length)) {
+        self.hideWidget();
+      }
+    };
     this._init();
   };
 
@@ -40,8 +52,8 @@
     _init: function() {
       var self = this;
 
-      if (this.showWidgetOnAddonClick && (this.$element.parent().hasClass('input-append') || this.$element.parent().hasClass('input-prepend'))) {
-        this.$element.parent('.input-append, .input-prepend').find('.add-on').on({
+      if (this.showWidgetOnAddonClick && (this.$element.parent().hasClass('input-group') && this.$element.parent().hasClass('bootstrap-timepicker'))) {
+        this.$element.parent('.input-group.bootstrap-timepicker').find('.input-group-addon').on({
           'click.timepicker': $.proxy(this.showWidget, this)
         });
         this.$element.on({
@@ -120,7 +132,7 @@
         }
       } else {
         if (this.hour <= 0) {
-          this.hour = this.maxHours;
+          this.hour = this.maxHours - 1;
         } else {
           this.hour--;
         }
@@ -156,14 +168,28 @@
     },
 
     elementKeydown: function(e) {
-      switch (e.keyCode) {
+      switch (e.which) {
       case 9: //tab
+        if (e.shiftKey) {
+          if (this.highlightedUnit === 'hour') {
+            break;
+          }
+          this.highlightPrevUnit();
+        } else if ((this.showMeridian && this.highlightedUnit === 'meridian') || (this.showSeconds && this.highlightedUnit === 'second') || (!this.showMeridian && !this.showSeconds && this.highlightedUnit ==='minute')) {
+          break;
+        } else {
+          this.highlightNextUnit();
+        }
+        e.preventDefault();
+        this.updateFromElementVal();
+        break;
       case 27: // escape
         this.updateFromElementVal();
         break;
       case 37: // left arrow
         e.preventDefault();
         this.highlightPrevUnit();
+        this.updateFromElementVal();
         break;
       case 38: // up arrow
         e.preventDefault();
@@ -190,6 +216,7 @@
       case 39: // right arrow
         e.preventDefault();
         this.highlightNextUnit();
+        this.updateFromElementVal();
         break;
       case 40: // down arrow
         e.preventDefault();
@@ -349,7 +376,7 @@
         this.$widget.removeClass('open');
       }
 
-      $(document).off('mousedown.timepicker, touchend.timepicker');
+      $(document).off('mousedown.timepicker, touchend.timepicker', this.handleDocumentClick);
 
       this.isOpen = false;
       // show/hide approach taken by datepicker
@@ -433,15 +460,15 @@
 
       this.highlightedUnit = 'hour';
 
-			if ($element.setSelectionRange) {
-				setTimeout(function() {
+      if ($element.setSelectionRange) {
+        setTimeout(function() {
           if (self.hour < 10) {
             $element.setSelectionRange(0,1);
           } else {
             $element.setSelectionRange(0,2);
           }
-				}, 0);
-			}
+        }, 0);
+      }
     },
 
     highlightMinute: function() {
@@ -450,15 +477,15 @@
 
       this.highlightedUnit = 'minute';
 
-			if ($element.setSelectionRange) {
-				setTimeout(function() {
+      if ($element.setSelectionRange) {
+        setTimeout(function() {
           if (self.hour < 10) {
             $element.setSelectionRange(2,4);
           } else {
             $element.setSelectionRange(3,5);
           }
-				}, 0);
-			}
+        }, 0);
+      }
     },
 
     highlightSecond: function() {
@@ -467,15 +494,15 @@
 
       this.highlightedUnit = 'second';
 
-			if ($element.setSelectionRange) {
-				setTimeout(function() {
+      if ($element.setSelectionRange) {
+        setTimeout(function() {
           if (self.hour < 10) {
             $element.setSelectionRange(5,7);
           } else {
             $element.setSelectionRange(6,8);
           }
-				}, 0);
-			}
+        }, 0);
+      }
     },
 
     highlightMeridian: function() {
@@ -484,25 +511,25 @@
 
       this.highlightedUnit = 'meridian';
 
-			if ($element.setSelectionRange) {
-				if (this.showSeconds) {
-					setTimeout(function() {
+      if ($element.setSelectionRange) {
+        if (this.showSeconds) {
+          setTimeout(function() {
             if (self.hour < 10) {
               $element.setSelectionRange(8,10);
             } else {
               $element.setSelectionRange(9,11);
             }
-					}, 0);
-				} else {
-					setTimeout(function() {
+          }, 0);
+        } else {
+          setTimeout(function() {
             if (self.hour < 10) {
               $element.setSelectionRange(5,7);
             } else {
               $element.setSelectionRange(6,8);
             }
-					}, 0);
-				}
-			}
+          }, 0);
+        }
+      }
     },
 
     incrementHour: function() {
@@ -514,7 +541,7 @@
           this.hour = 0;
         }
       }
-      if (this.hour === this.maxHours) {
+      if (this.hour === this.maxHours - 1) {
         this.hour = 0;
 
         return;
@@ -607,6 +634,23 @@
       return false;
     },
 
+    /**
+     * Given a segment value like 43, will round and snap the segment
+     * to the nearest "step", like 45 if step is 15. Segment will
+     * "overflow" to 0 if it's larger than 59 or would otherwise
+     * round up to 60.
+     */
+    changeToNearestStep: function (segment, step) {
+      if (segment % step === 0) {
+        return segment;
+      }
+      if (Math.round((segment % step) / step)) {
+        return (segment + (step - segment % step)) % 60;
+      } else {
+        return segment - segment % step;
+      }
+    },
+
     // This method was adapted from bootstrap-datepicker.
     place : function() {
       if (this.isInline) {
@@ -615,7 +659,7 @@
       var widgetWidth = this.$widget.outerWidth(), widgetHeight = this.$widget.outerHeight(), visualPadding = 10, windowWidth =
         $(window).width(), windowHeight = $(window).height(), scrollTop = $(window).scrollTop();
 
-      var zIndex = parseInt(this.$element.parents().filter(function() {}).first().css('z-index'), 10) + 10;
+      var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + 10;
       var offset = this.component ? this.component.parent().offset() : this.$element.offset();
       var height = this.component ? this.component.outerHeight(true) : this.$element.outerHeight(false);
       var width = this.component ? this.component.outerWidth(true) : this.$element.outerWidth(false);
@@ -735,7 +779,8 @@
         return;
       }
 
-      var timeArray,
+      var timeMode,
+          timeArray,
           hour,
           minute,
           second,
@@ -759,34 +804,38 @@
           }
         }
       } else {
-        if (time.match(/p/i) !== null) {
-          meridian = 'PM';
-        } else {
-          meridian = 'AM';
+        timeMode = ((/a/i).test(time) ? 1 : 0) + ((/p/i).test(time) ? 2 : 0); // 0 = none, 1 = AM, 2 = PM, 3 = BOTH.
+        if (timeMode > 2) { // If both are present, fail.
+          this.clear();
+          return;
         }
 
-        time = time.replace(/[^0-9\:]/g, '');
-
-        timeArray = time.split(':');
+        timeArray = time.replace(/[^0-9\:]/g, '').split(':');
 
         hour = timeArray[0] ? timeArray[0].toString() : timeArray.toString();
+
+        if(this.explicitMode && hour.length > 2 && (hour.length % 2) !== 0 ) {
+          this.clear();
+          return;
+        }
+
         minute = timeArray[1] ? timeArray[1].toString() : '';
         second = timeArray[2] ? timeArray[2].toString() : '';
 
-        // idiot proofing
+        // adaptive time parsing
         if (hour.length > 4) {
-          second = hour.substr(4, 2);
+          second = hour.slice(-2);
+          hour = hour.slice(0, -2);
         }
+
         if (hour.length > 2) {
-          minute = hour.substr(2, 2);
-          hour = hour.substr(0, 2);
+          minute = hour.slice(-2);
+          hour = hour.slice(0, -2);
         }
+
         if (minute.length > 2) {
-          second = minute.substr(2, 2);
-          minute = minute.substr(0, 2);
-        }
-        if (second.length > 2) {
-          second = second.substr(2, 2);
+          second = minute.slice(-2);
+          minute = minute.slice(0, -2);
         }
 
         hour = parseInt(hour, 10);
@@ -803,43 +852,53 @@
           second = 0;
         }
 
-        if (this.showMeridian) {
-          if (hour < 1) {
-            hour = 1;
-          } else if (hour > 12) {
-            hour = 12;
-          }
-        } else {
-          if (hour > this.maxHours) {
-            hour = this.maxHours;
-          } else if (hour < 0) {
-            hour = 0;
-          }
-          if (hour < 13 && meridian === 'PM') {
-            hour = hour + 12;
-          }
+        // Adjust the time based upon unit boundary.
+        // NOTE: Negatives will never occur due to time.replace() above.
+        if (second > 59) {
+          second = 59;
         }
 
-        if (minute < 0) {
-          minute = 0;
-        } else if (minute >= 60) {
+        if (minute > 59) {
           minute = 59;
         }
 
-        if (this.showSeconds) {
-          if (isNaN(second)) {
-            second = 0;
-          } else if (second < 0) {
-            second = 0;
-          } else if (second >= 60) {
-            second = 59;
+        if (hour >= this.maxHours) {
+          // No day/date handling.
+          hour = this.maxHours - 1;
+        }
+
+        if (this.showMeridian) {
+          if (hour > 12) {
+            // Force PM.
+            timeMode = 2;
+            hour -= 12;
+          }
+          if (!timeMode) {
+            timeMode = 1;
+          }
+          if (hour === 0) {
+            hour = 12; // AM or PM, reset to 12.  0 AM = 12 AM.  0 PM = 12 PM, etc.
+          }
+          meridian = timeMode === 1 ? 'AM' : 'PM';
+        } else if (hour < 12 && timeMode === 2) {
+          hour += 12;
+        } else {
+          if (hour >= this.maxHours) {
+            hour = this.maxHours - 1;
+          } else if (hour < 0) {
+            hour = 0;
           }
         }
       }
 
       this.hour = hour;
-      this.minute = minute;
-      this.second = second;
+      if (this.snapToStep) {
+        this.minute = this.changeToNearestStep(minute, this.minuteStep);
+        this.second = this.changeToNearestStep(second, this.secondStep);
+      } else {
+        this.minute = minute;
+        this.second = second;
+      }
       this.meridian = meridian;
 
       this.update(ignoreWidget);
@@ -856,16 +915,7 @@
 
       // show/hide approach taken by datepicker
       this.$widget.appendTo(this.appendWidgetTo);
-      var self = this;
-      $(document).on('mousedown.timepicker, touchend.timepicker', function (e) {
-        // This condition was inspired by bootstrap-datepicker.
-        // The element the timepicker is invoked on is the input but it has a sibling for addon/button.
-        if (!(self.$element.parent().find(e.target).length ||
-            self.$widget.is(e.target) ||
-            self.$widget.find(e.target).length)) {
-          self.hideWidget();
-        }
-      });
+      $(document).on('mousedown.timepicker, touchend.timepicker', {scope: this}, this.handleDocumentClick);
 
       this.$element.trigger({
         'type': 'show.timepicker',
@@ -1000,9 +1050,13 @@
       var $input = $(e.target),
           name = $input.attr('class').replace('bootstrap-timepicker-', '');
 
-      switch (e.keyCode) {
+      switch (e.which) {
       case 9: //tab
-        if ((this.showMeridian && name === 'meridian') || (this.showSeconds && name === 'second') || (!this.showMeridian && !this.showSeconds && name === 'minute')) {
+        if (e.shiftKey) {
+          if (name === 'hour') {
+            return this.hideWidget();
+          }
+        } else if ((this.showMeridian && name === 'meridian') || (this.showSeconds && name === 'second') || (!this.showMeridian && !this.showSeconds && name === 'minute')) {
           return this.hideWidget();
         }
         break;
@@ -1051,7 +1105,7 @@
     },
 
     widgetKeyup: function(e) {
-      if ((e.keyCode === 65) || (e.keyCode === 77) || (e.keyCode === 80) || (e.keyCode === 46) || (e.keyCode === 8) || (e.keyCode >= 46 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
+      if ((e.which === 65) || (e.which === 77) || (e.which === 80) || (e.which === 46) || (e.which === 8) || (e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105)) {
         this.updateFromWidgetInputs();
       }
     }
@@ -1085,13 +1139,15 @@
     modalBackdrop: false,
     orientation: { x: 'auto', y: 'auto'},
     secondStep: 15,
+    snapToStep: false,
     showSeconds: false,
     showInputs: true,
     showMeridian: true,
     template: 'dropdown',
     appendWidgetTo: 'body',
     showWidgetOnAddonClick: true,
-    maxHours: 24
+    maxHours: 24,
+    explicitMode: false
   };
 
   $.fn.timepicker.Constructor = Timepicker;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-timepicker-rails-addon
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.5.1
 platform: ruby
 authors:
 - Thomas Yang
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-22 00:00:00.000000000 Z
+date: 2015-08-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties