| @@ -1,24 +1,19 @@ | ||
| 1 | 1 | /** |
| 2 | - * CoolClock 3.1.0 | |
| 3 | - * | |
| 2 | +* CoolClock 3.2.2 | |
| 3 | +* | |
| 4 | 4 | Copyright (c) 2010-2013, Simon Baird. |
| 5 | 5 | All rights reserved. |
| 6 | - * | |
| 7 | - * Applied path fix https://github.com/henrahmagix/CoolClock/commit/00d48a01b1aeadbeb0b7d167aca892de78659b76 | |
| 8 | - * Added responsive styling by RavanH (lines 136/137) 26112014 | |
| 9 | - * | |
| 6 | +* | |
| 7 | +* Applied path fix https://github.com/henrahmagix/CoolClock/commit/00d48a01b1aeadbeb0b7d167aca892de78659b76 | |
| 8 | +* Added responsive styling by RavanH (lines 136/137) 26112014 | |
| 9 | +* | |
| 10 | 10 | Redistribution and use in source and binary forms, with or without |
| 11 | 11 | modification, are permitted provided that the following conditions are met: |
| 12 | -- Redistributions of source code must retain the above copyright notice, | |
| 13 | - this list of conditions and the following disclaimer. | |
| 14 | -- Redistributions in binary form must reproduce the above copyright notice, | |
| 15 | - this list of conditions and the following disclaimer in the documentation | |
| 16 | - and/or other materials provided with the distribution. | |
| 17 | -- Neither the name Simon Baird nor the names of other contributors may be | |
| 18 | - used to endorse or promote products derived from this software without | |
| 19 | - specific prior written permission. | |
| 20 | - * | |
| 12 | +- Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. | |
| 13 | +- Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. | |
| 14 | +- Neither the name Simon Baird nor the names of other contributors may be used to endorse or promote products derived from this software without specific prior written permission. | |
| 15 | +* | |
| 21 | 16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
| 22 | 17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| 23 | 18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
| 24 | 19 | ARE DISCLAIMED. IN NO EVENT SHALL SIMON BAIRD BE LIABLE FOR ANY DIRECT, |
| @@ -27,13 +22,17 @@ | ||
| 27 | 22 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND |
| 28 | 23 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 29 | 24 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF |
| 30 | 25 | THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 31 | - * | |
| 32 | - * Display an analog clock using canvas. | |
| 33 | - * http://randomibis.com/coolclock/ | |
| 34 | - * | |
| 35 | - */ | |
| 26 | +* | |
| 27 | +* Display an analog clock using canvas. | |
| 28 | +* http://randomibis.com/coolclock/ | |
| 29 | +* | |
| 30 | +Based on version 3.1.0 by Simon Baird. | |
| 31 | +Modified for WordPress CoolClock plugin by RavanH 2020 | |
| 32 | +Version 3.2.0 - added showDigital24,showSecs,showDate,showText,font,fontColor&text parameters | |
| 33 | +Version 3.2.2 - more robust skin handling: load skin parameters only once with option for dynamic skin polling; make sure a fallback skin is always available. | |
| 34 | +*/ | |
| 36 | 35 | |
| 37 | 36 | // Constructor for CoolClock objects |
| 38 | 37 | window.CoolClock = function(options) { |
| 39 | 38 | return this.init(options); |
| @@ -41,47 +40,47 @@ | ||
| 41 | 40 | |
| 42 | 41 | // Config contains some defaults, and clock skins |
| 43 | 42 | CoolClock.config = { |
| 44 | 43 | tickDelay: 1000, |
| 45 | - longTickDelay: 15000, | |
| 44 | + //longTickDelay: 15000, | |
| 46 | 45 | defaultRadius: 85, |
| 47 | 46 | renderRadius: 100, |
| 48 | - defaultSkin: "chunkySwiss", | |
| 49 | - defaultFont: "15px sans-serif", | |
| 47 | + defaultColor: "black", | |
| 48 | + defaultAlpha: 1, | |
| 49 | + defaultFont: "15px monospace", | |
| 50 | 50 | defaultFontColor: "#333", |
| 51 | 51 | |
| 52 | - skins: { | |
| 53 | - // There are more skins in moreskins.js | |
| 54 | - // Try making your own skin by copy/pasting one of these and tweaking it | |
| 55 | - swissRail: { | |
| 56 | - outerBorder: { lineWidth: 2, radius:95, color: "black", alpha: 1 }, | |
| 57 | - smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 }, | |
| 58 | - largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 }, | |
| 59 | - hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 }, | |
| 60 | - minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 }, | |
| 61 | - secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 }, | |
| 62 | - secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 } | |
| 63 | - }, | |
| 64 | - chunkySwiss: { | |
| 65 | - outerBorder: { lineWidth: 4, radius:97, color: "black", alpha: 1 }, | |
| 66 | - smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 }, | |
| 67 | - largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 }, | |
| 68 | - hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 }, | |
| 69 | - minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 }, | |
| 70 | - secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, | |
| 71 | - secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 } | |
| 72 | - }, | |
| 73 | - chunkySwissOnBlack: { | |
| 74 | - outerBorder: { lineWidth: 4, radius:97, color: "white", alpha: 1 }, | |
| 75 | - smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 }, | |
| 76 | - largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 }, | |
| 77 | - hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 }, | |
| 78 | - minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 }, | |
| 79 | - secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, | |
| 80 | - secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 } | |
| 81 | - } | |
| 52 | + /* | |
| 53 | + * SKIN ELEMENTS | |
| 54 | + * outerBorder - static element, can be used to draw an outer circle or solid background (requires radius) | |
| 55 | + * largeIndicator - hour markers, 12 static elements devided around the clock scale | |
| 56 | + * smallIndicator - minute markers, 48 static elements devided around the clock scale between the hour markers | |
| 57 | + * hourHand - element rotating in 12 hours | |
| 58 | + * minuteHand - element rotating in 1 hour | |
| 59 | + * secondHand - element rotating in 1 minute | |
| 60 | + * secondDecoration - additional decoration element, rotating in 1 minute | |
| 61 | + * | |
| 62 | + * ELEMENTS PARAMETERS | |
| 63 | + * lineWidth - width of line drawn (default 0) | |
| 64 | + * color - color of line drawn (default black) | |
| 65 | + * startAt - starting point from center, can be negative (default 0) | |
| 66 | + * endAt - end point from center (default 0) | |
| 67 | + * radius - transform line to circle with this radius around startAt as center (endAt will be ignored) | |
| 68 | + * fillColor - collor to fill circle (ignored when radius not used) | |
| 69 | + * alpha - transparency value (default 1) | |
| 70 | + */ | |
| 71 | + skin: { /* similar to swissrail but solid white background */ | |
| 72 | + outerBorder: { lineWidth: 2, radius: 95, fillColor: "white" }, | |
| 73 | + smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92 }, | |
| 74 | + largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92 }, | |
| 75 | + hourHand: { lineWidth: 8, startAt: -15, endAt: 50 }, | |
| 76 | + minuteHand: { lineWidth: 7, startAt: -15, endAt: 75 }, | |
| 77 | + secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red" }, | |
| 78 | + secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red" } | |
| 79 | + }, | |
| 82 | 80 | |
| 83 | - }, | |
| 81 | + // Can store skin objects by skinId reference (see moreskins.js) | |
| 82 | + skins: {}, | |
| 84 | 83 | |
| 85 | 84 | // Test for IE so we can nurse excanvas in a couple of places |
| 86 | 85 | isIE: !!document.all, |
| 87 | 86 | |
| @@ -93,16 +92,18 @@ | ||
| 93 | 92 | } |
| 94 | 93 | |
| 95 | 94 | // Main tick handler. Refresh all the clocks then setup the next tick |
| 96 | 95 | CoolClock.tick = function() { |
| 96 | + // TODO switch to CoolClock.config.longTickDelay if none of the clocks show second hand or digital time with seconds, or dynamicSkin is set | |
| 97 | + // can be useful for large number of clocks to reduce CPU usage with possible skips in second hand movement | |
| 98 | + this.tickTimeout = setTimeout(CoolClock.tick, CoolClock.config.tickDelay); | |
| 97 | 99 | |
| 98 | 100 | for (var clockId in CoolClock.config.clockTracker) { |
| 99 | 101 | var clock = CoolClock.config.clockTracker[clockId]; |
| 100 | - if (clock.stillHere() && clock.active) { | |
| 102 | + if ( clock.stillHere() && clock.active && ! clock.busy ) { | |
| 101 | 103 | clock.refreshDisplay() |
| 102 | 104 | } |
| 103 | 105 | } |
| 104 | - this.tickTimeout = setTimeout(CoolClock.tick, CoolClock.config.tickDelay); | |
| 105 | 106 | }; |
| 106 | 107 | |
| 107 | 108 | // Define the CoolClock object's methods |
| 108 | 109 | CoolClock.prototype = { |
| @@ -109,32 +110,34 @@ | ||
| 109 | 110 | |
| 110 | 111 | // Initialise using the parameters parsed from the colon delimited class |
| 111 | 112 | init: function(options) { |
| 112 | 113 | // Parse and store the options |
| 113 | - this.canvasId = options.canvasId; | |
| 114 | - this.skinId = options.skinId || CoolClock.config.defaultSkin; | |
| 115 | - this.font = options.font || CoolClock.config.defaultFont; | |
| 116 | - this.fontColor = options.fontColor || CoolClock.config.defaultFontColor; | |
| 117 | - this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius; | |
| 118 | - this.renderRadius = options.renderRadius || CoolClock.config.renderRadius; | |
| 114 | + this.canvasId = options.canvasId; | |
| 115 | + this.skinId = options.skinId; | |
| 116 | + this.font = options.font || CoolClock.config.defaultFont; | |
| 117 | + this.fontColor = options.fontColor || CoolClock.config.defaultFontColor; | |
| 118 | + this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius; | |
| 119 | + this.renderRadius = options.renderRadius || CoolClock.config.renderRadius; | |
| 119 | 120 | this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true; |
| 120 | - this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null; | |
| 121 | - this.showDigital = typeof options.showDigital == "boolean" ? options.showDigital : false; | |
| 122 | - this.showDigital24 = typeof options.showDigital24 == "boolean" ? options.showDigital24 : false; | |
| 123 | - this.showDate = typeof options.showDate == "boolean" ? options.showDate : false; | |
| 124 | - this.logClock = typeof options.logClock == "boolean" ? options.logClock : false; | |
| 125 | - this.logClockRev = typeof options.logClock == "boolean" ? options.logClockRev : false; | |
| 121 | + this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null; | |
| 122 | + this.showDigital = typeof options.showDigital == "boolean" ? options.showDigital : false; | |
| 123 | + this.showDigital24 = typeof options.showDigital24 == "boolean" ? options.showDigital24 : false; | |
| 124 | + this.showSecs = typeof options.showSecs == "boolean" ? options.showSecs : false; | |
| 125 | + this.showDate = typeof options.showDate == "boolean" ? options.showDate : false; | |
| 126 | + this.showText = typeof options.showText == "boolean" ? options.showText : false; | |
| 127 | + this.logClock = typeof options.logClock == "boolean" ? options.logClock : false; | |
| 128 | + this.logClockRev = typeof options.logClock == "boolean" ? options.logClockRev : false; | |
| 129 | + this.text = options.text || ''; | |
| 130 | + this.dynamicSkin = typeof options.dynamicSkin == "boolean" ? options.dynamicSkin : false; | |
| 126 | 131 | |
| 127 | - this.tickDelay = CoolClock.config[ this.showSecondHand ? "tickDelay" : "longTickDelay" ]; | |
| 128 | - | |
| 129 | 132 | // Get the canvas element |
| 130 | 133 | this.canvas = document.getElementById(this.canvasId); |
| 131 | 134 | |
| 132 | 135 | // Make the canvas the requested size. It's always square. |
| 133 | - this.canvas.setAttribute("width",this.displayRadius*2); | |
| 134 | - this.canvas.setAttribute("height",this.displayRadius*2); | |
| 135 | - this.canvas.style.width = this.displayRadius*2 + "px"; | |
| 136 | - //this.canvas.style.height = this.displayRadius*2 + "px"; | |
| 136 | + this.canvas.setAttribute("width", this.displayRadius * 2); | |
| 137 | + this.canvas.setAttribute("height", this.displayRadius * 2); | |
| 138 | + this.canvas.style.width = this.displayRadius * 2 + "px"; | |
| 139 | + //this.canvas.style.height = this.displayRadius * 2 + "px"; | |
| 137 | 140 | // some responsiveness please: |
| 138 | 141 | this.canvas.style.maxWidth = "100%"; |
| 139 | 142 | this.canvas.style.height = "auto"; |
| 140 | 143 | |
| @@ -148,9 +151,9 @@ | ||
| 148 | 151 | this.scale = this.displayRadius / this.renderRadius; |
| 149 | 152 | |
| 150 | 153 | // Initialise canvas context |
| 151 | 154 | this.ctx = this.canvas.getContext("2d"); |
| 152 | - this.ctx.scale(this.scale,this.scale); | |
| 155 | + this.ctx.scale(this.scale, this.scale); | |
| 153 | 156 | |
| 154 | 157 | // Keep track of this object |
| 155 | 158 | CoolClock.config.clockTracker[this.canvasId] = this; |
| 156 | 159 | |
| @@ -160,11 +163,12 @@ | ||
| 160 | 163 | return this; |
| 161 | 164 | }, |
| 162 | 165 | |
| 163 | 166 | // Draw a circle at point x,y with params as defined in skin |
| 164 | - fullCircleAt: function(x,y,skin) { | |
| 167 | + fullCircleAt: function(x, y, skin) { | |
| 165 | 168 | this.ctx.save(); |
| 166 | - this.ctx.globalAlpha = skin.alpha; | |
| 169 | + this.ctx.globalAlpha = skin.alpha || CoolClock.config.defaultAlpha; | |
| 170 | + this.ctx.strokeStyle = skin.color || CoolClock.config.defaultColor; | |
| 167 | 171 | this.ctx.lineWidth = skin.lineWidth; |
| 168 | 172 | |
| 169 | 173 | if (CoolClock.config.isIE) { |
| 170 | 174 | // excanvas doesn't scale line width so we will do it here |
| @@ -171,9 +175,9 @@ | ||
| 171 | 175 | this.ctx.lineWidth = this.ctx.lineWidth * this.scale; |
| 172 | 176 | } |
| 173 | 177 | |
| 174 | 178 | this.ctx.beginPath(); |
| 175 | - this.ctx.arc(x, y, skin.radius, 0, 2*Math.PI, false); | |
| 179 | + this.ctx.arc(x, y, skin.radius, 0, 2 * Math.PI, false); | |
| 176 | 180 | |
| 177 | 181 | if (CoolClock.config.isIE) { |
| 178 | 182 | // excanvas doesn't close the circle so let's fill in the tiny gap |
| 179 | 183 | this.ctx.arc(x, y, skin.radius, -0.1, 0.1, false); |
| @@ -182,17 +186,14 @@ | ||
| 182 | 186 | if (skin.fillColor) { |
| 183 | 187 | this.ctx.fillStyle = skin.fillColor |
| 184 | 188 | this.ctx.fill(); |
| 185 | 189 | } |
| 186 | - if (skin.color) { | |
| 187 | - this.ctx.strokeStyle = skin.color; | |
| 188 | - this.ctx.stroke(); | |
| 189 | - } | |
| 190 | + this.ctx.stroke(); | |
| 190 | 191 | this.ctx.restore(); |
| 191 | 192 | }, |
| 192 | 193 | |
| 193 | 194 | // Draw some text centered vertically and horizontally |
| 194 | - drawTextAt: function(theText,x,y,skin) { | |
| 195 | + drawTextAt: function(theText, x, y, skin) { | |
| 195 | 196 | if (!skin) skin = this.getSkin(); |
| 196 | 197 | this.ctx.save(); |
| 197 | 198 | this.ctx.font = skin.font || this.font; |
| 198 | 199 | var tSize = this.ctx.measureText(theText); |
| @@ -201,9 +202,9 @@ | ||
| 201 | 202 | tSize.height = 0; |
| 202 | 203 | this.ctx.textBaseline = 'middle'; |
| 203 | 204 | } |
| 204 | 205 | this.ctx.fillStyle = skin.fontColor || this.fontColor; |
| 205 | - this.ctx.fillText(theText, x - tSize.width/2, y - tSize.height/2); | |
| 206 | + this.ctx.fillText(theText, x - tSize.width / 2, y - tSize.height / 2); | |
| 206 | 207 | this.ctx.restore(); |
| 207 | 208 | }, |
| 208 | 209 | |
| 209 | 210 | lpad2: function(num) { |
| @@ -213,38 +214,35 @@ | ||
| 213 | 214 | tickAngle: function(second) { |
| 214 | 215 | // Log algorithm by David Bradshaw |
| 215 | 216 | var tweak = 3; // If it's lower the one second mark looks wrong (?) |
| 216 | 217 | if (this.logClock) { |
| 217 | - return second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak)); | |
| 218 | + return second == 0 ? 0 : (Math.log(second * tweak) / Math.log(60 * tweak)); | |
| 218 | 219 | } |
| 219 | 220 | else if (this.logClockRev) { |
| 220 | 221 | // Flip the seconds then flip the angle (trickiness) |
| 221 | 222 | second = (60 - second) % 60; |
| 222 | - return 1.0 - (second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak))); | |
| 223 | + return 1.0 - (second == 0 ? 0 : (Math.log(second * tweak) / Math.log(60 * tweak))); | |
| 223 | 224 | } |
| 224 | 225 | else { |
| 225 | - return second/60.0; | |
| 226 | + return second / 60.0; | |
| 226 | 227 | } |
| 227 | 228 | }, |
| 228 | 229 | |
| 229 | - timeText: function(hour,min,sec,showAmPm,showSecs) { | |
| 230 | + timeText: function(hour, min, sec, showAmPm, showSecs) { | |
| 230 | 231 | return '' + |
| 231 | - (showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' + | |
| 232 | + (showAmPm ? ((hour % 12) == 0 ? 12 : (hour % 12)) : hour) + ':' + | |
| 232 | 233 | this.lpad2(min) + |
| 233 | 234 | (showSecs ? ':' + this.lpad2(sec) : '') + |
| 234 | 235 | (showAmPm ? (hour < 12 ? ' am' : ' pm') : '') |
| 235 | - ; | |
| 236 | + ; | |
| 236 | 237 | }, |
| 237 | 238 | |
| 238 | 239 | // Draw a radial line by rotating then drawing a straight line |
| 239 | 240 | // Ha ha, I think I've accidentally used Taus, (see http://tauday.com/) |
| 240 | - radialLineAtAngle: function(angleFraction,skin) { | |
| 241 | + radialLineAtAngle: function(angleFraction, skin) { | |
| 241 | 242 | this.ctx.save(); |
| 242 | - this.ctx.translate(this.renderRadius,this.renderRadius); | |
| 243 | + this.ctx.translate(this.renderRadius, this.renderRadius); | |
| 243 | 244 | this.ctx.rotate(Math.PI * (2.0 * angleFraction - 0.5)); |
| 244 | - this.ctx.globalAlpha = skin.alpha; | |
| 245 | - this.ctx.strokeStyle = skin.color; | |
| 246 | - this.ctx.lineWidth = skin.lineWidth; | |
| 247 | 245 | |
| 248 | 246 | if (CoolClock.config.isIE) |
| 249 | 247 | // excanvas doesn't scale line width so we will do it here |
| 250 | 248 | this.ctx.lineWidth = this.ctx.lineWidth * this.scale; |
| @@ -249,66 +247,65 @@ | ||
| 249 | 247 | // excanvas doesn't scale line width so we will do it here |
| 250 | 248 | this.ctx.lineWidth = this.ctx.lineWidth * this.scale; |
| 251 | 249 | |
| 252 | 250 | if (skin.radius) { |
| 253 | - this.fullCircleAt(skin.startAt,0,skin) | |
| 254 | - } | |
| 255 | - else { | |
| 251 | + this.fullCircleAt(skin.startAt, 0, skin) | |
| 252 | + } else { | |
| 253 | + this.ctx.globalAlpha = skin.alpha || CoolClock.config.defaultAlpha; | |
| 254 | + this.ctx.strokeStyle = skin.color || CoolClock.config.defaultColor; | |
| 255 | + this.ctx.lineWidth = skin.lineWidth; | |
| 256 | 256 | this.ctx.beginPath(); |
| 257 | - this.ctx.moveTo(skin.startAt,0) | |
| 258 | - this.ctx.lineTo(skin.endAt,0); | |
| 257 | + this.ctx.moveTo(skin.startAt, 0) | |
| 258 | + this.ctx.lineTo(skin.endAt, 0); | |
| 259 | 259 | this.ctx.stroke(); |
| 260 | 260 | } |
| 261 | 261 | this.ctx.restore(); |
| 262 | 262 | }, |
| 263 | 263 | |
| 264 | - render: function(hour,min,sec,date) { | |
| 264 | + render: function(hour, min, sec, date) { | |
| 265 | 265 | // Get the skin |
| 266 | 266 | var skin = this.getSkin(); |
| 267 | 267 | |
| 268 | 268 | // Clear |
| 269 | - this.ctx.clearRect(0,0,this.renderRadius*2,this.renderRadius*2); | |
| 269 | + this.ctx.clearRect(0, 0, this.renderRadius * 2, this.renderRadius * 2); | |
| 270 | 270 | |
| 271 | 271 | // Draw the outer edge of the clock |
| 272 | 272 | if (skin.outerBorder) |
| 273 | - this.fullCircleAt(this.renderRadius,this.renderRadius,skin.outerBorder); | |
| 273 | + this.fullCircleAt(this.renderRadius, this.renderRadius, skin.outerBorder); | |
| 274 | 274 | |
| 275 | 275 | // Draw the tick marks. Every 5th one is a big one |
| 276 | - for (var i=0;i<60;i++) { | |
| 277 | - (i%5) && skin.smallIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.smallIndicator); | |
| 278 | - !(i%5) && skin.largeIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.largeIndicator); | |
| 276 | + for (var i = 0; i < 60; i++) { | |
| 277 | + (i % 5) && skin.smallIndicator && this.radialLineAtAngle(this.tickAngle(i), skin.smallIndicator); | |
| 278 | + !(i % 5) && skin.largeIndicator && this.radialLineAtAngle(this.tickAngle(i), skin.largeIndicator); | |
| 279 | 279 | } |
| 280 | 280 | |
| 281 | 281 | // Write the time and or date |
| 282 | - if (this.showDigital || this.showDigital24 || this.showDate) { | |
| 283 | - var text; | |
| 284 | - if (this.showDigital) text = this.timeText(hour,min,sec,true,false); | |
| 285 | - else if (this.showDigital24) text = this.timeText(hour,min,sec,false,true); | |
| 286 | - else text = date; | |
| 282 | + if (this.showDigital || this.showDigital24 || this.showDate || this.showText) { | |
| 283 | + var text = this.showDigital || this.showDigital24 ? this.timeText(hour, min, sec, !this.showDigital24, this.showSecs) : this.showDate ? date : this.text; | |
| 287 | 284 | this.drawTextAt( |
| 288 | 285 | text, |
| 289 | 286 | this.renderRadius, |
| 290 | - this.renderRadius+this.renderRadius/2, | |
| 287 | + this.renderRadius + this.renderRadius / 2, | |
| 291 | 288 | skin |
| 292 | 289 | ); |
| 293 | 290 | } |
| 294 | 291 | |
| 295 | - var hourA = (hour%12)*5 + min/12.0, | |
| 296 | - minA = min + sec/60.0, | |
| 297 | - secA = sec; | |
| 292 | + var hourA = (hour % 12) * 5 + min / 12.0, | |
| 293 | + minA = min + sec / 60.0, | |
| 294 | + secA = sec; | |
| 298 | 295 | |
| 299 | 296 | // Draw the hands |
| 300 | 297 | if (skin.hourHand) |
| 301 | - this.radialLineAtAngle(this.tickAngle(hourA),skin.hourHand); | |
| 298 | + this.radialLineAtAngle(this.tickAngle(hourA), skin.hourHand); | |
| 302 | 299 | |
| 303 | 300 | if (skin.minuteHand) |
| 304 | - this.radialLineAtAngle(this.tickAngle(minA),skin.minuteHand); | |
| 301 | + this.radialLineAtAngle(this.tickAngle(minA), skin.minuteHand); | |
| 305 | 302 | |
| 306 | 303 | if (this.showSecondHand && skin.secondHand) |
| 307 | - this.radialLineAtAngle(this.tickAngle(secA),skin.secondHand); | |
| 304 | + this.radialLineAtAngle(this.tickAngle(secA), skin.secondHand); | |
| 308 | 305 | |
| 309 | 306 | // Hands decoration - not in IE |
| 310 | - if (!CoolClock.config.isIE) { | |
| 307 | + if (!CoolClock.config.isIE) { | |
| 311 | 308 | if (skin.hourDecoration) |
| 312 | 309 | this.radialLineAtAngle(this.tickAngle(hourA), skin.hourDecoration); |
| 313 | 310 | |
| 314 | 311 | if (skin.minDecoration) |
| @@ -314,32 +311,27 @@ | ||
| 314 | 311 | if (skin.minDecoration) |
| 315 | 312 | this.radialLineAtAngle(this.tickAngle(minA), skin.minDecoration); |
| 316 | 313 | |
| 317 | 314 | if (this.showSecondHand && skin.secondDecoration) |
| 318 | - this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration); | |
| 315 | + this.radialLineAtAngle(this.tickAngle(secA), skin.secondDecoration); | |
| 319 | 316 | } |
| 320 | - | |
| 321 | - /* what's extraRender and why is it here? | |
| 322 | - if (this.extraRender) { | |
| 323 | - this.extraRender(hour,min,sec); | |
| 324 | - }*/ | |
| 325 | 317 | }, |
| 326 | 318 | |
| 327 | 319 | // Check the time and display the clock |
| 328 | 320 | refreshDisplay: function() { |
| 321 | + this.busy = true; | |
| 329 | 322 | var now = new Date(); |
| 330 | 323 | if (this.gmtOffset != null) { |
| 331 | 324 | // Use GMT + gmtOffset |
| 332 | 325 | var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60)); |
| 333 | - this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds(),offsetNow.toLocaleDateString()); | |
| 334 | - } | |
| 335 | - else { | |
| 326 | + this.render(offsetNow.getUTCHours(), offsetNow.getUTCMinutes(), offsetNow.getUTCSeconds(), offsetNow.toLocaleDateString()); | |
| 327 | + } else { | |
| 336 | 328 | // Use local time |
| 337 | - this.render(now.getHours(),now.getMinutes(),now.getSeconds(),now.toLocaleDateString()); | |
| 329 | + this.render(now.getHours(), now.getMinutes(), now.getSeconds(), now.toLocaleDateString()); | |
| 338 | 330 | } |
| 331 | + this.busy = false; | |
| 339 | 332 | }, |
| 340 | 333 | |
| 341 | - | |
| 342 | 334 | // Check the canvas element hasn't been removed |
| 343 | 335 | stillHere: function() { |
| 344 | 336 | return document.getElementById(this.canvasId) != null; |
| 345 | 337 | }, |
| @@ -354,11 +346,16 @@ | ||
| 354 | 346 | this.active = true; |
| 355 | 347 | }, |
| 356 | 348 | |
| 357 | 349 | getSkin: function() { |
| 358 | - var skin = CoolClock.config.skins[this.skinId]; | |
| 359 | - if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin]; | |
| 360 | - return skin; | |
| 350 | + if ( ! this.skin || this.dynamicSkin ) { | |
| 351 | + var skin = CoolClock.config.skins[this.skinId]; | |
| 352 | + if ( typeof skin === 'undefined' || skin.length === 0 ) | |
| 353 | + skin = CoolClock.config.skin; | |
| 354 | + this.skin = skin; | |
| 355 | + } | |
| 356 | + | |
| 357 | + return this.skin; | |
| 361 | 358 | } |
| 362 | 359 | }; |
| 363 | 360 | |
| 364 | 361 | // Find all canvas elements that have the CoolClock class and turns them into clocks |
| @@ -364,9 +361,9 @@ | ||
| 364 | 361 | // Find all canvas elements that have the CoolClock class and turns them into clocks |
| 365 | 362 | CoolClock.findAndCreateClocks = function() { |
| 366 | 363 | // (Let's not use a jQuery selector here so it's easier to use frameworks other than jQuery) |
| 367 | 364 | var canvases = document.getElementsByTagName("canvas"); |
| 368 | - for (var i=0;i<canvases.length;i++) { | |
| 365 | + for (var i = 0; i < canvases.length; i++) { | |
| 369 | 366 | // Pull out the fields from the class. Example "CoolClock:chunkySwissOnBlack:1000" |
| 370 | 367 | var fields = canvases[i].className.split(" ")[0].split(":"); |
| 371 | 368 | if (fields[0] == "CoolClock") { |
| 372 | 369 | if (!canvases[i].id) { |
| @@ -374,20 +371,24 @@ | ||
| 374 | 371 | canvases[i].id = '_coolclock_auto_id_' + CoolClock.config.noIdCount++; |
| 375 | 372 | } |
| 376 | 373 | // Create a clock object for this element |
| 377 | 374 | new CoolClock({ |
| 378 | - canvasId: canvases[i].id, | |
| 379 | - skinId: fields[1], | |
| 380 | - displayRadius: fields[2], | |
| 381 | - showSecondHand: fields[3]!='noSeconds', | |
| 382 | - gmtOffset: fields[4], | |
| 383 | - showDigital: fields[5]=='showDigital', | |
| 384 | - showDigital24: fields[5]=='showDigital24', | |
| 385 | - showDate: fields[5]=='showDate', | |
| 386 | - logClock: fields[6]=='logClock', | |
| 387 | - logClockRev: fields[6]=='logClockRev', | |
| 388 | - font: fields[7], | |
| 389 | - fontColor: fields[8] | |
| 375 | + canvasId: canvases[i].id, | |
| 376 | + skinId: fields[1], | |
| 377 | + displayRadius: fields[2], | |
| 378 | + showSecondHand: fields[3] != 'noSeconds', | |
| 379 | + gmtOffset: fields[4], | |
| 380 | + showDigital: fields[5] == 'showDigital' || fields[5] == 'showDigital+Secs', | |
| 381 | + showDigital24: fields[5] == 'showDigital24' || fields[5] == 'showDigital24+Secs', | |
| 382 | + showSecs: fields[5].indexOf('+Secs', 10) != -1, | |
| 383 | + showDate: fields[5] == 'showDate', | |
| 384 | + showText: fields[5] == 'showText', | |
| 385 | + logClock: fields[6] == 'logClock', | |
| 386 | + logClockRev: fields[6] == 'logClockRev', | |
| 387 | + fontColor: fields[7], | |
| 388 | + font: fields[8] ? fields[8].replace(/\|/g, ' ') : null, | |
| 389 | + text: fields[9] ? fields[9].replace(/\|/g, ' ') : null, | |
| 390 | + dynamicSkin: fields[10] == 'dynamicSkin' | |
| 390 | 391 | }); |
| 391 | 392 | } |
| 392 | 393 | } |
| 393 | 394 | // Start ticking |
| @@ -395,5 +396,5 @@ | ||
| 395 | 396 | }; |
| 396 | 397 | |
| 397 | 398 | // If you don't have jQuery then you need a body onload like this: <body onload="CoolClock.findAndCreateClocks()"> |
| 398 | 399 | // If you do have jQuery and it's loaded already then we can do it right now |
| 399 | -if (window.jQuery) jQuery(document).ready(CoolClock.findAndCreateClocks); | |
| 400 | +//if (window.jQuery) jQuery(document).ready(CoolClock.findAndCreateClocks); | |
