TimeCircles_wev8.js 7.28 KB
!function(d){function n(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}var o={},h=function(t,e){this.element=t,this.container,this.timer=null,this.data={text_elements:{Days:null,Hours:null,Minutes:null,Seconds:null},attributes:{canvas:null,context:null,item_size:null,line_width:null,radius:null,outer_radius:null},state:{fading:{Days:!1,Hours:!1,Minutes:!1,Seconds:!1}}},this.listeners=[],this.config=null,this.setOptions(e),this.container=d("<div>"),this.container.addClass("time_circles"),this.container.appendTo(this.element),this.data.attributes.canvas=d("<canvas>"),this.data.attributes.context=this.data.attributes.canvas[0].getContext("2d");var i=this.element.offsetHeight,a=this.element.offsetWidth;0===i&&0<a?i=a/4:0===a&&0<i&&(a=4*i),this.data.attributes.canvas[0].height=i,this.data.attributes.canvas[0].width=a,this.data.attributes.canvas.appendTo(this.container),this.data.attributes.item_size=Math.min(this.data.attributes.canvas[0].width/4,this.data.attributes.canvas[0].height),this.data.attributes.line_width=this.data.attributes.item_size*this.config.fg_width,this.data.attributes.radius=(.8*this.data.attributes.item_size-this.data.attributes.line_width)/2,this.data.attributes.outer_radius=this.data.attributes.radius+.5*Math.max(this.data.attributes.line_width,this.data.attributes.line_width*this.config.bg_width);var s=0;for(var r in this.data.text_elements){var n=d("<div>");n.addClass("textDiv_"+r),n.css("top",Math.round(.35*this.data.attributes.item_size)),n.css("left",Math.round(s++*this.data.attributes.item_size)),n.css("width",this.data.attributes.item_size),n.appendTo(this.container);var o=d("<h4>");o.text(this.config.time[r].text),o.css("font-size",Math.round(.07*this.data.attributes.item_size)),o.css("line-height",Math.round(.07*this.data.attributes.item_size)+"px"),o.appendTo(n);var h=d("<span>");h.css("font-size",Math.round(.21*this.data.attributes.item_size)),h.css("line-height",Math.round(.07*this.data.attributes.item_size)+"px"),h.appendTo(n),this.data.text_elements[r]=h}this.config.start&&this.start()};h.prototype.updateArc=function(){var t,e,i=1e3*this.config.refresh_interval,a=new Date;if(this.config.count_past_zero){var s=a-i;t=Math.abs(a-this.data.attributes.ref_date)/1e3,e=Math.abs(this.data.attributes.ref_date-s)/1e3}else e=(t=Math.max(this.data.attributes.ref_date-a,0)/1e3)+(a>this.data.attributes.ref_date)?0:i;var r={Days:t/60/60/24,Hours:t/60/60%24,Minutes:t/60%60,Seconds:t%60},n={Days:r.Days/365,Hours:r.Hours/24,Minutes:r.Minutes/60,Seconds:r.Seconds/60},o={Days:e/60/60/24,Hours:e/60/60%24,Minutes:e/60%60,Seconds:e%60},h=0,d=null;for(var u in r){this.data.text_elements[u].text(Math.floor(r[u]));var c=h*this.data.attributes.item_size+this.data.attributes.item_size/2,f=this.data.attributes.item_size/2,l=this.config.time[u].color;Math.floor(r[u])!==Math.floor(o[u])&&this.notifyListeners(u,Math.floor(r[u]),Math.floor(t)),null!==d&&(Math.floor(r[d])>Math.floor(o[d])?(this.radialFade(c,f,l,1,u),this.data.state.fading[u]=!0):Math.floor(r[d])<Math.floor(o[d])&&(this.radialFade(c,f,l,0,u),this.data.state.fading[u]=!0)),this.data.state.fading[u]||this.drawArc(c,f,l,n[u]),d=u,h++}},h.prototype.drawArc=function(t,e,i,a){var s=Math.max(this.data.attributes.outer_radius,this.data.attributes.item_size/2);this.data.attributes.context.clearRect(t-s,e-s,2*s,2*s),this.config.use_background&&(this.data.attributes.context.beginPath(),this.data.attributes.context.arc(t,e,this.data.attributes.radius,0,2*Math.PI,!1),this.data.attributes.context.lineWidth=this.data.attributes.line_width*this.config.bg_width,this.data.attributes.context.strokeStyle=this.config.circle_bg_color,this.data.attributes.context.stroke());var r=-.5*Math.PI,n=-.5*Math.PI+2*a*Math.PI;this.data.attributes.context.beginPath(),this.data.attributes.context.arc(t,e,this.data.attributes.radius,r,n,!1),this.data.attributes.context.lineWidth=this.data.attributes.line_width,this.data.attributes.context.strokeStyle=i,this.data.attributes.context.stroke()},h.prototype.radialFade=function(e,i,t,a,s){var r,n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(t,e,i,a){return e+e+i+i+a+a});var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t),o=this,h=.2*(1===a?-1:1);for(r=0;a<=1&&0<=a;r++)!function(){var t="rgba("+n.r+", "+n.g+", "+n.b+", "+Math.round(10*a)/10+")";setTimeout(function(){o.drawArc(e,i,t,1)},50*r)}(),a+=h;setTimeout(function(){o.data.state.fading[s]=!1},50*r)},h.prototype.timeLeft=function(){var t=new Date;return(this.data.attributes.ref_date-t)/1e3},h.prototype.start=function(){var t=d(this.element).data("date");if("string"==typeof t){t.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2}\s[0-9]{1,2}:[0-9]{2}:[0-9]{2}$/).length;var e=t.split(/[- :]/);newDate=new Date(e[0],e[1]-1,e[2],e[3],e[4],e[5]),this.data.attributes.ref_date=newDate.getTime()}else{var i=d(this.element).attr("data-timer");"string"==typeof i?(this.data.attributes.timer=parseFloat(i),d(this.element).removeAttr("data-timer")):"string"==typeof this.config.timer?(this.data.attributes.timer=parseFloat(this.config.timer),this.config.timer=null):"number"==typeof this.config.timer&&(this.data.attributes.timer=a.config.timer,this.config.timer=null),"number"==typeof this.data.attributes.timer?this.data.attributes.ref_date=(new Date).getTime()+1e3*this.data.attributes.timer:this.data.attributes.ref_date=this.config.ref_date}var a=this;this.timer=setInterval(function(){a.updateArc()},1e3*this.config.refresh_interval)},h.prototype.stop=function(){"number"==typeof this.data.attributes.timer&&(this.data.attributes.timer=this.timeLeft(this)),clearInterval(this.timer)},h.prototype.destroy=function(){this.stop(),this.container.remove(),d(this.element).removeData("tc-id")},h.prototype.setOptions=function(t){null===this.config&&(this.default_options.ref_date=new Date,this.config=d.extend(!0,{},this.default_options)),d.extend(!0,this.config,t)},h.prototype.addListener=function(t){"function"==typeof t&&this.listeners.push(t)},h.prototype.notifyListeners=function(t,e,i){for(var a=0;a<this.listeners.length;a++)this.listeners[a](t,e,i)},h.prototype.default_options={ref_date:new Date,start:!0,refresh_interval:.1,count_past_zero:!0,circle_bg_color:"#60686F",use_background:!0,fg_width:.1,bg_width:1.2,time:{Days:{show:!0,text:"Days",color:"#FC6"},Hours:{show:!0,text:"Hours",color:"#9CF"},Minutes:{show:!0,text:"Minutes",color:"#BFB"},Seconds:{show:!0,text:"Seconds",color:"#F99"}}};var e=function(t,e){this.elements=t,this.options=e,this.foreach()};e.prototype.foreach=function(s){var r=this;return this.elements.each(function(){var t,e=d(this).data("tc-id");if(void 0===e&&(e=n()+n()+"-"+n()+"-"+n()+"-"+n()+"-"+n()+n()+n(),d(this).data("tc-id",e)),void 0===o[e]){var i=d(this).data("options"),a=r.options;"object"==typeof i&&(a=d.extend(!0,{},r.options,i)),t=new h(this,a),o[e]=t}else t=o[e],void 0!==r.options&&t.setOptions(r.options);"function"==typeof s&&s(t)}),this},e.prototype.start=function(){return this.foreach(function(t){t.start()}),this},e.prototype.stop=function(){return this.foreach(function(t){t.stop()}),this},e.prototype.addListener=function(e){return this.foreach(function(t){t.addListener(e)}),this},e.prototype.destroy=function(){return this.foreach(function(t){t.destroy()}),this},e.prototype.end=function(){return this.elements},d.fn.TimeCircles=function(t){return new e(this,t)}}($);