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.
- checksums.yaml +5 -5
- data/assets/javascripts/materialize-sprockets.js +1 -0
- data/assets/javascripts/materialize.js +1337 -1281
- data/assets/javascripts/materialize/autocomplete.js +27 -27
- data/assets/javascripts/materialize/buttons.js +58 -58
- data/assets/javascripts/materialize/carousel.js +47 -49
- data/assets/javascripts/materialize/cash.js +4 -4
- data/assets/javascripts/materialize/characterCounter.js +20 -20
- data/assets/javascripts/materialize/chips.js +42 -38
- data/assets/javascripts/materialize/collapsible.js +27 -27
- data/assets/javascripts/materialize/component.js +57 -0
- data/assets/javascripts/materialize/datepicker.js +59 -53
- data/assets/javascripts/materialize/dropdown.js +43 -43
- data/assets/javascripts/materialize/extras/nouislider.js +1 -1
- data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
- data/assets/javascripts/materialize/forms.js +8 -2
- data/assets/javascripts/materialize/global.js +11 -13
- data/assets/javascripts/materialize/materialbox.js +72 -44
- data/assets/javascripts/materialize/modal.js +55 -38
- data/assets/javascripts/materialize/parallax.js +61 -24
- data/assets/javascripts/materialize/pushpin.js +37 -21
- data/assets/javascripts/materialize/range.js +19 -21
- data/assets/javascripts/materialize/scrollspy.js +23 -23
- data/assets/javascripts/materialize/select.js +42 -36
- data/assets/javascripts/materialize/sidenav.js +34 -34
- data/assets/javascripts/materialize/slider.js +37 -39
- data/assets/javascripts/materialize/tabs.js +42 -49
- data/assets/javascripts/materialize/tapTarget.js +39 -22
- data/assets/javascripts/materialize/timepicker.js +579 -579
- data/assets/javascripts/materialize/tooltip.js +34 -31
- data/assets/stylesheets/materialize/components/_cards.scss +0 -2
- data/assets/stylesheets/materialize/components/_global.scss +4 -14
- data/assets/stylesheets/materialize/components/_typography.scss +0 -1
- data/assets/stylesheets/materialize/components/_variables.scss +1 -1
- data/assets/stylesheets/materialize/components/forms/_checkboxes.scss +0 -10
- data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
- data/lib/materialize-sass/version.rb +1 -1
- 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
|
-
|
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
|
-
|
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
|
-
|
52
|
-
|
53
|
-
this.el.M_Tabs = this;
|
50
|
+
_this.options = $.extend({}, Tabs.defaults, options);
|
54
51
|
|
55
52
|
// Setup
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
if (
|
63
|
-
|
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
|
-
|
62
|
+
_this._setupNormalTabs();
|
66
63
|
}
|
67
64
|
|
68
|
-
|
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
|
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
|
180
|
-
|
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
|
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
|
-
|
223
|
-
|
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
|
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 =
|
280
|
+
this._tabsCarousel = M.Carousel.init($tabsWrapper[0], {
|
283
281
|
fullWidth: true,
|
284
282
|
noWrap: true,
|
285
283
|
onCycleTo: function (item) {
|
286
|
-
var prevIndex =
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
if (typeof
|
293
|
-
|
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(
|
440
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
46
|
+
_this.options = $.extend({}, FeatureDiscovery.defaults, options);
|
39
47
|
|
40
|
-
|
48
|
+
_this.isOpen = false;
|
41
49
|
|
42
50
|
// setup
|
43
|
-
|
44
|
-
|
51
|
+
_this.$origin = $('#' + _this.$el.attr('data-target'));
|
52
|
+
_this._setup();
|
45
53
|
|
46
|
-
|
47
|
-
|
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(
|
315
|
-
|
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
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
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
|
-
|
31
|
-
|
32
|
-
|
36
|
+
var Timepicker = function (_Component) {
|
37
|
+
_inherits(Timepicker, _Component);
|
38
|
+
|
39
|
+
function Timepicker(el, options) {
|
40
|
+
_classCallCheck(this, Timepicker);
|
33
41
|
|
34
|
-
|
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
|
-
|
40
|
-
this.$el = $(el);
|
41
|
-
this.el.M_Timepicker = this;
|
44
|
+
_this.el.M_Timepicker = _this;
|
42
45
|
|
43
|
-
|
46
|
+
_this.options = $.extend({}, Timepicker.defaults, options);
|
44
47
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
48
|
+
_this.id = M.guid();
|
49
|
+
_this._insertHTMLIntoDOM();
|
50
|
+
_this._setupModal();
|
51
|
+
_this._setupVariables();
|
52
|
+
_this._setupEventHandlers();
|
50
53
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
+
_this._clockSetup();
|
55
|
+
_this._pickerSetup();
|
56
|
+
return _this;
|
57
|
+
}
|
54
58
|
|
55
|
-
|
56
|
-
|
59
|
+
_createClass(Timepicker, [{
|
60
|
+
key: 'destroy',
|
57
61
|
|
58
62
|
|
59
|
-
|
63
|
+
/**
|
60
64
|
* Teardown component
|
61
65
|
*/
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
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
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
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
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
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
|
-
|
583
|
-
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
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
|
-
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
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);
|