materialize_timepicker_rails 0.1.1 → 0.1.1.1
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/lib/materialize_timepicker_rails/version.rb +1 -1
- data/vendor/assets/javascripts/materialize_datepicker.js +1 -1542
- data/vendor/assets/stylesheets/materialize_datepicker.scss +23 -19
- metadata +1 -4
- data/vendor/assets/stylesheets/components/_dark.scss +0 -95
- data/vendor/assets/stylesheets/components/_primary.scss +0 -336
- data/vendor/assets/stylesheets/components/_variables.scss +0 -16
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fd5afcd47c164d53b082b8d8d79226690fbbfd64
|
4
|
+
data.tar.gz: 404fbf34c5a9e3a705b189408e1b998831cf26f4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 65daffade3fdf775b20a9e033f05332571c29e9039737dcea452d95938da0d62e03a29c74edb440e235d3f3d65836aff9265d55c6efe57045362eeb91e1323b8
|
7
|
+
data.tar.gz: a1a0d7adbe28ba9ffffaca6cc0d94f6275144cbd2ff0a42f077416a115c17cd694e01ec6773f3b900601447345b284682a09707c08c96fad264b6c5e20ee51c1
|
@@ -1,1542 +1 @@
|
|
1
|
-
/*!
|
2
|
-
* ClockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/)
|
3
|
-
* Copyright 2014 Wang Shenwei.
|
4
|
-
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
|
5
|
-
*
|
6
|
-
* Further modified
|
7
|
-
* Copyright 2015 Ching Yaw Hao.
|
8
|
-
*
|
9
|
-
* Gemified Rails 4+
|
10
|
-
* Copyright 2016 Shawn Wilson.
|
11
|
-
*/
|
12
|
-
|
13
|
-
;(function(){
|
14
|
-
var $ = window.jQuery,
|
15
|
-
$win = $(window),
|
16
|
-
$doc = $(document);
|
17
|
-
|
18
|
-
// Can I use inline svg ?
|
19
|
-
var svgNS = 'http://www.w3.org/2000/svg',
|
20
|
-
svgSupported = 'SVGAngle' in window && (function() {
|
21
|
-
var supported,
|
22
|
-
el = document.createElement('div');
|
23
|
-
el.innerHTML = '<svg/>';
|
24
|
-
supported = (el.firstChild && el.firstChild.namespaceURI) == svgNS;
|
25
|
-
el.innerHTML = '';
|
26
|
-
return supported;
|
27
|
-
})();
|
28
|
-
|
29
|
-
// Can I use transition ?
|
30
|
-
var transitionSupported = (function() {
|
31
|
-
var style = document.createElement('div').style;
|
32
|
-
return 'transition' in style ||
|
33
|
-
'WebkitTransition' in style ||
|
34
|
-
'MozTransition' in style ||
|
35
|
-
'msTransition' in style ||
|
36
|
-
'OTransition' in style;
|
37
|
-
})();
|
38
|
-
|
39
|
-
// Listen touch events in touch screen device, instead of mouse events in desktop.
|
40
|
-
var touchSupported = 'ontouchstart' in window,
|
41
|
-
mousedownEvent = 'mousedown' + ( touchSupported ? ' touchstart' : ''),
|
42
|
-
mousemoveEvent = 'mousemove.clockpicker' + ( touchSupported ? ' touchmove.clockpicker' : ''),
|
43
|
-
mouseupEvent = 'mouseup.clockpicker' + ( touchSupported ? ' touchend.clockpicker' : '');
|
44
|
-
|
45
|
-
// Vibrate the device if supported
|
46
|
-
var vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
|
47
|
-
|
48
|
-
function createSvgElement(name) {
|
49
|
-
return document.createElementNS(svgNS, name);
|
50
|
-
}
|
51
|
-
|
52
|
-
function leadingZero(num) {
|
53
|
-
return (num < 10 ? '0' : '') + num;
|
54
|
-
}
|
55
|
-
|
56
|
-
// Get a unique id
|
57
|
-
var idCounter = 0;
|
58
|
-
function uniqueId(prefix) {
|
59
|
-
var id = ++idCounter + '';
|
60
|
-
return prefix ? prefix + id : id;
|
61
|
-
}
|
62
|
-
|
63
|
-
// Clock size
|
64
|
-
var dialRadius = 135,
|
65
|
-
outerRadius = 110,
|
66
|
-
// innerRadius = 80 on 12 hour clock
|
67
|
-
innerRadius = 80,
|
68
|
-
tickRadius = 20,
|
69
|
-
diameter = dialRadius * 2,
|
70
|
-
duration = transitionSupported ? 350 : 1;
|
71
|
-
|
72
|
-
// Popover template
|
73
|
-
var tpl = [
|
74
|
-
'<div class="clockpicker picker">',
|
75
|
-
'<div class="picker__holder">',
|
76
|
-
'<div class="picker__frame">',
|
77
|
-
'<div class="picker__wrap">',
|
78
|
-
'<div class="picker__box">',
|
79
|
-
'<div class="picker__date-display">',
|
80
|
-
'<div class="clockpicker-display">',
|
81
|
-
'<div class="clockpicker-display-column">',
|
82
|
-
'<span class="clockpicker-span-hours text-primary"></span>',
|
83
|
-
':',
|
84
|
-
'<span class="clockpicker-span-minutes"></span>',
|
85
|
-
'</div>',
|
86
|
-
'<div class="clockpicker-display-column clockpicker-display-am-pm">',
|
87
|
-
'<div class="clockpicker-span-am-pm"></div>',
|
88
|
-
'</div>',
|
89
|
-
'</div>',
|
90
|
-
'</div>',
|
91
|
-
'<div class="picker__calendar-container">',
|
92
|
-
'<div class="clockpicker-plate">',
|
93
|
-
'<div class="clockpicker-canvas"></div>',
|
94
|
-
'<div class="clockpicker-dial clockpicker-hours"></div>',
|
95
|
-
'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
|
96
|
-
'</div>',
|
97
|
-
'<div class="clockpicker-am-pm-block">',
|
98
|
-
'</div>',
|
99
|
-
'</div>',
|
100
|
-
'<div class="picker__footer">',
|
101
|
-
'</div>',
|
102
|
-
'</div>',
|
103
|
-
'</div>',
|
104
|
-
'</div>',
|
105
|
-
'</div>',
|
106
|
-
'</div>'
|
107
|
-
].join('');
|
108
|
-
|
109
|
-
// ClockPicker
|
110
|
-
function ClockPicker(element, options) {
|
111
|
-
var popover = $(tpl),
|
112
|
-
plate = popover.find('.clockpicker-plate'),
|
113
|
-
holder = popover.find('.picker__holder'),
|
114
|
-
hoursView = popover.find('.clockpicker-hours'),
|
115
|
-
minutesView = popover.find('.clockpicker-minutes'),
|
116
|
-
amPmBlock = popover.find('.clockpicker-am-pm-block'),
|
117
|
-
isInput = element.prop('tagName') === 'INPUT',
|
118
|
-
input = isInput ? element : element.find('input'),
|
119
|
-
label = $("label[for=" + input.attr("id") + "]"),
|
120
|
-
self = this,
|
121
|
-
timer;
|
122
|
-
|
123
|
-
this.id = uniqueId('cp');
|
124
|
-
this.element = element;
|
125
|
-
this.holder = holder;
|
126
|
-
this.options = options;
|
127
|
-
this.isAppended = false;
|
128
|
-
this.isShown = false;
|
129
|
-
this.currentView = 'hours';
|
130
|
-
this.isInput = isInput;
|
131
|
-
this.input = input;
|
132
|
-
this.label = label;
|
133
|
-
this.popover = popover;
|
134
|
-
this.plate = plate;
|
135
|
-
this.hoursView = hoursView;
|
136
|
-
this.minutesView = minutesView;
|
137
|
-
this.amPmBlock = amPmBlock;
|
138
|
-
this.spanHours = popover.find('.clockpicker-span-hours');
|
139
|
-
this.spanMinutes = popover.find('.clockpicker-span-minutes');
|
140
|
-
this.spanAmPm = popover.find('.clockpicker-span-am-pm');
|
141
|
-
this.footer = popover.find('.picker__footer');
|
142
|
-
this.amOrPm = "PM";
|
143
|
-
|
144
|
-
// Setup for for 12 hour clock if option is selected
|
145
|
-
if (options.twelvehour) {
|
146
|
-
var amPmButtonsTemplate = [
|
147
|
-
'<div class="clockpicker-am-pm-block">',
|
148
|
-
'<button type="button" class="btn-floating btn-flat clockpicker-button clockpicker-am-button">',
|
149
|
-
'AM',
|
150
|
-
'</button>',
|
151
|
-
'<button type="button" class="btn-floating btn-flat clockpicker-button clockpicker-pm-button">',
|
152
|
-
'PM',
|
153
|
-
'</button>',
|
154
|
-
'</div>'
|
155
|
-
].join('');
|
156
|
-
|
157
|
-
var amPmButtons = $(amPmButtonsTemplate);
|
158
|
-
|
159
|
-
if(!options.ampmclickable) {
|
160
|
-
$('<button type="button" class="btn-floating btn-flat clockpicker-button am-button" tabindex="1">' + "AM" + '</button>').on("click", function() {
|
161
|
-
self.amOrPm = "AM";
|
162
|
-
self.amPmBlock.children('.pm-button').removeClass('active');
|
163
|
-
self.amPmBlock.children('.am-button').addClass('active');
|
164
|
-
self.spanAmPm.empty().append('AM');
|
165
|
-
}).appendTo(this.amPmBlock);
|
166
|
-
$('<button type="button" class="btn-floating btn-flat clockpicker-button pm-button" tabindex="2">' + "PM" + '</button>').on("click", function() {
|
167
|
-
self.amOrPm = 'PM';
|
168
|
-
self.amPmBlock.children('.am-button').removeClass('active');
|
169
|
-
self.amPmBlock.children('.pm-button').addClass('active');
|
170
|
-
self.spanAmPm.empty().append('PM');
|
171
|
-
}).appendTo(this.amPmBlock);
|
172
|
-
}
|
173
|
-
else {
|
174
|
-
this.spanAmPm.empty();
|
175
|
-
$('<div id="click-am">AM</div>').on("click", function() {
|
176
|
-
self.spanAmPm.children('#click-am').addClass("text-primary");
|
177
|
-
self.spanAmPm.children('#click-pm').removeClass("text-primary");
|
178
|
-
self.amOrPm = "AM";
|
179
|
-
}).appendTo(this.spanAmPm);
|
180
|
-
$('<div id="click-pm">PM</div>').on("click", function() {
|
181
|
-
self.spanAmPm.children('#click-pm').addClass("text-primary");
|
182
|
-
self.spanAmPm.children('#click-am').removeClass("text-primary");
|
183
|
-
self.amOrPm = 'PM';
|
184
|
-
}).appendTo(this.spanAmPm);
|
185
|
-
}
|
186
|
-
}
|
187
|
-
//force input to type ( disable type=time )
|
188
|
-
input.attr('type','text');
|
189
|
-
|
190
|
-
//convertir el dato por defecto y agregarlo al input
|
191
|
-
var value = ((this.options['default'] || this.input.prop('value') || 'now') + '').split(':'),
|
192
|
-
submit = ((this.options['default'] || this.input.prop('value') || 'now') + '').split(':');
|
193
|
-
|
194
|
-
if(this.options.twelvehour && !(typeof value[1] === 'undefined')) {
|
195
|
-
var hour = parseInt(value[0]);
|
196
|
-
value[0] = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
|
197
|
-
value[1] = value[1] + ((hour < 12) ? 'AM' : 'PM');
|
198
|
-
}
|
199
|
-
//en caso que no se haya especificado un valor por defecto,
|
200
|
-
//el input se deja vacio pero el reloj se carga con la hora del sistema
|
201
|
-
if (value[0] === 'now') {
|
202
|
-
var now = new Date(+ new Date() + this.options.fromnow);
|
203
|
-
this.options.default = 'now';
|
204
|
-
submit = [ leadingZero(now.getHours()), leadingZero(now.getMinutes()), '00' ];
|
205
|
-
input.prop({
|
206
|
-
default:submit.join(':')
|
207
|
-
}).data({
|
208
|
-
default:submit.join(':'),
|
209
|
-
submit:submit.join(':')
|
210
|
-
}).attr({
|
211
|
-
'data-default':submit.join(':'),
|
212
|
-
'data-submit':submit.join(':')
|
213
|
-
});
|
214
|
-
} else {
|
215
|
-
input.prop({value:(value[0] +':'+ value[1])})
|
216
|
-
.data({submit:submit.join(':')})
|
217
|
-
.attr({
|
218
|
-
value:(value[0] +':'+ value[1]),
|
219
|
-
'data-submit':submit.join(':')
|
220
|
-
});
|
221
|
-
}
|
222
|
-
if(options.darktheme)
|
223
|
-
popover.addClass('darktheme');
|
224
|
-
|
225
|
-
// If autoclose is not setted, append a button
|
226
|
-
$('<button type="button" class="btn-flat clockpicker-button" tabindex="' + (options.twelvehour? '3' : '1') + '">' + options.donetext + '</button>').click($.proxy(this.done, this)).appendTo(this.footer);
|
227
|
-
|
228
|
-
this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
|
229
|
-
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
|
230
|
-
|
231
|
-
// Show or toggle
|
232
|
-
input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
|
233
|
-
|
234
|
-
// Build ticks
|
235
|
-
var tickTpl = $('<div class="clockpicker-tick"></div>'),
|
236
|
-
i, tick, radian, radius;
|
237
|
-
|
238
|
-
// Hours view
|
239
|
-
if (options.twelvehour) {
|
240
|
-
for (i = 1; i < 13; i += 1) {
|
241
|
-
tick = tickTpl.clone();
|
242
|
-
radian = i / 6 * Math.PI;
|
243
|
-
radius = outerRadius;
|
244
|
-
tick.css('font-size', '140%');
|
245
|
-
tick.css({
|
246
|
-
left: dialRadius + Math.sin(radian) * radius - tickRadius,
|
247
|
-
top: dialRadius - Math.cos(radian) * radius - tickRadius
|
248
|
-
});
|
249
|
-
tick.html(i === 0 ? '00' : i);
|
250
|
-
hoursView.append(tick);
|
251
|
-
tick.on(mousedownEvent, mousedown);
|
252
|
-
}
|
253
|
-
} else {
|
254
|
-
for (i = 0; i < 24; i += 1) {
|
255
|
-
tick = tickTpl.clone();
|
256
|
-
radian = i / 6 * Math.PI;
|
257
|
-
var inner = i > 0 && i < 13;
|
258
|
-
radius = inner ? innerRadius : outerRadius;
|
259
|
-
tick.css({
|
260
|
-
left: dialRadius + Math.sin(radian) * radius - tickRadius,
|
261
|
-
top: dialRadius - Math.cos(radian) * radius - tickRadius
|
262
|
-
});
|
263
|
-
if (inner)
|
264
|
-
tick.css('font-size', '120%');
|
265
|
-
tick.html(i === 0 ? '00' : i);
|
266
|
-
hoursView.append(tick);
|
267
|
-
tick.on(mousedownEvent, mousedown);
|
268
|
-
}
|
269
|
-
}
|
270
|
-
|
271
|
-
// Minutes view
|
272
|
-
for (i = 0; i < 60; i += 5) {
|
273
|
-
tick = tickTpl.clone();
|
274
|
-
radian = i / 30 * Math.PI;
|
275
|
-
tick.css({
|
276
|
-
left: dialRadius + Math.sin(radian) * outerRadius - tickRadius,
|
277
|
-
top: dialRadius - Math.cos(radian) * outerRadius - tickRadius
|
278
|
-
});
|
279
|
-
tick.css('font-size', '140%');
|
280
|
-
tick.html(leadingZero(i));
|
281
|
-
minutesView.append(tick);
|
282
|
-
tick.on(mousedownEvent, mousedown);
|
283
|
-
}
|
284
|
-
|
285
|
-
// Clicking on minutes view space
|
286
|
-
plate.on(mousedownEvent, function(e) {
|
287
|
-
if ($(e.target).closest('.clockpicker-tick').length === 0)
|
288
|
-
mousedown(e, true);
|
289
|
-
});
|
290
|
-
|
291
|
-
// Mousedown or touchstart
|
292
|
-
function mousedown(e, space) {
|
293
|
-
var offset = plate.offset(),
|
294
|
-
isTouch = /^touch/.test(e.type),
|
295
|
-
x0 = offset.left + dialRadius,
|
296
|
-
y0 = offset.top + dialRadius,
|
297
|
-
dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
|
298
|
-
dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
|
299
|
-
z = Math.sqrt(dx * dx + dy * dy),
|
300
|
-
moved = false;
|
301
|
-
|
302
|
-
// When clicking on minutes view space, check the mouse position
|
303
|
-
if (space && (z < outerRadius - tickRadius || z > outerRadius + tickRadius))
|
304
|
-
return;
|
305
|
-
e.preventDefault();
|
306
|
-
|
307
|
-
// Set cursor style of body after 200ms
|
308
|
-
var movingTimer = setTimeout(function(){
|
309
|
-
self.popover.addClass('clockpicker-moving');
|
310
|
-
}, 200);
|
311
|
-
|
312
|
-
// Place the canvas to top
|
313
|
-
if (svgSupported)
|
314
|
-
plate.append(self.canvas);
|
315
|
-
|
316
|
-
// Clock
|
317
|
-
self.setHand(dx, dy, !space, true);
|
318
|
-
|
319
|
-
// Mousemove on document
|
320
|
-
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
|
321
|
-
e.preventDefault();
|
322
|
-
var isTouch = /^touch/.test(e.type),
|
323
|
-
x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
|
324
|
-
y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
|
325
|
-
if (! moved && x === dx && y === dy)
|
326
|
-
// Clicking in chrome on windows will trigger a mousemove event
|
327
|
-
return;
|
328
|
-
moved = true;
|
329
|
-
self.setHand(x, y, false, true);
|
330
|
-
});
|
331
|
-
|
332
|
-
// Mouseup on document
|
333
|
-
$doc.off(mouseupEvent).on(mouseupEvent, function(e) {
|
334
|
-
$doc.off(mouseupEvent);
|
335
|
-
e.preventDefault();
|
336
|
-
var isTouch = /^touch/.test(e.type),
|
337
|
-
x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
|
338
|
-
y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
|
339
|
-
if ((space || moved) && x === dx && y === dy)
|
340
|
-
self.setHand(x, y);
|
341
|
-
if (self.currentView === 'hours')
|
342
|
-
self.toggleView('minutes', duration / 2);
|
343
|
-
else
|
344
|
-
if (options.autoclose) {
|
345
|
-
self.minutesView.addClass('clockpicker-dial-out');
|
346
|
-
setTimeout(function(){
|
347
|
-
self.done();
|
348
|
-
}, duration / 2);
|
349
|
-
}
|
350
|
-
plate.prepend(canvas);
|
351
|
-
|
352
|
-
// Reset cursor style of body
|
353
|
-
clearTimeout(movingTimer);
|
354
|
-
self.popover.removeClass('clockpicker-moving');
|
355
|
-
|
356
|
-
// Unbind mousemove event
|
357
|
-
$doc.off(mousemoveEvent);
|
358
|
-
});
|
359
|
-
}
|
360
|
-
|
361
|
-
if (svgSupported) {
|
362
|
-
// Draw clock hands and others
|
363
|
-
var canvas = popover.find('.clockpicker-canvas'),
|
364
|
-
svg = createSvgElement('svg');
|
365
|
-
svg.setAttribute('class', 'clockpicker-svg');
|
366
|
-
svg.setAttribute('width', diameter);
|
367
|
-
svg.setAttribute('height', diameter);
|
368
|
-
var g = createSvgElement('g');
|
369
|
-
g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
|
370
|
-
var bearing = createSvgElement('circle');
|
371
|
-
bearing.setAttribute('class', 'clockpicker-canvas-bearing');
|
372
|
-
bearing.setAttribute('cx', 0);
|
373
|
-
bearing.setAttribute('cy', 0);
|
374
|
-
bearing.setAttribute('r', 2);
|
375
|
-
var hand = createSvgElement('line');
|
376
|
-
hand.setAttribute('x1', 0);
|
377
|
-
hand.setAttribute('y1', 0);
|
378
|
-
var bg = createSvgElement('circle');
|
379
|
-
bg.setAttribute('class', 'clockpicker-canvas-bg');
|
380
|
-
bg.setAttribute('r', tickRadius);
|
381
|
-
var fg = createSvgElement('circle');
|
382
|
-
fg.setAttribute('class', 'clockpicker-canvas-fg');
|
383
|
-
fg.setAttribute('r', 5);
|
384
|
-
g.appendChild(hand);
|
385
|
-
g.appendChild(bg);
|
386
|
-
g.appendChild(fg);
|
387
|
-
g.appendChild(bearing);
|
388
|
-
svg.appendChild(g);
|
389
|
-
canvas.append(svg);
|
390
|
-
|
391
|
-
this.hand = hand;
|
392
|
-
this.bg = bg;
|
393
|
-
this.fg = fg;
|
394
|
-
this.bearing = bearing;
|
395
|
-
this.g = g;
|
396
|
-
this.canvas = canvas;
|
397
|
-
}
|
398
|
-
|
399
|
-
raiseCallback(this.options.init);
|
400
|
-
}
|
401
|
-
|
402
|
-
function raiseCallback(callbackFunction) {
|
403
|
-
if(callbackFunction && typeof callbackFunction === "function")
|
404
|
-
callbackFunction();
|
405
|
-
}
|
406
|
-
|
407
|
-
// Default options
|
408
|
-
ClockPicker.DEFAULTS = {
|
409
|
-
'default': '', // default time, 'now' or '13:14' e.g.
|
410
|
-
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
|
411
|
-
donetext: 'Done', // done button text
|
412
|
-
autoclose: false, // auto close when minute is selected
|
413
|
-
ampmclickable: false, // set am/pm button on itself
|
414
|
-
darktheme: false, // set to dark theme
|
415
|
-
twelvehour: true, // change to 12 hour AM/PM clock from 24 hour
|
416
|
-
vibrate: true, // vibrate the device when dragging clock hand
|
417
|
-
submit: '' // guarda el valor time en 24 horas
|
418
|
-
};
|
419
|
-
|
420
|
-
// Show or hide popover
|
421
|
-
ClockPicker.prototype.toggle = function() {
|
422
|
-
this[this.isShown ? 'hide' : 'show']();
|
423
|
-
};
|
424
|
-
|
425
|
-
// Set popover position
|
426
|
-
ClockPicker.prototype.locate = function() {
|
427
|
-
var element = this.element,
|
428
|
-
popover = this.popover,
|
429
|
-
offset = element.offset(),
|
430
|
-
width = element.outerWidth(),
|
431
|
-
height = element.outerHeight(),
|
432
|
-
align = this.options.align,
|
433
|
-
self = this;
|
434
|
-
|
435
|
-
popover.show();
|
436
|
-
};
|
437
|
-
// Show popover
|
438
|
-
ClockPicker.prototype.show = function(e){
|
439
|
-
this.setAMorPM = function(option) {
|
440
|
-
var active = option;
|
441
|
-
var inactive = (option == "pm"? "am":"pm");
|
442
|
-
if(this.options.twelvehour) {
|
443
|
-
this.amOrPm = active.toUpperCase();
|
444
|
-
if(!this.options.ampmclickable) {
|
445
|
-
this.amPmBlock.children('.' + inactive + '-button').removeClass('active');
|
446
|
-
this.amPmBlock.children('.' + active + '-button').addClass('active');
|
447
|
-
this.spanAmPm.empty().append(this.amOrPm);
|
448
|
-
}
|
449
|
-
else {
|
450
|
-
this.spanAmPm.children('#click-' + active + '').addClass("text-primary");
|
451
|
-
this.spanAmPm.children('#click-' + inactive + '').removeClass("text-primary");
|
452
|
-
}
|
453
|
-
}
|
454
|
-
}
|
455
|
-
// Not show again
|
456
|
-
if (this.isShown) {
|
457
|
-
return;
|
458
|
-
}
|
459
|
-
raiseCallback(this.options.beforeShow);
|
460
|
-
$(':input').each(function() {
|
461
|
-
$(this).attr('tabindex', -1);
|
462
|
-
})
|
463
|
-
var self = this;
|
464
|
-
// Initialize
|
465
|
-
this.input.blur();
|
466
|
-
this.popover.addClass('picker--opened');
|
467
|
-
this.input.addClass('picker__input picker__input--active');
|
468
|
-
$(document.body).css('overflow', 'hidden');
|
469
|
-
if (!this.isAppended) {
|
470
|
-
// Append popover to options.container
|
471
|
-
if(this.options.hasOwnProperty('container'))
|
472
|
-
this.popover.appendTo(this.options.container);
|
473
|
-
else
|
474
|
-
this.popover.insertAfter(this.input);
|
475
|
-
this.setAMorPM("pm");
|
476
|
-
// Reset position when resize
|
477
|
-
$win.on('resize.clockpicker' + this.id, function() {
|
478
|
-
if (self.isShown) {
|
479
|
-
self.locate();
|
480
|
-
}
|
481
|
-
});
|
482
|
-
this.isAppended = true;
|
483
|
-
}
|
484
|
-
// Get the time
|
485
|
-
var value = ((this.options['default'] || this.input.prop('value') || 'now') + '').split(':');
|
486
|
-
if(this.options.twelvehour && !(typeof value[1] === 'undefined')) {
|
487
|
-
if(value[1].includes('AM'))
|
488
|
-
this.setAMorPM("am");
|
489
|
-
else
|
490
|
-
this.setAMorPM("pm");
|
491
|
-
value[1] = value[1].replace("AM", "").replace("PM", "");
|
492
|
-
}
|
493
|
-
if (value[0] === 'now') {
|
494
|
-
var now = new Date(+ new Date() + this.options.fromnow);
|
495
|
-
if (now.getHours() >= 12 || parseInt(value[0]) < 12 )
|
496
|
-
this.setAMorPM("pm");
|
497
|
-
else
|
498
|
-
this.setAMorPM("am");
|
499
|
-
value = [
|
500
|
-
now.getHours(),
|
501
|
-
now.getMinutes()
|
502
|
-
];
|
503
|
-
}
|
504
|
-
this.hours = + value[0] || 0;
|
505
|
-
this.minutes = + value[1] || 0;
|
506
|
-
this.spanHours.html(leadingZero(this.hours));
|
507
|
-
this.spanMinutes.html(leadingZero(this.minutes));
|
508
|
-
// Toggle to hours view
|
509
|
-
this.toggleView('hours');
|
510
|
-
// Set position
|
511
|
-
this.locate();
|
512
|
-
this.isShown = true;
|
513
|
-
// Hide when clicking or tabbing on any element except the clock and input
|
514
|
-
$doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function(e) {
|
515
|
-
var target = $(e.target);
|
516
|
-
if (target.closest(self.popover.find('.picker__wrap')).length === 0 && target.closest(self.input).length === 0)
|
517
|
-
self.hide();
|
518
|
-
});
|
519
|
-
// Hide when ESC is pressed
|
520
|
-
$doc.on('keyup.clockpicker.' + this.id, function(e){
|
521
|
-
if (e.keyCode === 27)
|
522
|
-
self.hide();
|
523
|
-
});
|
524
|
-
raiseCallback(this.options.afterShow);
|
525
|
-
};
|
526
|
-
// Hide popover
|
527
|
-
ClockPicker.prototype.hide = function() {
|
528
|
-
raiseCallback(this.options.beforeHide);
|
529
|
-
this.input.removeClass('picker__input picker__input--active');
|
530
|
-
this.popover.removeClass('picker--opened');
|
531
|
-
$(document.body).css('overflow', 'visible');
|
532
|
-
this.isShown = false;
|
533
|
-
$(':input').each(function(index) {
|
534
|
-
$(this).attr('tabindex', index + 1);
|
535
|
-
});
|
536
|
-
// Unbinding events on document
|
537
|
-
$doc.off('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id);
|
538
|
-
$doc.off('keyup.clockpicker.' + this.id);
|
539
|
-
this.popover.hide();
|
540
|
-
raiseCallback(this.options.afterHide);
|
541
|
-
};
|
542
|
-
// Toggle to hours or minutes view
|
543
|
-
ClockPicker.prototype.toggleView = function(view, delay) {
|
544
|
-
var raiseAfterHourSelect = false;
|
545
|
-
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
|
546
|
-
raiseCallback(this.options.beforeHourSelect);
|
547
|
-
raiseAfterHourSelect = true;
|
548
|
-
}
|
549
|
-
var isHours = view === 'hours',
|
550
|
-
nextView = isHours ? this.hoursView : this.minutesView,
|
551
|
-
hideView = isHours ? this.minutesView : this.hoursView;
|
552
|
-
this.currentView = view;
|
553
|
-
|
554
|
-
this.spanHours.toggleClass('text-primary', isHours);
|
555
|
-
this.spanMinutes.toggleClass('text-primary', ! isHours);
|
556
|
-
|
557
|
-
// Let's make transitions
|
558
|
-
hideView.addClass('clockpicker-dial-out');
|
559
|
-
nextView.css('visibility', 'visible').removeClass('clockpicker-dial-out');
|
560
|
-
|
561
|
-
// Reset clock hand
|
562
|
-
this.resetClock(delay);
|
563
|
-
|
564
|
-
// After transitions ended
|
565
|
-
clearTimeout(this.toggleViewTimer);
|
566
|
-
this.toggleViewTimer = setTimeout(function() {
|
567
|
-
hideView.css('visibility', 'hidden');
|
568
|
-
}, duration);
|
569
|
-
|
570
|
-
if (raiseAfterHourSelect)
|
571
|
-
raiseCallback(this.options.afterHourSelect);
|
572
|
-
};
|
573
|
-
|
574
|
-
// Reset clock hand
|
575
|
-
ClockPicker.prototype.resetClock = function(delay) {
|
576
|
-
var view = this.currentView,
|
577
|
-
value = this[view],
|
578
|
-
isHours = view === 'hours',
|
579
|
-
unit = Math.PI / (isHours ? 6 : 30),
|
580
|
-
radian = value * unit,
|
581
|
-
radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
|
582
|
-
x = Math.sin(radian) * radius,
|
583
|
-
y = - Math.cos(radian) * radius,
|
584
|
-
self = this;
|
585
|
-
|
586
|
-
if(svgSupported && delay) {
|
587
|
-
self.canvas.addClass('clockpicker-canvas-out');
|
588
|
-
setTimeout(function(){
|
589
|
-
self.canvas.removeClass('clockpicker-canvas-out');
|
590
|
-
self.setHand(x, y);
|
591
|
-
}, delay);
|
592
|
-
} else
|
593
|
-
this.setHand(x, y);
|
594
|
-
};
|
595
|
-
|
596
|
-
// Set clock hand to (x, y)
|
597
|
-
ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging) {
|
598
|
-
var radian = Math.atan2(x, - y),
|
599
|
-
isHours = this.currentView === 'hours',
|
600
|
-
unit = Math.PI / (isHours || roundBy5? 6 : 30),
|
601
|
-
z = Math.sqrt(x * x + y * y),
|
602
|
-
options = this.options,
|
603
|
-
inner = isHours && z < (outerRadius + innerRadius) / 2,
|
604
|
-
radius = inner ? innerRadius : outerRadius,
|
605
|
-
value;
|
606
|
-
|
607
|
-
if (options.twelvehour)
|
608
|
-
radius = outerRadius;
|
609
|
-
|
610
|
-
// Radian should in range [0, 2PI]
|
611
|
-
if (radian < 0)
|
612
|
-
radian = Math.PI * 2 + radian;
|
613
|
-
|
614
|
-
// Get the round value
|
615
|
-
value = Math.round(radian / unit);
|
616
|
-
|
617
|
-
// Get the round radian
|
618
|
-
radian = value * unit;
|
619
|
-
|
620
|
-
// Correct the hours or minutes
|
621
|
-
if(options.twelvehour) {
|
622
|
-
if(isHours) {
|
623
|
-
if(value === 0)
|
624
|
-
value = 12;
|
625
|
-
} else {
|
626
|
-
if(roundBy5)
|
627
|
-
value *= 5;
|
628
|
-
if(value === 60)
|
629
|
-
value = 0;
|
630
|
-
}
|
631
|
-
} else {
|
632
|
-
if(isHours) {
|
633
|
-
if(value === 12)
|
634
|
-
value = 0;
|
635
|
-
value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
|
636
|
-
} else {
|
637
|
-
if(roundBy5)
|
638
|
-
value *= 5;
|
639
|
-
if(value === 60)
|
640
|
-
value = 0;
|
641
|
-
}
|
642
|
-
}
|
643
|
-
if (isHours)
|
644
|
-
this.fg.setAttribute('class', 'clockpicker-canvas-fg');
|
645
|
-
else {
|
646
|
-
if(value % 5 == 0)
|
647
|
-
this.fg.setAttribute('class', 'clockpicker-canvas-fg');
|
648
|
-
else
|
649
|
-
this.fg.setAttribute('class', 'clockpicker-canvas-fg active');
|
650
|
-
}
|
651
|
-
|
652
|
-
// Once hours or minutes changed, vibrate the device
|
653
|
-
if (this[this.currentView] !== value)
|
654
|
-
if (vibrate && this.options.vibrate)
|
655
|
-
// Do not vibrate too frequently
|
656
|
-
if (! this.vibrateTimer) {
|
657
|
-
navigator[vibrate](10);
|
658
|
-
this.vibrateTimer = setTimeout($.proxy(function(){
|
659
|
-
this.vibrateTimer = null;
|
660
|
-
}, this), 100);
|
661
|
-
}
|
662
|
-
|
663
|
-
this[this.currentView] = value;
|
664
|
-
this[isHours ? 'spanHours' : 'spanMinutes'].html(leadingZero(value));
|
665
|
-
|
666
|
-
// If svg is not supported, just add an active class to the tick
|
667
|
-
if (! svgSupported) {
|
668
|
-
this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function(){
|
669
|
-
var tick = $(this);
|
670
|
-
tick.toggleClass('active', value === + tick.html());
|
671
|
-
});
|
672
|
-
return;
|
673
|
-
}
|
674
|
-
|
675
|
-
// Place clock hand at the top when dragging
|
676
|
-
if (dragging || (! isHours && value % 5)) {
|
677
|
-
this.g.insertBefore(this.hand, this.bearing);
|
678
|
-
this.g.insertBefore(this.bg, this.fg);
|
679
|
-
this.bg.setAttribute('class', 'clockpicker-canvas-bg clockpicker-canvas-bg-trans');
|
680
|
-
} else {
|
681
|
-
// Or place it at the bottom
|
682
|
-
this.g.insertBefore(this.hand, this.bg);
|
683
|
-
this.g.insertBefore(this.fg, this.bg);
|
684
|
-
this.bg.setAttribute('class', 'clockpicker-canvas-bg');
|
685
|
-
}
|
686
|
-
|
687
|
-
// Set clock hand and others' position
|
688
|
-
var cx1 = Math.sin(radian) * (radius - tickRadius),
|
689
|
-
cy1 = - Math.cos(radian) * (radius - tickRadius),
|
690
|
-
cx2 = Math.sin(radian) * radius,
|
691
|
-
cy2 = - Math.cos(radian) * radius;
|
692
|
-
this.hand.setAttribute('x2', cx1);
|
693
|
-
this.hand.setAttribute('y2', cy1);
|
694
|
-
this.bg.setAttribute('cx', cx2);
|
695
|
-
this.bg.setAttribute('cy', cy2);
|
696
|
-
this.fg.setAttribute('cx', cx2);
|
697
|
-
this.fg.setAttribute('cy', cy2);
|
698
|
-
};
|
699
|
-
|
700
|
-
// Hours and minutes are selected
|
701
|
-
ClockPicker.prototype.done = function() {
|
702
|
-
raiseCallback(this.options.beforeDone);
|
703
|
-
this.hide();
|
704
|
-
this.label.addClass('active');
|
705
|
-
|
706
|
-
var last = this.input.prop('value') || this.input.attr('value'),
|
707
|
-
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
|
708
|
-
submit = leadingZero(this.hours) + ':' + leadingZero(this.minutes) + ':00';
|
709
|
-
|
710
|
-
if (this.options.twelvehour) {
|
711
|
-
value = value + this.amOrPm;
|
712
|
-
if ( this.amOrPm == 'PM' ) {
|
713
|
-
submit = ((this.hours > 12) ? (this.hours + 12) : '00') + ':' + leadingZero(this.minutes) + ':00';
|
714
|
-
console.log(this.hours, this.minutes, this.amOrPm);
|
715
|
-
}
|
716
|
-
}
|
717
|
-
/*!
|
718
|
-
* ClockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/)
|
719
|
-
* Copyright 2014 Wang Shenwei.
|
720
|
-
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
|
721
|
-
*
|
722
|
-
* Further modified
|
723
|
-
* Copyright 2015 Ching Yaw Hao.
|
724
|
-
*/
|
725
|
-
|
726
|
-
;(function(){
|
727
|
-
var $ = window.jQuery,
|
728
|
-
$win = $(window),
|
729
|
-
$doc = $(document);
|
730
|
-
|
731
|
-
// Can I use inline svg ?
|
732
|
-
var svgNS = 'http://www.w3.org/2000/svg',
|
733
|
-
svgSupported = 'SVGAngle' in window && (function() {
|
734
|
-
var supported,
|
735
|
-
el = document.createElement('div');
|
736
|
-
el.innerHTML = '<svg/>';
|
737
|
-
supported = (el.firstChild && el.firstChild.namespaceURI) == svgNS;
|
738
|
-
el.innerHTML = '';
|
739
|
-
return supported;
|
740
|
-
})();
|
741
|
-
|
742
|
-
// Can I use transition ?
|
743
|
-
var transitionSupported = (function() {
|
744
|
-
var style = document.createElement('div').style;
|
745
|
-
return 'transition' in style ||
|
746
|
-
'WebkitTransition' in style ||
|
747
|
-
'MozTransition' in style ||
|
748
|
-
'msTransition' in style ||
|
749
|
-
'OTransition' in style;
|
750
|
-
})();
|
751
|
-
|
752
|
-
// Listen touch events in touch screen device, instead of mouse events in desktop.
|
753
|
-
var touchSupported = 'ontouchstart' in window,
|
754
|
-
mousedownEvent = 'mousedown' + ( touchSupported ? ' touchstart' : ''),
|
755
|
-
mousemoveEvent = 'mousemove.clockpicker' + ( touchSupported ? ' touchmove.clockpicker' : ''),
|
756
|
-
mouseupEvent = 'mouseup.clockpicker' + ( touchSupported ? ' touchend.clockpicker' : '');
|
757
|
-
|
758
|
-
// Vibrate the device if supported
|
759
|
-
var vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
|
760
|
-
|
761
|
-
function createSvgElement(name) {
|
762
|
-
return document.createElementNS(svgNS, name);
|
763
|
-
}
|
764
|
-
|
765
|
-
function leadingZero(num) {
|
766
|
-
return (num < 10 ? '0' : '') + num;
|
767
|
-
}
|
768
|
-
|
769
|
-
// Get a unique id
|
770
|
-
var idCounter = 0;
|
771
|
-
function uniqueId(prefix) {
|
772
|
-
var id = ++idCounter + '';
|
773
|
-
return prefix ? prefix + id : id;
|
774
|
-
}
|
775
|
-
|
776
|
-
// Clock size
|
777
|
-
var dialRadius = 135,
|
778
|
-
outerRadius = 110,
|
779
|
-
// innerRadius = 80 on 12 hour clock
|
780
|
-
innerRadius = 80,
|
781
|
-
tickRadius = 20,
|
782
|
-
diameter = dialRadius * 2,
|
783
|
-
duration = transitionSupported ? 350 : 1;
|
784
|
-
|
785
|
-
// Popover template
|
786
|
-
var tpl = [
|
787
|
-
'<div class="clockpicker picker">',
|
788
|
-
'<div class="picker__holder">',
|
789
|
-
'<div class="picker__frame">',
|
790
|
-
'<div class="picker__wrap">',
|
791
|
-
'<div class="picker__box">',
|
792
|
-
'<div class="picker__date-display">',
|
793
|
-
'<div class="clockpicker-display">',
|
794
|
-
'<div class="clockpicker-display-column">',
|
795
|
-
'<span class="clockpicker-span-hours text-primary"></span>',
|
796
|
-
':',
|
797
|
-
'<span class="clockpicker-span-minutes"></span>',
|
798
|
-
'</div>',
|
799
|
-
'<div class="clockpicker-display-column clockpicker-display-am-pm">',
|
800
|
-
'<div class="clockpicker-span-am-pm"></div>',
|
801
|
-
'</div>',
|
802
|
-
'</div>',
|
803
|
-
'</div>',
|
804
|
-
'<div class="picker__calendar-container">',
|
805
|
-
'<div class="clockpicker-plate">',
|
806
|
-
'<div class="clockpicker-canvas"></div>',
|
807
|
-
'<div class="clockpicker-dial clockpicker-hours"></div>',
|
808
|
-
'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
|
809
|
-
'</div>',
|
810
|
-
'<div class="clockpicker-am-pm-block">',
|
811
|
-
'</div>',
|
812
|
-
'</div>',
|
813
|
-
'<div class="picker__footer">',
|
814
|
-
'</div>',
|
815
|
-
'</div>',
|
816
|
-
'</div>',
|
817
|
-
'</div>',
|
818
|
-
'</div>',
|
819
|
-
'</div>'
|
820
|
-
].join('');
|
821
|
-
|
822
|
-
// ClockPicker
|
823
|
-
function ClockPicker(element, options) {
|
824
|
-
var popover = $(tpl),
|
825
|
-
plate = popover.find('.clockpicker-plate'),
|
826
|
-
holder = popover.find('.picker__holder'),
|
827
|
-
hoursView = popover.find('.clockpicker-hours'),
|
828
|
-
minutesView = popover.find('.clockpicker-minutes'),
|
829
|
-
amPmBlock = popover.find('.clockpicker-am-pm-block'),
|
830
|
-
isInput = element.prop('tagName') === 'INPUT',
|
831
|
-
input = isInput ? element : element.find('input'),
|
832
|
-
label = $("label[for=" + input.attr("id") + "]"),
|
833
|
-
self = this,
|
834
|
-
timer;
|
835
|
-
|
836
|
-
this.id = uniqueId('cp');
|
837
|
-
this.element = element;
|
838
|
-
this.holder = holder;
|
839
|
-
this.options = options;
|
840
|
-
this.isAppended = false;
|
841
|
-
this.isShown = false;
|
842
|
-
this.currentView = 'hours';
|
843
|
-
this.isInput = isInput;
|
844
|
-
this.input = input;
|
845
|
-
this.label = label;
|
846
|
-
this.popover = popover;
|
847
|
-
this.plate = plate;
|
848
|
-
this.hoursView = hoursView;
|
849
|
-
this.minutesView = minutesView;
|
850
|
-
this.amPmBlock = amPmBlock;
|
851
|
-
this.spanHours = popover.find('.clockpicker-span-hours');
|
852
|
-
this.spanMinutes = popover.find('.clockpicker-span-minutes');
|
853
|
-
this.spanAmPm = popover.find('.clockpicker-span-am-pm');
|
854
|
-
this.footer = popover.find('.picker__footer');
|
855
|
-
this.amOrPm = "PM";
|
856
|
-
|
857
|
-
// Setup for for 12 hour clock if option is selected
|
858
|
-
if (options.twelvehour) {
|
859
|
-
var amPmButtonsTemplate = [
|
860
|
-
'<div class="clockpicker-am-pm-block">',
|
861
|
-
'<button type="button" class="btn-floating btn-flat clockpicker-button clockpicker-am-button">',
|
862
|
-
'AM',
|
863
|
-
'</button>',
|
864
|
-
'<button type="button" class="btn-floating btn-flat clockpicker-button clockpicker-pm-button">',
|
865
|
-
'PM',
|
866
|
-
'</button>',
|
867
|
-
'</div>'
|
868
|
-
].join('');
|
869
|
-
|
870
|
-
var amPmButtons = $(amPmButtonsTemplate);
|
871
|
-
|
872
|
-
if(!options.ampmclickable) {
|
873
|
-
$('<button type="button" class="btn-floating btn-flat clockpicker-button am-button" tabindex="1">' + "AM" + '</button>').on("click", function() {
|
874
|
-
self.amOrPm = "AM";
|
875
|
-
self.amPmBlock.children('.pm-button').removeClass('active');
|
876
|
-
self.amPmBlock.children('.am-button').addClass('active');
|
877
|
-
self.spanAmPm.empty().append('AM');
|
878
|
-
}).appendTo(this.amPmBlock);
|
879
|
-
$('<button type="button" class="btn-floating btn-flat clockpicker-button pm-button" tabindex="2">' + "PM" + '</button>').on("click", function() {
|
880
|
-
self.amOrPm = 'PM';
|
881
|
-
self.amPmBlock.children('.am-button').removeClass('active');
|
882
|
-
self.amPmBlock.children('.pm-button').addClass('active');
|
883
|
-
self.spanAmPm.empty().append('PM');
|
884
|
-
}).appendTo(this.amPmBlock);
|
885
|
-
}
|
886
|
-
else {
|
887
|
-
this.spanAmPm.empty();
|
888
|
-
$('<div id="click-am">AM</div>').on("click", function() {
|
889
|
-
self.spanAmPm.children('#click-am').addClass("text-primary");
|
890
|
-
self.spanAmPm.children('#click-pm').removeClass("text-primary");
|
891
|
-
self.amOrPm = "AM";
|
892
|
-
}).appendTo(this.spanAmPm);
|
893
|
-
$('<div id="click-pm">PM</div>').on("click", function() {
|
894
|
-
self.spanAmPm.children('#click-pm').addClass("text-primary");
|
895
|
-
self.spanAmPm.children('#click-am').removeClass("text-primary");
|
896
|
-
self.amOrPm = 'PM';
|
897
|
-
}).appendTo(this.spanAmPm);
|
898
|
-
}
|
899
|
-
}
|
900
|
-
//force input to type ( disable type=time )
|
901
|
-
input.attr('type','text');
|
902
|
-
|
903
|
-
// PERSONALIZADO
|
904
|
-
var value = ((this.options['default'] || this.input.prop('value') || 'now') + '').split(':'),
|
905
|
-
submit = ((this.options['default'] || this.input.prop('value') || 'now') + '').split(':');
|
906
|
-
|
907
|
-
if(this.options.twelvehour && !(typeof value[1] === 'undefined')) {
|
908
|
-
var hour = parseInt(value[0]);
|
909
|
-
value[0] = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
|
910
|
-
value[1] = value[1] + ((hour < 12) ? 'AM' : 'PM');
|
911
|
-
}
|
912
|
-
|
913
|
-
if (value[0] === 'now') {
|
914
|
-
|
915
|
-
this.options.default = 'now';
|
916
|
-
|
917
|
-
var now = new Date(+ new Date() + this.options.fromnow),
|
918
|
-
hour = now.getHours(),
|
919
|
-
minute = now.getMinutes();
|
920
|
-
|
921
|
-
if( options.twelvehour ) {
|
922
|
-
value = [
|
923
|
-
leadingZero((hour == 0) ? 12 : ((hour > 12) ? (hour - 12) : hour)),
|
924
|
-
(leadingZero(minute) + (hour < 12 ? 'AM':'PM'))
|
925
|
-
];
|
926
|
-
} else {
|
927
|
-
value = [ leadingZero(hour), leadingZero(minute) ];
|
928
|
-
}
|
929
|
-
|
930
|
-
submit = [ leadingZero(hour), leadingZero(minute), '00' ];
|
931
|
-
input.prop({
|
932
|
-
default:submit.join(':')
|
933
|
-
}).data({
|
934
|
-
default:submit.join(':'),
|
935
|
-
submit:submit.join(':')
|
936
|
-
}).attr({
|
937
|
-
'data-default':submit.join(':'),
|
938
|
-
'data-submit':submit.join(':')
|
939
|
-
});
|
940
|
-
|
941
|
-
} else {
|
942
|
-
input.prop({value:(value[0] +':'+ value[1])})
|
943
|
-
.data({submit:submit.join(':')})
|
944
|
-
.attr({
|
945
|
-
value:(value[0] +':'+ value[1]),
|
946
|
-
'data-submit':submit.join(':')
|
947
|
-
});
|
948
|
-
}
|
949
|
-
|
950
|
-
if(options.darktheme)
|
951
|
-
popover.addClass('darktheme');
|
952
|
-
|
953
|
-
// If autoclose is not setted, append a button
|
954
|
-
$('<button type="button" class="btn-flat clockpicker-button" tabindex="' + (options.twelvehour? '3' : '1') + '">' + options.donetext + '</button>').click($.proxy(this.done, this)).appendTo(this.footer);
|
955
|
-
|
956
|
-
this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
|
957
|
-
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
|
958
|
-
|
959
|
-
// Show or toggle
|
960
|
-
input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
|
961
|
-
|
962
|
-
// Build ticks
|
963
|
-
var tickTpl = $('<div class="clockpicker-tick"></div>'),
|
964
|
-
i, tick, radian, radius;
|
965
|
-
|
966
|
-
// Hours view
|
967
|
-
if (options.twelvehour) {
|
968
|
-
for (i = 1; i < 13; i += 1) {
|
969
|
-
tick = tickTpl.clone();
|
970
|
-
radian = i / 6 * Math.PI;
|
971
|
-
radius = outerRadius;
|
972
|
-
tick.css('font-size', '140%');
|
973
|
-
tick.css({
|
974
|
-
left: dialRadius + Math.sin(radian) * radius - tickRadius,
|
975
|
-
top: dialRadius - Math.cos(radian) * radius - tickRadius
|
976
|
-
});
|
977
|
-
tick.html(i === 0 ? '00' : i);
|
978
|
-
hoursView.append(tick);
|
979
|
-
tick.on(mousedownEvent, mousedown);
|
980
|
-
}
|
981
|
-
} else {
|
982
|
-
for (i = 0; i < 24; i += 1) {
|
983
|
-
tick = tickTpl.clone();
|
984
|
-
radian = i / 6 * Math.PI;
|
985
|
-
var inner = i > 0 && i < 13;
|
986
|
-
radius = inner ? innerRadius : outerRadius;
|
987
|
-
tick.css({
|
988
|
-
left: dialRadius + Math.sin(radian) * radius - tickRadius,
|
989
|
-
top: dialRadius - Math.cos(radian) * radius - tickRadius
|
990
|
-
});
|
991
|
-
if (inner)
|
992
|
-
tick.css('font-size', '120%');
|
993
|
-
tick.html(i === 0 ? '00' : i);
|
994
|
-
hoursView.append(tick);
|
995
|
-
tick.on(mousedownEvent, mousedown);
|
996
|
-
}
|
997
|
-
}
|
998
|
-
|
999
|
-
// Minutes view
|
1000
|
-
for (i = 0; i < 60; i += 5) {
|
1001
|
-
tick = tickTpl.clone();
|
1002
|
-
radian = i / 30 * Math.PI;
|
1003
|
-
tick.css({
|
1004
|
-
left: dialRadius + Math.sin(radian) * outerRadius - tickRadius,
|
1005
|
-
top: dialRadius - Math.cos(radian) * outerRadius - tickRadius
|
1006
|
-
});
|
1007
|
-
tick.css('font-size', '140%');
|
1008
|
-
tick.html(leadingZero(i));
|
1009
|
-
minutesView.append(tick);
|
1010
|
-
tick.on(mousedownEvent, mousedown);
|
1011
|
-
}
|
1012
|
-
|
1013
|
-
// Clicking on minutes view space
|
1014
|
-
plate.on(mousedownEvent, function(e) {
|
1015
|
-
if ($(e.target).closest('.clockpicker-tick').length === 0)
|
1016
|
-
mousedown(e, true);
|
1017
|
-
});
|
1018
|
-
|
1019
|
-
// Mousedown or touchstart
|
1020
|
-
function mousedown(e, space) {
|
1021
|
-
var offset = plate.offset(),
|
1022
|
-
isTouch = /^touch/.test(e.type),
|
1023
|
-
x0 = offset.left + dialRadius,
|
1024
|
-
y0 = offset.top + dialRadius,
|
1025
|
-
dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
|
1026
|
-
dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
|
1027
|
-
z = Math.sqrt(dx * dx + dy * dy),
|
1028
|
-
moved = false;
|
1029
|
-
|
1030
|
-
// When clicking on minutes view space, check the mouse position
|
1031
|
-
if (space && (z < outerRadius - tickRadius || z > outerRadius + tickRadius))
|
1032
|
-
return;
|
1033
|
-
e.preventDefault();
|
1034
|
-
|
1035
|
-
// Set cursor style of body after 200ms
|
1036
|
-
var movingTimer = setTimeout(function(){
|
1037
|
-
self.popover.addClass('clockpicker-moving');
|
1038
|
-
}, 200);
|
1039
|
-
|
1040
|
-
// Place the canvas to top
|
1041
|
-
if (svgSupported)
|
1042
|
-
plate.append(self.canvas);
|
1043
|
-
|
1044
|
-
// Clock
|
1045
|
-
self.setHand(dx, dy, !space, true);
|
1046
|
-
|
1047
|
-
// Mousemove on document
|
1048
|
-
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
|
1049
|
-
e.preventDefault();
|
1050
|
-
var isTouch = /^touch/.test(e.type),
|
1051
|
-
x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
|
1052
|
-
y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
|
1053
|
-
if (! moved && x === dx && y === dy)
|
1054
|
-
// Clicking in chrome on windows will trigger a mousemove event
|
1055
|
-
return;
|
1056
|
-
moved = true;
|
1057
|
-
self.setHand(x, y, false, true);
|
1058
|
-
});
|
1059
|
-
|
1060
|
-
// Mouseup on document
|
1061
|
-
$doc.off(mouseupEvent).on(mouseupEvent, function(e) {
|
1062
|
-
$doc.off(mouseupEvent);
|
1063
|
-
e.preventDefault();
|
1064
|
-
var isTouch = /^touch/.test(e.type),
|
1065
|
-
x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
|
1066
|
-
y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
|
1067
|
-
if ((space || moved) && x === dx && y === dy)
|
1068
|
-
self.setHand(x, y);
|
1069
|
-
if (self.currentView === 'hours')
|
1070
|
-
self.toggleView('minutes', duration / 2);
|
1071
|
-
else
|
1072
|
-
if (options.autoclose) {
|
1073
|
-
self.minutesView.addClass('clockpicker-dial-out');
|
1074
|
-
setTimeout(function(){
|
1075
|
-
self.done();
|
1076
|
-
}, duration / 2);
|
1077
|
-
}
|
1078
|
-
plate.prepend(canvas);
|
1079
|
-
|
1080
|
-
// Reset cursor style of body
|
1081
|
-
clearTimeout(movingTimer);
|
1082
|
-
self.popover.removeClass('clockpicker-moving');
|
1083
|
-
|
1084
|
-
// Unbind mousemove event
|
1085
|
-
$doc.off(mousemoveEvent);
|
1086
|
-
});
|
1087
|
-
}
|
1088
|
-
|
1089
|
-
if (svgSupported) {
|
1090
|
-
// Draw clock hands and others
|
1091
|
-
var canvas = popover.find('.clockpicker-canvas'),
|
1092
|
-
svg = createSvgElement('svg');
|
1093
|
-
svg.setAttribute('class', 'clockpicker-svg');
|
1094
|
-
svg.setAttribute('width', diameter);
|
1095
|
-
svg.setAttribute('height', diameter);
|
1096
|
-
var g = createSvgElement('g');
|
1097
|
-
g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
|
1098
|
-
var bearing = createSvgElement('circle');
|
1099
|
-
bearing.setAttribute('class', 'clockpicker-canvas-bearing');
|
1100
|
-
bearing.setAttribute('cx', 0);
|
1101
|
-
bearing.setAttribute('cy', 0);
|
1102
|
-
bearing.setAttribute('r', 2);
|
1103
|
-
var hand = createSvgElement('line');
|
1104
|
-
hand.setAttribute('x1', 0);
|
1105
|
-
hand.setAttribute('y1', 0);
|
1106
|
-
var bg = createSvgElement('circle');
|
1107
|
-
bg.setAttribute('class', 'clockpicker-canvas-bg');
|
1108
|
-
bg.setAttribute('r', tickRadius);
|
1109
|
-
var fg = createSvgElement('circle');
|
1110
|
-
fg.setAttribute('class', 'clockpicker-canvas-fg');
|
1111
|
-
fg.setAttribute('r', 5);
|
1112
|
-
g.appendChild(hand);
|
1113
|
-
g.appendChild(bg);
|
1114
|
-
g.appendChild(fg);
|
1115
|
-
g.appendChild(bearing);
|
1116
|
-
svg.appendChild(g);
|
1117
|
-
canvas.append(svg);
|
1118
|
-
|
1119
|
-
this.hand = hand;
|
1120
|
-
this.bg = bg;
|
1121
|
-
this.fg = fg;
|
1122
|
-
this.bearing = bearing;
|
1123
|
-
this.g = g;
|
1124
|
-
this.canvas = canvas;
|
1125
|
-
}
|
1126
|
-
|
1127
|
-
raiseCallback(this.options.init);
|
1128
|
-
}
|
1129
|
-
|
1130
|
-
function raiseCallback(callbackFunction) {
|
1131
|
-
if(callbackFunction && typeof callbackFunction === "function")
|
1132
|
-
callbackFunction();
|
1133
|
-
}
|
1134
|
-
|
1135
|
-
// Default options
|
1136
|
-
ClockPicker.DEFAULTS = {
|
1137
|
-
'default': '', // default time, 'now' or '13:14' e.g.
|
1138
|
-
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
|
1139
|
-
donetext: 'Done', // done button text
|
1140
|
-
autoclose: false, // auto close when minute is selected
|
1141
|
-
ampmclickable: false, // set am/pm button on itself
|
1142
|
-
darktheme: false, // set to dark theme
|
1143
|
-
twelvehour: true, // change to 12 hour AM/PM clock from 24 hour
|
1144
|
-
vibrate: true, // vibrate the device when dragging clock hand
|
1145
|
-
submit: ''
|
1146
|
-
};
|
1147
|
-
|
1148
|
-
// Show or hide popover
|
1149
|
-
ClockPicker.prototype.toggle = function() {
|
1150
|
-
this[this.isShown ? 'hide' : 'show']();
|
1151
|
-
};
|
1152
|
-
|
1153
|
-
// Set popover position
|
1154
|
-
ClockPicker.prototype.locate = function() {
|
1155
|
-
var element = this.element,
|
1156
|
-
popover = this.popover,
|
1157
|
-
offset = element.offset(),
|
1158
|
-
width = element.outerWidth(),
|
1159
|
-
height = element.outerHeight(),
|
1160
|
-
align = this.options.align,
|
1161
|
-
self = this;
|
1162
|
-
|
1163
|
-
popover.show();
|
1164
|
-
};
|
1165
|
-
// Show popover
|
1166
|
-
ClockPicker.prototype.show = function(e){
|
1167
|
-
this.setAMorPM = function(option) {
|
1168
|
-
var active = option;
|
1169
|
-
var inactive = (option == "pm"? "am":"pm");
|
1170
|
-
if(this.options.twelvehour) {
|
1171
|
-
this.amOrPm = active.toUpperCase();
|
1172
|
-
if(!this.options.ampmclickable) {
|
1173
|
-
this.amPmBlock.children('.' + inactive + '-button').removeClass('active');
|
1174
|
-
this.amPmBlock.children('.' + active + '-button').addClass('active');
|
1175
|
-
this.spanAmPm.empty().append(this.amOrPm);
|
1176
|
-
}
|
1177
|
-
else {
|
1178
|
-
this.spanAmPm.children('#click-' + active + '').addClass("text-primary");
|
1179
|
-
this.spanAmPm.children('#click-' + inactive + '').removeClass("text-primary");
|
1180
|
-
}
|
1181
|
-
}
|
1182
|
-
}
|
1183
|
-
// Not show again
|
1184
|
-
if (this.isShown) {
|
1185
|
-
return;
|
1186
|
-
}
|
1187
|
-
raiseCallback(this.options.beforeShow);
|
1188
|
-
$(':input').each(function() {
|
1189
|
-
$(this).attr('tabindex', -1);
|
1190
|
-
})
|
1191
|
-
var self = this;
|
1192
|
-
// Initialize
|
1193
|
-
this.input.blur();
|
1194
|
-
this.popover.addClass('picker--opened');
|
1195
|
-
this.input.addClass('picker__input picker__input--active');
|
1196
|
-
$(document.body).css('overflow', 'hidden');
|
1197
|
-
if (!this.isAppended) {
|
1198
|
-
// Append popover to options.container
|
1199
|
-
if(this.options.hasOwnProperty('container'))
|
1200
|
-
this.popover.appendTo(this.options.container);
|
1201
|
-
else
|
1202
|
-
this.popover.insertAfter(this.input);
|
1203
|
-
this.setAMorPM("pm");
|
1204
|
-
// Reset position when resize
|
1205
|
-
$win.on('resize.clockpicker' + this.id, function() {
|
1206
|
-
if (self.isShown) {
|
1207
|
-
self.locate();
|
1208
|
-
}
|
1209
|
-
});
|
1210
|
-
this.isAppended = true;
|
1211
|
-
}
|
1212
|
-
// Get the time
|
1213
|
-
var value = ((this.options['default'] || this.input.prop('value') || 'now') + '').split(':');
|
1214
|
-
|
1215
|
-
if(this.options.twelvehour && !(typeof value[1] === 'undefined')) {
|
1216
|
-
if(value[1].includes('AM') || parseInt(value[0]) < 12 )
|
1217
|
-
this.setAMorPM("am");
|
1218
|
-
else
|
1219
|
-
this.setAMorPM("pm");
|
1220
|
-
|
1221
|
-
value[1] = value[1].replace("AM", "").replace("PM", "");
|
1222
|
-
}
|
1223
|
-
|
1224
|
-
if (value[0] === 'now') {
|
1225
|
-
var now = new Date(+ new Date() + this.options.fromnow);
|
1226
|
-
if (now.getHours() >= 12)
|
1227
|
-
this.setAMorPM("pm");
|
1228
|
-
else
|
1229
|
-
this.setAMorPM("am");
|
1230
|
-
value = [
|
1231
|
-
now.getHours(),
|
1232
|
-
now.getMinutes()
|
1233
|
-
];
|
1234
|
-
}
|
1235
|
-
|
1236
|
-
this.hours = + value[0] || 0;
|
1237
|
-
this.minutes = + value[1] || 0;
|
1238
|
-
this.spanHours.html(leadingZero(this.hours));
|
1239
|
-
this.spanMinutes.html(leadingZero(this.minutes));
|
1240
|
-
// Toggle to hours view
|
1241
|
-
this.toggleView('hours');
|
1242
|
-
// Set position
|
1243
|
-
this.locate();
|
1244
|
-
this.isShown = true;
|
1245
|
-
// Hide when clicking or tabbing on any element except the clock and input
|
1246
|
-
$doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function(e) {
|
1247
|
-
var target = $(e.target);
|
1248
|
-
if (target.closest(self.popover.find('.picker__wrap')).length === 0 && target.closest(self.input).length === 0)
|
1249
|
-
self.hide();
|
1250
|
-
});
|
1251
|
-
// Hide when ESC is pressed
|
1252
|
-
$doc.on('keyup.clockpicker.' + this.id, function(e){
|
1253
|
-
if (e.keyCode === 27)
|
1254
|
-
self.hide();
|
1255
|
-
});
|
1256
|
-
raiseCallback(this.options.afterShow);
|
1257
|
-
};
|
1258
|
-
// Hide popover
|
1259
|
-
ClockPicker.prototype.hide = function() {
|
1260
|
-
raiseCallback(this.options.beforeHide);
|
1261
|
-
this.input.removeClass('picker__input picker__input--active');
|
1262
|
-
this.popover.removeClass('picker--opened');
|
1263
|
-
$(document.body).css('overflow', 'visible');
|
1264
|
-
this.isShown = false;
|
1265
|
-
$(':input').each(function(index) {
|
1266
|
-
$(this).attr('tabindex', index + 1);
|
1267
|
-
});
|
1268
|
-
// Unbinding events on document
|
1269
|
-
$doc.off('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id);
|
1270
|
-
$doc.off('keyup.clockpicker.' + this.id);
|
1271
|
-
this.popover.hide();
|
1272
|
-
raiseCallback(this.options.afterHide);
|
1273
|
-
};
|
1274
|
-
// Toggle to hours or minutes view
|
1275
|
-
ClockPicker.prototype.toggleView = function(view, delay) {
|
1276
|
-
var raiseAfterHourSelect = false;
|
1277
|
-
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
|
1278
|
-
raiseCallback(this.options.beforeHourSelect);
|
1279
|
-
raiseAfterHourSelect = true;
|
1280
|
-
}
|
1281
|
-
var isHours = view === 'hours',
|
1282
|
-
nextView = isHours ? this.hoursView : this.minutesView,
|
1283
|
-
hideView = isHours ? this.minutesView : this.hoursView;
|
1284
|
-
this.currentView = view;
|
1285
|
-
|
1286
|
-
this.spanHours.toggleClass('text-primary', isHours);
|
1287
|
-
this.spanMinutes.toggleClass('text-primary', ! isHours);
|
1288
|
-
|
1289
|
-
// Let's make transitions
|
1290
|
-
hideView.addClass('clockpicker-dial-out');
|
1291
|
-
nextView.css('visibility', 'visible').removeClass('clockpicker-dial-out');
|
1292
|
-
|
1293
|
-
// Reset clock hand
|
1294
|
-
this.resetClock(delay);
|
1295
|
-
|
1296
|
-
// After transitions ended
|
1297
|
-
clearTimeout(this.toggleViewTimer);
|
1298
|
-
this.toggleViewTimer = setTimeout(function() {
|
1299
|
-
hideView.css('visibility', 'hidden');
|
1300
|
-
}, duration);
|
1301
|
-
|
1302
|
-
if (raiseAfterHourSelect)
|
1303
|
-
raiseCallback(this.options.afterHourSelect);
|
1304
|
-
};
|
1305
|
-
|
1306
|
-
// Reset clock hand
|
1307
|
-
ClockPicker.prototype.resetClock = function(delay) {
|
1308
|
-
var view = this.currentView,
|
1309
|
-
value = this[view],
|
1310
|
-
isHours = view === 'hours',
|
1311
|
-
unit = Math.PI / (isHours ? 6 : 30),
|
1312
|
-
radian = value * unit,
|
1313
|
-
radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
|
1314
|
-
x = Math.sin(radian) * radius,
|
1315
|
-
y = - Math.cos(radian) * radius,
|
1316
|
-
self = this;
|
1317
|
-
|
1318
|
-
if(svgSupported && delay) {
|
1319
|
-
self.canvas.addClass('clockpicker-canvas-out');
|
1320
|
-
setTimeout(function(){
|
1321
|
-
self.canvas.removeClass('clockpicker-canvas-out');
|
1322
|
-
self.setHand(x, y);
|
1323
|
-
}, delay);
|
1324
|
-
} else
|
1325
|
-
this.setHand(x, y);
|
1326
|
-
};
|
1327
|
-
|
1328
|
-
// Set clock hand to (x, y)
|
1329
|
-
ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging) {
|
1330
|
-
var radian = Math.atan2(x, - y),
|
1331
|
-
isHours = this.currentView === 'hours',
|
1332
|
-
unit = Math.PI / (isHours || roundBy5? 6 : 30),
|
1333
|
-
z = Math.sqrt(x * x + y * y),
|
1334
|
-
options = this.options,
|
1335
|
-
inner = isHours && z < (outerRadius + innerRadius) / 2,
|
1336
|
-
radius = inner ? innerRadius : outerRadius,
|
1337
|
-
value;
|
1338
|
-
|
1339
|
-
if (options.twelvehour)
|
1340
|
-
radius = outerRadius;
|
1341
|
-
|
1342
|
-
// Radian should in range [0, 2PI]
|
1343
|
-
if (radian < 0)
|
1344
|
-
radian = Math.PI * 2 + radian;
|
1345
|
-
|
1346
|
-
// Get the round value
|
1347
|
-
value = Math.round(radian / unit);
|
1348
|
-
|
1349
|
-
// Get the round radian
|
1350
|
-
radian = value * unit;
|
1351
|
-
|
1352
|
-
// Correct the hours or minutes
|
1353
|
-
if(options.twelvehour) {
|
1354
|
-
if(isHours) {
|
1355
|
-
if(value === 0)
|
1356
|
-
value = 12;
|
1357
|
-
} else {
|
1358
|
-
if(roundBy5)
|
1359
|
-
value *= 5;
|
1360
|
-
if(value === 60)
|
1361
|
-
value = 0;
|
1362
|
-
}
|
1363
|
-
} else {
|
1364
|
-
if(isHours) {
|
1365
|
-
if(value === 12)
|
1366
|
-
value = 0;
|
1367
|
-
value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
|
1368
|
-
} else {
|
1369
|
-
if(roundBy5)
|
1370
|
-
value *= 5;
|
1371
|
-
if(value === 60)
|
1372
|
-
value = 0;
|
1373
|
-
}
|
1374
|
-
}
|
1375
|
-
if (isHours)
|
1376
|
-
this.fg.setAttribute('class', 'clockpicker-canvas-fg');
|
1377
|
-
else {
|
1378
|
-
if(value % 5 == 0)
|
1379
|
-
this.fg.setAttribute('class', 'clockpicker-canvas-fg');
|
1380
|
-
else
|
1381
|
-
this.fg.setAttribute('class', 'clockpicker-canvas-fg active');
|
1382
|
-
}
|
1383
|
-
|
1384
|
-
// Once hours or minutes changed, vibrate the device
|
1385
|
-
if (this[this.currentView] !== value)
|
1386
|
-
if (vibrate && this.options.vibrate)
|
1387
|
-
// Do not vibrate too frequently
|
1388
|
-
if (! this.vibrateTimer) {
|
1389
|
-
navigator[vibrate](10);
|
1390
|
-
this.vibrateTimer = setTimeout($.proxy(function(){
|
1391
|
-
this.vibrateTimer = null;
|
1392
|
-
}, this), 100);
|
1393
|
-
}
|
1394
|
-
|
1395
|
-
this[this.currentView] = value;
|
1396
|
-
this[isHours ? 'spanHours' : 'spanMinutes'].html(leadingZero(value));
|
1397
|
-
|
1398
|
-
// If svg is not supported, just add an active class to the tick
|
1399
|
-
if (! svgSupported) {
|
1400
|
-
this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function(){
|
1401
|
-
var tick = $(this);
|
1402
|
-
tick.toggleClass('active', value === + tick.html());
|
1403
|
-
});
|
1404
|
-
return;
|
1405
|
-
}
|
1406
|
-
|
1407
|
-
// Place clock hand at the top when dragging
|
1408
|
-
if (dragging || (! isHours && value % 5)) {
|
1409
|
-
this.g.insertBefore(this.hand, this.bearing);
|
1410
|
-
this.g.insertBefore(this.bg, this.fg);
|
1411
|
-
this.bg.setAttribute('class', 'clockpicker-canvas-bg clockpicker-canvas-bg-trans');
|
1412
|
-
} else {
|
1413
|
-
// Or place it at the bottom
|
1414
|
-
this.g.insertBefore(this.hand, this.bg);
|
1415
|
-
this.g.insertBefore(this.fg, this.bg);
|
1416
|
-
this.bg.setAttribute('class', 'clockpicker-canvas-bg');
|
1417
|
-
}
|
1418
|
-
|
1419
|
-
// Set clock hand and others' position
|
1420
|
-
var cx1 = Math.sin(radian) * (radius - tickRadius),
|
1421
|
-
cy1 = - Math.cos(radian) * (radius - tickRadius),
|
1422
|
-
cx2 = Math.sin(radian) * radius,
|
1423
|
-
cy2 = - Math.cos(radian) * radius;
|
1424
|
-
this.hand.setAttribute('x2', cx1);
|
1425
|
-
this.hand.setAttribute('y2', cy1);
|
1426
|
-
this.bg.setAttribute('cx', cx2);
|
1427
|
-
this.bg.setAttribute('cy', cy2);
|
1428
|
-
this.fg.setAttribute('cx', cx2);
|
1429
|
-
this.fg.setAttribute('cy', cy2);
|
1430
|
-
};
|
1431
|
-
|
1432
|
-
// Hours and minutes are selected
|
1433
|
-
ClockPicker.prototype.done = function() {
|
1434
|
-
raiseCallback(this.options.beforeDone);
|
1435
|
-
this.hide();
|
1436
|
-
this.label.addClass('active');
|
1437
|
-
|
1438
|
-
var last = this.input.prop('value'),
|
1439
|
-
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
|
1440
|
-
submit = leadingZero(this.hours) + ':' + leadingZero(this.minutes) + ':00';
|
1441
|
-
|
1442
|
-
if (this.options.twelvehour) {
|
1443
|
-
value = value + this.amOrPm;
|
1444
|
-
if ( this.amOrPm == 'PM' )
|
1445
|
-
submit = ((this.hours < 12) ? (this.hours + 12) : 12) + ':' + leadingZero(this.minutes) + ':00';
|
1446
|
-
else
|
1447
|
-
submit = ((this.hours < 12) ? leadingZero(this.hours) : '00') + ':' + leadingZero(this.minutes) + ':00';
|
1448
|
-
}
|
1449
|
-
this.input
|
1450
|
-
.prop({'value': value})
|
1451
|
-
.data({'submit':submit})
|
1452
|
-
.attr({'value': value, 'data-submit':submit});//Force data
|
1453
|
-
this.options.default = submit;
|
1454
|
-
if(value !== last) {
|
1455
|
-
this.input.triggerHandler('change');
|
1456
|
-
if(!this.isInput)
|
1457
|
-
this.element.trigger('change');
|
1458
|
-
}
|
1459
|
-
if(this.options.autoclose)
|
1460
|
-
this.input.trigger('blur');
|
1461
|
-
|
1462
|
-
raiseCallback(this.options.afterDone(this.input, submit));
|
1463
|
-
};
|
1464
|
-
|
1465
|
-
// Remove clockpicker from input
|
1466
|
-
ClockPicker.prototype.remove = function() {
|
1467
|
-
this.element.removeData('clockpicker');
|
1468
|
-
this.input.off('focus.clockpicker click.clockpicker');
|
1469
|
-
if (this.isShown)
|
1470
|
-
this.hide();
|
1471
|
-
if (this.isAppended) {
|
1472
|
-
$win.off('resize.clockpicker' + this.id);
|
1473
|
-
this.popover.remove();
|
1474
|
-
}
|
1475
|
-
};
|
1476
|
-
|
1477
|
-
// Extends $.fn.clockpicker
|
1478
|
-
$.fn.pickatime = function(option){
|
1479
|
-
var args = Array.prototype.slice.call(arguments, 1);
|
1480
|
-
return this.each(function(){
|
1481
|
-
var $this = $(this),
|
1482
|
-
data = $this.data('clockpicker');
|
1483
|
-
if (!data) {
|
1484
|
-
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
|
1485
|
-
$this.data('clockpicker', new ClockPicker($this, options));
|
1486
|
-
} else {
|
1487
|
-
// Manual operatsions. show, hide, remove, e.g.
|
1488
|
-
if (typeof data[option] === 'function')
|
1489
|
-
data[option].apply(data, args);
|
1490
|
-
}
|
1491
|
-
});
|
1492
|
-
};
|
1493
|
-
}());
|
1494
|
-
|
1495
|
-
this.input
|
1496
|
-
.prop({value: value})
|
1497
|
-
.data({submit:submit})
|
1498
|
-
.attr({value: value, 'data-submit':submit}); //forzar nuevos valores
|
1499
|
-
|
1500
|
-
this.options.default = submit;
|
1501
|
-
|
1502
|
-
if(value !== last) {
|
1503
|
-
this.input.triggerHandler('change');
|
1504
|
-
if(!this.isInput)
|
1505
|
-
this.element.trigger('change');
|
1506
|
-
}
|
1507
|
-
|
1508
|
-
if(this.options.autoclose)
|
1509
|
-
this.input.trigger('blur');
|
1510
|
-
|
1511
|
-
raiseCallback(this.options.afterDone);
|
1512
|
-
};
|
1513
|
-
|
1514
|
-
// Remove clockpicker from input
|
1515
|
-
ClockPicker.prototype.remove = function() {
|
1516
|
-
this.element.removeData('clockpicker');
|
1517
|
-
this.input.off('focus.clockpicker click.clockpicker');
|
1518
|
-
if (this.isShown)
|
1519
|
-
this.hide();
|
1520
|
-
if (this.isAppended) {
|
1521
|
-
$win.off('resize.clockpicker' + this.id);
|
1522
|
-
this.popover.remove();
|
1523
|
-
}
|
1524
|
-
};
|
1525
|
-
|
1526
|
-
// Extends $.fn.clockpicker
|
1527
|
-
$.fn.pickatime = function(option){
|
1528
|
-
var args = Array.prototype.slice.call(arguments, 1);
|
1529
|
-
return this.each(function(){
|
1530
|
-
var $this = $(this),
|
1531
|
-
data = $this.data('clockpicker');
|
1532
|
-
if (!data) {
|
1533
|
-
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
|
1534
|
-
$this.data('clockpicker', new ClockPicker($this, options));
|
1535
|
-
} else {
|
1536
|
-
// Manual operatsions. show, hide, remove, e.g.
|
1537
|
-
if (typeof data[option] === 'function')
|
1538
|
-
data[option].apply(data, args);
|
1539
|
-
}
|
1540
|
-
});
|
1541
|
-
};
|
1542
|
-
}());
|
1
|
+
!function(){function t(t){return document.createElementNS(r,t)}function i(t){return(t<10?"0":"")+t}function e(t){var i=++v+"";return t?t+i:i}function s(s,n){function r(t,i){var e=h.offset(),s=/^touch/.test(t.type),o=e.left+f,c=e.top+f,r=(s?t.originalEvent.touches[0]:t).pageX-o,l=(s?t.originalEvent.touches[0]:t).pageY-c,u=Math.sqrt(r*r+l*l),m=!1;if(!i||!(u<b-w||u>b+w)){t.preventDefault();var v=setTimeout(function(){V.popover.addClass("clockpicker-moving")},200);p&&h.append(V.canvas),V.setHand(r,l,!i,!0),a.off(d).on(d,function(t){t.preventDefault();var i=/^touch/.test(t.type),e=(i?t.originalEvent.touches[0]:t).pageX-o,s=(i?t.originalEvent.touches[0]:t).pageY-c;(m||e!==r||s!==l)&&(m=!0,V.setHand(e,s,!1,!0))}),a.off(k).on(k,function(t){a.off(k),t.preventDefault();var e=/^touch/.test(t.type),s=(e?t.originalEvent.changedTouches[0]:t).pageX-o,p=(e?t.originalEvent.changedTouches[0]:t).pageY-c;(i||m)&&s===r&&p===l&&V.setHand(s,p),"hours"===V.currentView?V.toggleView("minutes",A/2):n.autoclose&&(V.minutesView.addClass("clockpicker-dial-out"),setTimeout(function(){V.done()},A/2)),h.prepend(z),clearTimeout(v),V.popover.removeClass("clockpicker-moving"),a.off(d)})}}var l=c(M),h=l.find(".clockpicker-plate"),m=l.find(".picker__holder"),v=l.find(".clockpicker-hours"),P=l.find(".clockpicker-minutes"),C=l.find(".clockpicker-am-pm-block"),x="INPUT"===s.prop("tagName"),T=x?s:s.find("input"),_=c("label[for="+T.attr("id")+"]"),V=this;if(this.id=e("cp"),this.element=s,this.holder=m,this.options=n,this.isAppended=!1,this.isShown=!1,this.currentView="hours",this.isInput=x,this.input=T,this.label=_,this.popover=l,this.plate=h,this.hoursView=v,this.minutesView=P,this.amPmBlock=C,this.spanHours=l.find(".clockpicker-span-hours"),this.spanMinutes=l.find(".clockpicker-span-minutes"),this.spanAmPm=l.find(".clockpicker-span-am-pm"),this.footer=l.find(".picker__footer"),this.amOrPm="PM",n.twelvehour){var H=['<div class="clockpicker-am-pm-block">','<button type="button" class="btn-floating btn-flat clockpicker-button clockpicker-am-button">',"AM","</button>",'<button type="button" class="btn-floating btn-flat clockpicker-button clockpicker-pm-button">',"PM","</button>","</div>"].join("");c(H);n.ampmclickable?(this.spanAmPm.empty(),c('<div id="click-am">AM</div>').on("click",function(){V.spanAmPm.children("#click-am").addClass("text-primary"),V.spanAmPm.children("#click-pm").removeClass("text-primary"),V.amOrPm="AM"}).appendTo(this.spanAmPm),c('<div id="click-pm">PM</div>').on("click",function(){V.spanAmPm.children("#click-pm").addClass("text-primary"),V.spanAmPm.children("#click-am").removeClass("text-primary"),V.amOrPm="PM"}).appendTo(this.spanAmPm)):(c('<button type="button" class="btn-floating btn-flat clockpicker-button am-button" tabindex="1">AM</button>').on("click",function(){V.amOrPm="AM",V.amPmBlock.children(".pm-button").removeClass("active"),V.amPmBlock.children(".am-button").addClass("active"),V.spanAmPm.empty().append("AM")}).appendTo(this.amPmBlock),c('<button type="button" class="btn-floating btn-flat clockpicker-button pm-button" tabindex="2">PM</button>').on("click",function(){V.amOrPm="PM",V.amPmBlock.children(".am-button").removeClass("active"),V.amPmBlock.children(".pm-button").addClass("active"),V.spanAmPm.empty().append("PM")}).appendTo(this.amPmBlock))}T.attr("type","text"),n.darktheme&&l.addClass("darktheme"),c('<button type="button" class="btn-flat clockpicker-button" tabindex="'+(n.twelvehour?"3":"1")+'">'+n.donetext+"</button>").click(c.proxy(this.done,this)).appendTo(this.footer),this.spanHours.click(c.proxy(this.toggleView,this,"hours")),this.spanMinutes.click(c.proxy(this.toggleView,this,"minutes")),T.on("focus.clockpicker click.clockpicker",c.proxy(this.show,this));var S,B,D,E,I=c('<div class="clockpicker-tick"></div>');if(n.twelvehour)for(S=1;S<13;S+=1)B=I.clone(),D=S/6*Math.PI,E=b,B.css("font-size","140%"),B.css({left:f+Math.sin(D)*E-w,top:f-Math.cos(D)*E-w}),B.html(0===S?"00":S),v.append(B),B.on(u,r);else for(S=0;S<24;S+=1){B=I.clone(),D=S/6*Math.PI;var O=S>0&&S<13;E=O?g:b,B.css({left:f+Math.sin(D)*E-w,top:f-Math.cos(D)*E-w}),O&&B.css("font-size","120%"),B.html(0===S?"00":S),v.append(B),B.on(u,r)}for(S=0;S<60;S+=5)B=I.clone(),D=S/30*Math.PI,B.css({left:f+Math.sin(D)*b-w,top:f-Math.cos(D)*b-w}),B.css("font-size","140%"),B.html(i(S)),P.append(B),B.on(u,r);if(h.on(u,function(t){0===c(t.target).closest(".clockpicker-tick").length&&r(t,!0)}),p){var z=l.find(".clockpicker-canvas"),U=t("svg");U.setAttribute("class","clockpicker-svg"),U.setAttribute("width",y),U.setAttribute("height",y);var j=t("g");j.setAttribute("transform","translate("+f+","+f+")");var L=t("circle");L.setAttribute("class","clockpicker-canvas-bearing"),L.setAttribute("cx",0),L.setAttribute("cy",0),L.setAttribute("r",2);var N=t("line");N.setAttribute("x1",0),N.setAttribute("y1",0);var X=t("circle");X.setAttribute("class","clockpicker-canvas-bg"),X.setAttribute("r",w);var Y=t("circle");Y.setAttribute("class","clockpicker-canvas-fg"),Y.setAttribute("r",5),j.appendChild(N),j.appendChild(X),j.appendChild(Y),j.appendChild(L),U.appendChild(j),z.append(U),this.hand=N,this.bg=X,this.fg=Y,this.bearing=L,this.g=j,this.canvas=z}o(this.options.init)}function o(t){t&&"function"==typeof t&&t()}var c=window.jQuery,n=c(window),a=c(document),r="http://www.w3.org/2000/svg",p="SVGAngle"in window&&function(){var t,i=document.createElement("div");return i.innerHTML="<svg/>",t=(i.firstChild&&i.firstChild.namespaceURI)==r,i.innerHTML="",t}(),l=function(){var t=document.createElement("div").style;return"transition"in t||"WebkitTransition"in t||"MozTransition"in t||"msTransition"in t||"OTransition"in t}(),h="ontouchstart"in window,u="mousedown"+(h?" touchstart":""),d="mousemove.clockpicker"+(h?" touchmove.clockpicker":""),k="mouseup.clockpicker"+(h?" touchend.clockpicker":""),m=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,v=0,f=135,b=110,g=80,w=20,y=2*f,A=l?350:1,M=['<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__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>"].join("");s.DEFAULTS={"default":"",fromnow:0,donetext:"Done",autoclose:!1,ampmclickable:!1,darktheme:!1,twelvehour:!0,vibrate:!0},s.prototype.toggle=function(){this[this.isShown?"hide":"show"]()},s.prototype.locate=function(){var t=this.element,i=this.popover;t.offset(),t.outerWidth(),t.outerHeight(),this.options.align;i.show()},s.prototype.show=function(t){if(this.setAMorPM=function(t){var i=t,e="pm"==t?"am":"pm";this.options.twelvehour&&(this.amOrPm=i.toUpperCase(),this.options.ampmclickable?(this.spanAmPm.children("#click-"+i).addClass("text-primary"),this.spanAmPm.children("#click-"+e).removeClass("text-primary")):(this.amPmBlock.children("."+e+"-button").removeClass("active"),this.amPmBlock.children("."+i+"-button").addClass("active"),this.spanAmPm.empty().append(this.amOrPm)))},!this.isShown){o(this.options.beforeShow),c(":input").each(function(){c(this).attr("tabindex",-1)});var e=this;this.input.blur(),this.popover.addClass("picker--opened"),this.input.addClass("picker__input picker__input--active"),c(document.body).css("overflow","hidden"),this.isAppended||(this.options.hasOwnProperty("container")?this.popover.appendTo(this.options.container):this.popover.insertAfter(this.input),this.setAMorPM("pm"),n.on("resize.clockpicker"+this.id,function(){e.isShown&&e.locate()}),this.isAppended=!0);var s=((this.input.prop("value")||this.options["default"]||"")+"").split(":");if(this.options.twelvehour&&"undefined"!=typeof s[1]&&(s[1].includes("AM")?this.setAMorPM("am"):this.setAMorPM("pm"),s[1]=s[1].replace("AM","").replace("PM","")),"now"===s[0]){var r=new Date(+new Date+this.options.fromnow);r.getHours()>=12?this.setAMorPM("pm"):this.setAMorPM("am"),s=[r.getHours(),r.getMinutes()]}this.hours=+s[0]||0,this.minutes=+s[1]||0,this.spanHours.html(i(this.hours)),this.spanMinutes.html(i(this.minutes)),this.toggleView("hours"),this.locate(),this.isShown=!0,a.on("click.clockpicker."+this.id+" focusin.clockpicker."+this.id,function(t){var i=c(t.target);0===i.closest(e.popover.find(".picker__wrap")).length&&0===i.closest(e.input).length&&e.hide()}),a.on("keyup.clockpicker."+this.id,function(t){27===t.keyCode&&e.hide()}),o(this.options.afterShow)}},s.prototype.hide=function(){o(this.options.beforeHide),this.input.removeClass("picker__input picker__input--active"),this.popover.removeClass("picker--opened"),c(document.body).css("overflow","visible"),this.isShown=!1,c(":input").each(function(t){c(this).attr("tabindex",t+1)}),a.off("click.clockpicker."+this.id+" focusin.clockpicker."+this.id),a.off("keyup.clockpicker."+this.id),this.popover.hide(),o(this.options.afterHide)},s.prototype.toggleView=function(t,i){var e=!1;"minutes"===t&&"visible"===c(this.hoursView).css("visibility")&&(o(this.options.beforeHourSelect),e=!0);var s="hours"===t,n=s?this.hoursView:this.minutesView,a=s?this.minutesView:this.hoursView;this.currentView=t,this.spanHours.toggleClass("text-primary",s),this.spanMinutes.toggleClass("text-primary",!s),a.addClass("clockpicker-dial-out"),n.css("visibility","visible").removeClass("clockpicker-dial-out"),this.resetClock(i),clearTimeout(this.toggleViewTimer),this.toggleViewTimer=setTimeout(function(){a.css("visibility","hidden")},A),e&&o(this.options.afterHourSelect)},s.prototype.resetClock=function(t){var i=this.currentView,e=this[i],s="hours"===i,o=Math.PI/(s?6:30),c=e*o,n=s&&e>0&&e<13?g:b,a=Math.sin(c)*n,r=-Math.cos(c)*n,l=this;p&&t?(l.canvas.addClass("clockpicker-canvas-out"),setTimeout(function(){l.canvas.removeClass("clockpicker-canvas-out"),l.setHand(a,r)},t)):this.setHand(a,r)},s.prototype.setHand=function(t,e,s,o){var n,a=Math.atan2(t,-e),r="hours"===this.currentView,l=Math.PI/(r||s?6:30),h=Math.sqrt(t*t+e*e),u=this.options,d=r&&h<(b+g)/2,k=d?g:b;if(u.twelvehour&&(k=b),a<0&&(a=2*Math.PI+a),n=Math.round(a/l),a=n*l,u.twelvehour?r?0===n&&(n=12):(s&&(n*=5),60===n&&(n=0)):r?(12===n&&(n=0),n=d?0===n?12:n:0===n?0:n+12):(s&&(n*=5),60===n&&(n=0)),r?this.fg.setAttribute("class","clockpicker-canvas-fg"):n%5==0?this.fg.setAttribute("class","clockpicker-canvas-fg"):this.fg.setAttribute("class","clockpicker-canvas-fg active"),this[this.currentView]!==n&&m&&this.options.vibrate&&(this.vibrateTimer||(navigator[m](10),this.vibrateTimer=setTimeout(c.proxy(function(){this.vibrateTimer=null},this),100))),this[this.currentView]=n,this[r?"spanHours":"spanMinutes"].html(i(n)),!p)return void this[r?"hoursView":"minutesView"].find(".clockpicker-tick").each(function(){var t=c(this);t.toggleClass("active",n===+t.html())});o||!r&&n%5?(this.g.insertBefore(this.hand,this.bearing),this.g.insertBefore(this.bg,this.fg),this.bg.setAttribute("class","clockpicker-canvas-bg clockpicker-canvas-bg-trans")):(this.g.insertBefore(this.hand,this.bg),this.g.insertBefore(this.fg,this.bg),this.bg.setAttribute("class","clockpicker-canvas-bg"));var v=Math.sin(a)*(k-w),f=-Math.cos(a)*(k-w),y=Math.sin(a)*k,A=-Math.cos(a)*k;this.hand.setAttribute("x2",v),this.hand.setAttribute("y2",f),this.bg.setAttribute("cx",y),this.bg.setAttribute("cy",A),this.fg.setAttribute("cx",y),this.fg.setAttribute("cy",A)},s.prototype.done=function(){o(this.options.beforeDone),this.hide(),this.label.addClass("active");var t=this.input.prop("value"),e=i(this.hours)+":"+i(this.minutes);this.options.twelvehour&&(e+=this.amOrPm),this.input.prop("value",e),e!==t&&(this.input.triggerHandler("change"),this.isInput||this.element.trigger("change")),this.options.autoclose&&this.input.trigger("blur"),o(this.options.afterDone)},s.prototype.remove=function(){this.element.removeData("clockpicker"),this.input.off("focus.clockpicker click.clockpicker"),this.isShown&&this.hide(),this.isAppended&&(n.off("resize.clockpicker"+this.id),this.popover.remove())},c.fn.pickatime=function(t){var i=Array.prototype.slice.call(arguments,1);return this.each(function(){var e=c(this),o=e.data("clockpicker");if(o)"function"==typeof o[t]&&o[t].apply(o,i);else{var n=c.extend({},s.DEFAULTS,e.data(),"object"==typeof t&&t);e.data("clockpicker",new s(e,n))}})}}();
|