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.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +2 -2
  3. data/app/assets/javascripts/materialize.js +6015 -5060
  4. data/app/assets/javascripts/materialize/animation.js +4 -5
  5. data/app/assets/javascripts/materialize/buttons.js +24 -38
  6. data/app/assets/javascripts/materialize/cards.js +13 -21
  7. data/app/assets/javascripts/materialize/carousel.js +122 -110
  8. data/app/assets/javascripts/materialize/character_counter.js +14 -22
  9. data/app/assets/javascripts/materialize/chips.js +41 -44
  10. data/app/assets/javascripts/materialize/collapsible.js +41 -46
  11. data/app/assets/javascripts/materialize/date_picker/picker.date.js +965 -1167
  12. data/app/assets/javascripts/materialize/date_picker/picker.js +546 -634
  13. data/app/assets/javascripts/materialize/date_picker/picker.time.js +166 -212
  14. data/app/assets/javascripts/materialize/dropdown.js +53 -68
  15. data/app/assets/javascripts/materialize/extras/nouislider.js +3 -1
  16. data/app/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  17. data/app/assets/javascripts/materialize/forms.js +156 -154
  18. data/app/assets/javascripts/materialize/global.js +34 -43
  19. data/app/assets/javascripts/materialize/hammer.min.js +424 -1
  20. data/app/assets/javascripts/materialize/initial.js +3 -3
  21. data/app/assets/javascripts/materialize/jquery.easing.1.4.js +120 -142
  22. data/app/assets/javascripts/materialize/jquery.hammer.js +9 -9
  23. data/app/assets/javascripts/materialize/materialbox.js +81 -107
  24. data/app/assets/javascripts/materialize/modal.js +373 -162
  25. data/app/assets/javascripts/materialize/parallax.js +11 -15
  26. data/app/assets/javascripts/materialize/pushpin.js +2 -5
  27. data/app/assets/javascripts/materialize/scrollFire.js +9 -11
  28. data/app/assets/javascripts/materialize/scrollspy.js +84 -92
  29. data/app/assets/javascripts/materialize/sideNav.js +128 -139
  30. data/app/assets/javascripts/materialize/slider.js +83 -112
  31. data/app/assets/javascripts/materialize/tabs.js +196 -196
  32. data/app/assets/javascripts/materialize/tapTarget.js +170 -173
  33. data/app/assets/javascripts/materialize/toasts.js +330 -112
  34. data/app/assets/javascripts/materialize/tooltip.js +134 -145
  35. data/app/assets/javascripts/materialize/transitions.js +43 -49
  36. data/app/assets/javascripts/materialize/velocity.min.js +623 -2
  37. data/app/assets/javascripts/materialize/waves.js +42 -47
  38. data/app/assets/stylesheets/materialize/components/_buttons.scss +1 -1
  39. data/app/assets/stylesheets/materialize/components/_carousel.scss +4 -5
  40. data/app/assets/stylesheets/materialize/components/_chips.scss +1 -0
  41. data/app/assets/stylesheets/materialize/components/_collapsible.scss +4 -7
  42. data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
  43. data/app/assets/stylesheets/materialize/components/_global.scss +8 -14
  44. data/app/assets/stylesheets/materialize/components/_navbar.scss +0 -1
  45. data/app/assets/stylesheets/materialize/components/_tabs.scss +1 -7
  46. data/app/assets/stylesheets/materialize/components/_toast.scss +6 -12
  47. data/app/assets/stylesheets/materialize/components/_variables.scss +55 -43
  48. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +1 -0
  49. data/app/assets/stylesheets/materialize/components/forms/_checkboxes.scss +2 -12
  50. data/app/assets/stylesheets/materialize/components/forms/_file-input.scss +6 -0
  51. data/app/assets/stylesheets/materialize/components/forms/_input-fields.scss +67 -37
  52. data/app/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +1 -3
  53. data/app/assets/stylesheets/materialize/components/forms/_select.scss +72 -11
  54. data/app/assets/stylesheets/materialize/components/forms/_switches.scss +2 -4
  55. data/app/assets/stylesheets/materialize/extras/nouislider.css +8 -1
  56. data/lib/materialize-sass/version.rb +1 -1
  57. metadata +2 -5
  58. data/app/assets/javascripts/materialize/init.js +0 -214
  59. data/app/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
  60. 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
- ;(function(){
10
+ (function () {
11
11
  var $ = window.jQuery,
12
- $win = $(window),
13
- $doc = $(document);
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
- 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
- })();
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 = (function() {
27
+ var transitionSupported = function () {
28
28
  var style = document.createElement('div').style;
29
- return 'transition' in style ||
30
- 'WebkitTransition' in style ||
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
- mousedownEvent = 'mousedown' + ( touchSupported ? ' touchstart' : ''),
39
- mousemoveEvent = 'mousemove.clockpicker' + ( touchSupported ? ' touchmove.clockpicker' : ''),
40
- mouseupEvent = 'mouseup.clockpicker' + ( touchSupported ? ' touchend.clockpicker' : '');
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
- outerRadius = 105,
63
- // innerRadius = 80 on 12 hour clock
64
- innerRadius = 80,
65
- tickRadius = 20,
66
- diameter = dialRadius * 2,
67
- duration = transitionSupported ? 350 : 1;
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
- plate = popover.find('.clockpicker-plate'),
112
- holder = popover.find('.picker__holder'),
113
- hoursView = popover.find('.clockpicker-hours'),
114
- minutesView = popover.find('.clockpicker-minutes'),
115
- amPmBlock = popover.find('.clockpicker-am-pm-block'),
116
- isInput = element.prop('tagName') === 'INPUT',
117
- input = isInput ? element : element.find('input'),
118
- label = $("label[for=" + input.attr("id") + "]"),
119
- self = this;
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
- i, tick, radian, radius;
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
- isTouch = /^touch/.test(e.type),
233
- x0 = offset.left + dialRadius,
234
- y0 = offset.top + dialRadius,
235
- dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
236
- dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
237
- z = Math.sqrt(dx * dx + dy * dy),
238
- moved = false;
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
- x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
259
- y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
260
- if (! moved && x === dx && y === dy) {
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
- x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
274
- y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
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
- } else if (options.autoclose) {
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
- svg = createSvgElement('svg');
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': '', // default time, 'now' or '13:14' e.g.
342
- fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
343
- donetext: 'Ok', // done button text
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, // auto close when minute is selected
347
- ampmclickable: true, // set am/pm button on itself
348
- darktheme: false, // set to dark theme
349
- twelvehour: true, // change to 12 hour AM/PM clock from 24 hour
350
- vibrate: true // vibrate the device when dragging clock hand
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
- popover = this.popover,
362
- offset = element.offset(),
363
- width = element.outerWidth(),
364
- height = element.outerHeight(),
365
- align = this.options.align,
366
- self = this;
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(+ new Date() + this.options.fromnow);
399
- value = [
400
- now.getHours(),
401
- now.getMinutes()
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 = + value[0] || 0;
405
- this.minutes = + value[1] || 0;
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
- nextView = isHours ? this.hoursView : this.minutesView,
473
- hideView = isHours ? this.minutesView : this.hoursView;
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', ! isHours);
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
- value = this[view],
501
- isHours = view === 'hours',
502
- unit = Math.PI / (isHours ? 6 : 30),
503
- radian = value * unit,
504
- radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
505
- x = Math.sin(radian) * radius,
506
- y = - Math.cos(radian) * radius,
507
- self = this;
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, - y),
522
- isHours = this.currentView === 'hours',
523
- unit = Math.PI / (isHours || roundBy5? 6 : 30),
524
- z = Math.sqrt(x * x + y * y),
525
- options = this.options,
526
- inner = isHours && z < (outerRadius + innerRadius) / 2,
527
- radius = inner ? innerRadius : outerRadius,
528
- value;
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
- value *= 5;
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
- value = 0;
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
- value *= 5;
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
- if (isHours) {
584
- this['spanHours'].html(value);
585
- } else {
586
- this['spanMinutes'].html(leadingZero(value));
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 === + tick.html());
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
- cy1 = - Math.cos(radian) * (radius - tickRadius),
555
+ cy1 = -Math.cos(radian) * (radius - tickRadius),
601
556
  cx2 = Math.sin(radian) * radius,
602
- cy2 = - Math.cos(radian) * radius;
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
- value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
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
- value = '';
595
+ value = '';
642
596
 
643
597
  this.input.prop('value', value);
644
598
  if (value !== last) {
645
599
  this.input.triggerHandler('change');
646
- if (! this.isInput) {
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
- data = $this.data('clockpicker');
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
+ })();