clockpicker-rails 0.0.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.
@@ -0,0 +1,6 @@
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
+ !function(){function t(t){return document.createElementNS(p,t)}function i(t){return(10>t?"0":"")+t}function e(t){var i=++m+"";return t?t+i:i}function s(s,r){function p(t,i){var e=u.offset(),s=/^touch/.test(t.type),o=e.left+b,n=e.top+b,p=(s?t.originalEvent.touches[0]:t).pageX-o,h=(s?t.originalEvent.touches[0]:t).pageY-n,k=Math.sqrt(p*p+h*h),v=!1;if(!i||!(g-y>k||k>g+y)){t.preventDefault();var m=setTimeout(function(){c.addClass("clockpicker-moving")},200);l&&u.append(x.canvas),x.setHand(p,h,!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-n;(v||e!==p||s!==h)&&(v=!0,x.setHand(e,s,!1,!0))}),a.off(f).on(f,function(t){a.off(f),t.preventDefault();var e=/^touch/.test(t.type),s=(e?t.originalEvent.changedTouches[0]:t).pageX-o,l=(e?t.originalEvent.changedTouches[0]:t).pageY-n;(i||v)&&s===p&&l===h&&x.setHand(s,l),"hours"===x.currentView?x.toggleView("minutes",A/2):r.autoclose&&(x.minutesView.addClass("clockpicker-dial-out"),setTimeout(function(){x.done()},A/2)),u.prepend(j),clearTimeout(m),c.removeClass("clockpicker-moving"),a.off(d)})}}var h=n(V),u=h.find(".clockpicker-plate"),v=h.find(".clockpicker-hours"),m=h.find(".clockpicker-minutes"),T=h.find(".clockpicker-am-pm-block"),C="INPUT"===s.prop("tagName"),H=C?s:s.find("input"),P=s.find(".input-group-addon"),x=this;if(this.id=e("cp"),this.element=s,this.options=r,this.isAppended=!1,this.isShown=!1,this.currentView="hours",this.isInput=C,this.input=H,this.addon=P,this.popover=h,this.plate=u,this.hoursView=v,this.minutesView=m,this.amPmBlock=T,this.spanHours=h.find(".clockpicker-span-hours"),this.spanMinutes=h.find(".clockpicker-span-minutes"),this.spanAmPm=h.find(".clockpicker-span-am-pm"),this.amOrPm="PM",r.twelvehour){{var S=['<div class="clockpicker-am-pm-block">','<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-am-button">',"AM</button>",'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-pm-button">',"PM</button>","</div>"].join("");n(S)}n('<button type="button" class="btn btn-sm btn-default clockpicker-button am-button">AM</button>').on("click",function(){x.amOrPm="AM",n(".clockpicker-span-am-pm").empty().append("AM")}).appendTo(this.amPmBlock),n('<button type="button" class="btn btn-sm btn-default clockpicker-button pm-button">PM</button>').on("click",function(){x.amOrPm="PM",n(".clockpicker-span-am-pm").empty().append("PM")}).appendTo(this.amPmBlock)}r.autoclose||n('<button type="button" class="btn btn-sm btn-default btn-block clockpicker-button">'+r.donetext+"</button>").click(n.proxy(this.done,this)).appendTo(h),"top"!==r.placement&&"bottom"!==r.placement||"top"!==r.align&&"bottom"!==r.align||(r.align="left"),"left"!==r.placement&&"right"!==r.placement||"left"!==r.align&&"right"!==r.align||(r.align="top"),h.addClass(r.placement),h.addClass("clockpicker-align-"+r.align),this.spanHours.click(n.proxy(this.toggleView,this,"hours")),this.spanMinutes.click(n.proxy(this.toggleView,this,"minutes")),H.on("focus.clockpicker click.clockpicker",n.proxy(this.show,this)),P.on("click.clockpicker",n.proxy(this.toggle,this));var E,D,I,B,z=n('<div class="clockpicker-tick"></div>');if(r.twelvehour)for(E=1;13>E;E+=1)D=z.clone(),I=E/6*Math.PI,B=g,D.css("font-size","120%"),D.css({left:b+Math.sin(I)*B-y,top:b-Math.cos(I)*B-y}),D.html(0===E?"00":E),v.append(D),D.on(k,p);else for(E=0;24>E;E+=1){D=z.clone(),I=E/6*Math.PI;var O=E>0&&13>E;B=O?w:g,D.css({left:b+Math.sin(I)*B-y,top:b-Math.cos(I)*B-y}),O&&D.css("font-size","120%"),D.html(0===E?"00":E),v.append(D),D.on(k,p)}for(E=0;60>E;E+=5)D=z.clone(),I=E/30*Math.PI,D.css({left:b+Math.sin(I)*g-y,top:b-Math.cos(I)*g-y}),D.css("font-size","120%"),D.html(i(E)),m.append(D),D.on(k,p);if(u.on(k,function(t){0===n(t.target).closest(".clockpicker-tick").length&&p(t,!0)}),l){var j=h.find(".clockpicker-canvas"),L=t("svg");L.setAttribute("class","clockpicker-svg"),L.setAttribute("width",M),L.setAttribute("height",M);var U=t("g");U.setAttribute("transform","translate("+b+","+b+")");var W=t("circle");W.setAttribute("class","clockpicker-canvas-bearing"),W.setAttribute("cx",0),W.setAttribute("cy",0),W.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",y);var Y=t("circle");Y.setAttribute("class","clockpicker-canvas-fg"),Y.setAttribute("r",3.5),U.appendChild(N),U.appendChild(X),U.appendChild(Y),U.appendChild(W),L.appendChild(U),j.append(L),this.hand=N,this.bg=X,this.fg=Y,this.bearing=W,this.g=U,this.canvas=j}o(this.options.init)}function o(t){t&&"function"==typeof t&&t()}var c,n=window.jQuery,r=n(window),a=n(document),p="http://www.w3.org/2000/svg",l="SVGAngle"in window&&function(){var t,i=document.createElement("div");return i.innerHTML="<svg/>",t=(i.firstChild&&i.firstChild.namespaceURI)==p,i.innerHTML="",t}(),h=function(){var t=document.createElement("div").style;return"transition"in t||"WebkitTransition"in t||"MozTransition"in t||"msTransition"in t||"OTransition"in t}(),u="ontouchstart"in window,k="mousedown"+(u?" touchstart":""),d="mousemove.clockpicker"+(u?" touchmove.clockpicker":""),f="mouseup.clockpicker"+(u?" touchend.clockpicker":""),v=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,m=0,b=100,g=80,w=54,y=13,M=2*b,A=h?350:1,V=['<div class="popover clockpicker-popover">','<div class="arrow"></div>','<div class="popover-title">','<span class="clockpicker-span-hours text-primary"></span>'," : ",'<span class="clockpicker-span-minutes"></span>','<span class="clockpicker-span-am-pm"></span>',"</div>",'<div class="popover-content">','<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>",'<span class="clockpicker-am-pm-block">',"</span>","</div>","</div>"].join("");s.DEFAULTS={"default":"",fromnow:0,placement:"bottom",align:"left",donetext:"完成",autoclose:!1,twelvehour:!1,vibrate:!0},s.prototype.toggle=function(){this[this.isShown?"hide":"show"]()},s.prototype.locate=function(){var t=this.element,i=this.popover,e=t.offset(),s=t.outerWidth(),o=t.outerHeight(),c=this.options.placement,n=this.options.align,r={};switch(i.show(),c){case"bottom":r.top=e.top+o;break;case"right":r.left=e.left+s;break;case"top":r.top=e.top-i.outerHeight();break;case"left":r.left=e.left-i.outerWidth()}switch(n){case"left":r.left=e.left;break;case"right":r.left=e.left+s-i.outerWidth();break;case"top":r.top=e.top;break;case"bottom":r.top=e.top+o-i.outerHeight()}i.css(r)},s.prototype.show=function(){if(!this.isShown){o(this.options.beforeShow);var t=this;this.isAppended||(c=n(document.body).append(this.popover),r.on("resize.clockpicker"+this.id,function(){t.isShown&&t.locate()}),this.isAppended=!0);var e=((this.input.prop("value")||this.options["default"]||"")+"").split(":");if("now"===e[0]){var s=new Date(+new Date+this.options.fromnow);e=[s.getHours(),s.getMinutes()]}this.hours=+e[0]||0,this.minutes=+e[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(i){var e=n(i.target);0===e.closest(t.popover).length&&0===e.closest(t.addon).length&&0===e.closest(t.input).length&&t.hide()}),a.on("keyup.clockpicker."+this.id,function(i){27===i.keyCode&&t.hide()}),o(this.options.afterShow)}},s.prototype.hide=function(){o(this.options.beforeHide),this.isShown=!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"===n(this.hoursView).css("visibility")&&(o(this.options.beforeHourSelect),e=!0);var s="hours"===t,c=s?this.hoursView:this.minutesView,r=s?this.minutesView:this.hoursView;this.currentView=t,this.spanHours.toggleClass("text-primary",s),this.spanMinutes.toggleClass("text-primary",!s),r.addClass("clockpicker-dial-out"),c.css("visibility","visible").removeClass("clockpicker-dial-out"),this.resetClock(i),clearTimeout(this.toggleViewTimer),this.toggleViewTimer=setTimeout(function(){r.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&&13>e?w:g,r=Math.sin(c)*n,a=-Math.cos(c)*n,p=this;l&&t?(p.canvas.addClass("clockpicker-canvas-out"),setTimeout(function(){p.canvas.removeClass("clockpicker-canvas-out"),p.setHand(r,a)},t)):this.setHand(r,a)},s.prototype.setHand=function(t,e,s,o){var c,r=Math.atan2(t,-e),a="hours"===this.currentView,p=Math.PI/(a||s?6:30),h=Math.sqrt(t*t+e*e),u=this.options,k=a&&(g+w)/2>h,d=k?w:g;if(u.twelvehour&&(d=g),0>r&&(r=2*Math.PI+r),c=Math.round(r/p),r=c*p,u.twelvehour?a?0===c&&(c=12):(s&&(c*=5),60===c&&(c=0)):a?(12===c&&(c=0),c=k?0===c?12:c:0===c?0:c+12):(s&&(c*=5),60===c&&(c=0)),this[this.currentView]!==c&&v&&this.options.vibrate&&(this.vibrateTimer||(navigator[v](10),this.vibrateTimer=setTimeout(n.proxy(function(){this.vibrateTimer=null},this),100))),this[this.currentView]=c,this[a?"spanHours":"spanMinutes"].html(i(c)),!l)return void this[a?"hoursView":"minutesView"].find(".clockpicker-tick").each(function(){var t=n(this);t.toggleClass("active",c===+t.html())});o||!a&&c%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 f=Math.sin(r)*d,m=-Math.cos(r)*d;this.hand.setAttribute("x2",f),this.hand.setAttribute("y2",m),this.bg.setAttribute("cx",f),this.bg.setAttribute("cy",m),this.fg.setAttribute("cx",f),this.fg.setAttribute("cy",m)},s.prototype.done=function(){o(this.options.beforeDone),this.hide();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.addon.off("click.clockpicker"),this.isShown&&this.hide(),this.isAppended&&(r.off("resize.clockpicker"+this.id),this.popover.remove())},n.fn.clockpicker=function(t){var i=Array.prototype.slice.call(arguments,1);return this.each(function(){var e=n(this),o=e.data("clockpicker");if(o)"function"==typeof o[t]&&o[t].apply(o,i);else{var c=n.extend({},s.DEFAULTS,e.data(),"object"==typeof t&&t);e.data("clockpicker",new s(e,c))}})}}();
@@ -0,0 +1,729 @@
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
+
7
+ ;(function(){
8
+ var $ = window.jQuery,
9
+ $win = $(window),
10
+ $doc = $(document),
11
+ $body;
12
+
13
+ // Can I use inline svg ?
14
+ var svgNS = 'http://www.w3.org/2000/svg',
15
+ svgSupported = 'SVGAngle' in window && (function(){
16
+ var supported,
17
+ el = document.createElement('div');
18
+ el.innerHTML = '<svg/>';
19
+ supported = (el.firstChild && el.firstChild.namespaceURI) == svgNS;
20
+ el.innerHTML = '';
21
+ return supported;
22
+ })();
23
+
24
+ // Can I use transition ?
25
+ var transitionSupported = (function(){
26
+ var style = document.createElement('div').style;
27
+ return 'transition' in style ||
28
+ 'WebkitTransition' in style ||
29
+ 'MozTransition' in style ||
30
+ 'msTransition' in style ||
31
+ 'OTransition' in style;
32
+ })();
33
+
34
+ // Listen touch events in touch screen device, instead of mouse events in desktop.
35
+ var touchSupported = 'ontouchstart' in window,
36
+ mousedownEvent = 'mousedown' + ( touchSupported ? ' touchstart' : ''),
37
+ mousemoveEvent = 'mousemove.clockpicker' + ( touchSupported ? ' touchmove.clockpicker' : ''),
38
+ mouseupEvent = 'mouseup.clockpicker' + ( touchSupported ? ' touchend.clockpicker' : '');
39
+
40
+ // Vibrate the device if supported
41
+ var vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
42
+
43
+ function createSvgElement(name) {
44
+ return document.createElementNS(svgNS, name);
45
+ }
46
+
47
+ function leadingZero(num) {
48
+ return (num < 10 ? '0' : '') + num;
49
+ }
50
+
51
+ // Get a unique id
52
+ var idCounter = 0;
53
+ function uniqueId(prefix) {
54
+ var id = ++idCounter + '';
55
+ return prefix ? prefix + id : id;
56
+ }
57
+
58
+ // Clock size
59
+ var dialRadius = 100,
60
+ outerRadius = 80,
61
+ // innerRadius = 80 on 12 hour clock
62
+ innerRadius = 54,
63
+ tickRadius = 13,
64
+ diameter = dialRadius * 2,
65
+ duration = transitionSupported ? 350 : 1;
66
+
67
+ // Popover template
68
+ var tpl = [
69
+ '<div class="popover clockpicker-popover">',
70
+ '<div class="arrow"></div>',
71
+ '<div class="popover-title">',
72
+ '<span class="clockpicker-span-hours text-primary"></span>',
73
+ ' : ',
74
+ '<span class="clockpicker-span-minutes"></span>',
75
+ '<span class="clockpicker-span-am-pm"></span>',
76
+ '</div>',
77
+ '<div class="popover-content">',
78
+ '<div class="clockpicker-plate">',
79
+ '<div class="clockpicker-canvas"></div>',
80
+ '<div class="clockpicker-dial clockpicker-hours"></div>',
81
+ '<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
82
+ '</div>',
83
+ '<span class="clockpicker-am-pm-block">',
84
+ '</span>',
85
+ '</div>',
86
+ '</div>'
87
+ ].join('');
88
+
89
+ // ClockPicker
90
+ function ClockPicker(element, options) {
91
+ var popover = $(tpl),
92
+ plate = popover.find('.clockpicker-plate'),
93
+ hoursView = popover.find('.clockpicker-hours'),
94
+ minutesView = popover.find('.clockpicker-minutes'),
95
+ amPmBlock = popover.find('.clockpicker-am-pm-block'),
96
+ isInput = element.prop('tagName') === 'INPUT',
97
+ input = isInput ? element : element.find('input'),
98
+ addon = element.find('.input-group-addon'),
99
+ self = this,
100
+ timer;
101
+
102
+ this.id = uniqueId('cp');
103
+ this.element = element;
104
+ this.options = options;
105
+ this.isAppended = false;
106
+ this.isShown = false;
107
+ this.currentView = 'hours';
108
+ this.isInput = isInput;
109
+ this.input = input;
110
+ this.addon = addon;
111
+ this.popover = popover;
112
+ this.plate = plate;
113
+ this.hoursView = hoursView;
114
+ this.minutesView = minutesView;
115
+ this.amPmBlock = amPmBlock;
116
+ this.spanHours = popover.find('.clockpicker-span-hours');
117
+ this.spanMinutes = popover.find('.clockpicker-span-minutes');
118
+ this.spanAmPm = popover.find('.clockpicker-span-am-pm');
119
+ this.amOrPm = "PM";
120
+
121
+ // Setup for for 12 hour clock if option is selected
122
+ if (options.twelvehour) {
123
+
124
+ var amPmButtonsTemplate = ['<div class="clockpicker-am-pm-block">',
125
+ '<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-am-button">',
126
+ 'AM</button>',
127
+ '<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-pm-button">',
128
+ 'PM</button>',
129
+ '</div>'].join('');
130
+
131
+ var amPmButtons = $(amPmButtonsTemplate);
132
+ //amPmButtons.appendTo(plate);
133
+
134
+ ////Not working b/c they are not shown when this runs
135
+ //$('clockpicker-am-button')
136
+ // .on("click", function() {
137
+ // self.amOrPm = "AM";
138
+ // $('.clockpicker-span-am-pm').empty().append('AM');
139
+ // });
140
+ //
141
+ //$('clockpicker-pm-button')
142
+ // .on("click", function() {
143
+ // self.amOrPm = "PM";
144
+ // $('.clockpicker-span-am-pm').empty().append('PM');
145
+ // });
146
+
147
+ $('<button type="button" class="btn btn-sm btn-default clockpicker-button am-button">' + "AM" + '</button>')
148
+ .on("click", function() {
149
+ self.amOrPm = "AM";
150
+ $('.clockpicker-span-am-pm').empty().append('AM');
151
+ }).appendTo(this.amPmBlock);
152
+
153
+
154
+ $('<button type="button" class="btn btn-sm btn-default clockpicker-button pm-button">' + "PM" + '</button>')
155
+ .on("click", function() {
156
+ self.amOrPm = 'PM';
157
+ $('.clockpicker-span-am-pm').empty().append('PM');
158
+ }).appendTo(this.amPmBlock);
159
+
160
+ }
161
+
162
+ if (! options.autoclose) {
163
+ // If autoclose is not setted, append a button
164
+ $('<button type="button" class="btn btn-sm btn-default btn-block clockpicker-button">' + options.donetext + '</button>')
165
+ .click($.proxy(this.done, this))
166
+ .appendTo(popover);
167
+ }
168
+
169
+ // Placement and arrow align - make sure they make sense.
170
+ if ((options.placement === 'top' || options.placement === 'bottom') && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
171
+ if ((options.placement === 'left' || options.placement === 'right') && (options.align === 'left' || options.align === 'right')) options.align = 'top';
172
+
173
+ popover.addClass(options.placement);
174
+ popover.addClass('clockpicker-align-' + options.align);
175
+
176
+ this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
177
+ this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
178
+
179
+ // Show or toggle
180
+ input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
181
+ addon.on('click.clockpicker', $.proxy(this.toggle, this));
182
+
183
+ // Build ticks
184
+ var tickTpl = $('<div class="clockpicker-tick"></div>'),
185
+ i, tick, radian, radius;
186
+
187
+ // Hours view
188
+ if (options.twelvehour) {
189
+ for (i = 1; i < 13; i += 1) {
190
+ tick = tickTpl.clone();
191
+ radian = i / 6 * Math.PI;
192
+ radius = outerRadius;
193
+ tick.css('font-size', '120%');
194
+ tick.css({
195
+ left: dialRadius + Math.sin(radian) * radius - tickRadius,
196
+ top: dialRadius - Math.cos(radian) * radius - tickRadius
197
+ });
198
+ tick.html(i === 0 ? '00' : i);
199
+ hoursView.append(tick);
200
+ tick.on(mousedownEvent, mousedown);
201
+ }
202
+ } else {
203
+ for (i = 0; i < 24; i += 1) {
204
+ tick = tickTpl.clone();
205
+ radian = i / 6 * Math.PI;
206
+ var inner = i > 0 && i < 13;
207
+ radius = inner ? innerRadius : outerRadius;
208
+ tick.css({
209
+ left: dialRadius + Math.sin(radian) * radius - tickRadius,
210
+ top: dialRadius - Math.cos(radian) * radius - tickRadius
211
+ });
212
+ if (inner) {
213
+ tick.css('font-size', '120%');
214
+ }
215
+ tick.html(i === 0 ? '00' : i);
216
+ hoursView.append(tick);
217
+ tick.on(mousedownEvent, mousedown);
218
+ }
219
+ }
220
+
221
+ // Minutes view
222
+ for (i = 0; i < 60; i += 5) {
223
+ tick = tickTpl.clone();
224
+ radian = i / 30 * Math.PI;
225
+ tick.css({
226
+ left: dialRadius + Math.sin(radian) * outerRadius - tickRadius,
227
+ top: dialRadius - Math.cos(radian) * outerRadius - tickRadius
228
+ });
229
+ tick.css('font-size', '120%');
230
+ tick.html(leadingZero(i));
231
+ minutesView.append(tick);
232
+ tick.on(mousedownEvent, mousedown);
233
+ }
234
+
235
+ // Clicking on minutes view space
236
+ plate.on(mousedownEvent, function(e){
237
+ if ($(e.target).closest('.clockpicker-tick').length === 0) {
238
+ mousedown(e, true);
239
+ }
240
+ });
241
+
242
+ // Mousedown or touchstart
243
+ function mousedown(e, space) {
244
+ var offset = plate.offset(),
245
+ isTouch = /^touch/.test(e.type),
246
+ x0 = offset.left + dialRadius,
247
+ y0 = offset.top + dialRadius,
248
+ dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
249
+ dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
250
+ z = Math.sqrt(dx * dx + dy * dy),
251
+ moved = false;
252
+
253
+ // When clicking on minutes view space, check the mouse position
254
+ if (space && (z < outerRadius - tickRadius || z > outerRadius + tickRadius)) {
255
+ return;
256
+ }
257
+ e.preventDefault();
258
+
259
+ // Set cursor style of body after 200ms
260
+ var movingTimer = setTimeout(function(){
261
+ $body.addClass('clockpicker-moving');
262
+ }, 200);
263
+
264
+ // Place the canvas to top
265
+ if (svgSupported) {
266
+ plate.append(self.canvas);
267
+ }
268
+
269
+ // Clock
270
+ self.setHand(dx, dy, ! space, true);
271
+
272
+ // Mousemove on document
273
+ $doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
274
+ e.preventDefault();
275
+ var isTouch = /^touch/.test(e.type),
276
+ x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
277
+ y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
278
+ if (! moved && x === dx && y === dy) {
279
+ // Clicking in chrome on windows will trigger a mousemove event
280
+ return;
281
+ }
282
+ moved = true;
283
+ self.setHand(x, y, false, true);
284
+ });
285
+
286
+ // Mouseup on document
287
+ $doc.off(mouseupEvent).on(mouseupEvent, function(e){
288
+ $doc.off(mouseupEvent);
289
+ e.preventDefault();
290
+ var isTouch = /^touch/.test(e.type),
291
+ x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
292
+ y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
293
+ if ((space || moved) && x === dx && y === dy) {
294
+ self.setHand(x, y);
295
+ }
296
+ if (self.currentView === 'hours') {
297
+ self.toggleView('minutes', duration / 2);
298
+ } else {
299
+ if (options.autoclose) {
300
+ self.minutesView.addClass('clockpicker-dial-out');
301
+ setTimeout(function(){
302
+ self.done();
303
+ }, duration / 2);
304
+ }
305
+ }
306
+ plate.prepend(canvas);
307
+
308
+ // Reset cursor style of body
309
+ clearTimeout(movingTimer);
310
+ $body.removeClass('clockpicker-moving');
311
+
312
+ // Unbind mousemove event
313
+ $doc.off(mousemoveEvent);
314
+ });
315
+ }
316
+
317
+ if (svgSupported) {
318
+ // Draw clock hands and others
319
+ var canvas = popover.find('.clockpicker-canvas'),
320
+ svg = createSvgElement('svg');
321
+ svg.setAttribute('class', 'clockpicker-svg');
322
+ svg.setAttribute('width', diameter);
323
+ svg.setAttribute('height', diameter);
324
+ var g = createSvgElement('g');
325
+ g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
326
+ var bearing = createSvgElement('circle');
327
+ bearing.setAttribute('class', 'clockpicker-canvas-bearing');
328
+ bearing.setAttribute('cx', 0);
329
+ bearing.setAttribute('cy', 0);
330
+ bearing.setAttribute('r', 2);
331
+ var hand = createSvgElement('line');
332
+ hand.setAttribute('x1', 0);
333
+ hand.setAttribute('y1', 0);
334
+ var bg = createSvgElement('circle');
335
+ bg.setAttribute('class', 'clockpicker-canvas-bg');
336
+ bg.setAttribute('r', tickRadius);
337
+ var fg = createSvgElement('circle');
338
+ fg.setAttribute('class', 'clockpicker-canvas-fg');
339
+ fg.setAttribute('r', 3.5);
340
+ g.appendChild(hand);
341
+ g.appendChild(bg);
342
+ g.appendChild(fg);
343
+ g.appendChild(bearing);
344
+ svg.appendChild(g);
345
+ canvas.append(svg);
346
+
347
+ this.hand = hand;
348
+ this.bg = bg;
349
+ this.fg = fg;
350
+ this.bearing = bearing;
351
+ this.g = g;
352
+ this.canvas = canvas;
353
+ }
354
+
355
+ raiseCallback(this.options.init);
356
+ }
357
+
358
+ function raiseCallback(callbackFunction) {
359
+ if (callbackFunction && typeof callbackFunction === "function") {
360
+ callbackFunction();
361
+ }
362
+ }
363
+
364
+ // Default options
365
+ ClockPicker.DEFAULTS = {
366
+ 'default': '', // default time, 'now' or '13:14' e.g.
367
+ fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
368
+ placement: 'bottom', // clock popover placement
369
+ align: 'left', // popover arrow align
370
+ donetext: '完成', // done button text
371
+ autoclose: false, // auto close when minute is selected
372
+ twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
373
+ vibrate: true // vibrate the device when dragging clock hand
374
+ };
375
+
376
+ // Show or hide popover
377
+ ClockPicker.prototype.toggle = function(){
378
+ this[this.isShown ? 'hide' : 'show']();
379
+ };
380
+
381
+ // Set popover position
382
+ ClockPicker.prototype.locate = function(){
383
+ var element = this.element,
384
+ popover = this.popover,
385
+ offset = element.offset(),
386
+ width = element.outerWidth(),
387
+ height = element.outerHeight(),
388
+ placement = this.options.placement,
389
+ align = this.options.align,
390
+ styles = {},
391
+ self = this;
392
+
393
+ popover.show();
394
+
395
+ // Place the popover
396
+ switch (placement) {
397
+ case 'bottom':
398
+ styles.top = offset.top + height;
399
+ break;
400
+ case 'right':
401
+ styles.left = offset.left + width;
402
+ break;
403
+ case 'top':
404
+ styles.top = offset.top - popover.outerHeight();
405
+ break;
406
+ case 'left':
407
+ styles.left = offset.left - popover.outerWidth();
408
+ break;
409
+ }
410
+
411
+ // Align the popover arrow
412
+ switch (align) {
413
+ case 'left':
414
+ styles.left = offset.left;
415
+ break;
416
+ case 'right':
417
+ styles.left = offset.left + width - popover.outerWidth();
418
+ break;
419
+ case 'top':
420
+ styles.top = offset.top;
421
+ break;
422
+ case 'bottom':
423
+ styles.top = offset.top + height - popover.outerHeight();
424
+ break;
425
+ }
426
+
427
+ popover.css(styles);
428
+ };
429
+
430
+ // Show popover
431
+ ClockPicker.prototype.show = function(e){
432
+ // Not show again
433
+ if (this.isShown) {
434
+ return;
435
+ }
436
+
437
+ raiseCallback(this.options.beforeShow);
438
+
439
+ var self = this;
440
+
441
+ // Initialize
442
+ if (! this.isAppended) {
443
+ // Append popover to body
444
+ $body = $(document.body).append(this.popover);
445
+
446
+ // Reset position when resize
447
+ $win.on('resize.clockpicker' + this.id, function(){
448
+ if (self.isShown) {
449
+ self.locate();
450
+ }
451
+ });
452
+
453
+ this.isAppended = true;
454
+ }
455
+
456
+ // Get the time
457
+ var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
458
+ if (value[0] === 'now') {
459
+ var now = new Date(+ new Date() + this.options.fromnow);
460
+ value = [
461
+ now.getHours(),
462
+ now.getMinutes()
463
+ ];
464
+ }
465
+ this.hours = + value[0] || 0;
466
+ this.minutes = + value[1] || 0;
467
+ this.spanHours.html(leadingZero(this.hours));
468
+ this.spanMinutes.html(leadingZero(this.minutes));
469
+
470
+ // Toggle to hours view
471
+ this.toggleView('hours');
472
+
473
+ // Set position
474
+ this.locate();
475
+
476
+ this.isShown = true;
477
+
478
+ // Hide when clicking or tabbing on any element except the clock, input and addon
479
+ $doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function(e){
480
+ var target = $(e.target);
481
+ if (target.closest(self.popover).length === 0 &&
482
+ target.closest(self.addon).length === 0 &&
483
+ target.closest(self.input).length === 0) {
484
+ self.hide();
485
+ }
486
+ });
487
+
488
+ // Hide when ESC is pressed
489
+ $doc.on('keyup.clockpicker.' + this.id, function(e){
490
+ if (e.keyCode === 27) {
491
+ self.hide();
492
+ }
493
+ });
494
+
495
+ raiseCallback(this.options.afterShow);
496
+ };
497
+
498
+ // Hide popover
499
+ ClockPicker.prototype.hide = function(){
500
+ raiseCallback(this.options.beforeHide);
501
+
502
+ this.isShown = false;
503
+
504
+ // Unbinding events on document
505
+ $doc.off('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id);
506
+ $doc.off('keyup.clockpicker.' + this.id);
507
+
508
+ this.popover.hide();
509
+
510
+ raiseCallback(this.options.afterHide);
511
+ };
512
+
513
+ // Toggle to hours or minutes view
514
+ ClockPicker.prototype.toggleView = function(view, delay){
515
+ var raiseAfterHourSelect = false;
516
+ if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
517
+ raiseCallback(this.options.beforeHourSelect);
518
+ raiseAfterHourSelect = true;
519
+ }
520
+ var isHours = view === 'hours',
521
+ nextView = isHours ? this.hoursView : this.minutesView,
522
+ hideView = isHours ? this.minutesView : this.hoursView;
523
+
524
+ this.currentView = view;
525
+
526
+ this.spanHours.toggleClass('text-primary', isHours);
527
+ this.spanMinutes.toggleClass('text-primary', ! isHours);
528
+
529
+ // Let's make transitions
530
+ hideView.addClass('clockpicker-dial-out');
531
+ nextView.css('visibility', 'visible').removeClass('clockpicker-dial-out');
532
+
533
+ // Reset clock hand
534
+ this.resetClock(delay);
535
+
536
+ // After transitions ended
537
+ clearTimeout(this.toggleViewTimer);
538
+ this.toggleViewTimer = setTimeout(function(){
539
+ hideView.css('visibility', 'hidden');
540
+ }, duration);
541
+
542
+ if (raiseAfterHourSelect) {
543
+ raiseCallback(this.options.afterHourSelect);
544
+ }
545
+ };
546
+
547
+ // Reset clock hand
548
+ ClockPicker.prototype.resetClock = function(delay){
549
+ var view = this.currentView,
550
+ value = this[view],
551
+ isHours = view === 'hours',
552
+ unit = Math.PI / (isHours ? 6 : 30),
553
+ radian = value * unit,
554
+ radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
555
+ x = Math.sin(radian) * radius,
556
+ y = - Math.cos(radian) * radius,
557
+ self = this;
558
+ if (svgSupported && delay) {
559
+ self.canvas.addClass('clockpicker-canvas-out');
560
+ setTimeout(function(){
561
+ self.canvas.removeClass('clockpicker-canvas-out');
562
+ self.setHand(x, y);
563
+ }, delay);
564
+ } else {
565
+ this.setHand(x, y);
566
+ }
567
+ };
568
+
569
+ // Set clock hand to (x, y)
570
+ ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
571
+ var radian = Math.atan2(x, - y),
572
+ isHours = this.currentView === 'hours',
573
+ unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
574
+ z = Math.sqrt(x * x + y * y),
575
+ options = this.options,
576
+ inner = isHours && z < (outerRadius + innerRadius) / 2,
577
+ radius = inner ? innerRadius : outerRadius,
578
+ value;
579
+
580
+ if (options.twelvehour) {
581
+ radius = outerRadius;
582
+ }
583
+
584
+ // Radian should in range [0, 2PI]
585
+ if (radian < 0) {
586
+ radian = Math.PI * 2 + radian;
587
+ }
588
+
589
+ // Get the round value
590
+ value = Math.round(radian / unit);
591
+
592
+ // Get the round radian
593
+ radian = value * unit;
594
+
595
+ // Correct the hours or minutes
596
+ if (options.twelvehour) {
597
+ if (isHours) {
598
+ if (value === 0) {
599
+ value = 12;
600
+ }
601
+ } else {
602
+ if (roundBy5) {
603
+ value *= 5;
604
+ }
605
+ if (value === 60) {
606
+ value = 0;
607
+ }
608
+ }
609
+ } else {
610
+ if (isHours) {
611
+ if (value === 12) {
612
+ value = 0;
613
+ }
614
+ value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
615
+ } else {
616
+ if (roundBy5) {
617
+ value *= 5;
618
+ }
619
+ if (value === 60) {
620
+ value = 0;
621
+ }
622
+ }
623
+ }
624
+
625
+ // Once hours or minutes changed, vibrate the device
626
+ if (this[this.currentView] !== value) {
627
+ if (vibrate && this.options.vibrate) {
628
+ // Do not vibrate too frequently
629
+ if (! this.vibrateTimer) {
630
+ navigator[vibrate](10);
631
+ this.vibrateTimer = setTimeout($.proxy(function(){
632
+ this.vibrateTimer = null;
633
+ }, this), 100);
634
+ }
635
+ }
636
+ }
637
+
638
+ this[this.currentView] = value;
639
+ this[isHours ? 'spanHours' : 'spanMinutes'].html(leadingZero(value));
640
+
641
+ // If svg is not supported, just add an active class to the tick
642
+ if (! svgSupported) {
643
+ this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function(){
644
+ var tick = $(this);
645
+ tick.toggleClass('active', value === + tick.html());
646
+ });
647
+ return;
648
+ }
649
+
650
+ // Place clock hand at the top when dragging
651
+ if (dragging || (! isHours && value % 5)) {
652
+ this.g.insertBefore(this.hand, this.bearing);
653
+ this.g.insertBefore(this.bg, this.fg);
654
+ this.bg.setAttribute('class', 'clockpicker-canvas-bg clockpicker-canvas-bg-trans');
655
+ } else {
656
+ // Or place it at the bottom
657
+ this.g.insertBefore(this.hand, this.bg);
658
+ this.g.insertBefore(this.fg, this.bg);
659
+ this.bg.setAttribute('class', 'clockpicker-canvas-bg');
660
+ }
661
+
662
+ // Set clock hand and others' position
663
+ var cx = Math.sin(radian) * radius,
664
+ cy = - Math.cos(radian) * radius;
665
+ this.hand.setAttribute('x2', cx);
666
+ this.hand.setAttribute('y2', cy);
667
+ this.bg.setAttribute('cx', cx);
668
+ this.bg.setAttribute('cy', cy);
669
+ this.fg.setAttribute('cx', cx);
670
+ this.fg.setAttribute('cy', cy);
671
+ };
672
+
673
+ // Hours and minutes are selected
674
+ ClockPicker.prototype.done = function() {
675
+ raiseCallback(this.options.beforeDone);
676
+ this.hide();
677
+ var last = this.input.prop('value'),
678
+ value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
679
+ if (this.options.twelvehour) {
680
+ value = value + this.amOrPm;
681
+ }
682
+
683
+ this.input.prop('value', value);
684
+ if (value !== last) {
685
+ this.input.triggerHandler('change');
686
+ if (! this.isInput) {
687
+ this.element.trigger('change');
688
+ }
689
+ }
690
+
691
+ if (this.options.autoclose) {
692
+ this.input.trigger('blur');
693
+ }
694
+
695
+ raiseCallback(this.options.afterDone);
696
+ };
697
+
698
+ // Remove clockpicker from input
699
+ ClockPicker.prototype.remove = function() {
700
+ this.element.removeData('clockpicker');
701
+ this.input.off('focus.clockpicker click.clockpicker');
702
+ this.addon.off('click.clockpicker');
703
+ if (this.isShown) {
704
+ this.hide();
705
+ }
706
+ if (this.isAppended) {
707
+ $win.off('resize.clockpicker' + this.id);
708
+ this.popover.remove();
709
+ }
710
+ };
711
+
712
+ // Extends $.fn.clockpicker
713
+ $.fn.clockpicker = function(option){
714
+ var args = Array.prototype.slice.call(arguments, 1);
715
+ return this.each(function(){
716
+ var $this = $(this),
717
+ data = $this.data('clockpicker');
718
+ if (! data) {
719
+ var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
720
+ $this.data('clockpicker', new ClockPicker($this, options));
721
+ } else {
722
+ // Manual operatsions. show, hide, remove, e.g.
723
+ if (typeof data[option] === 'function') {
724
+ data[option].apply(data, args);
725
+ }
726
+ }
727
+ });
728
+ };
729
+ }());