materialize-sass 1.0.0.alpha4 → 1.0.0.beta
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 +4 -4
- data/README.md +3 -3
- data/Rakefile +1 -2
- data/assets/javascripts/materialize.js +881 -608
- data/assets/javascripts/materialize/autocomplete.js +36 -16
- data/assets/javascripts/materialize/carousel.js +42 -34
- data/assets/javascripts/materialize/chips.js +3 -1
- data/assets/javascripts/materialize/collapsible.js +31 -8
- data/assets/javascripts/materialize/datepicker.js +38 -29
- data/assets/javascripts/materialize/dropdown.js +112 -24
- data/assets/javascripts/materialize/forms.js +2 -2
- data/assets/javascripts/materialize/global.js +35 -0
- data/assets/javascripts/materialize/modal.js +26 -1
- data/assets/javascripts/materialize/select.js +10 -0
- data/assets/javascripts/materialize/sidenav.js +30 -9
- data/assets/javascripts/materialize/slider.js +3 -1
- data/assets/javascripts/materialize/tabs.js +6 -0
- data/assets/javascripts/materialize/tapTarget.js +19 -19
- data/assets/javascripts/materialize/timepicker.js +584 -579
- data/assets/javascripts/materialize/tooltip.js +31 -12
- data/assets/stylesheets/materialize/components/_cards.scss +2 -1
- data/assets/stylesheets/materialize/components/_datepicker.scss +1 -0
- data/assets/stylesheets/materialize/components/_tabs.scss +7 -1
- data/assets/stylesheets/materialize/components/forms/_input-fields.scss +7 -5
- data/assets/stylesheets/materialize/components/forms/_select.scss +0 -14
- data/lib/materialize-sass/version.rb +1 -1
- metadata +2 -2
@@ -132,8 +132,19 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
132
132
|
key: '_setupDropdown',
|
133
133
|
value: function _setupDropdown() {
|
134
134
|
this.container = document.createElement('ul');
|
135
|
+
this.container.id = 'autocomplete-options-' + M.guid();
|
135
136
|
$(this.container).addClass('autocomplete-content dropdown-content');
|
136
137
|
this.$inputField.append(this.container);
|
138
|
+
this.el.setAttribute('data-target', this.container.id);
|
139
|
+
|
140
|
+
this.dropdown = M.Dropdown.init(this.el, {
|
141
|
+
autoFocus: false,
|
142
|
+
closeOnClick: false,
|
143
|
+
coverTrigger: false
|
144
|
+
});
|
145
|
+
|
146
|
+
// Sketchy removal of dropdown click handler
|
147
|
+
this.el.removeEventListener('click', this.dropdown._handleClickBound);
|
137
148
|
}
|
138
149
|
|
139
150
|
/**
|
@@ -153,7 +164,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
153
164
|
}, {
|
154
165
|
key: '_handleInputBlur',
|
155
166
|
value: function _handleInputBlur() {
|
156
|
-
this.
|
167
|
+
this.dropdown.close();
|
168
|
+
this._resetAutocomplete();
|
157
169
|
}
|
158
170
|
|
159
171
|
/**
|
@@ -164,6 +176,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
164
176
|
}, {
|
165
177
|
key: '_handleInputKeyupAndFocus',
|
166
178
|
value: function _handleInputKeyupAndFocus(e) {
|
179
|
+
var _this2 = this;
|
180
|
+
|
167
181
|
if (e.type === 'keyup') {
|
168
182
|
Autocomplete._keydown = false;
|
169
183
|
}
|
@@ -178,12 +192,24 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
178
192
|
|
179
193
|
// Check if the input isn't empty
|
180
194
|
if (this.oldVal !== val) {
|
181
|
-
this.
|
195
|
+
this._resetAutocomplete();
|
182
196
|
|
183
197
|
if (val.length >= this.options.minLength) {
|
184
198
|
this.isOpen = true;
|
185
199
|
this._renderDropdown(this.options.data, val);
|
186
200
|
}
|
201
|
+
|
202
|
+
// Open dropdown
|
203
|
+
if (!this.dropdown.isOpen) {
|
204
|
+
// Timeout to prevent dropdown temp doc click handler from firing
|
205
|
+
setTimeout(function () {
|
206
|
+
_this2.dropdown.open();
|
207
|
+
}, 100);
|
208
|
+
|
209
|
+
// Recalculate dropdown when its already open
|
210
|
+
} else {
|
211
|
+
this.dropdown.recalculateDimensions();
|
212
|
+
}
|
187
213
|
}
|
188
214
|
|
189
215
|
// Update oldVal
|
@@ -278,18 +304,15 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
278
304
|
}
|
279
305
|
|
280
306
|
/**
|
281
|
-
*
|
307
|
+
* Reset autocomplete elements
|
282
308
|
*/
|
283
309
|
|
284
310
|
}, {
|
285
|
-
key: '
|
286
|
-
value: function
|
311
|
+
key: '_resetAutocomplete',
|
312
|
+
value: function _resetAutocomplete() {
|
287
313
|
$(this.container).empty();
|
288
314
|
this._resetCurrentElement();
|
289
315
|
this.oldVal = null;
|
290
|
-
$(this.container).css({
|
291
|
-
display: ''
|
292
|
-
});
|
293
316
|
this.isOpen = false;
|
294
317
|
}
|
295
318
|
|
@@ -304,7 +327,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
304
327
|
var text = el.text().trim();
|
305
328
|
this.el.value = text;
|
306
329
|
this.$el.trigger('change');
|
307
|
-
this.
|
330
|
+
this._resetAutocomplete();
|
331
|
+
this.dropdown.close();
|
308
332
|
|
309
333
|
// Handle onAutocomplete callback.
|
310
334
|
if (typeof this.options.onAutocomplete === 'function') {
|
@@ -321,9 +345,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
321
345
|
}, {
|
322
346
|
key: '_renderDropdown',
|
323
347
|
value: function _renderDropdown(data, val) {
|
324
|
-
var
|
348
|
+
var _this3 = this;
|
325
349
|
|
326
|
-
this.
|
350
|
+
this._resetAutocomplete();
|
327
351
|
|
328
352
|
var matchingData = [];
|
329
353
|
|
@@ -347,14 +371,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
347
371
|
|
348
372
|
// Sort
|
349
373
|
var sortFunctionBound = function (a, b) {
|
350
|
-
return
|
374
|
+
return _this3.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
|
351
375
|
};
|
352
376
|
matchingData.sort(sortFunctionBound);
|
353
377
|
|
354
|
-
$(this.container).css({
|
355
|
-
display: 'block'
|
356
|
-
});
|
357
|
-
|
358
378
|
// Render
|
359
379
|
for (var i = 0; i < matchingData.length; i++) {
|
360
380
|
var _entry = matchingData[i];
|
@@ -16,6 +16,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
16
16
|
dist: -100, // zoom scale TODO: make this more intuitive as an option
|
17
17
|
shift: 0, // spacing for center image
|
18
18
|
padding: 0, // Padding between non center items
|
19
|
+
numVisible: 5, // Number of visible items in carousel
|
19
20
|
fullWidth: false, // Change to full width styles
|
20
21
|
indicators: false, // Toggle indicators
|
21
22
|
noWrap: false, // Don't wrap around and cycle through items.
|
@@ -48,8 +49,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
48
49
|
* @member Carousel#options
|
49
50
|
* @prop {Number} duration
|
50
51
|
* @prop {Number} dist
|
51
|
-
* @prop {
|
52
|
-
* @prop {
|
52
|
+
* @prop {Number} shift
|
53
|
+
* @prop {Number} padding
|
54
|
+
* @prop {Number} numVisible
|
53
55
|
* @prop {Boolean} fullWidth
|
54
56
|
* @prop {Boolean} indicators
|
55
57
|
* @prop {Boolean} noWrap
|
@@ -102,6 +104,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
102
104
|
}
|
103
105
|
_this.count = _this.images.length;
|
104
106
|
|
107
|
+
// Cap numVisible at count
|
108
|
+
_this.options.numVisible = Math.min(_this.count, _this.options.numVisible);
|
109
|
+
|
105
110
|
// Setup cross browser string
|
106
111
|
_this.xform = 'transform';
|
107
112
|
['webkit', 'Moz', 'O', 'ms'].every(function (prefix) {
|
@@ -526,8 +531,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
526
531
|
el = void 0,
|
527
532
|
alignment = void 0,
|
528
533
|
zTranslation = void 0,
|
529
|
-
tweenedOpacity = void 0
|
534
|
+
tweenedOpacity = void 0,
|
535
|
+
centerTweenedOpacity = void 0;
|
530
536
|
var lastCenter = this.center;
|
537
|
+
var numVisibleOffset = 1 / this.options.numVisible;
|
531
538
|
|
532
539
|
this.offset = typeof x === 'number' ? x : this.offset;
|
533
540
|
this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
|
@@ -536,11 +543,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
536
543
|
tween = -dir * delta * 2 / this.dim;
|
537
544
|
half = this.count >> 1;
|
538
545
|
|
539
|
-
if (
|
546
|
+
if (this.options.fullWidth) {
|
547
|
+
alignment = 'translateX(0)';
|
548
|
+
centerTweenedOpacity = 1;
|
549
|
+
} else {
|
540
550
|
alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
|
541
551
|
alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
|
542
|
-
|
543
|
-
alignment = 'translateX(0)';
|
552
|
+
centerTweenedOpacity = 1 - numVisibleOffset * tween;
|
544
553
|
}
|
545
554
|
|
546
555
|
// Set indicator active
|
@@ -563,15 +572,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
563
572
|
this.$el.find('.carousel-item').removeClass('active');
|
564
573
|
el.classList.add('active');
|
565
574
|
}
|
566
|
-
|
567
|
-
el
|
568
|
-
if (this.options.fullWidth) {
|
569
|
-
tweenedOpacity = 1;
|
570
|
-
} else {
|
571
|
-
tweenedOpacity = 1 - 0.2 * tween;
|
572
|
-
}
|
573
|
-
el.style.opacity = tweenedOpacity;
|
574
|
-
el.style.visibility = 'visible';
|
575
|
+
var transformString = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween * i + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
|
576
|
+
this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
|
575
577
|
}
|
576
578
|
|
577
579
|
for (i = 1; i <= half; ++i) {
|
@@ -581,15 +583,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
581
583
|
tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
|
582
584
|
} else {
|
583
585
|
zTranslation = this.options.dist * (i * 2 + tween * dir);
|
584
|
-
tweenedOpacity = 1 -
|
586
|
+
tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
|
585
587
|
}
|
586
588
|
// Don't show wrapped items.
|
587
589
|
if (!this.noWrap || this.center + i < this.count) {
|
588
590
|
el = this.images[this._wrap(this.center + i)];
|
589
|
-
|
590
|
-
el
|
591
|
-
el.style.opacity = tweenedOpacity;
|
592
|
-
el.style.visibility = 'visible';
|
591
|
+
var _transformString = alignment + ' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
|
592
|
+
this._updateItemStyle(el, tweenedOpacity, -i, _transformString);
|
593
593
|
}
|
594
594
|
|
595
595
|
// left side
|
@@ -598,15 +598,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
598
598
|
tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
|
599
599
|
} else {
|
600
600
|
zTranslation = this.options.dist * (i * 2 - tween * dir);
|
601
|
-
tweenedOpacity = 1 -
|
601
|
+
tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
|
602
602
|
}
|
603
603
|
// Don't show wrapped items.
|
604
604
|
if (!this.noWrap || this.center - i >= 0) {
|
605
605
|
el = this.images[this._wrap(this.center - i)];
|
606
|
-
|
607
|
-
el
|
608
|
-
el.style.opacity = tweenedOpacity;
|
609
|
-
el.style.visibility = 'visible';
|
606
|
+
var _transformString2 = alignment + ' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
|
607
|
+
this._updateItemStyle(el, tweenedOpacity, -i, _transformString2);
|
610
608
|
}
|
611
609
|
}
|
612
610
|
|
@@ -614,15 +612,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
614
612
|
// Don't show wrapped items.
|
615
613
|
if (!this.noWrap || this.center >= 0 && this.center < this.count) {
|
616
614
|
el = this.images[this._wrap(this.center)];
|
617
|
-
|
618
|
-
el
|
619
|
-
if (this.options.fullWidth) {
|
620
|
-
tweenedOpacity = 1;
|
621
|
-
} else {
|
622
|
-
tweenedOpacity = 1 - 0.2 * tween;
|
623
|
-
}
|
624
|
-
el.style.opacity = tweenedOpacity;
|
625
|
-
el.style.visibility = 'visible';
|
615
|
+
var _transformString3 = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
|
616
|
+
this._updateItemStyle(el, centerTweenedOpacity, 0, _transformString3);
|
626
617
|
}
|
627
618
|
|
628
619
|
// onCycleTo callback
|
@@ -638,6 +629,23 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
638
629
|
}
|
639
630
|
}
|
640
631
|
|
632
|
+
/**
|
633
|
+
* Cycle to target
|
634
|
+
* @param {Element} el
|
635
|
+
* @param {Number} opacity
|
636
|
+
* @param {Number} zIndex
|
637
|
+
* @param {String} transform
|
638
|
+
*/
|
639
|
+
|
640
|
+
}, {
|
641
|
+
key: '_updateItemStyle',
|
642
|
+
value: function _updateItemStyle(el, opacity, zIndex, transform) {
|
643
|
+
el.style[this.xform] = transform;
|
644
|
+
el.style.zIndex = zIndex;
|
645
|
+
el.style.opacity = opacity;
|
646
|
+
el.style.visibility = 'visible';
|
647
|
+
}
|
648
|
+
|
641
649
|
/**
|
642
650
|
* Cycle to target
|
643
651
|
* @param {Number} n
|
@@ -468,7 +468,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
468
468
|
var index = currChips._selectedChip.index();
|
469
469
|
currChips.deleteChip(index);
|
470
470
|
currChips._selectedChip = null;
|
471
|
-
|
471
|
+
|
472
|
+
// Make sure selectIndex doesn't go negative
|
473
|
+
selectIndex = Math.max(index - 1, 0);
|
472
474
|
}
|
473
475
|
|
474
476
|
if (currChips.chipsData.length) {
|
@@ -55,6 +55,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
55
55
|
*/
|
56
56
|
_this.options = $.extend({}, Collapsible.defaults, options);
|
57
57
|
|
58
|
+
// Setup tab indices
|
59
|
+
_this.$headers = _this.$el.children('li').children('.collapsible-header');
|
60
|
+
_this.$headers.attr('tabindex', 0);
|
61
|
+
|
58
62
|
_this._setupEventHandlers();
|
59
63
|
|
60
64
|
// Open first active
|
@@ -88,8 +92,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
88
92
|
}, {
|
89
93
|
key: '_setupEventHandlers',
|
90
94
|
value: function _setupEventHandlers() {
|
95
|
+
var _this2 = this;
|
96
|
+
|
91
97
|
this._handleCollapsibleClickBound = this._handleCollapsibleClick.bind(this);
|
98
|
+
this._handleCollapsibleKeydownBound = this._handleCollapsibleKeydown.bind(this);
|
92
99
|
this.el.addEventListener('click', this._handleCollapsibleClickBound);
|
100
|
+
this.$headers.each(function (header) {
|
101
|
+
header.addEventListener('keydown', _this2._handleCollapsibleKeydownBound);
|
102
|
+
});
|
93
103
|
}
|
94
104
|
|
95
105
|
/**
|
@@ -128,6 +138,19 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
128
138
|
}
|
129
139
|
}
|
130
140
|
|
141
|
+
/**
|
142
|
+
* Handle Collapsible Keydown
|
143
|
+
* @param {Event} e
|
144
|
+
*/
|
145
|
+
|
146
|
+
}, {
|
147
|
+
key: '_handleCollapsibleKeydown',
|
148
|
+
value: function _handleCollapsibleKeydown(e) {
|
149
|
+
if (e.keyCode === 13) {
|
150
|
+
this._handleCollapsibleClickBound(e);
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
131
154
|
/**
|
132
155
|
* Animate in collapsible slide
|
133
156
|
* @param {Number} index - 0th index of slide
|
@@ -136,7 +159,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
136
159
|
}, {
|
137
160
|
key: '_animateIn',
|
138
161
|
value: function _animateIn(index) {
|
139
|
-
var
|
162
|
+
var _this3 = this;
|
140
163
|
|
141
164
|
var $collapsibleLi = this.$el.children('li').eq(index);
|
142
165
|
if ($collapsibleLi.length) {
|
@@ -175,8 +198,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
175
198
|
});
|
176
199
|
|
177
200
|
// onOpenEnd callback
|
178
|
-
if (typeof
|
179
|
-
|
201
|
+
if (typeof _this3.options.onOpenEnd === 'function') {
|
202
|
+
_this3.options.onOpenEnd.call(_this3, $collapsibleLi[0]);
|
180
203
|
}
|
181
204
|
}
|
182
205
|
});
|
@@ -191,7 +214,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
191
214
|
}, {
|
192
215
|
key: '_animateOut',
|
193
216
|
value: function _animateOut(index) {
|
194
|
-
var
|
217
|
+
var _this4 = this;
|
195
218
|
|
196
219
|
var $collapsibleLi = this.$el.children('li').eq(index);
|
197
220
|
if ($collapsibleLi.length) {
|
@@ -214,8 +237,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
214
237
|
});
|
215
238
|
|
216
239
|
// onCloseEnd callback
|
217
|
-
if (typeof
|
218
|
-
|
240
|
+
if (typeof _this4.options.onCloseEnd === 'function') {
|
241
|
+
_this4.options.onCloseEnd.call(_this4, $collapsibleLi[0]);
|
219
242
|
}
|
220
243
|
}
|
221
244
|
});
|
@@ -230,7 +253,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
230
253
|
}, {
|
231
254
|
key: 'open',
|
232
255
|
value: function open(index) {
|
233
|
-
var
|
256
|
+
var _this5 = this;
|
234
257
|
|
235
258
|
var $collapsibleLi = this.$el.children('li').eq(index);
|
236
259
|
if ($collapsibleLi.length && !$collapsibleLi[0].classList.contains('active')) {
|
@@ -246,7 +269,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
246
269
|
var $activeLis = this.$el.children('li.active');
|
247
270
|
$activeLis.each(function (el) {
|
248
271
|
var index = $collapsibleLis.index($(el));
|
249
|
-
|
272
|
+
_this5.close(index);
|
250
273
|
});
|
251
274
|
}
|
252
275
|
|
@@ -60,10 +60,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
60
60
|
// Specify a DOM element to render the calendar in
|
61
61
|
container: null,
|
62
62
|
|
63
|
+
// Show clear button
|
64
|
+
showClearBtn: false,
|
65
|
+
|
63
66
|
// internationalization
|
64
67
|
i18n: {
|
68
|
+
cancel: 'Cancel',
|
65
69
|
clear: 'Clear',
|
66
|
-
today: 'Today',
|
67
70
|
done: 'Ok',
|
68
71
|
previousMonth: '‹',
|
69
72
|
nextMonth: '›',
|
@@ -161,18 +164,34 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
161
164
|
this._removeEventHandlers();
|
162
165
|
this.modal.destroy();
|
163
166
|
$(this.modalEl).remove();
|
167
|
+
this.destroySelects();
|
164
168
|
this.el.M_Datepicker = undefined;
|
165
169
|
}
|
170
|
+
}, {
|
171
|
+
key: 'destroySelects',
|
172
|
+
value: function destroySelects() {
|
173
|
+
var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
|
174
|
+
if (oldYearSelect) {
|
175
|
+
M.FormSelect.getInstance(oldYearSelect).destroy();
|
176
|
+
}
|
177
|
+
var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
|
178
|
+
if (oldMonthSelect) {
|
179
|
+
M.FormSelect.getInstance(oldMonthSelect).destroy();
|
180
|
+
}
|
181
|
+
}
|
166
182
|
}, {
|
167
183
|
key: '_insertHTMLIntoDOM',
|
168
184
|
value: function _insertHTMLIntoDOM() {
|
169
|
-
|
170
|
-
|
185
|
+
if (this.options.showClearBtn) {
|
186
|
+
$(this.clearBtn).css({ visibility: '' });
|
187
|
+
this.clearBtn.innerHTML = this.options.i18n.clear;
|
188
|
+
}
|
189
|
+
|
171
190
|
this.doneBtn.innerHTML = this.options.i18n.done;
|
191
|
+
this.cancelBtn.innerHTML = this.options.i18n.cancel;
|
172
192
|
|
173
|
-
|
174
|
-
|
175
|
-
this.$modalEl.appendTo(containerEl);
|
193
|
+
if (this.options.container) {
|
194
|
+
this.$modalEl.appendTo(this.options.container);
|
176
195
|
} else {
|
177
196
|
this.$modalEl.insertBefore(this.el);
|
178
197
|
}
|
@@ -579,15 +598,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
579
598
|
html += this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
|
580
599
|
}
|
581
600
|
|
582
|
-
|
583
|
-
var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
|
584
|
-
if (oldYearSelect) {
|
585
|
-
M.FormSelect.getInstance(oldYearSelect).destroy();
|
586
|
-
}
|
587
|
-
var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
|
588
|
-
if (oldMonthSelect) {
|
589
|
-
M.FormSelect.getInstance(oldMonthSelect).destroy();
|
590
|
-
}
|
601
|
+
this.destroySelects();
|
591
602
|
|
592
603
|
this.calendarEl.innerHTML = html;
|
593
604
|
|
@@ -618,17 +629,20 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
618
629
|
this._handleInputChangeBound = this._handleInputChange.bind(this);
|
619
630
|
this._handleCalendarClickBound = this._handleCalendarClick.bind(this);
|
620
631
|
this._finishSelectionBound = this._finishSelection.bind(this);
|
621
|
-
this._handleTodayClickBound = this._handleTodayClick.bind(this);
|
622
|
-
this._handleClearClickBound = this._handleClearClick.bind(this);
|
623
632
|
this._handleMonthChange = this._handleMonthChange.bind(this);
|
633
|
+
this._closeBound = this.close.bind(this);
|
624
634
|
|
625
635
|
this.el.addEventListener('click', this._handleInputClickBound);
|
626
636
|
this.el.addEventListener('keydown', this._handleInputKeydownBound);
|
627
637
|
this.el.addEventListener('change', this._handleInputChangeBound);
|
628
638
|
this.calendarEl.addEventListener('click', this._handleCalendarClickBound);
|
629
639
|
this.doneBtn.addEventListener('click', this._finishSelectionBound);
|
630
|
-
this.
|
631
|
-
|
640
|
+
this.cancelBtn.addEventListener('click', this._closeBound);
|
641
|
+
|
642
|
+
if (this.options.showClearBtn) {
|
643
|
+
this._handleClearClickBound = this._handleClearClick.bind(this);
|
644
|
+
this.clearBtn.addEventListener('click', this._handleClearClickBound);
|
645
|
+
}
|
632
646
|
}
|
633
647
|
}, {
|
634
648
|
key: '_setupVariables',
|
@@ -642,9 +656,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
642
656
|
|
643
657
|
this.yearTextEl = this.modalEl.querySelector('.year-text');
|
644
658
|
this.dateTextEl = this.modalEl.querySelector('.date-text');
|
645
|
-
|
646
|
-
|
659
|
+
if (this.options.showClearBtn) {
|
660
|
+
this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
|
661
|
+
}
|
647
662
|
this.doneBtn = this.modalEl.querySelector('.datepicker-done');
|
663
|
+
this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
|
648
664
|
|
649
665
|
this.formats = {
|
650
666
|
|
@@ -737,13 +753,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
737
753
|
// this._c = true;
|
738
754
|
// }
|
739
755
|
}
|
740
|
-
}, {
|
741
|
-
key: '_handleTodayClick',
|
742
|
-
value: function _handleTodayClick() {
|
743
|
-
this.date = new Date();
|
744
|
-
this.setInputValue();
|
745
|
-
this.close();
|
746
|
-
}
|
747
756
|
}, {
|
748
757
|
key: '_handleClearClick',
|
749
758
|
value: function _handleClearClick() {
|
@@ -933,7 +942,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|
933
942
|
return Datepicker;
|
934
943
|
}(Component);
|
935
944
|
|
936
|
-
Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-
|
945
|
+
Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
|
937
946
|
|
938
947
|
M.Datepicker = Datepicker;
|
939
948
|
|