materialize-sass 1.0.0.alpha1 → 1.0.0.alpha2

data/assets/javascripts/materialize/slider.js

@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
+(function ($, anim) {
   'use strict';
 
   var _defaults = {
@@ -79,7 +79,12 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this.$active.css('display', 'block');
       } else {
         this.$slides.first().addClass('active');
-        Vel(this.$slides.first()[0], { opacity: 1 }, { duration: this.options.duration, queue: false, easing: 'easeOutQuad' });
+        anim({
+          targets: this.$slides.first()[0],
+          opacity: 1,
+          duration: this.options.duration,
+          easing: 'easeOutQuad'
+        });
 
         this.activeIndex = 0;
         this.$active = this.$slides.eq(this.activeIndex);
@@ -92,7 +97,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       // Adjust height to current slide
       this.$active.find('img').each(function (el) {
-        Vel(_this.$active.find('.caption')[0], { opacity: 1, translateX: 0, translateY: 0 }, { duration: _this.options.duration, queue: false, easing: 'easeOutQuad' });
+        anim({
+          targets: _this.$active.find('.caption')[0],
+          opacity: 1,
+          translateX: 0,
+          translateY: 0,
+          duration: _this.options.duration,
+          easing: 'easeOutQuad'
+        });
       });
 
       this._setupEventHandlers();
@@ -185,19 +197,22 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: '_animateCaptionIn',
       value: function _animateCaptionIn(caption, duration) {
-        var velocityOptions = {
-          opacity: 0
+        var animOptions = {
+          targets: caption,
+          opacity: 0,
+          duration: duration,
+          easing: 'easeOutQuad'
         };
 
         if ($(caption).hasClass('center-align')) {
-          velocityOptions.translateY = -100;
+          animOptions.translateY = -100;
         } else if ($(caption).hasClass('right-align')) {
-          velocityOptions.translateX = 100;
+          animOptions.translateX = 100;
         } else if ($(caption).hasClass('left-align')) {
-          velocityOptions.translateX = -100;
+          animOptions.translateX = -100;
         }
 
-        Vel(caption, velocityOptions, { duration: duration, queue: false });
+        anim(animOptions);
       }
 
       /**
@@ -266,14 +281,25 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         if (this.activeIndex != index) {
           this.$active = this.$slides.eq(this.activeIndex);
           var $caption = this.$active.find('.caption');
-
           this.$active.removeClass('active');
-          Vel(this.$active[0], { opacity: 0 }, { duration: this.options.duration, queue: false, easing: 'easeOutQuad',
+
+          anim({
+            targets: this.$active[0],
+            opacity: 0,
+            duration: this.options.duration,
+            easing: 'easeOutQuad',
             complete: function () {
               _this5.$slides.not('.active').each(function (el) {
-                Vel(el, { opacity: 0, translateX: 0, translateY: 0 }, { duration: 0, queue: false });
+                anim({
+                  targets: el,
+                  opacity: 0,
+                  translateX: 0,
+                  translateY: 0,
+                  duration: 0,
+                  easing: 'easeOutQuad'
+                });
               });
-            }.bind(this)
+            }
           });
 
           this._animateCaptionIn($caption[0], this.options.duration);
@@ -284,8 +310,22 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             this.$indicators.eq(index).addClass('active');
           }
 
-          Vel(this.$slides.eq(index)[0], { opacity: 1 }, { duration: this.options.duration, queue: false, easing: 'easeOutQuad' });
-          Vel(this.$slides.eq(index).find('.caption')[0], { opacity: 1, translateX: 0, translateY: 0 }, { duration: this.options.duration, delay: this.options.duration, queue: false, easing: 'easeOutQuad' });
+          anim({
+            targets: this.$slides.eq(index)[0],
+            opacity: 1,
+            duration: this.options.duration,
+            easing: 'easeOutQuad'
+          });
+
+          anim({
+            targets: this.$slides.eq(index).find('.caption')[0],
+            opacity: 1,
+            translateX: 0,
+            translateY: 0,
+            duration: this.options.duration,
+            delay: this.options.duration,
+            easing: 'easeOutQuad'
+          });
 
           this.$slides.eq(index).addClass('active');
           this.activeIndex = index;
@@ -380,4 +420,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Slider, 'slider', 'M_Slider');
   }
-})(cash, M.Vel);
+})(cash, M.anime);

data/assets/javascripts/materialize/tabs.js

@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
+(function ($, anim) {
   'use strict';
 
   var _defaults = {
@@ -41,7 +41,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       this.el = el;
 
       /**
-       * Options for the carousel
+       * Options for the Tabs
        * @member Tabs#options
        * @prop {Number} duration
        * @prop {Function} onShow
@@ -182,14 +182,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             });
           }
         } else {
-          if (this.$content !== undefined) {
+          if (this.$content.length) {
             this.$content[0].style.display = 'block';
             this.$content.addClass('active');
             if (typeof this.options.onShow === 'function') {
               this.options.onShow.call(this, this.$content[0]);
             }
 
-            if ($oldContent !== undefined && !$oldContent.is(this.$content)) {
+            if ($oldContent.length && !$oldContent.is(this.$content)) {
               $oldContent[0].style.display = 'none';
               $oldContent.removeClass('active');
             }
@@ -263,7 +263,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         var _this3 = this;
 
         // Change swipeable according to responsive threshold
-        if (window.innerWidth > options.responsiveThreshold) {
+        if (window.innerWidth > this.options.responsiveThreshold) {
           this.options.swipeable = false;
         }
 
@@ -290,7 +290,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             _this3.$activeTabLink.addClass('active');
             _this3._animateIndicator(prevIndex);
             if (typeof _this3.options.onShow === "function") {
-              _this3.options.onShow.call(_this3, _this3.$content);
+              _this3.options.onShow.call(_this3, _this3.$content[0]);
             }
           }
         });
@@ -360,7 +360,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       /**
        * Finds right attribute for indicator based on active tab.
-       * @param {jQuery} el
+       * @param {cash} el
        */
 
     }, {
@@ -371,7 +371,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       /**
        * Finds left attribute for indicator based on active tab.
-       * @param {jQuery} el
+       * @param {cash} el
        */
 
     }, {
@@ -379,6 +379,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       value: function _calcLeftPos(el) {
         return Math.floor(el.position().left);
       }
+    }, {
+      key: 'updateTabIndicator',
+      value: function updateTabIndicator() {
+        this._animateIndicator(this.index);
+      }
 
       /**
        * Animates Indicator to active tab.
@@ -388,25 +393,31 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: '_animateIndicator',
       value: function _animateIndicator(prevIndex) {
-        var velOptions = {
-          duration: this.options.duration,
-          queue: false,
-          easing: 'easeOutQuad'
-        };
-        var velOptionsLeft = void 0,
-            velOptionsRight = void 0;
+        var leftDelay = 0,
+            rightDelay = 0;
 
         if (this.index - prevIndex >= 0) {
-          velOptionsLeft = $.extend({}, velOptions, { delay: 90 });
-          velOptionsRight = velOptions;
+          leftDelay = 90;
         } else {
-          velOptionsLeft = velOptions;
-          velOptionsRight = $.extend({}, velOptions, { delay: 90 });
+          rightDelay = 90;
         }
 
-        // Animate with velocity
-        Vel(this._indicator, { left: this._calcLeftPos(this.$activeTabLink) }, velOptionsLeft);
-        Vel(this._indicator, { right: this._calcRightPos(this.$activeTabLink) }, velOptionsRight);
+        // Animate
+        var animOptions = {
+          targets: this._indicator,
+          left: {
+            value: this._calcLeftPos(this.$activeTabLink),
+            delay: leftDelay
+          },
+          right: {
+            value: this._calcRightPos(this.$activeTabLink),
+            delay: rightDelay
+          },
+          duration: this.options.duration,
+          easing: 'easeOutQuad'
+        };
+        anim.remove(this._indicator);
+        anim(animOptions);
       }
 
       /**
@@ -419,6 +430,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       value: function select(tabId) {
         var tab = this.$tabLinks.filter('[href="#' + tabId + '"]');
         if (tab.length) {
+          4;
           tab.trigger('click');
         }
       }
@@ -457,4 +469,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Tabs, 'tabs', 'M_Tabs');
   }
-})(cash, M.Vel);
+})(cash, M.anime);

data/assets/javascripts/materialize/timepicker.js

@@ -2,615 +2,617 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
-		'use strict';
-
-		var _defaults = {
-				dialRadius: 135,
-				outerRadius: 105,
-				innerRadius: 70,
-				tickRadius: 20,
-				duration: 350,
-				container: null,
-				defaultTime: 'now', // default time, 'now' or '13:14' e.g.
-				fromnow: 0, // Millisecond offset from the defaultTime
-				doneText: 'Ok', // done button text
-				clearText: 'Clear',
-				cancelText: 'Cancel',
-				autoClose: false, // auto close when minute is selected
-				twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
-				vibrate: true // vibrate the device when dragging clock hand
-		};
-
-		/**
+(function ($) {
+  'use strict';
+
+  var _defaults = {
+    dialRadius: 135,
+    outerRadius: 105,
+    innerRadius: 70,
+    tickRadius: 20,
+    duration: 350,
+    container: null,
+    defaultTime: 'now', // default time, 'now' or '13:14' e.g.
+    fromnow: 0, // Millisecond offset from the defaultTime
+    doneText: 'Ok', // done button text
+    clearText: 'Clear',
+    cancelText: 'Cancel',
+    autoClose: false, // auto close when minute is selected
+    twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
+    vibrate: true // vibrate the device when dragging clock hand
+  };
+
+  /**
    * @class
    *
    */
 
-		var Timepicker = function () {
-				function Timepicker(el, options) {
-						_classCallCheck(this, Timepicker);
+  var Timepicker = function () {
+    function Timepicker(el, options) {
+      _classCallCheck(this, Timepicker);
 
-						// If exists, destroy and reinitialize
-						if (!!el.M_Timepicker) {
-								el.M_Timepicker.destroy();
-						}
+      // If exists, destroy and reinitialize
+      if (!!el.M_Timepicker) {
+        el.M_Timepicker.destroy();
+      }
 
-						this.el = el;
-						this.$el = $(el);
-						this.el.M_Timepicker = this;
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_Timepicker = this;
 
-						this.options = $.extend({}, Timepicker.defaults, options);
+      this.options = $.extend({}, Timepicker.defaults, options);
 
-						this.id = M.guid();
-						this._insertHTMLIntoDOM();
-						this._setupModal();
-						this._setupVariables();
-						this._setupEventHandlers();
+      this.id = M.guid();
+      this._insertHTMLIntoDOM();
+      this._setupModal();
+      this._setupVariables();
+      this._setupEventHandlers();
 
-						this._clockSetup();
-						this._pickerSetup();
-				}
+      this._clockSetup();
+      this._pickerSetup();
+    }
 
-				_createClass(Timepicker, [{
-						key: 'destroy',
+    _createClass(Timepicker, [{
+      key: 'destroy',
 
 
-						/**
+      /**
        * Teardown component
        */
-						value: function destroy() {
-								this._removeEventHandlers();
-								this.modal.destroy();
-								$(this.modalEl).remove();
-								this.el.M_Timepicker = undefined;
-						}
-
-						/**
+      value: function destroy() {
+        this._removeEventHandlers();
+        this.modal.destroy();
+        $(this.modalEl).remove();
+        this.el.M_Timepicker = undefined;
+      }
+
+      /**
        * Setup Event Handlers
        */
 
-				}, {
-						key: '_setupEventHandlers',
-						value: function _setupEventHandlers() {
-								this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
-								this._handleInputClickBound = this._handleInputClick.bind(this);
-								this._handleClockClickStartBound = this._handleClockClickStart.bind(this);
-								this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this);
-								this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this);
-
-								this.el.addEventListener('click', this._handleInputClickBound);
-								this.el.addEventListener('keydown', this._handleInputKeydownBound);
-								this.plate.addEventListener('mousedown', this._handleClockClickStartBound);
-								this.plate.addEventListener('touchstart', this._handleClockClickStartBound);
-
-								$(this.spanHours).on('click', this.showView.bind(this, 'hours'));
-								$(this.spanMinutes).on('click', this.showView.bind(this, 'minutes'));
-						}
-				}, {
-						key: '_removeEventHandlers',
-						value: function _removeEventHandlers() {
-								this.el.removeEventListener('click', this._handleInputClickBound);
-								this.el.removeEventListener('keydown', this._handleInputKeydownBound);
-						}
-				}, {
-						key: '_handleInputClick',
-						value: function _handleInputClick() {
-								this.open();
-						}
-				}, {
-						key: '_handleInputKeydown',
-						value: function _handleInputKeydown(e) {
-								if (e.which === M.keys.ENTER) {
-										e.preventDefault();
-										this.open();
-								}
-						}
-				}, {
-						key: '_handleClockClickStart',
-						value: function _handleClockClickStart(e) {
-								e.preventDefault();
-								var clockPlateBR = this.plate.getBoundingClientRect();
-								var offset = { x: clockPlateBR.left, y: clockPlateBR.top };
-
-								this.x0 = offset.x + this.options.dialRadius;
-								this.y0 = offset.y + this.options.dialRadius;
-								this.moved = false;
-								var clickPos = Timepicker._Pos(e);
-								this.dx = clickPos.x - this.x0;
-								this.dy = clickPos.y - this.y0;
-
-								// Set clock hands
-								this.setHand(this.dx, this.dy, false);
-
-								// Mousemove on document
-								document.addEventListener('mousemove', this._handleDocumentClickMoveBound);
-								document.addEventListener('touchmove', this._handleDocumentClickMoveBound);
-
-								// Mouseup on document
-								document.addEventListener('mouseup', this._handleDocumentClickEndBound);
-								document.addEventListener('touchend', this._handleDocumentClickEndBound);
-						}
-				}, {
-						key: '_handleDocumentClickMove',
-						value: function _handleDocumentClickMove(e) {
-								e.preventDefault();
-								var clickPos = Timepicker._Pos(e);
-								var x = clickPos.x - this.x0;
-								var y = clickPos.y - this.y0;
-								this.moved = true;
-								this.setHand(x, y, false, true);
-						}
-				}, {
-						key: '_handleDocumentClickEnd',
-						value: function _handleDocumentClickEnd(e) {
-								e.preventDefault();
-								document.removeEventListener('mouseup', this._handleDocumentClickEndBound);
-								document.removeEventListener('touchend', this._handleDocumentClickEndBound);
-								var clickPos = Timepicker._Pos(e);
-								var x = clickPos.x - this.x0;
-								var y = clickPos.y - this.y0;
-								if (this.moved && x === this.dx && y === this.dy) {
-										this.setHand(x, y);
-								}
-
-								if (this.currentView === 'hours') {
-										this.showView('minutes', this.options.duration / 2);
-								} else if (this.options.autoClose) {
-										this.minutesView.addClass('timepicker-dial-out');
-										setTimeout(function () {
-												this.done();
-										}, this.options.duration / 2);
-								}
-
-								// Unbind mousemove event
-								document.removeEventListener('mousemove', this._handleDocumentClickMoveBound);
-								document.removeEventListener('touchmove', this._handleDocumentClickMoveBound);
-						}
-				}, {
-						key: '_insertHTMLIntoDOM',
-						value: function _insertHTMLIntoDOM() {
-								this.$modalEl = $(Timepicker._template);
-								this.modalEl = this.$modalEl[0];
-								this.modalEl.id = 'modal-' + this.id;
-
-								// Append popover to input by default
-								var containerEl = document.querySelector(this.options.container);
-								if (this.options.container && !!containerEl) {
-										this.$modalEl.appendTo(containerEl);
-								} else {
-										this.$modalEl.insertBefore(this.el);
-								}
-						}
-				}, {
-						key: '_setupModal',
-						value: function _setupModal() {
-								var _this = this;
-
-								this.modal = new M.Modal(this.modalEl, {
-										complete: function () {
-												_this.isOpen = false;
-										}
-								});
-						}
-				}, {
-						key: '_setupVariables',
-						value: function _setupVariables() {
-								this.currentView = 'hours';
-								this.vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
-
-								this._canvas = this.modalEl.querySelector('.timepicker-canvas');
-								this.plate = this.modalEl.querySelector('.timepicker-plate');
-
-								this.hoursView = this.modalEl.querySelector('.timepicker-hours');
-								this.minutesView = this.modalEl.querySelector('.timepicker-minutes');
-								this.spanHours = this.modalEl.querySelector('.timepicker-span-hours');
-								this.spanMinutes = this.modalEl.querySelector('.timepicker-span-minutes');
-								this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm');
-								this.footer = this.modalEl.querySelector('.timepicker-footer');
-								this.amOrPm = 'PM';
-						}
-				}, {
-						key: '_pickerSetup',
-						value: function _pickerSetup() {
-								$('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.clearText + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
-
-								var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>');
-								$('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.cancelText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this));
-								$('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.doneText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this));
-								confirmationBtnsContainer.appendTo(this.footer);
-						}
-				}, {
-						key: '_clockSetup',
-						value: function _clockSetup() {
-								if (this.options.twelveHour) {
-										this.$amBtn = $('<div class="am-btn">AM</div>');
-										this.$pmBtn = $('<div class="pm-btn">PM</div>');
-										this.$amBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
-										this.$pmBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
-								}
-
-								this._buildHoursView();
-								this._buildMinutesView();
-								this._buildSVGClock();
-						}
-				}, {
-						key: '_buildSVGClock',
-						value: function _buildSVGClock() {
-								// Draw clock hands and others
-								var dialRadius = this.options.dialRadius;
-								var tickRadius = this.options.tickRadius;
-								var diameter = dialRadius * 2;
-
-								var svg = Timepicker._createSVGEl('svg');
-								svg.setAttribute('class', 'timepicker-svg');
-								svg.setAttribute('width', diameter);
-								svg.setAttribute('height', diameter);
-								var g = Timepicker._createSVGEl('g');
-								g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
-								var bearing = Timepicker._createSVGEl('circle');
-								bearing.setAttribute('class', 'timepicker-canvas-bearing');
-								bearing.setAttribute('cx', 0);
-								bearing.setAttribute('cy', 0);
-								bearing.setAttribute('r', 4);
-								var hand = Timepicker._createSVGEl('line');
-								hand.setAttribute('x1', 0);
-								hand.setAttribute('y1', 0);
-								var bg = Timepicker._createSVGEl('circle');
-								bg.setAttribute('class', 'timepicker-canvas-bg');
-								bg.setAttribute('r', tickRadius);
-								g.appendChild(hand);
-								g.appendChild(bg);
-								g.appendChild(bearing);
-								svg.appendChild(g);
-								this._canvas.appendChild(svg);
-
-								this.hand = hand;
-								this.bg = bg;
-								this.bearing = bearing;
-								this.g = g;
-						}
-				}, {
-						key: '_buildHoursView',
-						value: function _buildHoursView() {
-								var $tick = $('<div class="timepicker-tick"></div>');
-								// Hours view
-								if (this.options.twelveHour) {
-										for (var i = 1; i < 13; i += 1) {
-												var tick = $tick.clone();
-												var radian = i / 6 * Math.PI;
-												var radius = this.options.outerRadius;
-												tick.css({
-														left: this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px',
-														top: this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'
-												});
-												tick.html(i === 0 ? '00' : i);
-												this.hoursView.appendChild(tick[0]);
-												// tick.on(mousedownEvent, mousedown);
-										}
-								} else {
-										for (var _i = 0; _i < 24; _i += 1) {
-												var _tick = $tick.clone();
-												var _radian = _i / 6 * Math.PI;
-												var inner = _i > 0 && _i < 13;
-												var _radius = inner ? this.options.innerRadius : this.options.outerRadius;
-												_tick.css({
-														left: this.options.dialRadius + Math.sin(_radian) * _radius - this.options.tickRadius + 'px',
-														top: this.options.dialRadius - Math.cos(_radian) * _radius - this.options.tickRadius + 'px'
-												});
-												_tick.html(_i === 0 ? '00' : _i);
-												this.hoursView.appendChild(_tick[0]);
-												// tick.on(mousedownEvent, mousedown);
-										}
-								}
-						}
-				}, {
-						key: '_buildMinutesView',
-						value: function _buildMinutesView() {
-								var $tick = $('<div class="timepicker-tick"></div>');
-								// Minutes view
-								for (var i = 0; i < 60; i += 5) {
-										var tick = $tick.clone();
-										var radian = i / 30 * Math.PI;
-										tick.css({
-												left: this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + 'px',
-												top: this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + 'px'
-										});
-										tick.html(Timepicker._addLeadingZero(i));
-										this.minutesView.appendChild(tick[0]);
-								}
-						}
-				}, {
-						key: '_handleAmPmClick',
-						value: function _handleAmPmClick(e) {
-								var $btnClicked = $(e.target);
-								this.amOrPm = $btnClicked.hasClass('am-btn') ? 'AM' : 'PM';
-								this._updateAmPmView();
-						}
-				}, {
-						key: '_updateAmPmView',
-						value: function _updateAmPmView() {
-								this.$amBtn.toggleClass('text-primary', this.amOrPm === 'AM');
-								this.$pmBtn.toggleClass('text-primary', this.amOrPm === 'PM');
-						}
-				}, {
-						key: '_updateTimeFromInput',
-						value: function _updateTimeFromInput() {
-								// Get the time
-								var value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
-								if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
-										if (value[1].indexOf("AM") > 0) {
-												this.amOrPm = 'AM';
-										} else {
-												this.amOrPm = 'PM';
-										}
-										value[1] = value[1].replace("AM", "").replace("PM", "");
-								}
-								if (value[0] === 'now') {
-										var now = new Date(+new Date() + this.options.fromnow);
-										value = [now.getHours(), now.getMinutes()];
-										if (this.options.twelveHour) {
-												this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM';
-										}
-								}
-								this.hours = +value[0] || 0;
-								this.minutes = +value[1] || 0;
-								this.spanHours.innerHTML = this.hours;
-								this.spanMinutes.innerHTML = Timepicker._addLeadingZero(this.minutes);
-
-								this._updateAmPmView();
-						}
-				}, {
-						key: 'showView',
-						value: function showView(view, delay) {
-								if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
-										// raiseCallback(this.options.beforeHourSelect);
-								}
-								var isHours = view === 'hours',
-								    nextView = isHours ? this.hoursView : this.minutesView,
-								    hideView = isHours ? this.minutesView : this.hoursView;
-								this.currentView = view;
-
-								$(this.spanHours).toggleClass('text-primary', isHours);
-								$(this.spanMinutes).toggleClass('text-primary', !isHours);
-
-								// Transition view
-								hideView.classList.add('timepicker-dial-out');
-								$(nextView).css('visibility', 'visible').removeClass('timepicker-dial-out');
-
-								// Reset clock hand
-								this.resetClock(delay);
-
-								// After transitions ended
-								clearTimeout(this.toggleViewTimer);
-								this.toggleViewTimer = setTimeout(function () {
-										$(hideView).css('visibility', 'hidden');
-								}, this.options.duration);
-						}
-				}, {
-						key: 'resetClock',
-						value: function resetClock(delay) {
-								var view = this.currentView,
-								    value = this[view],
-								    isHours = view === 'hours',
-								    unit = Math.PI / (isHours ? 6 : 30),
-								    radian = value * unit,
-								    radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius,
-								    x = Math.sin(radian) * radius,
-								    y = -Math.cos(radian) * radius,
-								    self = this;
-
-								if (delay) {
-										$(this.canvas).addClass('timepicker-canvas-out');
-										setTimeout(function () {
-												$(self.canvas).removeClass('timepicker-canvas-out');
-												self.setHand(x, y);
-										}, delay);
-								} else {
-										this.setHand(x, y);
-								}
-						}
-				}, {
-						key: 'setHand',
-						value: function setHand(x, y, roundBy5) {
-								var _this2 = this;
-
-								var radian = Math.atan2(x, -y),
-								    isHours = this.currentView === 'hours',
-								    unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
-								    z = Math.sqrt(x * x + y * y),
-								    inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2,
-								    radius = inner ? this.options.innerRadius : this.options.outerRadius;
-
-								if (this.options.twelveHour) {
-										radius = this.options.outerRadius;
-								}
-
-								// Radian should in range [0, 2PI]
-								if (radian < 0) {
-										radian = Math.PI * 2 + radian;
-								}
-
-								// Get the round value
-								var value = Math.round(radian / unit);
-
-								// Get the round radian
-								radian = value * unit;
-
-								// Correct the hours or minutes
-								if (this.options.twelveHour) {
-										if (isHours) {
-												if (value === 0) value = 12;
-										} else {
-												if (roundBy5) value *= 5;
-												if (value === 60) value = 0;
-										}
-								} else {
-										if (isHours) {
-												if (value === 12) {
-														value = 0;
-												}
-												value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12;
-										} else {
-												if (roundBy5) {
-														value *= 5;
-												}
-												if (value === 60) {
-														value = 0;
-												}
-										}
-								}
-
-								// Once hours or minutes changed, vibrate the device
-								if (this[this.currentView] !== value) {
-										if (this.vibrate && this.options.vibrate) {
-												// Do not vibrate too frequently
-												if (!this.vibrateTimer) {
-														navigator[this.vibrate](10);
-														this.vibrateTimer = setTimeout(function () {
-																_this2.vibrateTimer = null;
-														}, 100);
-												}
-										}
-								}
-
-								this[this.currentView] = value;
-								if (isHours) {
-										this['spanHours'].innerHTML = value;
-								} else {
-										this['spanMinutes'].innerHTML = Timepicker._addLeadingZero(value);
-								}
-
-								// Set clock hand and others' position
-								var cx1 = Math.sin(radian) * (radius - this.options.tickRadius),
-								    cy1 = -Math.cos(radian) * (radius - this.options.tickRadius),
-								    cx2 = Math.sin(radian) * radius,
-								    cy2 = -Math.cos(radian) * radius;
-								this.hand.setAttribute('x2', cx1);
-								this.hand.setAttribute('y2', cy1);
-								this.bg.setAttribute('cx', cx2);
-								this.bg.setAttribute('cy', cy2);
-						}
-				}, {
-						key: 'open',
-						value: function open() {
-								if (this.isOpen) {
-										return;
-								}
-
-								this.isOpen = true;
-								this._updateTimeFromInput();
-								this.showView('hours');
-								this.modal.open();
-						}
-				}, {
-						key: 'close',
-						value: function close() {
-								if (!this.isOpen) {
-										return;
-								}
-
-								this.isOpen = false;
-								this.modal.close();
-						}
-
-						/**
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
+        this._handleInputClickBound = this._handleInputClick.bind(this);
+        this._handleClockClickStartBound = this._handleClockClickStart.bind(this);
+        this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this);
+        this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this);
+
+        this.el.addEventListener('click', this._handleInputClickBound);
+        this.el.addEventListener('keydown', this._handleInputKeydownBound);
+        this.plate.addEventListener('mousedown', this._handleClockClickStartBound);
+        this.plate.addEventListener('touchstart', this._handleClockClickStartBound);
+
+        $(this.spanHours).on('click', this.showView.bind(this, 'hours'));
+        $(this.spanMinutes).on('click', this.showView.bind(this, 'minutes'));
+      }
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleInputClickBound);
+        this.el.removeEventListener('keydown', this._handleInputKeydownBound);
+      }
+    }, {
+      key: '_handleInputClick',
+      value: function _handleInputClick() {
+        this.open();
+      }
+    }, {
+      key: '_handleInputKeydown',
+      value: function _handleInputKeydown(e) {
+        if (e.which === M.keys.ENTER) {
+          e.preventDefault();
+          this.open();
+        }
+      }
+    }, {
+      key: '_handleClockClickStart',
+      value: function _handleClockClickStart(e) {
+        e.preventDefault();
+        var clockPlateBR = this.plate.getBoundingClientRect();
+        var offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+
+        this.x0 = offset.x + this.options.dialRadius;
+        this.y0 = offset.y + this.options.dialRadius;
+        this.moved = false;
+        var clickPos = Timepicker._Pos(e);
+        this.dx = clickPos.x - this.x0;
+        this.dy = clickPos.y - this.y0;
+
+        // Set clock hands
+        this.setHand(this.dx, this.dy, false);
+
+        // Mousemove on document
+        document.addEventListener('mousemove', this._handleDocumentClickMoveBound);
+        document.addEventListener('touchmove', this._handleDocumentClickMoveBound);
+
+        // Mouseup on document
+        document.addEventListener('mouseup', this._handleDocumentClickEndBound);
+        document.addEventListener('touchend', this._handleDocumentClickEndBound);
+      }
+    }, {
+      key: '_handleDocumentClickMove',
+      value: function _handleDocumentClickMove(e) {
+        e.preventDefault();
+        var clickPos = Timepicker._Pos(e);
+        var x = clickPos.x - this.x0;
+        var y = clickPos.y - this.y0;
+        this.moved = true;
+        this.setHand(x, y, false, true);
+      }
+    }, {
+      key: '_handleDocumentClickEnd',
+      value: function _handleDocumentClickEnd(e) {
+        e.preventDefault();
+        document.removeEventListener('mouseup', this._handleDocumentClickEndBound);
+        document.removeEventListener('touchend', this._handleDocumentClickEndBound);
+        var clickPos = Timepicker._Pos(e);
+        var x = clickPos.x - this.x0;
+        var y = clickPos.y - this.y0;
+        if (this.moved && x === this.dx && y === this.dy) {
+          this.setHand(x, y);
+        }
+
+        if (this.currentView === 'hours') {
+          this.showView('minutes', this.options.duration / 2);
+        } else if (this.options.autoClose) {
+          this.minutesView.addClass('timepicker-dial-out');
+          setTimeout(function () {
+            this.done();
+          }, this.options.duration / 2);
+        }
+
+        // Unbind mousemove event
+        document.removeEventListener('mousemove', this._handleDocumentClickMoveBound);
+        document.removeEventListener('touchmove', this._handleDocumentClickMoveBound);
+      }
+    }, {
+      key: '_insertHTMLIntoDOM',
+      value: function _insertHTMLIntoDOM() {
+        this.$modalEl = $(Timepicker._template);
+        this.modalEl = this.$modalEl[0];
+        this.modalEl.id = 'modal-' + this.id;
+
+        // Append popover to input by default
+        var containerEl = document.querySelector(this.options.container);
+        if (this.options.container && !!containerEl) {
+          this.$modalEl.appendTo(containerEl);
+        } else {
+          this.$modalEl.insertBefore(this.el);
+        }
+      }
+    }, {
+      key: '_setupModal',
+      value: function _setupModal() {
+        var _this = this;
+
+        this.modal = new M.Modal(this.modalEl, {
+          complete: function () {
+            _this.isOpen = false;
+          }
+        });
+      }
+    }, {
+      key: '_setupVariables',
+      value: function _setupVariables() {
+        this.currentView = 'hours';
+        this.vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
+
+        this._canvas = this.modalEl.querySelector('.timepicker-canvas');
+        this.plate = this.modalEl.querySelector('.timepicker-plate');
+
+        this.hoursView = this.modalEl.querySelector('.timepicker-hours');
+        this.minutesView = this.modalEl.querySelector('.timepicker-minutes');
+        this.spanHours = this.modalEl.querySelector('.timepicker-span-hours');
+        this.spanMinutes = this.modalEl.querySelector('.timepicker-span-minutes');
+        this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm');
+        this.footer = this.modalEl.querySelector('.timepicker-footer');
+        this.amOrPm = 'PM';
+      }
+    }, {
+      key: '_pickerSetup',
+      value: function _pickerSetup() {
+        $('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.clearText + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
+
+        var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>');
+        $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.cancelText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this));
+        $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.doneText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this));
+        confirmationBtnsContainer.appendTo(this.footer);
+      }
+    }, {
+      key: '_clockSetup',
+      value: function _clockSetup() {
+        if (this.options.twelveHour) {
+          this.$amBtn = $('<div class="am-btn">AM</div>');
+          this.$pmBtn = $('<div class="pm-btn">PM</div>');
+          this.$amBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
+          this.$pmBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
+        }
+
+        this._buildHoursView();
+        this._buildMinutesView();
+        this._buildSVGClock();
+      }
+    }, {
+      key: '_buildSVGClock',
+      value: function _buildSVGClock() {
+        // Draw clock hands and others
+        var dialRadius = this.options.dialRadius;
+        var tickRadius = this.options.tickRadius;
+        var diameter = dialRadius * 2;
+
+        var svg = Timepicker._createSVGEl('svg');
+        svg.setAttribute('class', 'timepicker-svg');
+        svg.setAttribute('width', diameter);
+        svg.setAttribute('height', diameter);
+        var g = Timepicker._createSVGEl('g');
+        g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
+        var bearing = Timepicker._createSVGEl('circle');
+        bearing.setAttribute('class', 'timepicker-canvas-bearing');
+        bearing.setAttribute('cx', 0);
+        bearing.setAttribute('cy', 0);
+        bearing.setAttribute('r', 4);
+        var hand = Timepicker._createSVGEl('line');
+        hand.setAttribute('x1', 0);
+        hand.setAttribute('y1', 0);
+        var bg = Timepicker._createSVGEl('circle');
+        bg.setAttribute('class', 'timepicker-canvas-bg');
+        bg.setAttribute('r', tickRadius);
+        g.appendChild(hand);
+        g.appendChild(bg);
+        g.appendChild(bearing);
+        svg.appendChild(g);
+        this._canvas.appendChild(svg);
+
+        this.hand = hand;
+        this.bg = bg;
+        this.bearing = bearing;
+        this.g = g;
+      }
+    }, {
+      key: '_buildHoursView',
+      value: function _buildHoursView() {
+        var $tick = $('<div class="timepicker-tick"></div>');
+        // Hours view
+        if (this.options.twelveHour) {
+          for (var i = 1; i < 13; i += 1) {
+            var tick = $tick.clone();
+            var radian = i / 6 * Math.PI;
+            var radius = this.options.outerRadius;
+            tick.css({
+              left: this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px',
+              top: this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'
+            });
+            tick.html(i === 0 ? '00' : i);
+            this.hoursView.appendChild(tick[0]);
+            // tick.on(mousedownEvent, mousedown);
+          }
+        } else {
+          for (var _i = 0; _i < 24; _i += 1) {
+            var _tick = $tick.clone();
+            var _radian = _i / 6 * Math.PI;
+            var inner = _i > 0 && _i < 13;
+            var _radius = inner ? this.options.innerRadius : this.options.outerRadius;
+            _tick.css({
+              left: this.options.dialRadius + Math.sin(_radian) * _radius - this.options.tickRadius + 'px',
+              top: this.options.dialRadius - Math.cos(_radian) * _radius - this.options.tickRadius + 'px'
+            });
+            _tick.html(_i === 0 ? '00' : _i);
+            this.hoursView.appendChild(_tick[0]);
+            // tick.on(mousedownEvent, mousedown);
+          }
+        }
+      }
+    }, {
+      key: '_buildMinutesView',
+      value: function _buildMinutesView() {
+        var $tick = $('<div class="timepicker-tick"></div>');
+        // Minutes view
+        for (var i = 0; i < 60; i += 5) {
+          var tick = $tick.clone();
+          var radian = i / 30 * Math.PI;
+          tick.css({
+            left: this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + 'px',
+            top: this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + 'px'
+          });
+          tick.html(Timepicker._addLeadingZero(i));
+          this.minutesView.appendChild(tick[0]);
+        }
+      }
+    }, {
+      key: '_handleAmPmClick',
+      value: function _handleAmPmClick(e) {
+        var $btnClicked = $(e.target);
+        this.amOrPm = $btnClicked.hasClass('am-btn') ? 'AM' : 'PM';
+        this._updateAmPmView();
+      }
+    }, {
+      key: '_updateAmPmView',
+      value: function _updateAmPmView() {
+        if (this.options.twelveHour) {
+          this.$amBtn.toggleClass('text-primary', this.amOrPm === 'AM');
+          this.$pmBtn.toggleClass('text-primary', this.amOrPm === 'PM');
+        }
+      }
+    }, {
+      key: '_updateTimeFromInput',
+      value: function _updateTimeFromInput() {
+        // Get the time
+        var value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
+        if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
+          if (value[1].indexOf("AM") > 0) {
+            this.amOrPm = 'AM';
+          } else {
+            this.amOrPm = 'PM';
+          }
+          value[1] = value[1].replace("AM", "").replace("PM", "");
+        }
+        if (value[0] === 'now') {
+          var now = new Date(+new Date() + this.options.fromnow);
+          value = [now.getHours(), now.getMinutes()];
+          if (this.options.twelveHour) {
+            this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM';
+          }
+        }
+        this.hours = +value[0] || 0;
+        this.minutes = +value[1] || 0;
+        this.spanHours.innerHTML = this.hours;
+        this.spanMinutes.innerHTML = Timepicker._addLeadingZero(this.minutes);
+
+        this._updateAmPmView();
+      }
+    }, {
+      key: 'showView',
+      value: function showView(view, delay) {
+        if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
+          // raiseCallback(this.options.beforeHourSelect);
+        }
+        var isHours = view === 'hours',
+            nextView = isHours ? this.hoursView : this.minutesView,
+            hideView = isHours ? this.minutesView : this.hoursView;
+        this.currentView = view;
+
+        $(this.spanHours).toggleClass('text-primary', isHours);
+        $(this.spanMinutes).toggleClass('text-primary', !isHours);
+
+        // Transition view
+        hideView.classList.add('timepicker-dial-out');
+        $(nextView).css('visibility', 'visible').removeClass('timepicker-dial-out');
+
+        // Reset clock hand
+        this.resetClock(delay);
+
+        // After transitions ended
+        clearTimeout(this.toggleViewTimer);
+        this.toggleViewTimer = setTimeout(function () {
+          $(hideView).css('visibility', 'hidden');
+        }, this.options.duration);
+      }
+    }, {
+      key: 'resetClock',
+      value: function resetClock(delay) {
+        var view = this.currentView,
+            value = this[view],
+            isHours = view === 'hours',
+            unit = Math.PI / (isHours ? 6 : 30),
+            radian = value * unit,
+            radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius,
+            x = Math.sin(radian) * radius,
+            y = -Math.cos(radian) * radius,
+            self = this;
+
+        if (delay) {
+          $(this.canvas).addClass('timepicker-canvas-out');
+          setTimeout(function () {
+            $(self.canvas).removeClass('timepicker-canvas-out');
+            self.setHand(x, y);
+          }, delay);
+        } else {
+          this.setHand(x, y);
+        }
+      }
+    }, {
+      key: 'setHand',
+      value: function setHand(x, y, roundBy5) {
+        var _this2 = this;
+
+        var radian = Math.atan2(x, -y),
+            isHours = this.currentView === 'hours',
+            unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
+            z = Math.sqrt(x * x + y * y),
+            inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2,
+            radius = inner ? this.options.innerRadius : this.options.outerRadius;
+
+        if (this.options.twelveHour) {
+          radius = this.options.outerRadius;
+        }
+
+        // Radian should in range [0, 2PI]
+        if (radian < 0) {
+          radian = Math.PI * 2 + radian;
+        }
+
+        // Get the round value
+        var value = Math.round(radian / unit);
+
+        // Get the round radian
+        radian = value * unit;
+
+        // Correct the hours or minutes
+        if (this.options.twelveHour) {
+          if (isHours) {
+            if (value === 0) value = 12;
+          } else {
+            if (roundBy5) value *= 5;
+            if (value === 60) value = 0;
+          }
+        } else {
+          if (isHours) {
+            if (value === 12) {
+              value = 0;
+            }
+            value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12;
+          } else {
+            if (roundBy5) {
+              value *= 5;
+            }
+            if (value === 60) {
+              value = 0;
+            }
+          }
+        }
+
+        // Once hours or minutes changed, vibrate the device
+        if (this[this.currentView] !== value) {
+          if (this.vibrate && this.options.vibrate) {
+            // Do not vibrate too frequently
+            if (!this.vibrateTimer) {
+              navigator[this.vibrate](10);
+              this.vibrateTimer = setTimeout(function () {
+                _this2.vibrateTimer = null;
+              }, 100);
+            }
+          }
+        }
+
+        this[this.currentView] = value;
+        if (isHours) {
+          this['spanHours'].innerHTML = value;
+        } else {
+          this['spanMinutes'].innerHTML = Timepicker._addLeadingZero(value);
+        }
+
+        // Set clock hand and others' position
+        var cx1 = Math.sin(radian) * (radius - this.options.tickRadius),
+            cy1 = -Math.cos(radian) * (radius - this.options.tickRadius),
+            cx2 = Math.sin(radian) * radius,
+            cy2 = -Math.cos(radian) * radius;
+        this.hand.setAttribute('x2', cx1);
+        this.hand.setAttribute('y2', cy1);
+        this.bg.setAttribute('cx', cx2);
+        this.bg.setAttribute('cy', cy2);
+      }
+    }, {
+      key: 'open',
+      value: function open() {
+        if (this.isOpen) {
+          return;
+        }
+
+        this.isOpen = true;
+        this._updateTimeFromInput();
+        this.showView('hours');
+        this.modal.open();
+      }
+    }, {
+      key: 'close',
+      value: function close() {
+        if (!this.isOpen) {
+          return;
+        }
+
+        this.isOpen = false;
+        this.modal.close();
+      }
+
+      /**
        * Finish timepicker selection.
        */
 
-				}, {
-						key: 'done',
-						value: function done(e, clearValue) {
-								// Set input value
-								var last = this.el.value;
-								var value = clearValue ? '' : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
-								this.time = value;
-								if (!clearValue && this.options.twelveHour) {
-										value = value + ' ' + this.amOrPm;
-								}
-								this.el.value = value;
-
-								// Trigger change event
-								if (value !== last) {
-										this.$el.trigger('change');
-								}
-
-								this.close();
-								this.el.focus();
-						}
-				}, {
-						key: 'clear',
-						value: function clear() {
-								this.done(null, true);
-						}
-				}], [{
-						key: 'init',
-						value: function init($els, options) {
-								var arr = [];
-								$els.each(function () {
-										arr.push(new Timepicker(this, options));
-								});
-								return arr;
-						}
-				}, {
-						key: '_addLeadingZero',
-						value: function _addLeadingZero(num) {
-								return (num < 10 ? '0' : '') + num;
-						}
-				}, {
-						key: '_createSVGEl',
-						value: function _createSVGEl(name) {
-								var svgNS = 'http://www.w3.org/2000/svg';
-								return document.createElementNS(svgNS, name);
-						}
-
-						/**
+    }, {
+      key: 'done',
+      value: function done(e, clearValue) {
+        // Set input value
+        var last = this.el.value;
+        var value = clearValue ? '' : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
+        this.time = value;
+        if (!clearValue && this.options.twelveHour) {
+          value = value + ' ' + this.amOrPm;
+        }
+        this.el.value = value;
+
+        // Trigger change event
+        if (value !== last) {
+          this.$el.trigger('change');
+        }
+
+        this.close();
+        this.el.focus();
+      }
+    }, {
+      key: 'clear',
+      value: function clear() {
+        this.done(null, true);
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new Timepicker(this, options));
+        });
+        return arr;
+      }
+    }, {
+      key: '_addLeadingZero',
+      value: function _addLeadingZero(num) {
+        return (num < 10 ? '0' : '') + num;
+      }
+    }, {
+      key: '_createSVGEl',
+      value: function _createSVGEl(name) {
+        var svgNS = 'http://www.w3.org/2000/svg';
+        return document.createElementNS(svgNS, name);
+      }
+
+      /**
        * @typedef {Object} Point
        * @property {number} x The X Coordinate
        * @property {number} y The Y Coordinate
        */
 
-						/**
+      /**
        * Get x position of mouse or touch event
        * @param {Event} e
        * @return {Point} x and y location
        */
 
-				}, {
-						key: '_Pos',
-						value: function _Pos(e) {
-								if (e.targetTouches && e.targetTouches.length >= 1) {
-										return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY };
-								}
-								// mouse event
-								return { x: e.clientX, y: e.clientY };
-						}
-
-						/**
+    }, {
+      key: '_Pos',
+      value: function _Pos(e) {
+        if (e.targetTouches && e.targetTouches.length >= 1) {
+          return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY };
+        }
+        // mouse event
+        return { x: e.clientX, y: e.clientY };
+      }
+
+      /**
        * Get Instance
        */
 
-				}, {
-						key: 'getInstance',
-						value: function getInstance(el) {
-								var domElem = !!el.jquery ? el[0] : el;
-								return domElem.M_Timepicker;
-						}
-				}, {
-						key: 'defaults',
-						get: function () {
-								return _defaults;
-						}
-				}]);
-
-				return Timepicker;
-		}();
-
-		Timepicker._template = ['<div class= "modal timepicker-modal">', '<div class="modal-content timepicker-container">', '<div class="timepicker-digital-display">', '<div class="timepicker-text-container">', '<div class="timepicker-display-column">', '<span class="timepicker-span-hours text-primary"></span>', ':', '<span class="timepicker-span-minutes"></span>', '</div>', '<div class="timepicker-display-column timepicker-display-am-pm">', '<div class="timepicker-span-am-pm"></div>', '</div>', '</div>', '</div>', '<div class="timepicker-analog-display">', '<div class="timepicker-plate">', '<div class="timepicker-canvas"></div>', '<div class="timepicker-dial timepicker-hours"></div>', '<div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>', '</div>', '<div class="timepicker-footer"></div>', '</div>', '</div>', '</div>'].join('');
-
-		M.Timepicker = Timepicker;
-
-		if (M.jQueryLoaded) {
-				M.initializeJqueryWrapper(Timepicker, 'timepicker', 'M_Timepicker');
-		}
-})(cash, M.Vel);
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Timepicker;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Timepicker;
+  }();
+
+  Timepicker._template = ['<div class= "modal timepicker-modal">', '<div class="modal-content timepicker-container">', '<div class="timepicker-digital-display">', '<div class="timepicker-text-container">', '<div class="timepicker-display-column">', '<span class="timepicker-span-hours text-primary"></span>', ':', '<span class="timepicker-span-minutes"></span>', '</div>', '<div class="timepicker-display-column timepicker-display-am-pm">', '<div class="timepicker-span-am-pm"></div>', '</div>', '</div>', '</div>', '<div class="timepicker-analog-display">', '<div class="timepicker-plate">', '<div class="timepicker-canvas"></div>', '<div class="timepicker-dial timepicker-hours"></div>', '<div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>', '</div>', '<div class="timepicker-footer"></div>', '</div>', '</div>', '</div>'].join('');
+
+  M.Timepicker = Timepicker;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Timepicker, 'timepicker', 'M_Timepicker');
+  }
+})(cash);