materialize-sass 1.0.0.alpha2 → 1.0.0.alpha3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. checksums.yaml +5 -5
  2. data/assets/javascripts/materialize-sprockets.js +1 -0
  3. data/assets/javascripts/materialize.js +1337 -1281
  4. data/assets/javascripts/materialize/autocomplete.js +27 -27
  5. data/assets/javascripts/materialize/buttons.js +58 -58
  6. data/assets/javascripts/materialize/carousel.js +47 -49
  7. data/assets/javascripts/materialize/cash.js +4 -4
  8. data/assets/javascripts/materialize/characterCounter.js +20 -20
  9. data/assets/javascripts/materialize/chips.js +42 -38
  10. data/assets/javascripts/materialize/collapsible.js +27 -27
  11. data/assets/javascripts/materialize/component.js +57 -0
  12. data/assets/javascripts/materialize/datepicker.js +59 -53
  13. data/assets/javascripts/materialize/dropdown.js +43 -43
  14. data/assets/javascripts/materialize/extras/nouislider.js +1 -1
  15. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  16. data/assets/javascripts/materialize/forms.js +8 -2
  17. data/assets/javascripts/materialize/global.js +11 -13
  18. data/assets/javascripts/materialize/materialbox.js +72 -44
  19. data/assets/javascripts/materialize/modal.js +55 -38
  20. data/assets/javascripts/materialize/parallax.js +61 -24
  21. data/assets/javascripts/materialize/pushpin.js +37 -21
  22. data/assets/javascripts/materialize/range.js +19 -21
  23. data/assets/javascripts/materialize/scrollspy.js +23 -23
  24. data/assets/javascripts/materialize/select.js +42 -36
  25. data/assets/javascripts/materialize/sidenav.js +34 -34
  26. data/assets/javascripts/materialize/slider.js +37 -39
  27. data/assets/javascripts/materialize/tabs.js +42 -49
  28. data/assets/javascripts/materialize/tapTarget.js +39 -22
  29. data/assets/javascripts/materialize/timepicker.js +579 -579
  30. data/assets/javascripts/materialize/tooltip.js +34 -31
  31. data/assets/stylesheets/materialize/components/_cards.scss +0 -2
  32. data/assets/stylesheets/materialize/components/_global.scss +4 -14
  33. data/assets/stylesheets/materialize/components/_typography.scss +0 -1
  34. data/assets/stylesheets/materialize/components/_variables.scss +1 -1
  35. data/assets/stylesheets/materialize/components/forms/_checkboxes.scss +0 -10
  36. data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
  37. data/lib/materialize-sass/version.rb +1 -1
  38. metadata +4 -3
@@ -1,7 +1,13 @@
1
1
  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; }; }();
2
2
 
3
+ 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); } };
4
+
3
5
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
6
 
7
+ 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; }
8
+
9
+ 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; }
10
+
5
11
  (function ($, anim) {
6
12
  'use strict';
7
13
 
@@ -17,7 +23,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
17
23
  *
18
24
  */
19
25
 
20
- var Tabs = function () {
26
+ var Tabs = function (_Component) {
27
+ _inherits(Tabs, _Component);
28
+
21
29
  /**
22
30
  * Construct Tabs instance
23
31
  * @constructor
@@ -27,18 +35,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
27
35
  function Tabs(el, options) {
28
36
  _classCallCheck(this, Tabs);
29
37
 
30
- // If exists, destroy and reinitialize
31
- if (!!el.M_Tabs) {
32
- el.M_Tabs.destroy();
33
- }
34
-
35
- /**
36
- * The jQuery element
37
- * @type {jQuery}
38
- */
39
- this.$el = $(el);
38
+ var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, Tabs, el, options));
40
39
 
41
- this.el = el;
40
+ _this.el.M_Tabs = _this;
42
41
 
43
42
  /**
44
43
  * Options for the Tabs
@@ -48,24 +47,23 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
48
47
  * @prop {Boolean} swipeable
49
48
  * @prop {Number} responsiveThreshold
50
49
  */
51
- this.options = $.extend({}, Tabs.defaults, options);
52
-
53
- this.el.M_Tabs = this;
50
+ _this.options = $.extend({}, Tabs.defaults, options);
54
51
 
55
52
  // Setup
56
- this.$tabLinks = this.$el.children('li.tab').children('a');
57
- this.index = 0;
58
- this._setTabsAndTabWidth();
59
- this._setupActiveTabLink();
60
- this._createIndicator();
61
-
62
- if (this.options.swipeable) {
63
- this._setupSwipeableTabs();
53
+ _this.$tabLinks = _this.$el.children('li.tab').children('a');
54
+ _this.index = 0;
55
+ _this._setTabsAndTabWidth();
56
+ _this._setupActiveTabLink();
57
+ _this._createIndicator();
58
+
59
+ if (_this.options.swipeable) {
60
+ _this._setupSwipeableTabs();
64
61
  } else {
65
- this._setupNormalTabs();
62
+ _this._setupNormalTabs();
66
63
  }
67
64
 
68
- this._setupEventHandlers();
65
+ _this._setupEventHandlers();
66
+ return _this;
69
67
  }
70
68
 
71
69
  _createClass(Tabs, [{
@@ -136,7 +134,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
136
134
  }, {
137
135
  key: '_handleTabClick',
138
136
  value: function _handleTabClick(e) {
139
- var _this = this;
137
+ var _this2 = this;
140
138
 
141
139
  var tab = $(e.target).closest('li.tab');
142
140
  var tabLink = $(e.target).closest('a');
@@ -176,8 +174,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
176
174
  if (this.options.swipeable) {
177
175
  if (this._tabsCarousel) {
178
176
  this._tabsCarousel.set(this.index, function () {
179
- if (typeof _this.options.onShow === "function") {
180
- _this.options.onShow.call(_this, _this.$content[0]);
177
+ if (typeof _this2.options.onShow === "function") {
178
+ _this2.options.onShow.call(_this2, _this2.$content[0]);
181
179
  }
182
180
  });
183
181
  }
@@ -210,7 +208,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
210
208
  }, {
211
209
  key: '_createIndicator',
212
210
  value: function _createIndicator() {
213
- var _this2 = this;
211
+ var _this3 = this;
214
212
 
215
213
  var indicator = document.createElement('li');
216
214
  indicator.classList.add('indicator');
@@ -219,8 +217,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
219
217
  this._indicator = indicator;
220
218
 
221
219
  setTimeout(function () {
222
- _this2._indicator.style.left = _this2._calcLeftPos(_this2.$activeTabLink) + 'px';
223
- _this2._indicator.style.right = _this2._calcRightPos(_this2.$activeTabLink) + 'px';
220
+ _this3._indicator.style.left = _this3._calcLeftPos(_this3.$activeTabLink) + 'px';
221
+ _this3._indicator.style.right = _this3._calcRightPos(_this3.$activeTabLink) + 'px';
224
222
  }, 0);
225
223
  }
226
224
 
@@ -260,7 +258,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
260
258
  }, {
261
259
  key: '_setupSwipeableTabs',
262
260
  value: function _setupSwipeableTabs() {
263
- var _this3 = this;
261
+ var _this4 = this;
264
262
 
265
263
  // Change swipeable according to responsive threshold
266
264
  if (window.innerWidth > this.options.responsiveThreshold) {
@@ -279,18 +277,18 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
279
277
  $tabsWrapper.append($tabsContent);
280
278
  $tabsContent[0].style.display = '';
281
279
 
282
- this._tabsCarousel = new M.Carousel($tabsWrapper[0], {
280
+ this._tabsCarousel = M.Carousel.init($tabsWrapper[0], {
283
281
  fullWidth: true,
284
282
  noWrap: true,
285
283
  onCycleTo: function (item) {
286
- var prevIndex = _this3.index;
287
- _this3.index = $(item).index();
288
- _this3.$activeTabLink.removeClass('active');
289
- _this3.$activeTabLink = _this3.$tabLinks.eq(_this3.index);
290
- _this3.$activeTabLink.addClass('active');
291
- _this3._animateIndicator(prevIndex);
292
- if (typeof _this3.options.onShow === "function") {
293
- _this3.options.onShow.call(_this3, _this3.$content[0]);
284
+ var prevIndex = _this4.index;
285
+ _this4.index = $(item).index();
286
+ _this4.$activeTabLink.removeClass('active');
287
+ _this4.$activeTabLink = _this4.$tabLinks.eq(_this4.index);
288
+ _this4.$activeTabLink.addClass('active');
289
+ _this4._animateIndicator(prevIndex);
290
+ if (typeof _this4.options.onShow === "function") {
291
+ _this4.options.onShow.call(_this4, _this4.$content[0]);
294
292
  }
295
293
  }
296
294
  });
@@ -430,18 +428,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
430
428
  value: function select(tabId) {
431
429
  var tab = this.$tabLinks.filter('[href="#' + tabId + '"]');
432
430
  if (tab.length) {
433
- 4;
434
431
  tab.trigger('click');
435
432
  }
436
433
  }
437
434
  }], [{
438
435
  key: 'init',
439
- value: function init($els, options) {
440
- var arr = [];
441
- $els.each(function () {
442
- arr.push(new Tabs(this, options));
443
- });
444
- return arr;
436
+ value: function init(els, options) {
437
+ return _get(Tabs.__proto__ || Object.getPrototypeOf(Tabs), 'init', this).call(this, this, els, options);
445
438
  }
446
439
 
447
440
  /**
@@ -462,7 +455,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
462
455
  }]);
463
456
 
464
457
  return Tabs;
465
- }();
458
+ }(Component);
466
459
 
467
460
  window.M.Tabs = Tabs;
468
461
 
@@ -1,18 +1,29 @@
1
1
  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; }; }();
2
2
 
3
+ 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); } };
4
+
3
5
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
6
 
7
+ 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; }
8
+
9
+ 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; }
10
+
5
11
  (function ($) {
6
12
  'use strict';
7
13
 
8
- var _defaults = {};
14
+ var _defaults = {
15
+ onOpen: undefined,
16
+ onClose: undefined
17
+ };
9
18
 
10
19
  /**
11
20
  * @class
12
21
  *
13
22
  */
14
23
 
15
- var FeatureDiscovery = function () {
24
+ var FeatureDiscovery = function (_Component) {
25
+ _inherits(FeatureDiscovery, _Component);
26
+
16
27
  /**
17
28
  * Construct FeatureDiscovery instance
18
29
  * @constructor
@@ -22,29 +33,27 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
22
33
  function FeatureDiscovery(el, options) {
23
34
  _classCallCheck(this, FeatureDiscovery);
24
35
 
25
- // If exists, destroy and reinitialize
26
- if (!!el.M_FeatureDiscovery) {
27
- el.M_FeatureDiscovery.destroy();
28
- }
36
+ var _this = _possibleConstructorReturn(this, (FeatureDiscovery.__proto__ || Object.getPrototypeOf(FeatureDiscovery)).call(this, FeatureDiscovery, el, options));
29
37
 
30
- this.el = el;
31
- this.$el = $(el);
32
- this.el.M_FeatureDiscovery = this;
38
+ _this.el.M_FeatureDiscovery = _this;
33
39
 
34
40
  /**
35
41
  * Options for the select
36
42
  * @member FeatureDiscovery#options
43
+ * @prop {Function} onOpen - Callback function called when feature discovery is opened
44
+ * @prop {Function} onClose - Callback function called when feature discovery is closed
37
45
  */
38
- this.options = $.extend({}, FeatureDiscovery.defaults, options);
46
+ _this.options = $.extend({}, FeatureDiscovery.defaults, options);
39
47
 
40
- this.isOpen = false;
48
+ _this.isOpen = false;
41
49
 
42
50
  // setup
43
- this.$origin = $('#' + this.$el.attr('data-target'));
44
- this._setup();
51
+ _this.$origin = $('#' + _this.$el.attr('data-target'));
52
+ _this._setup();
45
53
 
46
- this._calculatePositioning();
47
- this._setupEventHandlers();
54
+ _this._calculatePositioning();
55
+ _this._setupEventHandlers();
56
+ return _this;
48
57
  }
49
58
 
50
59
  _createClass(FeatureDiscovery, [{
@@ -287,10 +296,16 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
287
296
  return;
288
297
  }
289
298
 
299
+ // onOpen callback
300
+ if (typeof this.options.onOpen === 'function') {
301
+ this.options.onOpen.call(this, this.$origin[0]);
302
+ }
303
+
290
304
  this.isOpen = true;
291
305
  this.wrapper.classList.add('open');
292
306
 
293
307
  document.body.addEventListener('click', this._handleDocumentClickBound, true);
308
+ document.body.addEventListener('touchend', this._handleDocumentClickBound);
294
309
  }
295
310
 
296
311
  /**
@@ -304,19 +319,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
304
319
  return;
305
320
  }
306
321
 
322
+ // onClose callback
323
+ if (typeof this.options.onClose === 'function') {
324
+ this.options.onClose.call(this, this.$origin[0]);
325
+ }
326
+
307
327
  this.isOpen = false;
308
328
  this.wrapper.classList.remove('open');
309
329
 
310
330
  document.body.removeEventListener('click', this._handleDocumentClickBound, true);
331
+ document.body.removeEventListener('touchend', this._handleDocumentClickBound);
311
332
  }
312
333
  }], [{
313
334
  key: 'init',
314
- value: function init($els, options) {
315
- var arr = [];
316
- $els.each(function () {
317
- arr.push(new FeatureDiscovery(this, options));
318
- });
319
- return arr;
335
+ value: function init(els, options) {
336
+ return _get(FeatureDiscovery.__proto__ || Object.getPrototypeOf(FeatureDiscovery), 'init', this).call(this, this, els, options);
320
337
  }
321
338
 
322
339
  /**
@@ -337,7 +354,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
337
354
  }]);
338
355
 
339
356
  return FeatureDiscovery;
340
- }();
357
+ }(Component);
341
358
 
342
359
  M.FeatureDiscovery = FeatureDiscovery;
343
360
 
@@ -1,618 +1,618 @@
1
1
  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; }; }();
2
2
 
3
+ 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); } };
4
+
3
5
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
6
 
7
+ 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; }
8
+
9
+ 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; }
10
+
5
11
  (function ($) {
6
- 'use strict';
7
-
8
- var _defaults = {
9
- dialRadius: 135,
10
- outerRadius: 105,
11
- innerRadius: 70,
12
- tickRadius: 20,
13
- duration: 350,
14
- container: null,
15
- defaultTime: 'now', // default time, 'now' or '13:14' e.g.
16
- fromnow: 0, // Millisecond offset from the defaultTime
17
- doneText: 'Ok', // done button text
18
- clearText: 'Clear',
19
- cancelText: 'Cancel',
20
- autoClose: false, // auto close when minute is selected
21
- twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
22
- vibrate: true // vibrate the device when dragging clock hand
23
- };
24
-
25
- /**
12
+ 'use strict';
13
+
14
+ var _defaults = {
15
+ dialRadius: 135,
16
+ outerRadius: 105,
17
+ innerRadius: 70,
18
+ tickRadius: 20,
19
+ duration: 350,
20
+ container: null,
21
+ defaultTime: 'now', // default time, 'now' or '13:14' e.g.
22
+ fromnow: 0, // Millisecond offset from the defaultTime
23
+ doneText: 'Ok', // done button text
24
+ clearText: 'Clear',
25
+ cancelText: 'Cancel',
26
+ autoClose: false, // auto close when minute is selected
27
+ twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
28
+ vibrate: true // vibrate the device when dragging clock hand
29
+ };
30
+
31
+ /**
26
32
  * @class
27
33
  *
28
34
  */
29
35
 
30
- var Timepicker = function () {
31
- function Timepicker(el, options) {
32
- _classCallCheck(this, Timepicker);
36
+ var Timepicker = function (_Component) {
37
+ _inherits(Timepicker, _Component);
38
+
39
+ function Timepicker(el, options) {
40
+ _classCallCheck(this, Timepicker);
33
41
 
34
- // If exists, destroy and reinitialize
35
- if (!!el.M_Timepicker) {
36
- el.M_Timepicker.destroy();
37
- }
42
+ var _this = _possibleConstructorReturn(this, (Timepicker.__proto__ || Object.getPrototypeOf(Timepicker)).call(this, Timepicker, el, options));
38
43
 
39
- this.el = el;
40
- this.$el = $(el);
41
- this.el.M_Timepicker = this;
44
+ _this.el.M_Timepicker = _this;
42
45
 
43
- this.options = $.extend({}, Timepicker.defaults, options);
46
+ _this.options = $.extend({}, Timepicker.defaults, options);
44
47
 
45
- this.id = M.guid();
46
- this._insertHTMLIntoDOM();
47
- this._setupModal();
48
- this._setupVariables();
49
- this._setupEventHandlers();
48
+ _this.id = M.guid();
49
+ _this._insertHTMLIntoDOM();
50
+ _this._setupModal();
51
+ _this._setupVariables();
52
+ _this._setupEventHandlers();
50
53
 
51
- this._clockSetup();
52
- this._pickerSetup();
53
- }
54
+ _this._clockSetup();
55
+ _this._pickerSetup();
56
+ return _this;
57
+ }
54
58
 
55
- _createClass(Timepicker, [{
56
- key: 'destroy',
59
+ _createClass(Timepicker, [{
60
+ key: 'destroy',
57
61
 
58
62
 
59
- /**
63
+ /**
60
64
  * Teardown component
61
65
  */
62
- value: function destroy() {
63
- this._removeEventHandlers();
64
- this.modal.destroy();
65
- $(this.modalEl).remove();
66
- this.el.M_Timepicker = undefined;
67
- }
68
-
69
- /**
66
+ value: function destroy() {
67
+ this._removeEventHandlers();
68
+ this.modal.destroy();
69
+ $(this.modalEl).remove();
70
+ this.el.M_Timepicker = undefined;
71
+ }
72
+
73
+ /**
70
74
  * Setup Event Handlers
71
75
  */
72
76
 
73
- }, {
74
- key: '_setupEventHandlers',
75
- value: function _setupEventHandlers() {
76
- this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
77
- this._handleInputClickBound = this._handleInputClick.bind(this);
78
- this._handleClockClickStartBound = this._handleClockClickStart.bind(this);
79
- this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this);
80
- this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this);
81
-
82
- this.el.addEventListener('click', this._handleInputClickBound);
83
- this.el.addEventListener('keydown', this._handleInputKeydownBound);
84
- this.plate.addEventListener('mousedown', this._handleClockClickStartBound);
85
- this.plate.addEventListener('touchstart', this._handleClockClickStartBound);
86
-
87
- $(this.spanHours).on('click', this.showView.bind(this, 'hours'));
88
- $(this.spanMinutes).on('click', this.showView.bind(this, 'minutes'));
89
- }
90
- }, {
91
- key: '_removeEventHandlers',
92
- value: function _removeEventHandlers() {
93
- this.el.removeEventListener('click', this._handleInputClickBound);
94
- this.el.removeEventListener('keydown', this._handleInputKeydownBound);
95
- }
96
- }, {
97
- key: '_handleInputClick',
98
- value: function _handleInputClick() {
99
- this.open();
100
- }
101
- }, {
102
- key: '_handleInputKeydown',
103
- value: function _handleInputKeydown(e) {
104
- if (e.which === M.keys.ENTER) {
105
- e.preventDefault();
106
- this.open();
107
- }
108
- }
109
- }, {
110
- key: '_handleClockClickStart',
111
- value: function _handleClockClickStart(e) {
112
- e.preventDefault();
113
- var clockPlateBR = this.plate.getBoundingClientRect();
114
- var offset = { x: clockPlateBR.left, y: clockPlateBR.top };
115
-
116
- this.x0 = offset.x + this.options.dialRadius;
117
- this.y0 = offset.y + this.options.dialRadius;
118
- this.moved = false;
119
- var clickPos = Timepicker._Pos(e);
120
- this.dx = clickPos.x - this.x0;
121
- this.dy = clickPos.y - this.y0;
122
-
123
- // Set clock hands
124
- this.setHand(this.dx, this.dy, false);
125
-
126
- // Mousemove on document
127
- document.addEventListener('mousemove', this._handleDocumentClickMoveBound);
128
- document.addEventListener('touchmove', this._handleDocumentClickMoveBound);
129
-
130
- // Mouseup on document
131
- document.addEventListener('mouseup', this._handleDocumentClickEndBound);
132
- document.addEventListener('touchend', this._handleDocumentClickEndBound);
133
- }
134
- }, {
135
- key: '_handleDocumentClickMove',
136
- value: function _handleDocumentClickMove(e) {
137
- e.preventDefault();
138
- var clickPos = Timepicker._Pos(e);
139
- var x = clickPos.x - this.x0;
140
- var y = clickPos.y - this.y0;
141
- this.moved = true;
142
- this.setHand(x, y, false, true);
143
- }
144
- }, {
145
- key: '_handleDocumentClickEnd',
146
- value: function _handleDocumentClickEnd(e) {
147
- e.preventDefault();
148
- document.removeEventListener('mouseup', this._handleDocumentClickEndBound);
149
- document.removeEventListener('touchend', this._handleDocumentClickEndBound);
150
- var clickPos = Timepicker._Pos(e);
151
- var x = clickPos.x - this.x0;
152
- var y = clickPos.y - this.y0;
153
- if (this.moved && x === this.dx && y === this.dy) {
154
- this.setHand(x, y);
155
- }
156
-
157
- if (this.currentView === 'hours') {
158
- this.showView('minutes', this.options.duration / 2);
159
- } else if (this.options.autoClose) {
160
- this.minutesView.addClass('timepicker-dial-out');
161
- setTimeout(function () {
162
- this.done();
163
- }, this.options.duration / 2);
164
- }
165
-
166
- // Unbind mousemove event
167
- document.removeEventListener('mousemove', this._handleDocumentClickMoveBound);
168
- document.removeEventListener('touchmove', this._handleDocumentClickMoveBound);
169
- }
170
- }, {
171
- key: '_insertHTMLIntoDOM',
172
- value: function _insertHTMLIntoDOM() {
173
- this.$modalEl = $(Timepicker._template);
174
- this.modalEl = this.$modalEl[0];
175
- this.modalEl.id = 'modal-' + this.id;
176
-
177
- // Append popover to input by default
178
- var containerEl = document.querySelector(this.options.container);
179
- if (this.options.container && !!containerEl) {
180
- this.$modalEl.appendTo(containerEl);
181
- } else {
182
- this.$modalEl.insertBefore(this.el);
183
- }
184
- }
185
- }, {
186
- key: '_setupModal',
187
- value: function _setupModal() {
188
- var _this = this;
189
-
190
- this.modal = new M.Modal(this.modalEl, {
191
- complete: function () {
192
- _this.isOpen = false;
193
- }
194
- });
195
- }
196
- }, {
197
- key: '_setupVariables',
198
- value: function _setupVariables() {
199
- this.currentView = 'hours';
200
- this.vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
201
-
202
- this._canvas = this.modalEl.querySelector('.timepicker-canvas');
203
- this.plate = this.modalEl.querySelector('.timepicker-plate');
204
-
205
- this.hoursView = this.modalEl.querySelector('.timepicker-hours');
206
- this.minutesView = this.modalEl.querySelector('.timepicker-minutes');
207
- this.spanHours = this.modalEl.querySelector('.timepicker-span-hours');
208
- this.spanMinutes = this.modalEl.querySelector('.timepicker-span-minutes');
209
- this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm');
210
- this.footer = this.modalEl.querySelector('.timepicker-footer');
211
- this.amOrPm = 'PM';
212
- }
213
- }, {
214
- key: '_pickerSetup',
215
- value: function _pickerSetup() {
216
- $('<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));
217
-
218
- var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>');
219
- $('<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));
220
- $('<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));
221
- confirmationBtnsContainer.appendTo(this.footer);
222
- }
223
- }, {
224
- key: '_clockSetup',
225
- value: function _clockSetup() {
226
- if (this.options.twelveHour) {
227
- this.$amBtn = $('<div class="am-btn">AM</div>');
228
- this.$pmBtn = $('<div class="pm-btn">PM</div>');
229
- this.$amBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
230
- this.$pmBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
231
- }
232
-
233
- this._buildHoursView();
234
- this._buildMinutesView();
235
- this._buildSVGClock();
236
- }
237
- }, {
238
- key: '_buildSVGClock',
239
- value: function _buildSVGClock() {
240
- // Draw clock hands and others
241
- var dialRadius = this.options.dialRadius;
242
- var tickRadius = this.options.tickRadius;
243
- var diameter = dialRadius * 2;
244
-
245
- var svg = Timepicker._createSVGEl('svg');
246
- svg.setAttribute('class', 'timepicker-svg');
247
- svg.setAttribute('width', diameter);
248
- svg.setAttribute('height', diameter);
249
- var g = Timepicker._createSVGEl('g');
250
- g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
251
- var bearing = Timepicker._createSVGEl('circle');
252
- bearing.setAttribute('class', 'timepicker-canvas-bearing');
253
- bearing.setAttribute('cx', 0);
254
- bearing.setAttribute('cy', 0);
255
- bearing.setAttribute('r', 4);
256
- var hand = Timepicker._createSVGEl('line');
257
- hand.setAttribute('x1', 0);
258
- hand.setAttribute('y1', 0);
259
- var bg = Timepicker._createSVGEl('circle');
260
- bg.setAttribute('class', 'timepicker-canvas-bg');
261
- bg.setAttribute('r', tickRadius);
262
- g.appendChild(hand);
263
- g.appendChild(bg);
264
- g.appendChild(bearing);
265
- svg.appendChild(g);
266
- this._canvas.appendChild(svg);
267
-
268
- this.hand = hand;
269
- this.bg = bg;
270
- this.bearing = bearing;
271
- this.g = g;
272
- }
273
- }, {
274
- key: '_buildHoursView',
275
- value: function _buildHoursView() {
276
- var $tick = $('<div class="timepicker-tick"></div>');
277
- // Hours view
278
- if (this.options.twelveHour) {
279
- for (var i = 1; i < 13; i += 1) {
280
- var tick = $tick.clone();
281
- var radian = i / 6 * Math.PI;
282
- var radius = this.options.outerRadius;
283
- tick.css({
284
- left: this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px',
285
- top: this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'
286
- });
287
- tick.html(i === 0 ? '00' : i);
288
- this.hoursView.appendChild(tick[0]);
289
- // tick.on(mousedownEvent, mousedown);
290
- }
291
- } else {
292
- for (var _i = 0; _i < 24; _i += 1) {
293
- var _tick = $tick.clone();
294
- var _radian = _i / 6 * Math.PI;
295
- var inner = _i > 0 && _i < 13;
296
- var _radius = inner ? this.options.innerRadius : this.options.outerRadius;
297
- _tick.css({
298
- left: this.options.dialRadius + Math.sin(_radian) * _radius - this.options.tickRadius + 'px',
299
- top: this.options.dialRadius - Math.cos(_radian) * _radius - this.options.tickRadius + 'px'
300
- });
301
- _tick.html(_i === 0 ? '00' : _i);
302
- this.hoursView.appendChild(_tick[0]);
303
- // tick.on(mousedownEvent, mousedown);
304
- }
305
- }
306
- }
307
- }, {
308
- key: '_buildMinutesView',
309
- value: function _buildMinutesView() {
310
- var $tick = $('<div class="timepicker-tick"></div>');
311
- // Minutes view
312
- for (var i = 0; i < 60; i += 5) {
313
- var tick = $tick.clone();
314
- var radian = i / 30 * Math.PI;
315
- tick.css({
316
- left: this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + 'px',
317
- top: this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + 'px'
318
- });
319
- tick.html(Timepicker._addLeadingZero(i));
320
- this.minutesView.appendChild(tick[0]);
321
- }
322
- }
323
- }, {
324
- key: '_handleAmPmClick',
325
- value: function _handleAmPmClick(e) {
326
- var $btnClicked = $(e.target);
327
- this.amOrPm = $btnClicked.hasClass('am-btn') ? 'AM' : 'PM';
328
- this._updateAmPmView();
329
- }
330
- }, {
331
- key: '_updateAmPmView',
332
- value: function _updateAmPmView() {
333
- if (this.options.twelveHour) {
334
- this.$amBtn.toggleClass('text-primary', this.amOrPm === 'AM');
335
- this.$pmBtn.toggleClass('text-primary', this.amOrPm === 'PM');
336
- }
337
- }
338
- }, {
339
- key: '_updateTimeFromInput',
340
- value: function _updateTimeFromInput() {
341
- // Get the time
342
- var value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
343
- if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
344
- if (value[1].indexOf("AM") > 0) {
345
- this.amOrPm = 'AM';
346
- } else {
347
- this.amOrPm = 'PM';
348
- }
349
- value[1] = value[1].replace("AM", "").replace("PM", "");
350
- }
351
- if (value[0] === 'now') {
352
- var now = new Date(+new Date() + this.options.fromnow);
353
- value = [now.getHours(), now.getMinutes()];
354
- if (this.options.twelveHour) {
355
- this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM';
356
- }
357
- }
358
- this.hours = +value[0] || 0;
359
- this.minutes = +value[1] || 0;
360
- this.spanHours.innerHTML = this.hours;
361
- this.spanMinutes.innerHTML = Timepicker._addLeadingZero(this.minutes);
362
-
363
- this._updateAmPmView();
364
- }
365
- }, {
366
- key: 'showView',
367
- value: function showView(view, delay) {
368
- if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
369
- // raiseCallback(this.options.beforeHourSelect);
370
- }
371
- var isHours = view === 'hours',
372
- nextView = isHours ? this.hoursView : this.minutesView,
373
- hideView = isHours ? this.minutesView : this.hoursView;
374
- this.currentView = view;
375
-
376
- $(this.spanHours).toggleClass('text-primary', isHours);
377
- $(this.spanMinutes).toggleClass('text-primary', !isHours);
378
-
379
- // Transition view
380
- hideView.classList.add('timepicker-dial-out');
381
- $(nextView).css('visibility', 'visible').removeClass('timepicker-dial-out');
382
-
383
- // Reset clock hand
384
- this.resetClock(delay);
385
-
386
- // After transitions ended
387
- clearTimeout(this.toggleViewTimer);
388
- this.toggleViewTimer = setTimeout(function () {
389
- $(hideView).css('visibility', 'hidden');
390
- }, this.options.duration);
391
- }
392
- }, {
393
- key: 'resetClock',
394
- value: function resetClock(delay) {
395
- var view = this.currentView,
396
- value = this[view],
397
- isHours = view === 'hours',
398
- unit = Math.PI / (isHours ? 6 : 30),
399
- radian = value * unit,
400
- radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius,
401
- x = Math.sin(radian) * radius,
402
- y = -Math.cos(radian) * radius,
403
- self = this;
404
-
405
- if (delay) {
406
- $(this.canvas).addClass('timepicker-canvas-out');
407
- setTimeout(function () {
408
- $(self.canvas).removeClass('timepicker-canvas-out');
409
- self.setHand(x, y);
410
- }, delay);
411
- } else {
412
- this.setHand(x, y);
413
- }
414
- }
415
- }, {
416
- key: 'setHand',
417
- value: function setHand(x, y, roundBy5) {
418
- var _this2 = this;
419
-
420
- var radian = Math.atan2(x, -y),
421
- isHours = this.currentView === 'hours',
422
- unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
423
- z = Math.sqrt(x * x + y * y),
424
- inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2,
425
- radius = inner ? this.options.innerRadius : this.options.outerRadius;
426
-
427
- if (this.options.twelveHour) {
428
- radius = this.options.outerRadius;
429
- }
430
-
431
- // Radian should in range [0, 2PI]
432
- if (radian < 0) {
433
- radian = Math.PI * 2 + radian;
434
- }
435
-
436
- // Get the round value
437
- var value = Math.round(radian / unit);
438
-
439
- // Get the round radian
440
- radian = value * unit;
441
-
442
- // Correct the hours or minutes
443
- if (this.options.twelveHour) {
444
- if (isHours) {
445
- if (value === 0) value = 12;
446
- } else {
447
- if (roundBy5) value *= 5;
448
- if (value === 60) value = 0;
449
- }
450
- } else {
451
- if (isHours) {
452
- if (value === 12) {
453
- value = 0;
454
- }
455
- value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12;
456
- } else {
457
- if (roundBy5) {
458
- value *= 5;
459
- }
460
- if (value === 60) {
461
- value = 0;
462
- }
463
- }
464
- }
465
-
466
- // Once hours or minutes changed, vibrate the device
467
- if (this[this.currentView] !== value) {
468
- if (this.vibrate && this.options.vibrate) {
469
- // Do not vibrate too frequently
470
- if (!this.vibrateTimer) {
471
- navigator[this.vibrate](10);
472
- this.vibrateTimer = setTimeout(function () {
473
- _this2.vibrateTimer = null;
474
- }, 100);
475
- }
476
- }
477
- }
478
-
479
- this[this.currentView] = value;
480
- if (isHours) {
481
- this['spanHours'].innerHTML = value;
482
- } else {
483
- this['spanMinutes'].innerHTML = Timepicker._addLeadingZero(value);
484
- }
485
-
486
- // Set clock hand and others' position
487
- var cx1 = Math.sin(radian) * (radius - this.options.tickRadius),
488
- cy1 = -Math.cos(radian) * (radius - this.options.tickRadius),
489
- cx2 = Math.sin(radian) * radius,
490
- cy2 = -Math.cos(radian) * radius;
491
- this.hand.setAttribute('x2', cx1);
492
- this.hand.setAttribute('y2', cy1);
493
- this.bg.setAttribute('cx', cx2);
494
- this.bg.setAttribute('cy', cy2);
495
- }
496
- }, {
497
- key: 'open',
498
- value: function open() {
499
- if (this.isOpen) {
500
- return;
501
- }
502
-
503
- this.isOpen = true;
504
- this._updateTimeFromInput();
505
- this.showView('hours');
506
- this.modal.open();
507
- }
508
- }, {
509
- key: 'close',
510
- value: function close() {
511
- if (!this.isOpen) {
512
- return;
513
- }
514
-
515
- this.isOpen = false;
516
- this.modal.close();
517
- }
518
-
519
- /**
77
+ }, {
78
+ key: '_setupEventHandlers',
79
+ value: function _setupEventHandlers() {
80
+ this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
81
+ this._handleInputClickBound = this._handleInputClick.bind(this);
82
+ this._handleClockClickStartBound = this._handleClockClickStart.bind(this);
83
+ this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this);
84
+ this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this);
85
+
86
+ this.el.addEventListener('click', this._handleInputClickBound);
87
+ this.el.addEventListener('keydown', this._handleInputKeydownBound);
88
+ this.plate.addEventListener('mousedown', this._handleClockClickStartBound);
89
+ this.plate.addEventListener('touchstart', this._handleClockClickStartBound);
90
+
91
+ $(this.spanHours).on('click', this.showView.bind(this, 'hours'));
92
+ $(this.spanMinutes).on('click', this.showView.bind(this, 'minutes'));
93
+ }
94
+ }, {
95
+ key: '_removeEventHandlers',
96
+ value: function _removeEventHandlers() {
97
+ this.el.removeEventListener('click', this._handleInputClickBound);
98
+ this.el.removeEventListener('keydown', this._handleInputKeydownBound);
99
+ }
100
+ }, {
101
+ key: '_handleInputClick',
102
+ value: function _handleInputClick() {
103
+ this.open();
104
+ }
105
+ }, {
106
+ key: '_handleInputKeydown',
107
+ value: function _handleInputKeydown(e) {
108
+ if (e.which === M.keys.ENTER) {
109
+ e.preventDefault();
110
+ this.open();
111
+ }
112
+ }
113
+ }, {
114
+ key: '_handleClockClickStart',
115
+ value: function _handleClockClickStart(e) {
116
+ e.preventDefault();
117
+ var clockPlateBR = this.plate.getBoundingClientRect();
118
+ var offset = { x: clockPlateBR.left, y: clockPlateBR.top };
119
+
120
+ this.x0 = offset.x + this.options.dialRadius;
121
+ this.y0 = offset.y + this.options.dialRadius;
122
+ this.moved = false;
123
+ var clickPos = Timepicker._Pos(e);
124
+ this.dx = clickPos.x - this.x0;
125
+ this.dy = clickPos.y - this.y0;
126
+
127
+ // Set clock hands
128
+ this.setHand(this.dx, this.dy, false);
129
+
130
+ // Mousemove on document
131
+ document.addEventListener('mousemove', this._handleDocumentClickMoveBound);
132
+ document.addEventListener('touchmove', this._handleDocumentClickMoveBound);
133
+
134
+ // Mouseup on document
135
+ document.addEventListener('mouseup', this._handleDocumentClickEndBound);
136
+ document.addEventListener('touchend', this._handleDocumentClickEndBound);
137
+ }
138
+ }, {
139
+ key: '_handleDocumentClickMove',
140
+ value: function _handleDocumentClickMove(e) {
141
+ e.preventDefault();
142
+ var clickPos = Timepicker._Pos(e);
143
+ var x = clickPos.x - this.x0;
144
+ var y = clickPos.y - this.y0;
145
+ this.moved = true;
146
+ this.setHand(x, y, false, true);
147
+ }
148
+ }, {
149
+ key: '_handleDocumentClickEnd',
150
+ value: function _handleDocumentClickEnd(e) {
151
+ e.preventDefault();
152
+ document.removeEventListener('mouseup', this._handleDocumentClickEndBound);
153
+ document.removeEventListener('touchend', this._handleDocumentClickEndBound);
154
+ var clickPos = Timepicker._Pos(e);
155
+ var x = clickPos.x - this.x0;
156
+ var y = clickPos.y - this.y0;
157
+ if (this.moved && x === this.dx && y === this.dy) {
158
+ this.setHand(x, y);
159
+ }
160
+
161
+ if (this.currentView === 'hours') {
162
+ this.showView('minutes', this.options.duration / 2);
163
+ } else if (this.options.autoClose) {
164
+ this.minutesView.addClass('timepicker-dial-out');
165
+ setTimeout(function () {
166
+ this.done();
167
+ }, this.options.duration / 2);
168
+ }
169
+
170
+ // Unbind mousemove event
171
+ document.removeEventListener('mousemove', this._handleDocumentClickMoveBound);
172
+ document.removeEventListener('touchmove', this._handleDocumentClickMoveBound);
173
+ }
174
+ }, {
175
+ key: '_insertHTMLIntoDOM',
176
+ value: function _insertHTMLIntoDOM() {
177
+ this.$modalEl = $(Timepicker._template);
178
+ this.modalEl = this.$modalEl[0];
179
+ this.modalEl.id = 'modal-' + this.id;
180
+
181
+ // Append popover to input by default
182
+ var containerEl = document.querySelector(this.options.container);
183
+ if (this.options.container && !!containerEl) {
184
+ this.$modalEl.appendTo(containerEl);
185
+ } else {
186
+ this.$modalEl.insertBefore(this.el);
187
+ }
188
+ }
189
+ }, {
190
+ key: '_setupModal',
191
+ value: function _setupModal() {
192
+ var _this2 = this;
193
+
194
+ this.modal = M.Modal.init(this.modalEl, {
195
+ onCloseEnd: function () {
196
+ _this2.isOpen = false;
197
+ }
198
+ });
199
+ }
200
+ }, {
201
+ key: '_setupVariables',
202
+ value: function _setupVariables() {
203
+ this.currentView = 'hours';
204
+ this.vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
205
+
206
+ this._canvas = this.modalEl.querySelector('.timepicker-canvas');
207
+ this.plate = this.modalEl.querySelector('.timepicker-plate');
208
+
209
+ this.hoursView = this.modalEl.querySelector('.timepicker-hours');
210
+ this.minutesView = this.modalEl.querySelector('.timepicker-minutes');
211
+ this.spanHours = this.modalEl.querySelector('.timepicker-span-hours');
212
+ this.spanMinutes = this.modalEl.querySelector('.timepicker-span-minutes');
213
+ this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm');
214
+ this.footer = this.modalEl.querySelector('.timepicker-footer');
215
+ this.amOrPm = 'PM';
216
+ }
217
+ }, {
218
+ key: '_pickerSetup',
219
+ value: function _pickerSetup() {
220
+ $('<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));
221
+
222
+ var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>');
223
+ $('<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));
224
+ $('<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));
225
+ confirmationBtnsContainer.appendTo(this.footer);
226
+ }
227
+ }, {
228
+ key: '_clockSetup',
229
+ value: function _clockSetup() {
230
+ if (this.options.twelveHour) {
231
+ this.$amBtn = $('<div class="am-btn">AM</div>');
232
+ this.$pmBtn = $('<div class="pm-btn">PM</div>');
233
+ this.$amBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
234
+ this.$pmBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm);
235
+ }
236
+
237
+ this._buildHoursView();
238
+ this._buildMinutesView();
239
+ this._buildSVGClock();
240
+ }
241
+ }, {
242
+ key: '_buildSVGClock',
243
+ value: function _buildSVGClock() {
244
+ // Draw clock hands and others
245
+ var dialRadius = this.options.dialRadius;
246
+ var tickRadius = this.options.tickRadius;
247
+ var diameter = dialRadius * 2;
248
+
249
+ var svg = Timepicker._createSVGEl('svg');
250
+ svg.setAttribute('class', 'timepicker-svg');
251
+ svg.setAttribute('width', diameter);
252
+ svg.setAttribute('height', diameter);
253
+ var g = Timepicker._createSVGEl('g');
254
+ g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
255
+ var bearing = Timepicker._createSVGEl('circle');
256
+ bearing.setAttribute('class', 'timepicker-canvas-bearing');
257
+ bearing.setAttribute('cx', 0);
258
+ bearing.setAttribute('cy', 0);
259
+ bearing.setAttribute('r', 4);
260
+ var hand = Timepicker._createSVGEl('line');
261
+ hand.setAttribute('x1', 0);
262
+ hand.setAttribute('y1', 0);
263
+ var bg = Timepicker._createSVGEl('circle');
264
+ bg.setAttribute('class', 'timepicker-canvas-bg');
265
+ bg.setAttribute('r', tickRadius);
266
+ g.appendChild(hand);
267
+ g.appendChild(bg);
268
+ g.appendChild(bearing);
269
+ svg.appendChild(g);
270
+ this._canvas.appendChild(svg);
271
+
272
+ this.hand = hand;
273
+ this.bg = bg;
274
+ this.bearing = bearing;
275
+ this.g = g;
276
+ }
277
+ }, {
278
+ key: '_buildHoursView',
279
+ value: function _buildHoursView() {
280
+ var $tick = $('<div class="timepicker-tick"></div>');
281
+ // Hours view
282
+ if (this.options.twelveHour) {
283
+ for (var i = 1; i < 13; i += 1) {
284
+ var tick = $tick.clone();
285
+ var radian = i / 6 * Math.PI;
286
+ var radius = this.options.outerRadius;
287
+ tick.css({
288
+ left: this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px',
289
+ top: this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'
290
+ });
291
+ tick.html(i === 0 ? '00' : i);
292
+ this.hoursView.appendChild(tick[0]);
293
+ // tick.on(mousedownEvent, mousedown);
294
+ }
295
+ } else {
296
+ for (var _i = 0; _i < 24; _i += 1) {
297
+ var _tick = $tick.clone();
298
+ var _radian = _i / 6 * Math.PI;
299
+ var inner = _i > 0 && _i < 13;
300
+ var _radius = inner ? this.options.innerRadius : this.options.outerRadius;
301
+ _tick.css({
302
+ left: this.options.dialRadius + Math.sin(_radian) * _radius - this.options.tickRadius + 'px',
303
+ top: this.options.dialRadius - Math.cos(_radian) * _radius - this.options.tickRadius + 'px'
304
+ });
305
+ _tick.html(_i === 0 ? '00' : _i);
306
+ this.hoursView.appendChild(_tick[0]);
307
+ // tick.on(mousedownEvent, mousedown);
308
+ }
309
+ }
310
+ }
311
+ }, {
312
+ key: '_buildMinutesView',
313
+ value: function _buildMinutesView() {
314
+ var $tick = $('<div class="timepicker-tick"></div>');
315
+ // Minutes view
316
+ for (var i = 0; i < 60; i += 5) {
317
+ var tick = $tick.clone();
318
+ var radian = i / 30 * Math.PI;
319
+ tick.css({
320
+ left: this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + 'px',
321
+ top: this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + 'px'
322
+ });
323
+ tick.html(Timepicker._addLeadingZero(i));
324
+ this.minutesView.appendChild(tick[0]);
325
+ }
326
+ }
327
+ }, {
328
+ key: '_handleAmPmClick',
329
+ value: function _handleAmPmClick(e) {
330
+ var $btnClicked = $(e.target);
331
+ this.amOrPm = $btnClicked.hasClass('am-btn') ? 'AM' : 'PM';
332
+ this._updateAmPmView();
333
+ }
334
+ }, {
335
+ key: '_updateAmPmView',
336
+ value: function _updateAmPmView() {
337
+ if (this.options.twelveHour) {
338
+ this.$amBtn.toggleClass('text-primary', this.amOrPm === 'AM');
339
+ this.$pmBtn.toggleClass('text-primary', this.amOrPm === 'PM');
340
+ }
341
+ }
342
+ }, {
343
+ key: '_updateTimeFromInput',
344
+ value: function _updateTimeFromInput() {
345
+ // Get the time
346
+ var value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
347
+ if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
348
+ if (value[1].toUpperCase().indexOf("AM") > 0) {
349
+ this.amOrPm = 'AM';
350
+ } else {
351
+ this.amOrPm = 'PM';
352
+ }
353
+ value[1] = value[1].replace("AM", "").replace("PM", "");
354
+ }
355
+ if (value[0] === 'now') {
356
+ var now = new Date(+new Date() + this.options.fromnow);
357
+ value = [now.getHours(), now.getMinutes()];
358
+ if (this.options.twelveHour) {
359
+ this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM';
360
+ }
361
+ }
362
+ this.hours = +value[0] || 0;
363
+ this.minutes = +value[1] || 0;
364
+ this.spanHours.innerHTML = this.hours;
365
+ this.spanMinutes.innerHTML = Timepicker._addLeadingZero(this.minutes);
366
+
367
+ this._updateAmPmView();
368
+ }
369
+ }, {
370
+ key: 'showView',
371
+ value: function showView(view, delay) {
372
+ if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
373
+ // raiseCallback(this.options.beforeHourSelect);
374
+ }
375
+ var isHours = view === 'hours',
376
+ nextView = isHours ? this.hoursView : this.minutesView,
377
+ hideView = isHours ? this.minutesView : this.hoursView;
378
+ this.currentView = view;
379
+
380
+ $(this.spanHours).toggleClass('text-primary', isHours);
381
+ $(this.spanMinutes).toggleClass('text-primary', !isHours);
382
+
383
+ // Transition view
384
+ hideView.classList.add('timepicker-dial-out');
385
+ $(nextView).css('visibility', 'visible').removeClass('timepicker-dial-out');
386
+
387
+ // Reset clock hand
388
+ this.resetClock(delay);
389
+
390
+ // After transitions ended
391
+ clearTimeout(this.toggleViewTimer);
392
+ this.toggleViewTimer = setTimeout(function () {
393
+ $(hideView).css('visibility', 'hidden');
394
+ }, this.options.duration);
395
+ }
396
+ }, {
397
+ key: 'resetClock',
398
+ value: function resetClock(delay) {
399
+ var view = this.currentView,
400
+ value = this[view],
401
+ isHours = view === 'hours',
402
+ unit = Math.PI / (isHours ? 6 : 30),
403
+ radian = value * unit,
404
+ radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius,
405
+ x = Math.sin(radian) * radius,
406
+ y = -Math.cos(radian) * radius,
407
+ self = this;
408
+
409
+ if (delay) {
410
+ $(this.canvas).addClass('timepicker-canvas-out');
411
+ setTimeout(function () {
412
+ $(self.canvas).removeClass('timepicker-canvas-out');
413
+ self.setHand(x, y);
414
+ }, delay);
415
+ } else {
416
+ this.setHand(x, y);
417
+ }
418
+ }
419
+ }, {
420
+ key: 'setHand',
421
+ value: function setHand(x, y, roundBy5) {
422
+ var _this3 = this;
423
+
424
+ var radian = Math.atan2(x, -y),
425
+ isHours = this.currentView === 'hours',
426
+ unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
427
+ z = Math.sqrt(x * x + y * y),
428
+ inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2,
429
+ radius = inner ? this.options.innerRadius : this.options.outerRadius;
430
+
431
+ if (this.options.twelveHour) {
432
+ radius = this.options.outerRadius;
433
+ }
434
+
435
+ // Radian should in range [0, 2PI]
436
+ if (radian < 0) {
437
+ radian = Math.PI * 2 + radian;
438
+ }
439
+
440
+ // Get the round value
441
+ var value = Math.round(radian / unit);
442
+
443
+ // Get the round radian
444
+ radian = value * unit;
445
+
446
+ // Correct the hours or minutes
447
+ if (this.options.twelveHour) {
448
+ if (isHours) {
449
+ if (value === 0) value = 12;
450
+ } else {
451
+ if (roundBy5) value *= 5;
452
+ if (value === 60) value = 0;
453
+ }
454
+ } else {
455
+ if (isHours) {
456
+ if (value === 12) {
457
+ value = 0;
458
+ }
459
+ value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12;
460
+ } else {
461
+ if (roundBy5) {
462
+ value *= 5;
463
+ }
464
+ if (value === 60) {
465
+ value = 0;
466
+ }
467
+ }
468
+ }
469
+
470
+ // Once hours or minutes changed, vibrate the device
471
+ if (this[this.currentView] !== value) {
472
+ if (this.vibrate && this.options.vibrate) {
473
+ // Do not vibrate too frequently
474
+ if (!this.vibrateTimer) {
475
+ navigator[this.vibrate](10);
476
+ this.vibrateTimer = setTimeout(function () {
477
+ _this3.vibrateTimer = null;
478
+ }, 100);
479
+ }
480
+ }
481
+ }
482
+
483
+ this[this.currentView] = value;
484
+ if (isHours) {
485
+ this['spanHours'].innerHTML = value;
486
+ } else {
487
+ this['spanMinutes'].innerHTML = Timepicker._addLeadingZero(value);
488
+ }
489
+
490
+ // Set clock hand and others' position
491
+ var cx1 = Math.sin(radian) * (radius - this.options.tickRadius),
492
+ cy1 = -Math.cos(radian) * (radius - this.options.tickRadius),
493
+ cx2 = Math.sin(radian) * radius,
494
+ cy2 = -Math.cos(radian) * radius;
495
+ this.hand.setAttribute('x2', cx1);
496
+ this.hand.setAttribute('y2', cy1);
497
+ this.bg.setAttribute('cx', cx2);
498
+ this.bg.setAttribute('cy', cy2);
499
+ }
500
+ }, {
501
+ key: 'open',
502
+ value: function open() {
503
+ if (this.isOpen) {
504
+ return;
505
+ }
506
+
507
+ this.isOpen = true;
508
+ this._updateTimeFromInput();
509
+ this.showView('hours');
510
+ this.modal.open();
511
+ }
512
+ }, {
513
+ key: 'close',
514
+ value: function close() {
515
+ if (!this.isOpen) {
516
+ return;
517
+ }
518
+
519
+ this.isOpen = false;
520
+ this.modal.close();
521
+ }
522
+
523
+ /**
520
524
  * Finish timepicker selection.
521
525
  */
522
526
 
523
- }, {
524
- key: 'done',
525
- value: function done(e, clearValue) {
526
- // Set input value
527
- var last = this.el.value;
528
- var value = clearValue ? '' : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
529
- this.time = value;
530
- if (!clearValue && this.options.twelveHour) {
531
- value = value + ' ' + this.amOrPm;
532
- }
533
- this.el.value = value;
534
-
535
- // Trigger change event
536
- if (value !== last) {
537
- this.$el.trigger('change');
538
- }
539
-
540
- this.close();
541
- this.el.focus();
542
- }
543
- }, {
544
- key: 'clear',
545
- value: function clear() {
546
- this.done(null, true);
547
- }
548
- }], [{
549
- key: 'init',
550
- value: function init($els, options) {
551
- var arr = [];
552
- $els.each(function () {
553
- arr.push(new Timepicker(this, options));
554
- });
555
- return arr;
556
- }
557
- }, {
558
- key: '_addLeadingZero',
559
- value: function _addLeadingZero(num) {
560
- return (num < 10 ? '0' : '') + num;
561
- }
562
- }, {
563
- key: '_createSVGEl',
564
- value: function _createSVGEl(name) {
565
- var svgNS = 'http://www.w3.org/2000/svg';
566
- return document.createElementNS(svgNS, name);
567
- }
568
-
569
- /**
527
+ }, {
528
+ key: 'done',
529
+ value: function done(e, clearValue) {
530
+ // Set input value
531
+ var last = this.el.value;
532
+ var value = clearValue ? '' : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
533
+ this.time = value;
534
+ if (!clearValue && this.options.twelveHour) {
535
+ value = value + ' ' + this.amOrPm;
536
+ }
537
+ this.el.value = value;
538
+
539
+ // Trigger change event
540
+ if (value !== last) {
541
+ this.$el.trigger('change');
542
+ }
543
+
544
+ this.close();
545
+ this.el.focus();
546
+ }
547
+ }, {
548
+ key: 'clear',
549
+ value: function clear() {
550
+ this.done(null, true);
551
+ }
552
+ }], [{
553
+ key: 'init',
554
+ value: function init(els, options) {
555
+ return _get(Timepicker.__proto__ || Object.getPrototypeOf(Timepicker), 'init', this).call(this, this, els, options);
556
+ }
557
+ }, {
558
+ key: '_addLeadingZero',
559
+ value: function _addLeadingZero(num) {
560
+ return (num < 10 ? '0' : '') + num;
561
+ }
562
+ }, {
563
+ key: '_createSVGEl',
564
+ value: function _createSVGEl(name) {
565
+ var svgNS = 'http://www.w3.org/2000/svg';
566
+ return document.createElementNS(svgNS, name);
567
+ }
568
+
569
+ /**
570
570
  * @typedef {Object} Point
571
571
  * @property {number} x The X Coordinate
572
572
  * @property {number} y The Y Coordinate
573
573
  */
574
574
 
575
- /**
575
+ /**
576
576
  * Get x position of mouse or touch event
577
577
  * @param {Event} e
578
578
  * @return {Point} x and y location
579
579
  */
580
580
 
581
- }, {
582
- key: '_Pos',
583
- value: function _Pos(e) {
584
- if (e.targetTouches && e.targetTouches.length >= 1) {
585
- return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY };
586
- }
587
- // mouse event
588
- return { x: e.clientX, y: e.clientY };
589
- }
590
-
591
- /**
581
+ }, {
582
+ key: '_Pos',
583
+ value: function _Pos(e) {
584
+ if (e.targetTouches && e.targetTouches.length >= 1) {
585
+ return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY };
586
+ }
587
+ // mouse event
588
+ return { x: e.clientX, y: e.clientY };
589
+ }
590
+
591
+ /**
592
592
  * Get Instance
593
593
  */
594
594
 
595
- }, {
596
- key: 'getInstance',
597
- value: function getInstance(el) {
598
- var domElem = !!el.jquery ? el[0] : el;
599
- return domElem.M_Timepicker;
600
- }
601
- }, {
602
- key: 'defaults',
603
- get: function () {
604
- return _defaults;
605
- }
606
- }]);
607
-
608
- return Timepicker;
609
- }();
610
-
611
- 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('');
612
-
613
- M.Timepicker = Timepicker;
614
-
615
- if (M.jQueryLoaded) {
616
- M.initializeJqueryWrapper(Timepicker, 'timepicker', 'M_Timepicker');
617
- }
595
+ }, {
596
+ key: 'getInstance',
597
+ value: function getInstance(el) {
598
+ var domElem = !!el.jquery ? el[0] : el;
599
+ return domElem.M_Timepicker;
600
+ }
601
+ }, {
602
+ key: 'defaults',
603
+ get: function () {
604
+ return _defaults;
605
+ }
606
+ }]);
607
+
608
+ return Timepicker;
609
+ }(Component);
610
+
611
+ 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('');
612
+
613
+ M.Timepicker = Timepicker;
614
+
615
+ if (M.jQueryLoaded) {
616
+ M.initializeJqueryWrapper(Timepicker, 'timepicker', 'M_Timepicker');
617
+ }
618
618
  })(cash);