materialize-sass 0.99.0 → 0.100.0
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/Rakefile +2 -2
- data/app/assets/javascripts/materialize.js +6015 -5060
- data/app/assets/javascripts/materialize/animation.js +4 -5
- data/app/assets/javascripts/materialize/buttons.js +24 -38
- data/app/assets/javascripts/materialize/cards.js +13 -21
- data/app/assets/javascripts/materialize/carousel.js +122 -110
- data/app/assets/javascripts/materialize/character_counter.js +14 -22
- data/app/assets/javascripts/materialize/chips.js +41 -44
- data/app/assets/javascripts/materialize/collapsible.js +41 -46
- data/app/assets/javascripts/materialize/date_picker/picker.date.js +965 -1167
- data/app/assets/javascripts/materialize/date_picker/picker.js +546 -634
- data/app/assets/javascripts/materialize/date_picker/picker.time.js +166 -212
- data/app/assets/javascripts/materialize/dropdown.js +53 -68
- data/app/assets/javascripts/materialize/extras/nouislider.js +3 -1
- data/app/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
- data/app/assets/javascripts/materialize/forms.js +156 -154
- data/app/assets/javascripts/materialize/global.js +34 -43
- data/app/assets/javascripts/materialize/hammer.min.js +424 -1
- data/app/assets/javascripts/materialize/initial.js +3 -3
- data/app/assets/javascripts/materialize/jquery.easing.1.4.js +120 -142
- data/app/assets/javascripts/materialize/jquery.hammer.js +9 -9
- data/app/assets/javascripts/materialize/materialbox.js +81 -107
- data/app/assets/javascripts/materialize/modal.js +373 -162
- data/app/assets/javascripts/materialize/parallax.js +11 -15
- data/app/assets/javascripts/materialize/pushpin.js +2 -5
- data/app/assets/javascripts/materialize/scrollFire.js +9 -11
- data/app/assets/javascripts/materialize/scrollspy.js +84 -92
- data/app/assets/javascripts/materialize/sideNav.js +128 -139
- data/app/assets/javascripts/materialize/slider.js +83 -112
- data/app/assets/javascripts/materialize/tabs.js +196 -196
- data/app/assets/javascripts/materialize/tapTarget.js +170 -173
- data/app/assets/javascripts/materialize/toasts.js +330 -112
- data/app/assets/javascripts/materialize/tooltip.js +134 -145
- data/app/assets/javascripts/materialize/transitions.js +43 -49
- data/app/assets/javascripts/materialize/velocity.min.js +623 -2
- data/app/assets/javascripts/materialize/waves.js +42 -47
- data/app/assets/stylesheets/materialize/components/_buttons.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_carousel.scss +4 -5
- data/app/assets/stylesheets/materialize/components/_chips.scss +1 -0
- data/app/assets/stylesheets/materialize/components/_collapsible.scss +4 -7
- data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_global.scss +8 -14
- data/app/assets/stylesheets/materialize/components/_navbar.scss +0 -1
- data/app/assets/stylesheets/materialize/components/_tabs.scss +1 -7
- data/app/assets/stylesheets/materialize/components/_toast.scss +6 -12
- data/app/assets/stylesheets/materialize/components/_variables.scss +55 -43
- data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +1 -0
- data/app/assets/stylesheets/materialize/components/forms/_checkboxes.scss +2 -12
- data/app/assets/stylesheets/materialize/components/forms/_file-input.scss +6 -0
- data/app/assets/stylesheets/materialize/components/forms/_input-fields.scss +67 -37
- data/app/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +1 -3
- data/app/assets/stylesheets/materialize/components/forms/_select.scss +72 -11
- data/app/assets/stylesheets/materialize/components/forms/_switches.scss +2 -4
- data/app/assets/stylesheets/materialize/extras/nouislider.css +8 -1
- data/lib/materialize-sass/version.rb +1 -1
- metadata +2 -5
- data/app/assets/javascripts/materialize/init.js +0 -214
- data/app/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
- data/app/assets/javascripts/materialize/prism.js +0 -8
@@ -7,37 +7,33 @@
|
|
7
7
|
* Copyright 2015 Ching Yaw Hao.
|
8
8
|
*/
|
9
9
|
|
10
|
-
|
10
|
+
(function () {
|
11
11
|
var $ = window.jQuery,
|
12
|
-
|
13
|
-
|
12
|
+
$win = $(window),
|
13
|
+
$doc = $(document);
|
14
14
|
|
15
15
|
// Can I use inline svg ?
|
16
16
|
var svgNS = 'http://www.w3.org/2000/svg',
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
17
|
+
svgSupported = 'SVGAngle' in window && function () {
|
18
|
+
var supported,
|
19
|
+
el = document.createElement('div');
|
20
|
+
el.innerHTML = '<svg/>';
|
21
|
+
supported = (el.firstChild && el.firstChild.namespaceURI) == svgNS;
|
22
|
+
el.innerHTML = '';
|
23
|
+
return supported;
|
24
|
+
}();
|
25
25
|
|
26
26
|
// Can I use transition ?
|
27
|
-
var transitionSupported =
|
27
|
+
var transitionSupported = function () {
|
28
28
|
var style = document.createElement('div').style;
|
29
|
-
return 'transition' in style ||
|
30
|
-
|
31
|
-
'MozTransition' in style ||
|
32
|
-
'msTransition' in style ||
|
33
|
-
'OTransition' in style;
|
34
|
-
})();
|
29
|
+
return 'transition' in style || 'WebkitTransition' in style || 'MozTransition' in style || 'msTransition' in style || 'OTransition' in style;
|
30
|
+
}();
|
35
31
|
|
36
32
|
// Listen touch events in touch screen device, instead of mouse events in desktop.
|
37
33
|
var touchSupported = 'ontouchstart' in window,
|
38
|
-
|
39
|
-
|
40
|
-
|
34
|
+
mousedownEvent = 'mousedown' + (touchSupported ? ' touchstart' : ''),
|
35
|
+
mousemoveEvent = 'mousemove.clockpicker' + (touchSupported ? ' touchmove.clockpicker' : ''),
|
36
|
+
mouseupEvent = 'mouseup.clockpicker' + (touchSupported ? ' touchend.clockpicker' : '');
|
41
37
|
|
42
38
|
// Vibrate the device if supported
|
43
39
|
var vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
|
@@ -59,64 +55,29 @@
|
|
59
55
|
|
60
56
|
// Clock size
|
61
57
|
var dialRadius = 135,
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
58
|
+
outerRadius = 105,
|
59
|
+
|
60
|
+
// innerRadius = 80 on 12 hour clock
|
61
|
+
innerRadius = 80,
|
62
|
+
tickRadius = 20,
|
63
|
+
diameter = dialRadius * 2,
|
64
|
+
duration = transitionSupported ? 350 : 1;
|
68
65
|
|
69
66
|
// Popover template
|
70
|
-
var tpl = [
|
71
|
-
'<div class="clockpicker picker">',
|
72
|
-
'<div class="picker__holder">',
|
73
|
-
'<div class="picker__frame">',
|
74
|
-
'<div class="picker__wrap">',
|
75
|
-
'<div class="picker__box">',
|
76
|
-
'<div class="picker__date-display">',
|
77
|
-
'<div class="clockpicker-display">',
|
78
|
-
'<div class="clockpicker-display-column">',
|
79
|
-
'<span class="clockpicker-span-hours text-primary"></span>',
|
80
|
-
':',
|
81
|
-
'<span class="clockpicker-span-minutes"></span>',
|
82
|
-
'</div>',
|
83
|
-
'<div class="clockpicker-display-column clockpicker-display-am-pm">',
|
84
|
-
'<div class="clockpicker-span-am-pm"></div>',
|
85
|
-
'</div>',
|
86
|
-
'</div>',
|
87
|
-
'</div>',
|
88
|
-
'<div class="picker__container__wrapper">',
|
89
|
-
'<div class="picker__calendar-container">',
|
90
|
-
'<div class="clockpicker-plate">',
|
91
|
-
'<div class="clockpicker-canvas"></div>',
|
92
|
-
'<div class="clockpicker-dial clockpicker-hours"></div>',
|
93
|
-
'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
|
94
|
-
'</div>',
|
95
|
-
'<div class="clockpicker-am-pm-block">',
|
96
|
-
'</div>',
|
97
|
-
'</div>',
|
98
|
-
'<div class="picker__footer">',
|
99
|
-
'</div>',
|
100
|
-
'</div>',
|
101
|
-
'</div>',
|
102
|
-
'</div>',
|
103
|
-
'</div>',
|
104
|
-
'</div>',
|
105
|
-
'</div>'
|
106
|
-
].join('');
|
67
|
+
var tpl = ['<div class="clockpicker picker">', '<div class="picker__holder">', '<div class="picker__frame">', '<div class="picker__wrap">', '<div class="picker__box">', '<div class="picker__date-display">', '<div class="clockpicker-display">', '<div class="clockpicker-display-column">', '<span class="clockpicker-span-hours text-primary"></span>', ':', '<span class="clockpicker-span-minutes"></span>', '</div>', '<div class="clockpicker-display-column clockpicker-display-am-pm">', '<div class="clockpicker-span-am-pm"></div>', '</div>', '</div>', '</div>', '<div class="picker__container__wrapper">', '<div class="picker__calendar-container">', '<div class="clockpicker-plate">', '<div class="clockpicker-canvas"></div>', '<div class="clockpicker-dial clockpicker-hours"></div>', '<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>', '</div>', '<div class="clockpicker-am-pm-block">', '</div>', '</div>', '<div class="picker__footer">', '</div>', '</div>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
|
107
68
|
|
108
69
|
// ClockPicker
|
109
70
|
function ClockPicker(element, options) {
|
110
71
|
var popover = $(tpl),
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
72
|
+
plate = popover.find('.clockpicker-plate'),
|
73
|
+
holder = popover.find('.picker__holder'),
|
74
|
+
hoursView = popover.find('.clockpicker-hours'),
|
75
|
+
minutesView = popover.find('.clockpicker-minutes'),
|
76
|
+
amPmBlock = popover.find('.clockpicker-am-pm-block'),
|
77
|
+
isInput = element.prop('tagName') === 'INPUT',
|
78
|
+
input = isInput ? element : element.find('input'),
|
79
|
+
label = $("label[for=" + input.attr("id") + "]"),
|
80
|
+
self = this;
|
120
81
|
|
121
82
|
this.id = uniqueId('cp');
|
122
83
|
this.element = element;
|
@@ -145,15 +106,14 @@
|
|
145
106
|
this.spanAmPm.empty();
|
146
107
|
$('<div id="click-am">AM</div>').appendTo(this.spanAmPm);
|
147
108
|
$('<div id="click-pm">PM</div>').appendTo(this.spanAmPm);
|
148
|
-
}
|
149
|
-
else {
|
109
|
+
} else {
|
150
110
|
this.spanAmPm.empty();
|
151
|
-
$('<div id="click-am">AM</div>').on("click", function() {
|
111
|
+
$('<div id="click-am">AM</div>').on("click", function () {
|
152
112
|
self.spanAmPm.children('#click-am').addClass("text-primary");
|
153
113
|
self.spanAmPm.children('#click-pm').removeClass("text-primary");
|
154
114
|
self.amOrPm = "AM";
|
155
115
|
}).appendTo(this.spanAmPm);
|
156
|
-
$('<div id="click-pm">PM</div>').on("click", function() {
|
116
|
+
$('<div id="click-pm">PM</div>').on("click", function () {
|
157
117
|
self.spanAmPm.children('#click-pm').addClass("text-primary");
|
158
118
|
self.spanAmPm.children('#click-am').removeClass("text-primary");
|
159
119
|
self.amOrPm = 'PM';
|
@@ -162,9 +122,9 @@
|
|
162
122
|
}
|
163
123
|
|
164
124
|
// Add buttons to footer
|
165
|
-
$('<button type="button" class="btn-flat picker__clear" tabindex="' + (options.twelvehour? '3' : '1') + '">' + options.cleartext + '</button>').click($.proxy(this.clear, this)).appendTo(this.footer);
|
166
|
-
$('<button type="button" class="btn-flat picker__close" tabindex="' + (options.twelvehour? '3' : '1') + '">' + options.canceltext + '</button>').click($.proxy(this.hide, this)).appendTo(this.footer);
|
167
|
-
$('<button type="button" class="btn-flat picker__close" tabindex="' + (options.twelvehour? '3' : '1') + '">' + options.donetext + '</button>').click($.proxy(this.done, this)).appendTo(this.footer);
|
125
|
+
$('<button type="button" class="btn-flat picker__clear" tabindex="' + (options.twelvehour ? '3' : '1') + '">' + options.cleartext + '</button>').click($.proxy(this.clear, this)).appendTo(this.footer);
|
126
|
+
$('<button type="button" class="btn-flat picker__close" tabindex="' + (options.twelvehour ? '3' : '1') + '">' + options.canceltext + '</button>').click($.proxy(this.hide, this)).appendTo(this.footer);
|
127
|
+
$('<button type="button" class="btn-flat picker__close" tabindex="' + (options.twelvehour ? '3' : '1') + '">' + options.donetext + '</button>').click($.proxy(this.done, this)).appendTo(this.footer);
|
168
128
|
|
169
129
|
this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
|
170
130
|
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
|
@@ -174,7 +134,10 @@
|
|
174
134
|
|
175
135
|
// Build ticks
|
176
136
|
var tickTpl = $('<div class="clockpicker-tick"></div>'),
|
177
|
-
|
137
|
+
i,
|
138
|
+
tick,
|
139
|
+
radian,
|
140
|
+
radius;
|
178
141
|
|
179
142
|
// Hours view
|
180
143
|
if (options.twelvehour) {
|
@@ -220,31 +183,31 @@
|
|
220
183
|
}
|
221
184
|
|
222
185
|
// Clicking on minutes view space
|
223
|
-
plate.on(mousedownEvent, function(e) {
|
186
|
+
plate.on(mousedownEvent, function (e) {
|
224
187
|
if ($(e.target).closest('.clockpicker-tick').length === 0) {
|
225
188
|
mousedown(e, true);
|
226
|
-
|
189
|
+
}
|
227
190
|
});
|
228
191
|
|
229
192
|
// Mousedown or touchstart
|
230
193
|
function mousedown(e, space) {
|
231
194
|
var offset = plate.offset(),
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
195
|
+
isTouch = /^touch/.test(e.type),
|
196
|
+
x0 = offset.left + dialRadius,
|
197
|
+
y0 = offset.top + dialRadius,
|
198
|
+
dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
|
199
|
+
dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
|
200
|
+
z = Math.sqrt(dx * dx + dy * dy),
|
201
|
+
moved = false;
|
239
202
|
|
240
203
|
// When clicking on minutes view space, check the mouse position
|
241
204
|
if (space && (z < outerRadius - tickRadius || z > outerRadius + tickRadius)) {
|
242
205
|
return;
|
243
|
-
|
206
|
+
}
|
244
207
|
e.preventDefault();
|
245
208
|
|
246
209
|
// Set cursor style of body after 200ms
|
247
|
-
var movingTimer = setTimeout(function(){
|
210
|
+
var movingTimer = setTimeout(function () {
|
248
211
|
self.popover.addClass('clockpicker-moving');
|
249
212
|
}, 200);
|
250
213
|
|
@@ -252,38 +215,38 @@
|
|
252
215
|
self.setHand(dx, dy, !space, true);
|
253
216
|
|
254
217
|
// Mousemove on document
|
255
|
-
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
|
218
|
+
$doc.off(mousemoveEvent).on(mousemoveEvent, function (e) {
|
256
219
|
e.preventDefault();
|
257
220
|
var isTouch = /^touch/.test(e.type),
|
258
|
-
|
259
|
-
|
260
|
-
if (!
|
221
|
+
x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
|
222
|
+
y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
|
223
|
+
if (!moved && x === dx && y === dy) {
|
261
224
|
// Clicking in chrome on windows will trigger a mousemove event
|
262
225
|
return;
|
263
|
-
|
226
|
+
}
|
264
227
|
moved = true;
|
265
228
|
self.setHand(x, y, false, true);
|
266
229
|
});
|
267
230
|
|
268
231
|
// Mouseup on document
|
269
|
-
$doc.off(mouseupEvent).on(mouseupEvent, function(e) {
|
232
|
+
$doc.off(mouseupEvent).on(mouseupEvent, function (e) {
|
270
233
|
$doc.off(mouseupEvent);
|
271
234
|
e.preventDefault();
|
272
235
|
var isTouch = /^touch/.test(e.type),
|
273
|
-
|
274
|
-
|
236
|
+
x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
|
237
|
+
y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
|
275
238
|
if ((space || moved) && x === dx && y === dy) {
|
276
239
|
self.setHand(x, y);
|
277
|
-
|
240
|
+
}
|
278
241
|
|
279
242
|
if (self.currentView === 'hours') {
|
280
243
|
self.toggleView('minutes', duration / 2);
|
281
|
-
|
244
|
+
} else if (options.autoclose) {
|
282
245
|
self.minutesView.addClass('clockpicker-dial-out');
|
283
|
-
setTimeout(function(){
|
246
|
+
setTimeout(function () {
|
284
247
|
self.done();
|
285
248
|
}, duration / 2);
|
286
|
-
|
249
|
+
}
|
287
250
|
plate.prepend(canvas);
|
288
251
|
|
289
252
|
// Reset cursor style of body
|
@@ -298,7 +261,7 @@
|
|
298
261
|
if (svgSupported) {
|
299
262
|
// Draw clock hands and others
|
300
263
|
var canvas = popover.find('.clockpicker-canvas'),
|
301
|
-
|
264
|
+
svg = createSvgElement('svg');
|
302
265
|
svg.setAttribute('class', 'clockpicker-svg');
|
303
266
|
svg.setAttribute('width', diameter);
|
304
267
|
svg.setAttribute('height', diameter);
|
@@ -332,52 +295,51 @@
|
|
332
295
|
}
|
333
296
|
|
334
297
|
function raiseCallback(callbackFunction) {
|
335
|
-
if (callbackFunction && typeof callbackFunction === "function")
|
336
|
-
callbackFunction();
|
298
|
+
if (callbackFunction && typeof callbackFunction === "function") callbackFunction();
|
337
299
|
}
|
338
300
|
|
339
301
|
// Default options
|
340
302
|
ClockPicker.DEFAULTS = {
|
341
|
-
'default': '',
|
342
|
-
fromnow: 0,
|
343
|
-
donetext: 'Ok',
|
303
|
+
'default': '', // default time, 'now' or '13:14' e.g.
|
304
|
+
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
|
305
|
+
donetext: 'Ok', // done button text
|
344
306
|
cleartext: 'Clear',
|
345
307
|
canceltext: 'Cancel',
|
346
|
-
autoclose: false,
|
347
|
-
ampmclickable: true,
|
348
|
-
darktheme: false,
|
349
|
-
twelvehour: true,
|
350
|
-
vibrate: true
|
308
|
+
autoclose: false, // auto close when minute is selected
|
309
|
+
ampmclickable: true, // set am/pm button on itself
|
310
|
+
darktheme: false, // set to dark theme
|
311
|
+
twelvehour: true, // change to 12 hour AM/PM clock from 24 hour
|
312
|
+
vibrate: true // vibrate the device when dragging clock hand
|
351
313
|
};
|
352
314
|
|
353
315
|
// Show or hide popover
|
354
|
-
ClockPicker.prototype.toggle = function() {
|
316
|
+
ClockPicker.prototype.toggle = function () {
|
355
317
|
this[this.isShown ? 'hide' : 'show']();
|
356
318
|
};
|
357
319
|
|
358
320
|
// Set popover position
|
359
|
-
ClockPicker.prototype.locate = function() {
|
321
|
+
ClockPicker.prototype.locate = function () {
|
360
322
|
var element = this.element,
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
323
|
+
popover = this.popover,
|
324
|
+
offset = element.offset(),
|
325
|
+
width = element.outerWidth(),
|
326
|
+
height = element.outerHeight(),
|
327
|
+
align = this.options.align,
|
328
|
+
self = this;
|
367
329
|
|
368
330
|
popover.show();
|
369
331
|
};
|
370
332
|
|
371
333
|
// Show popover
|
372
|
-
ClockPicker.prototype.show = function(e){
|
334
|
+
ClockPicker.prototype.show = function (e) {
|
373
335
|
// Not show again
|
374
336
|
if (this.isShown) {
|
375
337
|
return;
|
376
338
|
}
|
377
339
|
raiseCallback(this.options.beforeShow);
|
378
|
-
$(':input').each(function() {
|
340
|
+
$(':input').each(function () {
|
379
341
|
$(this).attr('tabindex', -1);
|
380
|
-
})
|
342
|
+
});
|
381
343
|
var self = this;
|
382
344
|
// Initialize
|
383
345
|
this.input.blur();
|
@@ -387,7 +349,7 @@
|
|
387
349
|
// Get the time
|
388
350
|
var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
|
389
351
|
if (this.options.twelvehour && !(typeof value[1] === 'undefined')) {
|
390
|
-
if (value[1].indexOf("AM") > 0){
|
352
|
+
if (value[1].indexOf("AM") > 0) {
|
391
353
|
this.amOrPm = 'AM';
|
392
354
|
} else {
|
393
355
|
this.amOrPm = 'PM';
|
@@ -395,21 +357,21 @@
|
|
395
357
|
value[1] = value[1].replace("AM", "").replace("PM", "");
|
396
358
|
}
|
397
359
|
if (value[0] === 'now') {
|
398
|
-
var now = new Date(+
|
399
|
-
value = [
|
400
|
-
|
401
|
-
|
402
|
-
|
360
|
+
var now = new Date(+new Date() + this.options.fromnow);
|
361
|
+
value = [now.getHours(), now.getMinutes()];
|
362
|
+
if (this.options.twelvehour) {
|
363
|
+
this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM';
|
364
|
+
}
|
403
365
|
}
|
404
|
-
this.hours = +
|
405
|
-
this.minutes = +
|
366
|
+
this.hours = +value[0] || 0;
|
367
|
+
this.minutes = +value[1] || 0;
|
406
368
|
this.spanHours.html(this.hours);
|
407
369
|
this.spanMinutes.html(leadingZero(this.minutes));
|
408
370
|
if (!this.isAppended) {
|
409
371
|
// Append popover to body
|
410
372
|
this.popover.insertAfter(this.input);
|
411
373
|
if (this.options.twelvehour) {
|
412
|
-
if (this.amOrPm === 'PM'){
|
374
|
+
if (this.amOrPm === 'PM') {
|
413
375
|
this.spanAmPm.children('#click-pm').addClass("text-primary");
|
414
376
|
this.spanAmPm.children('#click-am').removeClass("text-primary");
|
415
377
|
} else {
|
@@ -418,7 +380,7 @@
|
|
418
380
|
}
|
419
381
|
}
|
420
382
|
// Reset position when resize
|
421
|
-
$win.on('resize.clockpicker' + this.id, function() {
|
383
|
+
$win.on('resize.clockpicker' + this.id, function () {
|
422
384
|
if (self.isShown) {
|
423
385
|
self.locate();
|
424
386
|
}
|
@@ -431,28 +393,28 @@
|
|
431
393
|
this.locate();
|
432
394
|
this.isShown = true;
|
433
395
|
// Hide when clicking or tabbing on any element except the clock and input
|
434
|
-
$doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function(e) {
|
396
|
+
$doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function (e) {
|
435
397
|
var target = $(e.target);
|
436
398
|
if (target.closest(self.popover.find('.picker__wrap')).length === 0 && target.closest(self.input).length === 0) {
|
437
399
|
self.hide();
|
438
|
-
|
400
|
+
}
|
439
401
|
});
|
440
402
|
// Hide when ESC is pressed
|
441
|
-
$doc.on('keyup.clockpicker.' + this.id, function(e){
|
403
|
+
$doc.on('keyup.clockpicker.' + this.id, function (e) {
|
442
404
|
if (e.keyCode === 27) {
|
443
405
|
self.hide();
|
444
|
-
|
406
|
+
}
|
445
407
|
});
|
446
408
|
raiseCallback(this.options.afterShow);
|
447
409
|
};
|
448
410
|
// Hide popover
|
449
|
-
ClockPicker.prototype.hide = function() {
|
411
|
+
ClockPicker.prototype.hide = function () {
|
450
412
|
raiseCallback(this.options.beforeHide);
|
451
413
|
this.input.removeClass('picker__input picker__input--active');
|
452
414
|
this.popover.removeClass('picker--opened');
|
453
415
|
$(document.body).css('overflow', 'visible');
|
454
416
|
this.isShown = false;
|
455
|
-
$(':input').each(function(index) {
|
417
|
+
$(':input').each(function (index) {
|
456
418
|
$(this).attr('tabindex', index + 1);
|
457
419
|
});
|
458
420
|
// Unbinding events on document
|
@@ -462,19 +424,19 @@
|
|
462
424
|
raiseCallback(this.options.afterHide);
|
463
425
|
};
|
464
426
|
// Toggle to hours or minutes view
|
465
|
-
ClockPicker.prototype.toggleView = function(view, delay) {
|
427
|
+
ClockPicker.prototype.toggleView = function (view, delay) {
|
466
428
|
var raiseAfterHourSelect = false;
|
467
429
|
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
|
468
430
|
raiseCallback(this.options.beforeHourSelect);
|
469
431
|
raiseAfterHourSelect = true;
|
470
432
|
}
|
471
433
|
var isHours = view === 'hours',
|
472
|
-
|
473
|
-
|
434
|
+
nextView = isHours ? this.hoursView : this.minutesView,
|
435
|
+
hideView = isHours ? this.minutesView : this.hoursView;
|
474
436
|
this.currentView = view;
|
475
437
|
|
476
438
|
this.spanHours.toggleClass('text-primary', isHours);
|
477
|
-
this.spanMinutes.toggleClass('text-primary', !
|
439
|
+
this.spanMinutes.toggleClass('text-primary', !isHours);
|
478
440
|
|
479
441
|
// Let's make transitions
|
480
442
|
hideView.addClass('clockpicker-dial-out');
|
@@ -485,56 +447,55 @@
|
|
485
447
|
|
486
448
|
// After transitions ended
|
487
449
|
clearTimeout(this.toggleViewTimer);
|
488
|
-
this.toggleViewTimer = setTimeout(function() {
|
450
|
+
this.toggleViewTimer = setTimeout(function () {
|
489
451
|
hideView.css('visibility', 'hidden');
|
490
452
|
}, duration);
|
491
453
|
|
492
454
|
if (raiseAfterHourSelect) {
|
493
455
|
raiseCallback(this.options.afterHourSelect);
|
494
|
-
|
456
|
+
}
|
495
457
|
};
|
496
458
|
|
497
459
|
// Reset clock hand
|
498
|
-
ClockPicker.prototype.resetClock = function(delay) {
|
460
|
+
ClockPicker.prototype.resetClock = function (delay) {
|
499
461
|
var view = this.currentView,
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
462
|
+
value = this[view],
|
463
|
+
isHours = view === 'hours',
|
464
|
+
unit = Math.PI / (isHours ? 6 : 30),
|
465
|
+
radian = value * unit,
|
466
|
+
radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
|
467
|
+
x = Math.sin(radian) * radius,
|
468
|
+
y = -Math.cos(radian) * radius,
|
469
|
+
self = this;
|
508
470
|
|
509
471
|
if (svgSupported && delay) {
|
510
472
|
self.canvas.addClass('clockpicker-canvas-out');
|
511
|
-
setTimeout(function(){
|
473
|
+
setTimeout(function () {
|
512
474
|
self.canvas.removeClass('clockpicker-canvas-out');
|
513
475
|
self.setHand(x, y);
|
514
476
|
}, delay);
|
515
|
-
} else
|
516
|
-
this.setHand(x, y);
|
477
|
+
} else this.setHand(x, y);
|
517
478
|
};
|
518
479
|
|
519
480
|
// Set clock hand to (x, y)
|
520
|
-
ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging) {
|
521
|
-
var radian = Math.atan2(x, -
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
481
|
+
ClockPicker.prototype.setHand = function (x, y, roundBy5, dragging) {
|
482
|
+
var radian = Math.atan2(x, -y),
|
483
|
+
isHours = this.currentView === 'hours',
|
484
|
+
unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
|
485
|
+
z = Math.sqrt(x * x + y * y),
|
486
|
+
options = this.options,
|
487
|
+
inner = isHours && z < (outerRadius + innerRadius) / 2,
|
488
|
+
radius = inner ? innerRadius : outerRadius,
|
489
|
+
value;
|
529
490
|
|
530
491
|
if (options.twelvehour) {
|
531
492
|
radius = outerRadius;
|
532
|
-
|
493
|
+
}
|
533
494
|
|
534
495
|
// Radian should in range [0, 2PI]
|
535
496
|
if (radian < 0) {
|
536
497
|
radian = Math.PI * 2 + radian;
|
537
|
-
|
498
|
+
}
|
538
499
|
|
539
500
|
// Get the round value
|
540
501
|
value = Math.round(radian / unit);
|
@@ -545,24 +506,18 @@
|
|
545
506
|
// Correct the hours or minutes
|
546
507
|
if (options.twelvehour) {
|
547
508
|
if (isHours) {
|
548
|
-
if (value === 0)
|
549
|
-
value = 12;
|
509
|
+
if (value === 0) value = 12;
|
550
510
|
} else {
|
551
|
-
if (roundBy5)
|
552
|
-
|
553
|
-
if (value === 60)
|
554
|
-
value = 0;
|
511
|
+
if (roundBy5) value *= 5;
|
512
|
+
if (value === 60) value = 0;
|
555
513
|
}
|
556
514
|
} else {
|
557
515
|
if (isHours) {
|
558
|
-
if (value === 12)
|
559
|
-
|
560
|
-
value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
|
516
|
+
if (value === 12) value = 0;
|
517
|
+
value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12;
|
561
518
|
} else {
|
562
|
-
if (roundBy5)
|
563
|
-
|
564
|
-
if (value === 60)
|
565
|
-
value = 0;
|
519
|
+
if (roundBy5) value *= 5;
|
520
|
+
if (value === 60) value = 0;
|
566
521
|
}
|
567
522
|
}
|
568
523
|
|
@@ -572,34 +527,34 @@
|
|
572
527
|
// Do not vibrate too frequently
|
573
528
|
if (!this.vibrateTimer) {
|
574
529
|
navigator[vibrate](10);
|
575
|
-
this.vibrateTimer = setTimeout($.proxy(function(){
|
530
|
+
this.vibrateTimer = setTimeout($.proxy(function () {
|
576
531
|
this.vibrateTimer = null;
|
577
532
|
}, this), 100);
|
578
533
|
}
|
579
|
-
|
580
|
-
|
534
|
+
}
|
535
|
+
}
|
581
536
|
|
582
537
|
this[this.currentView] = value;
|
583
|
-
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
|
538
|
+
if (isHours) {
|
539
|
+
this['spanHours'].html(value);
|
540
|
+
} else {
|
541
|
+
this['spanMinutes'].html(leadingZero(value));
|
542
|
+
}
|
588
543
|
|
589
544
|
// If svg is not supported, just add an active class to the tick
|
590
545
|
if (!svgSupported) {
|
591
|
-
this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function(){
|
546
|
+
this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function () {
|
592
547
|
var tick = $(this);
|
593
|
-
tick.toggleClass('active', value === +
|
548
|
+
tick.toggleClass('active', value === +tick.html());
|
594
549
|
});
|
595
550
|
return;
|
596
551
|
}
|
597
552
|
|
598
553
|
// Set clock hand and others' position
|
599
554
|
var cx1 = Math.sin(radian) * (radius - tickRadius),
|
600
|
-
|
555
|
+
cy1 = -Math.cos(radian) * (radius - tickRadius),
|
601
556
|
cx2 = Math.sin(radian) * radius,
|
602
|
-
|
557
|
+
cy2 = -Math.cos(radian) * radius;
|
603
558
|
this.hand.setAttribute('x2', cx1);
|
604
559
|
this.hand.setAttribute('y2', cy1);
|
605
560
|
this.bg.setAttribute('cx', cx2);
|
@@ -607,43 +562,42 @@
|
|
607
562
|
};
|
608
563
|
|
609
564
|
// Hours and minutes are selected
|
610
|
-
ClockPicker.prototype.done = function() {
|
565
|
+
ClockPicker.prototype.done = function () {
|
611
566
|
raiseCallback(this.options.beforeDone);
|
612
567
|
this.hide();
|
613
568
|
this.label.addClass('active');
|
614
569
|
|
615
570
|
var last = this.input.prop('value'),
|
616
|
-
|
571
|
+
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
|
617
572
|
if (this.options.twelvehour) {
|
618
573
|
value = value + this.amOrPm;
|
619
|
-
|
574
|
+
}
|
620
575
|
|
621
576
|
this.input.prop('value', value);
|
622
577
|
if (value !== last) {
|
623
578
|
this.input.triggerHandler('change');
|
624
579
|
if (!this.isInput) {
|
625
580
|
this.element.trigger('change');
|
626
|
-
|
581
|
+
}
|
627
582
|
}
|
628
583
|
|
629
|
-
if (this.options.autoclose)
|
630
|
-
this.input.trigger('blur');
|
584
|
+
if (this.options.autoclose) this.input.trigger('blur');
|
631
585
|
|
632
586
|
raiseCallback(this.options.afterDone);
|
633
587
|
};
|
634
588
|
|
635
589
|
// Clear input field
|
636
|
-
ClockPicker.prototype.clear = function() {
|
590
|
+
ClockPicker.prototype.clear = function () {
|
637
591
|
this.hide();
|
638
592
|
this.label.removeClass('active');
|
639
593
|
|
640
594
|
var last = this.input.prop('value'),
|
641
|
-
|
595
|
+
value = '';
|
642
596
|
|
643
597
|
this.input.prop('value', value);
|
644
598
|
if (value !== last) {
|
645
599
|
this.input.triggerHandler('change');
|
646
|
-
if (!
|
600
|
+
if (!this.isInput) {
|
647
601
|
this.element.trigger('change');
|
648
602
|
}
|
649
603
|
}
|
@@ -654,12 +608,12 @@
|
|
654
608
|
};
|
655
609
|
|
656
610
|
// Remove clockpicker from input
|
657
|
-
ClockPicker.prototype.remove = function() {
|
611
|
+
ClockPicker.prototype.remove = function () {
|
658
612
|
this.element.removeData('clockpicker');
|
659
613
|
this.input.off('focus.clockpicker click.clockpicker');
|
660
614
|
if (this.isShown) {
|
661
615
|
this.hide();
|
662
|
-
|
616
|
+
}
|
663
617
|
if (this.isAppended) {
|
664
618
|
$win.off('resize.clockpicker' + this.id);
|
665
619
|
this.popover.remove();
|
@@ -667,11 +621,11 @@
|
|
667
621
|
};
|
668
622
|
|
669
623
|
// Extends $.fn.clockpicker
|
670
|
-
$.fn.pickatime = function(option){
|
624
|
+
$.fn.pickatime = function (option) {
|
671
625
|
var args = Array.prototype.slice.call(arguments, 1);
|
672
|
-
return this.each(function(){
|
626
|
+
return this.each(function () {
|
673
627
|
var $this = $(this),
|
674
|
-
|
628
|
+
data = $this.data('clockpicker');
|
675
629
|
if (!data) {
|
676
630
|
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
|
677
631
|
$this.data('clockpicker', new ClockPicker($this, options));
|
@@ -679,8 +633,8 @@
|
|
679
633
|
// Manual operatsions. show, hide, remove, e.g.
|
680
634
|
if (typeof data[option] === 'function') {
|
681
635
|
data[option].apply(data, args);
|
682
|
-
|
636
|
+
}
|
683
637
|
}
|
684
638
|
});
|
685
639
|
};
|
686
|
-
}()
|
640
|
+
})();
|