materialize-sass 1.0.0.alpha2 → 1.0.0.alpha3

data/assets/javascripts/materialize/tabs.js

@@ -1,7 +1,13 @@
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 (function ($, anim) {
   'use strict';
 
@@ -17,7 +23,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
    *
    */
 
-  var Tabs = function () {
+  var Tabs = function (_Component) {
+    _inherits(Tabs, _Component);
+
     /**
      * Construct Tabs instance
      * @constructor
@@ -27,18 +35,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     function Tabs(el, options) {
       _classCallCheck(this, Tabs);
 
-      // If exists, destroy and reinitialize
-      if (!!el.M_Tabs) {
-        el.M_Tabs.destroy();
-      }
-
-      /**
-       * The jQuery element
-       * @type {jQuery}
-       */
-      this.$el = $(el);
+      var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, Tabs, el, options));
 
-      this.el = el;
+      _this.el.M_Tabs = _this;
 
       /**
        * Options for the Tabs
@@ -48,24 +47,23 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        * @prop {Boolean} swipeable
        * @prop {Number} responsiveThreshold
        */
-      this.options = $.extend({}, Tabs.defaults, options);
-
-      this.el.M_Tabs = this;
+      _this.options = $.extend({}, Tabs.defaults, options);
 
       // Setup
-      this.$tabLinks = this.$el.children('li.tab').children('a');
-      this.index = 0;
-      this._setTabsAndTabWidth();
-      this._setupActiveTabLink();
-      this._createIndicator();
-
-      if (this.options.swipeable) {
-        this._setupSwipeableTabs();
+      _this.$tabLinks = _this.$el.children('li.tab').children('a');
+      _this.index = 0;
+      _this._setTabsAndTabWidth();
+      _this._setupActiveTabLink();
+      _this._createIndicator();
+
+      if (_this.options.swipeable) {
+        _this._setupSwipeableTabs();
       } else {
-        this._setupNormalTabs();
+        _this._setupNormalTabs();
       }
 
-      this._setupEventHandlers();
+      _this._setupEventHandlers();
+      return _this;
     }
 
     _createClass(Tabs, [{
@@ -136,7 +134,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: '_handleTabClick',
       value: function _handleTabClick(e) {
-        var _this = this;
+        var _this2 = this;
 
         var tab = $(e.target).closest('li.tab');
         var tabLink = $(e.target).closest('a');
@@ -176,8 +174,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         if (this.options.swipeable) {
           if (this._tabsCarousel) {
             this._tabsCarousel.set(this.index, function () {
-              if (typeof _this.options.onShow === "function") {
-                _this.options.onShow.call(_this, _this.$content[0]);
+              if (typeof _this2.options.onShow === "function") {
+                _this2.options.onShow.call(_this2, _this2.$content[0]);
               }
             });
           }
@@ -210,7 +208,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: '_createIndicator',
       value: function _createIndicator() {
-        var _this2 = this;
+        var _this3 = this;
 
         var indicator = document.createElement('li');
         indicator.classList.add('indicator');
@@ -219,8 +217,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this._indicator = indicator;
 
         setTimeout(function () {
-          _this2._indicator.style.left = _this2._calcLeftPos(_this2.$activeTabLink) + 'px';
-          _this2._indicator.style.right = _this2._calcRightPos(_this2.$activeTabLink) + 'px';
+          _this3._indicator.style.left = _this3._calcLeftPos(_this3.$activeTabLink) + 'px';
+          _this3._indicator.style.right = _this3._calcRightPos(_this3.$activeTabLink) + 'px';
         }, 0);
       }
 
@@ -260,7 +258,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: '_setupSwipeableTabs',
       value: function _setupSwipeableTabs() {
-        var _this3 = this;
+        var _this4 = this;
 
         // Change swipeable according to responsive threshold
         if (window.innerWidth > this.options.responsiveThreshold) {
@@ -279,18 +277,18 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         $tabsWrapper.append($tabsContent);
         $tabsContent[0].style.display = '';
 
-        this._tabsCarousel = new M.Carousel($tabsWrapper[0], {
+        this._tabsCarousel = M.Carousel.init($tabsWrapper[0], {
           fullWidth: true,
           noWrap: true,
           onCycleTo: function (item) {
-            var prevIndex = _this3.index;
-            _this3.index = $(item).index();
-            _this3.$activeTabLink.removeClass('active');
-            _this3.$activeTabLink = _this3.$tabLinks.eq(_this3.index);
-            _this3.$activeTabLink.addClass('active');
-            _this3._animateIndicator(prevIndex);
-            if (typeof _this3.options.onShow === "function") {
-              _this3.options.onShow.call(_this3, _this3.$content[0]);
+            var prevIndex = _this4.index;
+            _this4.index = $(item).index();
+            _this4.$activeTabLink.removeClass('active');
+            _this4.$activeTabLink = _this4.$tabLinks.eq(_this4.index);
+            _this4.$activeTabLink.addClass('active');
+            _this4._animateIndicator(prevIndex);
+            if (typeof _this4.options.onShow === "function") {
+              _this4.options.onShow.call(_this4, _this4.$content[0]);
             }
           }
         });
@@ -430,18 +428,13 @@ 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');
         }
       }
     }], [{
       key: 'init',
-      value: function init($els, options) {
-        var arr = [];
-        $els.each(function () {
-          arr.push(new Tabs(this, options));
-        });
-        return arr;
+      value: function init(els, options) {
+        return _get(Tabs.__proto__ || Object.getPrototypeOf(Tabs), 'init', this).call(this, this, els, options);
       }
 
       /**
@@ -462,7 +455,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }]);
 
     return Tabs;
-  }();
+  }(Component);
 
   window.M.Tabs = Tabs;
 

data/assets/javascripts/materialize/tapTarget.js

@@ -1,18 +1,29 @@
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 (function ($) {
   'use strict';
 
-  var _defaults = {};
+  var _defaults = {
+    onOpen: undefined,
+    onClose: undefined
+  };
 
   /**
    * @class
    *
    */
 
-  var FeatureDiscovery = function () {
+  var FeatureDiscovery = function (_Component) {
+    _inherits(FeatureDiscovery, _Component);
+
     /**
      * Construct FeatureDiscovery instance
      * @constructor
@@ -22,29 +33,27 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     function FeatureDiscovery(el, options) {
       _classCallCheck(this, FeatureDiscovery);
 
-      // If exists, destroy and reinitialize
-      if (!!el.M_FeatureDiscovery) {
-        el.M_FeatureDiscovery.destroy();
-      }
+      var _this = _possibleConstructorReturn(this, (FeatureDiscovery.__proto__ || Object.getPrototypeOf(FeatureDiscovery)).call(this, FeatureDiscovery, el, options));
 
-      this.el = el;
-      this.$el = $(el);
-      this.el.M_FeatureDiscovery = this;
+      _this.el.M_FeatureDiscovery = _this;
 
       /**
        * Options for the select
        * @member FeatureDiscovery#options
+       * @prop {Function} onOpen - Callback function called when feature discovery is opened
+       * @prop {Function} onClose - Callback function called when feature discovery is closed
        */
-      this.options = $.extend({}, FeatureDiscovery.defaults, options);
+      _this.options = $.extend({}, FeatureDiscovery.defaults, options);
 
-      this.isOpen = false;
+      _this.isOpen = false;
 
       // setup
-      this.$origin = $('#' + this.$el.attr('data-target'));
-      this._setup();
+      _this.$origin = $('#' + _this.$el.attr('data-target'));
+      _this._setup();
 
-      this._calculatePositioning();
-      this._setupEventHandlers();
+      _this._calculatePositioning();
+      _this._setupEventHandlers();
+      return _this;
     }
 
     _createClass(FeatureDiscovery, [{
@@ -287,10 +296,16 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           return;
         }
 
+        // onOpen callback
+        if (typeof this.options.onOpen === 'function') {
+          this.options.onOpen.call(this, this.$origin[0]);
+        }
+
         this.isOpen = true;
         this.wrapper.classList.add('open');
 
         document.body.addEventListener('click', this._handleDocumentClickBound, true);
+        document.body.addEventListener('touchend', this._handleDocumentClickBound);
       }
 
       /**
@@ -304,19 +319,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           return;
         }
 
+        // onClose callback
+        if (typeof this.options.onClose === 'function') {
+          this.options.onClose.call(this, this.$origin[0]);
+        }
+
         this.isOpen = false;
         this.wrapper.classList.remove('open');
 
         document.body.removeEventListener('click', this._handleDocumentClickBound, true);
+        document.body.removeEventListener('touchend', this._handleDocumentClickBound);
       }
     }], [{
       key: 'init',
-      value: function init($els, options) {
-        var arr = [];
-        $els.each(function () {
-          arr.push(new FeatureDiscovery(this, options));
-        });
-        return arr;
+      value: function init(els, options) {
+        return _get(FeatureDiscovery.__proto__ || Object.getPrototypeOf(FeatureDiscovery), 'init', this).call(this, this, els, options);
       }
 
       /**
@@ -337,7 +354,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }]);
 
     return FeatureDiscovery;
-  }();
+  }(Component);
 
   M.FeatureDiscovery = FeatureDiscovery;
 

data/assets/javascripts/materialize/timepicker.js

@@ -1,618 +1,618 @@
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 (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
-  };
-
-  /**
+		'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 (_Component) {
+				_inherits(Timepicker, _Component);
+
+				function Timepicker(el, options) {
+						_classCallCheck(this, Timepicker);
 
-      // If exists, destroy and reinitialize
-      if (!!el.M_Timepicker) {
-        el.M_Timepicker.destroy();
-      }
+						var _this = _possibleConstructorReturn(this, (Timepicker.__proto__ || Object.getPrototypeOf(Timepicker)).call(this, Timepicker, el, options));
 
-      this.el = el;
-      this.$el = $(el);
-      this.el.M_Timepicker = this;
+						_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();
+						return _this;
+				}
 
-    _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() {
-        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();
-      }
-
-      /**
+				}, {
+						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 _this2 = this;
+
+								this.modal = M.Modal.init(this.modalEl, {
+										onCloseEnd: function () {
+												_this2.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].toUpperCase().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 _this3 = 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 () {
+																_this3.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) {
+								return _get(Timepicker.__proto__ || Object.getPrototypeOf(Timepicker), 'init', this).call(this, this, els, options);
+						}
+				}, {
+						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');
-  }
+				}, {
+						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;
+		}(Component);
+
+		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);