diff --git a/dist/bootstrap-clockpicker.js b/dist/bootstrap-clockpicker.js index e930b4f..6d7caef 100644 --- a/dist/bootstrap-clockpicker.js +++ b/dist/bootstrap-clockpicker.js @@ -117,48 +117,50 @@ this.spanMinutes = popover.find('.clockpicker-span-minutes'); this.spanAmPm = popover.find('.clockpicker-span-am-pm'); this.amOrPm = "PM"; - + // Setup for for 12 hour clock if option is selected if (options.twelvehour) { - + var amPmButtonsTemplate = ['
', '', '', '
'].join(''); - + var amPmButtons = $(amPmButtonsTemplate); //amPmButtons.appendTo(plate); - + ////Not working b/c they are not shown when this runs //$('clockpicker-am-button') // .on("click", function() { // self.amOrPm = "AM"; // $('.clockpicker-span-am-pm').empty().append('AM'); // }); - // + // //$('clockpicker-pm-button') // .on("click", function() { // self.amOrPm = "PM"; // $('.clockpicker-span-am-pm').empty().append('PM'); // }); - + $('') .on("click", function() { self.amOrPm = "AM"; $('.clockpicker-span-am-pm').empty().append('AM'); + self.raiseCallback(self.options.afterAmPmSelect); }).appendTo(this.amPmBlock); - - + + $('') .on("click", function() { self.amOrPm = 'PM'; $('.clockpicker-span-am-pm').empty().append('PM'); + self.raiseCallback(self.options.afterAmPmSelect); }).appendTo(this.amPmBlock); - + } - + if (! options.autoclose) { // If autoclose is not setted, append a button $('') @@ -352,13 +354,7 @@ this.canvas = canvas; } - raiseCallback(this.options.init); - } - - function raiseCallback(callbackFunction) { - if (callbackFunction && typeof callbackFunction === "function") { - callbackFunction(); - } + this.raiseCallback(this.options.init); } // Default options @@ -373,6 +369,12 @@ vibrate: true // vibrate the device when dragging clock hand }; + ClockPicker.prototype.raiseCallback = function(callbackFunction) { + if (callbackFunction && typeof callbackFunction === "function") { + callbackFunction(this); + } + }; + // Show or hide popover ClockPicker.prototype.toggle = function(){ this[this.isShown ? 'hide' : 'show'](); @@ -434,7 +436,7 @@ return; } - raiseCallback(this.options.beforeShow); + this.raiseCallback(this.options.beforeShow); var self = this; @@ -492,12 +494,12 @@ } }); - raiseCallback(this.options.afterShow); + this.raiseCallback(this.options.afterShow); }; // Hide popover ClockPicker.prototype.hide = function(){ - raiseCallback(this.options.beforeHide); + this.raiseCallback(this.options.beforeHide); this.isShown = false; @@ -507,14 +509,14 @@ this.popover.hide(); - raiseCallback(this.options.afterHide); + this.raiseCallback(this.options.afterHide); }; // Toggle to hours or minutes view ClockPicker.prototype.toggleView = function(view, delay){ var raiseAfterHourSelect = false; if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") { - raiseCallback(this.options.beforeHourSelect); + this.raiseCallback(this.options.beforeHourSelect); raiseAfterHourSelect = true; } var isHours = view === 'hours', @@ -540,7 +542,7 @@ }, duration); if (raiseAfterHourSelect) { - raiseCallback(this.options.afterHourSelect); + this.raiseCallback(this.options.afterHourSelect); } }; @@ -576,7 +578,7 @@ inner = isHours && z < (outerRadius + innerRadius) / 2, radius = inner ? innerRadius : outerRadius, value; - + if (options.twelvehour) { radius = outerRadius; } @@ -621,7 +623,7 @@ } } } - + // Once hours or minutes changed, vibrate the device if (this[this.currentView] !== value) { if (vibrate && this.options.vibrate) { @@ -668,18 +670,22 @@ this.bg.setAttribute('cy', cy); this.fg.setAttribute('cx', cx); this.fg.setAttribute('cy', cy); + + if(isHours === false) { + this.raiseCallback(this.options.afterMinuteSelect); + } }; // Hours and minutes are selected ClockPicker.prototype.done = function() { - raiseCallback(this.options.beforeDone); + this.raiseCallback(this.options.beforeDone); this.hide(); var last = this.input.prop('value'), value = leadingZero(this.hours) + ':' + leadingZero(this.minutes); if (this.options.twelvehour) { value = value + this.amOrPm; } - + this.input.prop('value', value); if (value !== last) { this.input.triggerHandler('change'); @@ -692,7 +698,7 @@ this.input.trigger('blur'); } - raiseCallback(this.options.afterDone); + this.raiseCallback(this.options.afterDone); }; // Remove clockpicker from input @@ -726,4 +732,4 @@ } }); }; -}()); +}()); \ No newline at end of file diff --git a/dist/bootstrap-clockpicker.min.js b/dist/bootstrap-clockpicker.min.js index c8006a3..7bc8fe1 100644 --- a/dist/bootstrap-clockpicker.min.js +++ b/dist/bootstrap-clockpicker.min.js @@ -3,4 +3,4 @@ * Copyright 2014 Wang Shenwei. * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE) */ -!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=['
','",'","
"].join("");n(S)}n('').on("click",function(){x.amOrPm="AM",n(".clockpicker-span-am-pm").empty().append("AM")}).appendTo(this.amPmBlock),n('').on("click",function(){x.amOrPm="PM",n(".clockpicker-span-am-pm").empty().append("PM")}).appendTo(this.amPmBlock)}r.autoclose||n('").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('
');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="",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=['
','
','
',''," : ",'','',"
",'
','
','
','
','
',"
",'',"","
","
"].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))}})}}(); \ No newline at end of file + (function(){var $=window.jQuery,$win=$(window),$doc=$(document),$body;var svgNS="http://www.w3.org/2000/svg",svgSupported="SVGAngle"in window&&function(){var supported,el=document.createElement("div");el.innerHTML="";supported=(el.firstChild&&el.firstChild.namespaceURI)==svgNS;el.innerHTML="";return supported}();var transitionSupported=function(){var style=document.createElement("div").style;return"transition"in style||"WebkitTransition"in style||"MozTransition"in style||"msTransition"in style||"OTransition"in style}();var touchSupported="ontouchstart"in window,mousedownEvent="mousedown"+(touchSupported?" touchstart":""),mousemoveEvent="mousemove.clockpicker"+(touchSupported?" touchmove.clockpicker":""),mouseupEvent="mouseup.clockpicker"+(touchSupported?" touchend.clockpicker":"");var vibrate=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null;function createSvgElement(name){return document.createElementNS(svgNS,name)}function leadingZero(num){return(num<10?"0":"")+num}var idCounter=0;function uniqueId(prefix){var id=++idCounter+"";return prefix?prefix+id:id}var dialRadius=100,outerRadius=80,innerRadius=54,tickRadius=13,diameter=dialRadius*2,duration=transitionSupported?350:1;var tpl=['
','
','
',''," : ",'','',"
",'
','
','
','
','
',"
",'',"","
","
"].join("");function ClockPicker(element,options){var popover=$(tpl),plate=popover.find(".clockpicker-plate"),hoursView=popover.find(".clockpicker-hours"),minutesView=popover.find(".clockpicker-minutes"),amPmBlock=popover.find(".clockpicker-am-pm-block"),isInput=element.prop("tagName")==="INPUT",input=isInput?element:element.find("input"),addon=element.find(".input-group-addon"),self=this,timer;this.id=uniqueId("cp");this.element=element;this.options=options;this.isAppended=false;this.isShown=false;this.currentView="hours";this.isInput=isInput;this.input=input;this.addon=addon;this.popover=popover;this.plate=plate;this.hoursView=hoursView;this.minutesView=minutesView;this.amPmBlock=amPmBlock;this.spanHours=popover.find(".clockpicker-span-hours");this.spanMinutes=popover.find(".clockpicker-span-minutes");this.spanAmPm=popover.find(".clockpicker-span-am-pm");this.amOrPm="PM";if(options.twelvehour){var amPmButtonsTemplate=['
','",'","
"].join("");var amPmButtons=$(amPmButtonsTemplate);$('").on("click",function(){self.amOrPm="AM";$(".clockpicker-span-am-pm").empty().append("AM");self.raiseCallback(self.options.afterAmPmSelect)}).appendTo(this.amPmBlock);$('").on("click",function(){self.amOrPm="PM";$(".clockpicker-span-am-pm").empty().append("PM");self.raiseCallback(self.options.afterAmPmSelect)}).appendTo(this.amPmBlock)}if(!options.autoclose){$('").click($.proxy(this.done,this)).appendTo(popover)}if((options.placement==="top"||options.placement==="bottom")&&(options.align==="top"||options.align==="bottom"))options.align="left";if((options.placement==="left"||options.placement==="right")&&(options.align==="left"||options.align==="right"))options.align="top";popover.addClass(options.placement);popover.addClass("clockpicker-align-"+options.align);this.spanHours.click($.proxy(this.toggleView,this,"hours"));this.spanMinutes.click($.proxy(this.toggleView,this,"minutes"));input.on("focus.clockpicker click.clockpicker",$.proxy(this.show,this));addon.on("click.clockpicker",$.proxy(this.toggle,this));var tickTpl=$('
'),i,tick,radian,radius;if(options.twelvehour){for(i=1;i<13;i+=1){tick=tickTpl.clone();radian=i/6*Math.PI;radius=outerRadius;tick.css("font-size","120%");tick.css({left:dialRadius+Math.sin(radian)*radius-tickRadius,top:dialRadius-Math.cos(radian)*radius-tickRadius});tick.html(i===0?"00":i);hoursView.append(tick);tick.on(mousedownEvent,mousedown)}}else{for(i=0;i<24;i+=1){tick=tickTpl.clone();radian=i/6*Math.PI;var inner=i>0&&i<13;radius=inner?innerRadius:outerRadius;tick.css({left:dialRadius+Math.sin(radian)*radius-tickRadius,top:dialRadius-Math.cos(radian)*radius-tickRadius});if(inner){tick.css("font-size","120%")}tick.html(i===0?"00":i);hoursView.append(tick);tick.on(mousedownEvent,mousedown)}}for(i=0;i<60;i+=5){tick=tickTpl.clone();radian=i/30*Math.PI;tick.css({left:dialRadius+Math.sin(radian)*outerRadius-tickRadius,top:dialRadius-Math.cos(radian)*outerRadius-tickRadius});tick.css("font-size","120%");tick.html(leadingZero(i));minutesView.append(tick);tick.on(mousedownEvent,mousedown)}plate.on(mousedownEvent,function(e){if($(e.target).closest(".clockpicker-tick").length===0){mousedown(e,true)}});function mousedown(e,space){var offset=plate.offset(),isTouch=/^touch/.test(e.type),x0=offset.left+dialRadius,y0=offset.top+dialRadius,dx=(isTouch?e.originalEvent.touches[0]:e).pageX-x0,dy=(isTouch?e.originalEvent.touches[0]:e).pageY-y0,z=Math.sqrt(dx*dx+dy*dy),moved=false;if(space&&(zouterRadius+tickRadius)){return}e.preventDefault();var movingTimer=setTimeout(function(){$body.addClass("clockpicker-moving")},200);if(svgSupported){plate.append(self.canvas)}self.setHand(dx,dy,!space,true);$doc.off(mousemoveEvent).on(mousemoveEvent,function(e){e.preventDefault();var isTouch=/^touch/.test(e.type),x=(isTouch?e.originalEvent.touches[0]:e).pageX-x0,y=(isTouch?e.originalEvent.touches[0]:e).pageY-y0;if(!moved&&x===dx&&y===dy){return}moved=true;self.setHand(x,y,false,true)});$doc.off(mouseupEvent).on(mouseupEvent,function(e){$doc.off(mouseupEvent);e.preventDefault();var isTouch=/^touch/.test(e.type),x=(isTouch?e.originalEvent.changedTouches[0]:e).pageX-x0,y=(isTouch?e.originalEvent.changedTouches[0]:e).pageY-y0;if((space||moved)&&x===dx&&y===dy){self.setHand(x,y)}if(self.currentView==="hours"){self.toggleView("minutes",duration/2)}else{if(options.autoclose){self.minutesView.addClass("clockpicker-dial-out");setTimeout(function(){self.done()},duration/2)}}plate.prepend(canvas);clearTimeout(movingTimer);$body.removeClass("clockpicker-moving");$doc.off(mousemoveEvent)})}if(svgSupported){var canvas=popover.find(".clockpicker-canvas"),svg=createSvgElement("svg");svg.setAttribute("class","clockpicker-svg");svg.setAttribute("width",diameter);svg.setAttribute("height",diameter);var g=createSvgElement("g");g.setAttribute("transform","translate("+dialRadius+","+dialRadius+")");var bearing=createSvgElement("circle");bearing.setAttribute("class","clockpicker-canvas-bearing");bearing.setAttribute("cx",0);bearing.setAttribute("cy",0);bearing.setAttribute("r",2);var hand=createSvgElement("line");hand.setAttribute("x1",0);hand.setAttribute("y1",0);var bg=createSvgElement("circle");bg.setAttribute("class","clockpicker-canvas-bg");bg.setAttribute("r",tickRadius);var fg=createSvgElement("circle");fg.setAttribute("class","clockpicker-canvas-fg");fg.setAttribute("r",3.5);g.appendChild(hand);g.appendChild(bg);g.appendChild(fg);g.appendChild(bearing);svg.appendChild(g);canvas.append(svg);this.hand=hand;this.bg=bg;this.fg=fg;this.bearing=bearing;this.g=g;this.canvas=canvas}this.raiseCallback(this.options.init)}ClockPicker.DEFAULTS={"default":"",fromnow:0,placement:"bottom",align:"left",donetext:"完成",autoclose:false,twelvehour:false,vibrate:true};ClockPicker.prototype.raiseCallback=function(callbackFunction){if(callbackFunction&&typeof callbackFunction==="function"){callbackFunction(this)}};ClockPicker.prototype.toggle=function(){this[this.isShown?"hide":"show"]()};ClockPicker.prototype.locate=function(){var element=this.element,popover=this.popover,offset=element.offset(),width=element.outerWidth(),height=element.outerHeight(),placement=this.options.placement,align=this.options.align,styles={},self=this;popover.show();switch(placement){case"bottom":styles.top=offset.top+height;break;case"right":styles.left=offset.left+width;break;case"top":styles.top=offset.top-popover.outerHeight();break;case"left":styles.left=offset.left-popover.outerWidth();break}switch(align){case"left":styles.left=offset.left;break;case"right":styles.left=offset.left+width-popover.outerWidth();break;case"top":styles.top=offset.top;break;case"bottom":styles.top=offset.top+height-popover.outerHeight();break}popover.css(styles)};ClockPicker.prototype.show=function(e){if(this.isShown){return}this.raiseCallback(this.options.beforeShow);var self=this;if(!this.isAppended){$body=$(document.body).append(this.popover);$win.on("resize.clockpicker"+this.id,function(){if(self.isShown){self.locate()}});this.isAppended=true}var value=((this.input.prop("value")||this.options["default"]||"")+"").split(":");if(value[0]==="now"){var now=new Date(+new Date+this.options.fromnow);value=[now.getHours(),now.getMinutes()]}this.hours=+value[0]||0;this.minutes=+value[1]||0;this.spanHours.html(leadingZero(this.hours));this.spanMinutes.html(leadingZero(this.minutes));this.toggleView("hours");this.locate();this.isShown=true;$doc.on("click.clockpicker."+this.id+" focusin.clockpicker."+this.id,function(e){var target=$(e.target);if(target.closest(self.popover).length===0&&target.closest(self.addon).length===0&&target.closest(self.input).length===0){self.hide()}});$doc.on("keyup.clockpicker."+this.id,function(e){if(e.keyCode===27){self.hide()}});this.raiseCallback(this.options.afterShow)};ClockPicker.prototype.hide=function(){this.raiseCallback(this.options.beforeHide);this.isShown=false;$doc.off("click.clockpicker."+this.id+" focusin.clockpicker."+this.id);$doc.off("keyup.clockpicker."+this.id);this.popover.hide();this.raiseCallback(this.options.afterHide)};ClockPicker.prototype.toggleView=function(view,delay){var raiseAfterHourSelect=false;if(view==="minutes"&&$(this.hoursView).css("visibility")==="visible"){this.raiseCallback(this.options.beforeHourSelect);raiseAfterHourSelect=true}var isHours=view==="hours",nextView=isHours?this.hoursView:this.minutesView,hideView=isHours?this.minutesView:this.hoursView;this.currentView=view;this.spanHours.toggleClass("text-primary",isHours);this.spanMinutes.toggleClass("text-primary",!isHours);hideView.addClass("clockpicker-dial-out");nextView.css("visibility","visible").removeClass("clockpicker-dial-out");this.resetClock(delay);clearTimeout(this.toggleViewTimer);this.toggleViewTimer=setTimeout(function(){hideView.css("visibility","hidden")},duration);if(raiseAfterHourSelect){this.raiseCallback(this.options.afterHourSelect)}};ClockPicker.prototype.resetClock=function(delay){var view=this.currentView,value=this[view],isHours=view==="hours",unit=Math.PI/(isHours?6:30),radian=value*unit,radius=isHours&&value>0&&value<13?innerRadius:outerRadius,x=Math.sin(radian)*radius,y=-Math.cos(radian)*radius,self=this;if(svgSupported&&delay){self.canvas.addClass("clockpicker-canvas-out");setTimeout(function(){self.canvas.removeClass("clockpicker-canvas-out");self.setHand(x,y)},delay)}else{this.setHand(x,y)}};ClockPicker.prototype.setHand=function(x,y,roundBy5,dragging){var radian=Math.atan2(x,-y),isHours=this.currentView==="hours",unit=Math.PI/(isHours||roundBy5?6:30),z=Math.sqrt(x*x+y*y),options=this.options,inner=isHours&&z<(outerRadius+innerRadius)/2,radius=inner?innerRadius:outerRadius,value;if(options.twelvehour){radius=outerRadius}if(radian<0){radian=Math.PI*2+radian}value=Math.round(radian/unit);radian=value*unit;if(options.twelvehour){if(isHours){if(value===0){value=12}}else{if(roundBy5){value*=5}if(value===60){value=0}}}else{if(isHours){if(value===12){value=0}value=inner?value===0?12:value:value===0?0:value+12}else{if(roundBy5){value*=5}if(value===60){value=0}}}if(this[this.currentView]!==value){if(vibrate&&this.options.vibrate){if(!this.vibrateTimer){navigator[vibrate](10);this.vibrateTimer=setTimeout($.proxy(function(){this.vibrateTimer=null},this),100)}}}this[this.currentView]=value;this[isHours?"spanHours":"spanMinutes"].html(leadingZero(value));if(!svgSupported){this[isHours?"hoursView":"minutesView"].find(".clockpicker-tick").each(function(){var tick=$(this);tick.toggleClass("active",value===+tick.html())});return}if(dragging||!isHours&&value%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")}else{this.g.insertBefore(this.hand,this.bg);this.g.insertBefore(this.fg,this.bg);this.bg.setAttribute("class","clockpicker-canvas-bg")}var cx=Math.sin(radian)*radius,cy=-Math.cos(radian)*radius;this.hand.setAttribute("x2",cx);this.hand.setAttribute("y2",cy);this.bg.setAttribute("cx",cx);this.bg.setAttribute("cy",cy);this.fg.setAttribute("cx",cx);this.fg.setAttribute("cy",cy);if(isHours===false){this.raiseCallback(this.options.afterMinuteSelect)}};ClockPicker.prototype.done=function(){this.raiseCallback(this.options.beforeDone);this.hide();var last=this.input.prop("value"),value=leadingZero(this.hours)+":"+leadingZero(this.minutes);if(this.options.twelvehour){value=value+this.amOrPm}this.input.prop("value",value);if(value!==last){this.input.triggerHandler("change");if(!this.isInput){this.element.trigger("change")}}if(this.options.autoclose){this.input.trigger("blur")}this.raiseCallback(this.options.afterDone)};ClockPicker.prototype.remove=function(){this.element.removeData("clockpicker");this.input.off("focus.clockpicker click.clockpicker");this.addon.off("click.clockpicker");if(this.isShown){this.hide()}if(this.isAppended){$win.off("resize.clockpicker"+this.id);this.popover.remove()}};$.fn.clockpicker=function(option){var args=Array.prototype.slice.call(arguments,1);return this.each(function(){var $this=$(this),data=$this.data("clockpicker");if(!data){var options=$.extend({},ClockPicker.DEFAULTS,$this.data(),typeof option=="object"&&option);$this.data("clockpicker",new ClockPicker($this,options))}else{if(typeof data[option]==="function"){data[option].apply(data,args)}}})}})(); \ No newline at end of file diff --git a/dist/jquery-clockpicker.js b/dist/jquery-clockpicker.js index e930b4f..6d7caef 100644 --- a/dist/jquery-clockpicker.js +++ b/dist/jquery-clockpicker.js @@ -117,48 +117,50 @@ this.spanMinutes = popover.find('.clockpicker-span-minutes'); this.spanAmPm = popover.find('.clockpicker-span-am-pm'); this.amOrPm = "PM"; - + // Setup for for 12 hour clock if option is selected if (options.twelvehour) { - + var amPmButtonsTemplate = ['
', '', '', '
'].join(''); - + var amPmButtons = $(amPmButtonsTemplate); //amPmButtons.appendTo(plate); - + ////Not working b/c they are not shown when this runs //$('clockpicker-am-button') // .on("click", function() { // self.amOrPm = "AM"; // $('.clockpicker-span-am-pm').empty().append('AM'); // }); - // + // //$('clockpicker-pm-button') // .on("click", function() { // self.amOrPm = "PM"; // $('.clockpicker-span-am-pm').empty().append('PM'); // }); - + $('') .on("click", function() { self.amOrPm = "AM"; $('.clockpicker-span-am-pm').empty().append('AM'); + self.raiseCallback(self.options.afterAmPmSelect); }).appendTo(this.amPmBlock); - - + + $('') .on("click", function() { self.amOrPm = 'PM'; $('.clockpicker-span-am-pm').empty().append('PM'); + self.raiseCallback(self.options.afterAmPmSelect); }).appendTo(this.amPmBlock); - + } - + if (! options.autoclose) { // If autoclose is not setted, append a button $('') @@ -352,13 +354,7 @@ this.canvas = canvas; } - raiseCallback(this.options.init); - } - - function raiseCallback(callbackFunction) { - if (callbackFunction && typeof callbackFunction === "function") { - callbackFunction(); - } + this.raiseCallback(this.options.init); } // Default options @@ -373,6 +369,12 @@ vibrate: true // vibrate the device when dragging clock hand }; + ClockPicker.prototype.raiseCallback = function(callbackFunction) { + if (callbackFunction && typeof callbackFunction === "function") { + callbackFunction(this); + } + }; + // Show or hide popover ClockPicker.prototype.toggle = function(){ this[this.isShown ? 'hide' : 'show'](); @@ -434,7 +436,7 @@ return; } - raiseCallback(this.options.beforeShow); + this.raiseCallback(this.options.beforeShow); var self = this; @@ -492,12 +494,12 @@ } }); - raiseCallback(this.options.afterShow); + this.raiseCallback(this.options.afterShow); }; // Hide popover ClockPicker.prototype.hide = function(){ - raiseCallback(this.options.beforeHide); + this.raiseCallback(this.options.beforeHide); this.isShown = false; @@ -507,14 +509,14 @@ this.popover.hide(); - raiseCallback(this.options.afterHide); + this.raiseCallback(this.options.afterHide); }; // Toggle to hours or minutes view ClockPicker.prototype.toggleView = function(view, delay){ var raiseAfterHourSelect = false; if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") { - raiseCallback(this.options.beforeHourSelect); + this.raiseCallback(this.options.beforeHourSelect); raiseAfterHourSelect = true; } var isHours = view === 'hours', @@ -540,7 +542,7 @@ }, duration); if (raiseAfterHourSelect) { - raiseCallback(this.options.afterHourSelect); + this.raiseCallback(this.options.afterHourSelect); } }; @@ -576,7 +578,7 @@ inner = isHours && z < (outerRadius + innerRadius) / 2, radius = inner ? innerRadius : outerRadius, value; - + if (options.twelvehour) { radius = outerRadius; } @@ -621,7 +623,7 @@ } } } - + // Once hours or minutes changed, vibrate the device if (this[this.currentView] !== value) { if (vibrate && this.options.vibrate) { @@ -668,18 +670,22 @@ this.bg.setAttribute('cy', cy); this.fg.setAttribute('cx', cx); this.fg.setAttribute('cy', cy); + + if(isHours === false) { + this.raiseCallback(this.options.afterMinuteSelect); + } }; // Hours and minutes are selected ClockPicker.prototype.done = function() { - raiseCallback(this.options.beforeDone); + this.raiseCallback(this.options.beforeDone); this.hide(); var last = this.input.prop('value'), value = leadingZero(this.hours) + ':' + leadingZero(this.minutes); if (this.options.twelvehour) { value = value + this.amOrPm; } - + this.input.prop('value', value); if (value !== last) { this.input.triggerHandler('change'); @@ -692,7 +698,7 @@ this.input.trigger('blur'); } - raiseCallback(this.options.afterDone); + this.raiseCallback(this.options.afterDone); }; // Remove clockpicker from input @@ -726,4 +732,4 @@ } }); }; -}()); +}()); \ No newline at end of file diff --git a/dist/jquery-clockpicker.min.js b/dist/jquery-clockpicker.min.js index c8006a3..7bc8fe1 100644 --- a/dist/jquery-clockpicker.min.js +++ b/dist/jquery-clockpicker.min.js @@ -3,4 +3,4 @@ * Copyright 2014 Wang Shenwei. * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE) */ -!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=['
','",'","
"].join("");n(S)}n('').on("click",function(){x.amOrPm="AM",n(".clockpicker-span-am-pm").empty().append("AM")}).appendTo(this.amPmBlock),n('').on("click",function(){x.amOrPm="PM",n(".clockpicker-span-am-pm").empty().append("PM")}).appendTo(this.amPmBlock)}r.autoclose||n('").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('
');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="",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=['
','
','
',''," : ",'','',"
",'
','
','
','
','
',"
",'',"","
","
"].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))}})}}(); \ No newline at end of file + (function(){var $=window.jQuery,$win=$(window),$doc=$(document),$body;var svgNS="http://www.w3.org/2000/svg",svgSupported="SVGAngle"in window&&function(){var supported,el=document.createElement("div");el.innerHTML="";supported=(el.firstChild&&el.firstChild.namespaceURI)==svgNS;el.innerHTML="";return supported}();var transitionSupported=function(){var style=document.createElement("div").style;return"transition"in style||"WebkitTransition"in style||"MozTransition"in style||"msTransition"in style||"OTransition"in style}();var touchSupported="ontouchstart"in window,mousedownEvent="mousedown"+(touchSupported?" touchstart":""),mousemoveEvent="mousemove.clockpicker"+(touchSupported?" touchmove.clockpicker":""),mouseupEvent="mouseup.clockpicker"+(touchSupported?" touchend.clockpicker":"");var vibrate=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null;function createSvgElement(name){return document.createElementNS(svgNS,name)}function leadingZero(num){return(num<10?"0":"")+num}var idCounter=0;function uniqueId(prefix){var id=++idCounter+"";return prefix?prefix+id:id}var dialRadius=100,outerRadius=80,innerRadius=54,tickRadius=13,diameter=dialRadius*2,duration=transitionSupported?350:1;var tpl=['
','
','
',''," : ",'','',"
",'
','
','
','
','
',"
",'',"","
","
"].join("");function ClockPicker(element,options){var popover=$(tpl),plate=popover.find(".clockpicker-plate"),hoursView=popover.find(".clockpicker-hours"),minutesView=popover.find(".clockpicker-minutes"),amPmBlock=popover.find(".clockpicker-am-pm-block"),isInput=element.prop("tagName")==="INPUT",input=isInput?element:element.find("input"),addon=element.find(".input-group-addon"),self=this,timer;this.id=uniqueId("cp");this.element=element;this.options=options;this.isAppended=false;this.isShown=false;this.currentView="hours";this.isInput=isInput;this.input=input;this.addon=addon;this.popover=popover;this.plate=plate;this.hoursView=hoursView;this.minutesView=minutesView;this.amPmBlock=amPmBlock;this.spanHours=popover.find(".clockpicker-span-hours");this.spanMinutes=popover.find(".clockpicker-span-minutes");this.spanAmPm=popover.find(".clockpicker-span-am-pm");this.amOrPm="PM";if(options.twelvehour){var amPmButtonsTemplate=['
','",'","
"].join("");var amPmButtons=$(amPmButtonsTemplate);$('").on("click",function(){self.amOrPm="AM";$(".clockpicker-span-am-pm").empty().append("AM");self.raiseCallback(self.options.afterAmPmSelect)}).appendTo(this.amPmBlock);$('").on("click",function(){self.amOrPm="PM";$(".clockpicker-span-am-pm").empty().append("PM");self.raiseCallback(self.options.afterAmPmSelect)}).appendTo(this.amPmBlock)}if(!options.autoclose){$('").click($.proxy(this.done,this)).appendTo(popover)}if((options.placement==="top"||options.placement==="bottom")&&(options.align==="top"||options.align==="bottom"))options.align="left";if((options.placement==="left"||options.placement==="right")&&(options.align==="left"||options.align==="right"))options.align="top";popover.addClass(options.placement);popover.addClass("clockpicker-align-"+options.align);this.spanHours.click($.proxy(this.toggleView,this,"hours"));this.spanMinutes.click($.proxy(this.toggleView,this,"minutes"));input.on("focus.clockpicker click.clockpicker",$.proxy(this.show,this));addon.on("click.clockpicker",$.proxy(this.toggle,this));var tickTpl=$('
'),i,tick,radian,radius;if(options.twelvehour){for(i=1;i<13;i+=1){tick=tickTpl.clone();radian=i/6*Math.PI;radius=outerRadius;tick.css("font-size","120%");tick.css({left:dialRadius+Math.sin(radian)*radius-tickRadius,top:dialRadius-Math.cos(radian)*radius-tickRadius});tick.html(i===0?"00":i);hoursView.append(tick);tick.on(mousedownEvent,mousedown)}}else{for(i=0;i<24;i+=1){tick=tickTpl.clone();radian=i/6*Math.PI;var inner=i>0&&i<13;radius=inner?innerRadius:outerRadius;tick.css({left:dialRadius+Math.sin(radian)*radius-tickRadius,top:dialRadius-Math.cos(radian)*radius-tickRadius});if(inner){tick.css("font-size","120%")}tick.html(i===0?"00":i);hoursView.append(tick);tick.on(mousedownEvent,mousedown)}}for(i=0;i<60;i+=5){tick=tickTpl.clone();radian=i/30*Math.PI;tick.css({left:dialRadius+Math.sin(radian)*outerRadius-tickRadius,top:dialRadius-Math.cos(radian)*outerRadius-tickRadius});tick.css("font-size","120%");tick.html(leadingZero(i));minutesView.append(tick);tick.on(mousedownEvent,mousedown)}plate.on(mousedownEvent,function(e){if($(e.target).closest(".clockpicker-tick").length===0){mousedown(e,true)}});function mousedown(e,space){var offset=plate.offset(),isTouch=/^touch/.test(e.type),x0=offset.left+dialRadius,y0=offset.top+dialRadius,dx=(isTouch?e.originalEvent.touches[0]:e).pageX-x0,dy=(isTouch?e.originalEvent.touches[0]:e).pageY-y0,z=Math.sqrt(dx*dx+dy*dy),moved=false;if(space&&(zouterRadius+tickRadius)){return}e.preventDefault();var movingTimer=setTimeout(function(){$body.addClass("clockpicker-moving")},200);if(svgSupported){plate.append(self.canvas)}self.setHand(dx,dy,!space,true);$doc.off(mousemoveEvent).on(mousemoveEvent,function(e){e.preventDefault();var isTouch=/^touch/.test(e.type),x=(isTouch?e.originalEvent.touches[0]:e).pageX-x0,y=(isTouch?e.originalEvent.touches[0]:e).pageY-y0;if(!moved&&x===dx&&y===dy){return}moved=true;self.setHand(x,y,false,true)});$doc.off(mouseupEvent).on(mouseupEvent,function(e){$doc.off(mouseupEvent);e.preventDefault();var isTouch=/^touch/.test(e.type),x=(isTouch?e.originalEvent.changedTouches[0]:e).pageX-x0,y=(isTouch?e.originalEvent.changedTouches[0]:e).pageY-y0;if((space||moved)&&x===dx&&y===dy){self.setHand(x,y)}if(self.currentView==="hours"){self.toggleView("minutes",duration/2)}else{if(options.autoclose){self.minutesView.addClass("clockpicker-dial-out");setTimeout(function(){self.done()},duration/2)}}plate.prepend(canvas);clearTimeout(movingTimer);$body.removeClass("clockpicker-moving");$doc.off(mousemoveEvent)})}if(svgSupported){var canvas=popover.find(".clockpicker-canvas"),svg=createSvgElement("svg");svg.setAttribute("class","clockpicker-svg");svg.setAttribute("width",diameter);svg.setAttribute("height",diameter);var g=createSvgElement("g");g.setAttribute("transform","translate("+dialRadius+","+dialRadius+")");var bearing=createSvgElement("circle");bearing.setAttribute("class","clockpicker-canvas-bearing");bearing.setAttribute("cx",0);bearing.setAttribute("cy",0);bearing.setAttribute("r",2);var hand=createSvgElement("line");hand.setAttribute("x1",0);hand.setAttribute("y1",0);var bg=createSvgElement("circle");bg.setAttribute("class","clockpicker-canvas-bg");bg.setAttribute("r",tickRadius);var fg=createSvgElement("circle");fg.setAttribute("class","clockpicker-canvas-fg");fg.setAttribute("r",3.5);g.appendChild(hand);g.appendChild(bg);g.appendChild(fg);g.appendChild(bearing);svg.appendChild(g);canvas.append(svg);this.hand=hand;this.bg=bg;this.fg=fg;this.bearing=bearing;this.g=g;this.canvas=canvas}this.raiseCallback(this.options.init)}ClockPicker.DEFAULTS={"default":"",fromnow:0,placement:"bottom",align:"left",donetext:"完成",autoclose:false,twelvehour:false,vibrate:true};ClockPicker.prototype.raiseCallback=function(callbackFunction){if(callbackFunction&&typeof callbackFunction==="function"){callbackFunction(this)}};ClockPicker.prototype.toggle=function(){this[this.isShown?"hide":"show"]()};ClockPicker.prototype.locate=function(){var element=this.element,popover=this.popover,offset=element.offset(),width=element.outerWidth(),height=element.outerHeight(),placement=this.options.placement,align=this.options.align,styles={},self=this;popover.show();switch(placement){case"bottom":styles.top=offset.top+height;break;case"right":styles.left=offset.left+width;break;case"top":styles.top=offset.top-popover.outerHeight();break;case"left":styles.left=offset.left-popover.outerWidth();break}switch(align){case"left":styles.left=offset.left;break;case"right":styles.left=offset.left+width-popover.outerWidth();break;case"top":styles.top=offset.top;break;case"bottom":styles.top=offset.top+height-popover.outerHeight();break}popover.css(styles)};ClockPicker.prototype.show=function(e){if(this.isShown){return}this.raiseCallback(this.options.beforeShow);var self=this;if(!this.isAppended){$body=$(document.body).append(this.popover);$win.on("resize.clockpicker"+this.id,function(){if(self.isShown){self.locate()}});this.isAppended=true}var value=((this.input.prop("value")||this.options["default"]||"")+"").split(":");if(value[0]==="now"){var now=new Date(+new Date+this.options.fromnow);value=[now.getHours(),now.getMinutes()]}this.hours=+value[0]||0;this.minutes=+value[1]||0;this.spanHours.html(leadingZero(this.hours));this.spanMinutes.html(leadingZero(this.minutes));this.toggleView("hours");this.locate();this.isShown=true;$doc.on("click.clockpicker."+this.id+" focusin.clockpicker."+this.id,function(e){var target=$(e.target);if(target.closest(self.popover).length===0&&target.closest(self.addon).length===0&&target.closest(self.input).length===0){self.hide()}});$doc.on("keyup.clockpicker."+this.id,function(e){if(e.keyCode===27){self.hide()}});this.raiseCallback(this.options.afterShow)};ClockPicker.prototype.hide=function(){this.raiseCallback(this.options.beforeHide);this.isShown=false;$doc.off("click.clockpicker."+this.id+" focusin.clockpicker."+this.id);$doc.off("keyup.clockpicker."+this.id);this.popover.hide();this.raiseCallback(this.options.afterHide)};ClockPicker.prototype.toggleView=function(view,delay){var raiseAfterHourSelect=false;if(view==="minutes"&&$(this.hoursView).css("visibility")==="visible"){this.raiseCallback(this.options.beforeHourSelect);raiseAfterHourSelect=true}var isHours=view==="hours",nextView=isHours?this.hoursView:this.minutesView,hideView=isHours?this.minutesView:this.hoursView;this.currentView=view;this.spanHours.toggleClass("text-primary",isHours);this.spanMinutes.toggleClass("text-primary",!isHours);hideView.addClass("clockpicker-dial-out");nextView.css("visibility","visible").removeClass("clockpicker-dial-out");this.resetClock(delay);clearTimeout(this.toggleViewTimer);this.toggleViewTimer=setTimeout(function(){hideView.css("visibility","hidden")},duration);if(raiseAfterHourSelect){this.raiseCallback(this.options.afterHourSelect)}};ClockPicker.prototype.resetClock=function(delay){var view=this.currentView,value=this[view],isHours=view==="hours",unit=Math.PI/(isHours?6:30),radian=value*unit,radius=isHours&&value>0&&value<13?innerRadius:outerRadius,x=Math.sin(radian)*radius,y=-Math.cos(radian)*radius,self=this;if(svgSupported&&delay){self.canvas.addClass("clockpicker-canvas-out");setTimeout(function(){self.canvas.removeClass("clockpicker-canvas-out");self.setHand(x,y)},delay)}else{this.setHand(x,y)}};ClockPicker.prototype.setHand=function(x,y,roundBy5,dragging){var radian=Math.atan2(x,-y),isHours=this.currentView==="hours",unit=Math.PI/(isHours||roundBy5?6:30),z=Math.sqrt(x*x+y*y),options=this.options,inner=isHours&&z<(outerRadius+innerRadius)/2,radius=inner?innerRadius:outerRadius,value;if(options.twelvehour){radius=outerRadius}if(radian<0){radian=Math.PI*2+radian}value=Math.round(radian/unit);radian=value*unit;if(options.twelvehour){if(isHours){if(value===0){value=12}}else{if(roundBy5){value*=5}if(value===60){value=0}}}else{if(isHours){if(value===12){value=0}value=inner?value===0?12:value:value===0?0:value+12}else{if(roundBy5){value*=5}if(value===60){value=0}}}if(this[this.currentView]!==value){if(vibrate&&this.options.vibrate){if(!this.vibrateTimer){navigator[vibrate](10);this.vibrateTimer=setTimeout($.proxy(function(){this.vibrateTimer=null},this),100)}}}this[this.currentView]=value;this[isHours?"spanHours":"spanMinutes"].html(leadingZero(value));if(!svgSupported){this[isHours?"hoursView":"minutesView"].find(".clockpicker-tick").each(function(){var tick=$(this);tick.toggleClass("active",value===+tick.html())});return}if(dragging||!isHours&&value%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")}else{this.g.insertBefore(this.hand,this.bg);this.g.insertBefore(this.fg,this.bg);this.bg.setAttribute("class","clockpicker-canvas-bg")}var cx=Math.sin(radian)*radius,cy=-Math.cos(radian)*radius;this.hand.setAttribute("x2",cx);this.hand.setAttribute("y2",cy);this.bg.setAttribute("cx",cx);this.bg.setAttribute("cy",cy);this.fg.setAttribute("cx",cx);this.fg.setAttribute("cy",cy);if(isHours===false){this.raiseCallback(this.options.afterMinuteSelect)}};ClockPicker.prototype.done=function(){this.raiseCallback(this.options.beforeDone);this.hide();var last=this.input.prop("value"),value=leadingZero(this.hours)+":"+leadingZero(this.minutes);if(this.options.twelvehour){value=value+this.amOrPm}this.input.prop("value",value);if(value!==last){this.input.triggerHandler("change");if(!this.isInput){this.element.trigger("change")}}if(this.options.autoclose){this.input.trigger("blur")}this.raiseCallback(this.options.afterDone)};ClockPicker.prototype.remove=function(){this.element.removeData("clockpicker");this.input.off("focus.clockpicker click.clockpicker");this.addon.off("click.clockpicker");if(this.isShown){this.hide()}if(this.isAppended){$win.off("resize.clockpicker"+this.id);this.popover.remove()}};$.fn.clockpicker=function(option){var args=Array.prototype.slice.call(arguments,1);return this.each(function(){var $this=$(this),data=$this.data("clockpicker");if(!data){var options=$.extend({},ClockPicker.DEFAULTS,$this.data(),typeof option=="object"&&option);$this.data("clockpicker",new ClockPicker($this,options))}else{if(typeof data[option]==="function"){data[option].apply(data,args)}}})}})(); \ No newline at end of file diff --git a/src/clockpicker.js b/src/clockpicker.js index 7f208aa..3a98ffe 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -117,48 +117,50 @@ this.spanMinutes = popover.find('.clockpicker-span-minutes'); this.spanAmPm = popover.find('.clockpicker-span-am-pm'); this.amOrPm = "PM"; - + // Setup for for 12 hour clock if option is selected if (options.twelvehour) { - + var amPmButtonsTemplate = ['
', '', '', '
'].join(''); - + var amPmButtons = $(amPmButtonsTemplate); //amPmButtons.appendTo(plate); - + ////Not working b/c they are not shown when this runs //$('clockpicker-am-button') // .on("click", function() { // self.amOrPm = "AM"; // $('.clockpicker-span-am-pm').empty().append('AM'); // }); - // + // //$('clockpicker-pm-button') // .on("click", function() { // self.amOrPm = "PM"; // $('.clockpicker-span-am-pm').empty().append('PM'); // }); - + $('') .on("click", function() { self.amOrPm = "AM"; $('.clockpicker-span-am-pm').empty().append('AM'); + self.raiseCallback(self.options.afterAmPmSelect); }).appendTo(this.amPmBlock); - - + + $('') .on("click", function() { self.amOrPm = 'PM'; $('.clockpicker-span-am-pm').empty().append('PM'); + self.raiseCallback(self.options.afterAmPmSelect); }).appendTo(this.amPmBlock); - + } - + if (! options.autoclose) { // If autoclose is not setted, append a button $('') @@ -352,13 +354,7 @@ this.canvas = canvas; } - raiseCallback(this.options.init); - } - - function raiseCallback(callbackFunction) { - if (callbackFunction && typeof callbackFunction === "function") { - callbackFunction(); - } + this.raiseCallback(this.options.init); } // Default options @@ -373,6 +369,12 @@ vibrate: true // vibrate the device when dragging clock hand }; + ClockPicker.prototype.raiseCallback = function(callbackFunction) { + if (callbackFunction && typeof callbackFunction === "function") { + callbackFunction(this); + } + }; + // Show or hide popover ClockPicker.prototype.toggle = function(){ this[this.isShown ? 'hide' : 'show'](); @@ -434,7 +436,7 @@ return; } - raiseCallback(this.options.beforeShow); + this.raiseCallback(this.options.beforeShow); var self = this; @@ -492,12 +494,12 @@ } }); - raiseCallback(this.options.afterShow); + this.raiseCallback(this.options.afterShow); }; // Hide popover ClockPicker.prototype.hide = function(){ - raiseCallback(this.options.beforeHide); + this.raiseCallback(this.options.beforeHide); this.isShown = false; @@ -507,14 +509,14 @@ this.popover.hide(); - raiseCallback(this.options.afterHide); + this.raiseCallback(this.options.afterHide); }; // Toggle to hours or minutes view ClockPicker.prototype.toggleView = function(view, delay){ var raiseAfterHourSelect = false; if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") { - raiseCallback(this.options.beforeHourSelect); + this.raiseCallback(this.options.beforeHourSelect); raiseAfterHourSelect = true; } var isHours = view === 'hours', @@ -540,7 +542,7 @@ }, duration); if (raiseAfterHourSelect) { - raiseCallback(this.options.afterHourSelect); + this.raiseCallback(this.options.afterHourSelect); } }; @@ -576,7 +578,7 @@ inner = isHours && z < (outerRadius + innerRadius) / 2, radius = inner ? innerRadius : outerRadius, value; - + if (options.twelvehour) { radius = outerRadius; } @@ -621,7 +623,7 @@ } } } - + // Once hours or minutes changed, vibrate the device if (this[this.currentView] !== value) { if (vibrate && this.options.vibrate) { @@ -668,18 +670,22 @@ this.bg.setAttribute('cy', cy); this.fg.setAttribute('cx', cx); this.fg.setAttribute('cy', cy); + + if(isHours === false) { + this.raiseCallback(this.options.afterMinuteSelect); + } }; // Hours and minutes are selected ClockPicker.prototype.done = function() { - raiseCallback(this.options.beforeDone); + this.raiseCallback(this.options.beforeDone); this.hide(); var last = this.input.prop('value'), value = leadingZero(this.hours) + ':' + leadingZero(this.minutes); if (this.options.twelvehour) { value = value + this.amOrPm; } - + this.input.prop('value', value); if (value !== last) { this.input.triggerHandler('change'); @@ -692,7 +698,7 @@ this.input.trigger('blur'); } - raiseCallback(this.options.afterDone); + this.raiseCallback(this.options.afterDone); }; // Remove clockpicker from input @@ -726,4 +732,4 @@ } }); }; -}()); +}()); \ No newline at end of file