| @@ -1,19 +1,24 @@ | ||
| 1 | 1 | /** |
| 2 | -* CoolClock 3.2.2 | |
| 3 | -* | |
| 2 | + * CoolClock 3.1.0 | |
| 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, 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 | -* | |
| 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 | + * | |
| 16 | 21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
| 17 | 22 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| 18 | 23 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
| 19 | 24 | ARE DISCLAIMED. IN NO EVENT SHALL SIMON BAIRD BE LIABLE FOR ANY DIRECT, |
| @@ -22,17 +27,13 @@ | ||
| 22 | 27 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND |
| 23 | 28 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 24 | 29 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF |
| 25 | 30 | THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 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 | -*/ | |
| 31 | + * | |
| 32 | + * Display an analog clock using canvas. | |
| 33 | + * http://randomibis.com/coolclock/ | |
| 34 | + * | |
| 35 | + */ | |
| 35 | 36 | |
| 36 | 37 | // Constructor for CoolClock objects |
| 37 | 38 | window.CoolClock = function(options) { |
| 38 | 39 | return this.init(options); |
| @@ -40,48 +41,48 @@ | ||
| 40 | 41 | |
| 41 | 42 | // Config contains some defaults, and clock skins |
| 42 | 43 | CoolClock.config = { |
| 43 | 44 | tickDelay: 1000, |
| 44 | - //longTickDelay: 15000, | |
| 45 | + longTickDelay: 15000, | |
| 45 | 46 | defaultRadius: 85, |
| 46 | 47 | renderRadius: 100, |
| 47 | - defaultColor: "black", | |
| 48 | - defaultAlpha: 1, | |
| 49 | - defaultFont: "15px monospace", | |
| 48 | + defaultSkin: "chunkySwiss", | |
| 49 | + defaultFont: "15px sans-serif", | |
| 50 | 50 | defaultFontColor: "#333", |
| 51 | 51 | |
| 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" } | |
| 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 | + } | |
| 82 | + | |
| 79 | 83 | }, |
| 80 | 84 | |
| 81 | - // Can store skin objects by skinId reference (see moreskins.js) | |
| 82 | - skins: {}, | |
| 83 | - | |
| 84 | 85 | // Test for IE so we can nurse excanvas in a couple of places |
| 85 | 86 | isIE: !!document.all, |
| 86 | 87 | |
| 87 | 88 | // Will store (a reference to) each clock here, indexed by the id of the canvas element |
| @@ -92,18 +93,16 @@ | ||
| 92 | 93 | } |
| 93 | 94 | |
| 94 | 95 | // Main tick handler. Refresh all the clocks then setup the next tick |
| 95 | 96 | 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); | |
| 99 | 97 | |
| 100 | 98 | for (var clockId in CoolClock.config.clockTracker) { |
| 101 | 99 | var clock = CoolClock.config.clockTracker[clockId]; |
| 102 | - if ( clock.stillHere() && clock.active && ! clock.busy ) { | |
| 100 | + if (clock.stillHere() && clock.active) { | |
| 103 | 101 | clock.refreshDisplay() |
| 104 | 102 | } |
| 105 | 103 | } |
| 104 | + this.tickTimeout = setTimeout(CoolClock.tick, CoolClock.config.tickDelay); | |
| 106 | 105 | }; |
| 107 | 106 | |
| 108 | 107 | // Define the CoolClock object's methods |
| 109 | 108 | CoolClock.prototype = { |
| @@ -110,34 +109,32 @@ | ||
| 110 | 109 | |
| 111 | 110 | // Initialise using the parameters parsed from the colon delimited class |
| 112 | 111 | init: function(options) { |
| 113 | 112 | // Parse and store the options |
| 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; | |
| 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; | |
| 120 | 119 | this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true; |
| 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; | |
| 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; | |
| 131 | 126 | |
| 127 | + this.tickDelay = CoolClock.config[ this.showSecondHand ? "tickDelay" : "longTickDelay" ]; | |
| 128 | + | |
| 132 | 129 | // Get the canvas element |
| 133 | 130 | this.canvas = document.getElementById(this.canvasId); |
| 134 | 131 | |
| 135 | 132 | // Make the canvas the requested size. It's always square. |
| 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"; | |
| 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"; | |
| 140 | 137 | // some responsiveness please: |
| 141 | 138 | this.canvas.style.maxWidth = "100%"; |
| 142 | 139 | this.canvas.style.height = "auto"; |
| 143 | 140 | |
| @@ -151,9 +148,9 @@ | ||
| 151 | 148 | this.scale = this.displayRadius / this.renderRadius; |
| 152 | 149 | |
| 153 | 150 | // Initialise canvas context |
| 154 | 151 | this.ctx = this.canvas.getContext("2d"); |
| 155 | - this.ctx.scale(this.scale, this.scale); | |
| 152 | + this.ctx.scale(this.scale,this.scale); | |
| 156 | 153 | |
| 157 | 154 | // Keep track of this object |
| 158 | 155 | CoolClock.config.clockTracker[this.canvasId] = this; |
| 159 | 156 | |
| @@ -163,12 +160,11 @@ | ||
| 163 | 160 | return this; |
| 164 | 161 | }, |
| 165 | 162 | |
| 166 | 163 | // Draw a circle at point x,y with params as defined in skin |
| 167 | - fullCircleAt: function(x, y, skin) { | |
| 164 | + fullCircleAt: function(x,y,skin) { | |
| 168 | 165 | this.ctx.save(); |
| 169 | - this.ctx.globalAlpha = skin.alpha || CoolClock.config.defaultAlpha; | |
| 170 | - this.ctx.strokeStyle = skin.color || CoolClock.config.defaultColor; | |
| 166 | + this.ctx.globalAlpha = skin.alpha; | |
| 171 | 167 | this.ctx.lineWidth = skin.lineWidth; |
| 172 | 168 | |
| 173 | 169 | if (CoolClock.config.isIE) { |
| 174 | 170 | // excanvas doesn't scale line width so we will do it here |
| @@ -175,9 +171,9 @@ | ||
| 175 | 171 | this.ctx.lineWidth = this.ctx.lineWidth * this.scale; |
| 176 | 172 | } |
| 177 | 173 | |
| 178 | 174 | this.ctx.beginPath(); |
| 179 | - this.ctx.arc(x, y, skin.radius, 0, 2 * Math.PI, false); | |
| 175 | + this.ctx.arc(x, y, skin.radius, 0, 2*Math.PI, false); | |
| 180 | 176 | |
| 181 | 177 | if (CoolClock.config.isIE) { |
| 182 | 178 | // excanvas doesn't close the circle so let's fill in the tiny gap |
| 183 | 179 | this.ctx.arc(x, y, skin.radius, -0.1, 0.1, false); |
| @@ -186,14 +182,17 @@ | ||
| 186 | 182 | if (skin.fillColor) { |
| 187 | 183 | this.ctx.fillStyle = skin.fillColor |
| 188 | 184 | this.ctx.fill(); |
| 189 | 185 | } |
| 190 | - this.ctx.stroke(); | |
| 186 | + if (skin.color) { | |
| 187 | + this.ctx.strokeStyle = skin.color; | |
| 188 | + this.ctx.stroke(); | |
| 189 | + } | |
| 191 | 190 | this.ctx.restore(); |
| 192 | 191 | }, |
| 193 | 192 | |
| 194 | 193 | // Draw some text centered vertically and horizontally |
| 195 | - drawTextAt: function(theText, x, y, skin) { | |
| 194 | + drawTextAt: function(theText,x,y,skin) { | |
| 196 | 195 | if (!skin) skin = this.getSkin(); |
| 197 | 196 | this.ctx.save(); |
| 198 | 197 | this.ctx.font = skin.font || this.font; |
| 199 | 198 | var tSize = this.ctx.measureText(theText); |
| @@ -202,9 +201,9 @@ | ||
| 202 | 201 | tSize.height = 0; |
| 203 | 202 | this.ctx.textBaseline = 'middle'; |
| 204 | 203 | } |
| 205 | 204 | this.ctx.fillStyle = skin.fontColor || this.fontColor; |
| 206 | - this.ctx.fillText(theText, x - tSize.width / 2, y - tSize.height / 2); | |
| 205 | + this.ctx.fillText(theText, x - tSize.width/2, y - tSize.height/2); | |
| 207 | 206 | this.ctx.restore(); |
| 208 | 207 | }, |
| 209 | 208 | |
| 210 | 209 | lpad2: function(num) { |
| @@ -214,35 +213,38 @@ | ||
| 214 | 213 | tickAngle: function(second) { |
| 215 | 214 | // Log algorithm by David Bradshaw |
| 216 | 215 | var tweak = 3; // If it's lower the one second mark looks wrong (?) |
| 217 | 216 | if (this.logClock) { |
| 218 | - return second == 0 ? 0 : (Math.log(second * tweak) / Math.log(60 * tweak)); | |
| 217 | + return second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak)); | |
| 219 | 218 | } |
| 220 | 219 | else if (this.logClockRev) { |
| 221 | 220 | // Flip the seconds then flip the angle (trickiness) |
| 222 | 221 | second = (60 - second) % 60; |
| 223 | - return 1.0 - (second == 0 ? 0 : (Math.log(second * tweak) / Math.log(60 * tweak))); | |
| 222 | + return 1.0 - (second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak))); | |
| 224 | 223 | } |
| 225 | 224 | else { |
| 226 | - return second / 60.0; | |
| 225 | + return second/60.0; | |
| 227 | 226 | } |
| 228 | 227 | }, |
| 229 | 228 | |
| 230 | - timeText: function(hour, min, sec, showAmPm, showSecs) { | |
| 229 | + timeText: function(hour,min,sec,showAmPm,showSecs) { | |
| 231 | 230 | return '' + |
| 232 | - (showAmPm ? ((hour % 12) == 0 ? 12 : (hour % 12)) : hour) + ':' + | |
| 231 | + (showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' + | |
| 233 | 232 | this.lpad2(min) + |
| 234 | 233 | (showSecs ? ':' + this.lpad2(sec) : '') + |
| 235 | 234 | (showAmPm ? (hour < 12 ? ' am' : ' pm') : '') |
| 236 | - ; | |
| 235 | + ; | |
| 237 | 236 | }, |
| 238 | 237 | |
| 239 | 238 | // Draw a radial line by rotating then drawing a straight line |
| 240 | 239 | // Ha ha, I think I've accidentally used Taus, (see http://tauday.com/) |
| 241 | - radialLineAtAngle: function(angleFraction, skin) { | |
| 240 | + radialLineAtAngle: function(angleFraction,skin) { | |
| 242 | 241 | this.ctx.save(); |
| 243 | - this.ctx.translate(this.renderRadius, this.renderRadius); | |
| 242 | + this.ctx.translate(this.renderRadius,this.renderRadius); | |
| 244 | 243 | 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; | |
| 245 | 247 | |
| 246 | 248 | if (CoolClock.config.isIE) |
| 247 | 249 | // excanvas doesn't scale line width so we will do it here |
| 248 | 250 | this.ctx.lineWidth = this.ctx.lineWidth * this.scale; |
| @@ -247,65 +249,66 @@ | ||
| 247 | 249 | // excanvas doesn't scale line width so we will do it here |
| 248 | 250 | this.ctx.lineWidth = this.ctx.lineWidth * this.scale; |
| 249 | 251 | |
| 250 | 252 | if (skin.radius) { |
| 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; | |
| 253 | + this.fullCircleAt(skin.startAt,0,skin) | |
| 254 | + } | |
| 255 | + else { | |
| 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 || this.showText) { | |
| 283 | - var text = this.showDigital || this.showDigital24 ? this.timeText(hour, min, sec, !this.showDigital24, this.showSecs) : this.showDate ? date : this.text; | |
| 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; | |
| 284 | 287 | this.drawTextAt( |
| 285 | 288 | text, |
| 286 | 289 | this.renderRadius, |
| 287 | - this.renderRadius + this.renderRadius / 2, | |
| 290 | + this.renderRadius+this.renderRadius/2, | |
| 288 | 291 | skin |
| 289 | 292 | ); |
| 290 | 293 | } |
| 291 | 294 | |
| 292 | - var hourA = (hour % 12) * 5 + min / 12.0, | |
| 293 | - minA = min + sec / 60.0, | |
| 294 | - secA = sec; | |
| 295 | + var hourA = (hour%12)*5 + min/12.0, | |
| 296 | + minA = min + sec/60.0, | |
| 297 | + secA = sec; | |
| 295 | 298 | |
| 296 | 299 | // Draw the hands |
| 297 | 300 | if (skin.hourHand) |
| 298 | - this.radialLineAtAngle(this.tickAngle(hourA), skin.hourHand); | |
| 301 | + this.radialLineAtAngle(this.tickAngle(hourA),skin.hourHand); | |
| 299 | 302 | |
| 300 | 303 | if (skin.minuteHand) |
| 301 | - this.radialLineAtAngle(this.tickAngle(minA), skin.minuteHand); | |
| 304 | + this.radialLineAtAngle(this.tickAngle(minA),skin.minuteHand); | |
| 302 | 305 | |
| 303 | 306 | if (this.showSecondHand && skin.secondHand) |
| 304 | - this.radialLineAtAngle(this.tickAngle(secA), skin.secondHand); | |
| 307 | + this.radialLineAtAngle(this.tickAngle(secA),skin.secondHand); | |
| 305 | 308 | |
| 306 | 309 | // Hands decoration - not in IE |
| 307 | - if (!CoolClock.config.isIE) { | |
| 310 | + if (!CoolClock.config.isIE) { | |
| 308 | 311 | if (skin.hourDecoration) |
| 309 | 312 | this.radialLineAtAngle(this.tickAngle(hourA), skin.hourDecoration); |
| 310 | 313 | |
| 311 | 314 | if (skin.minDecoration) |
| @@ -311,27 +314,32 @@ | ||
| 311 | 314 | if (skin.minDecoration) |
| 312 | 315 | this.radialLineAtAngle(this.tickAngle(minA), skin.minDecoration); |
| 313 | 316 | |
| 314 | 317 | if (this.showSecondHand && skin.secondDecoration) |
| 315 | - this.radialLineAtAngle(this.tickAngle(secA), skin.secondDecoration); | |
| 318 | + this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration); | |
| 316 | 319 | } |
| 320 | + | |
| 321 | + /* what's extraRender and why is it here? | |
| 322 | + if (this.extraRender) { | |
| 323 | + this.extraRender(hour,min,sec); | |
| 324 | + }*/ | |
| 317 | 325 | }, |
| 318 | 326 | |
| 319 | 327 | // Check the time and display the clock |
| 320 | 328 | refreshDisplay: function() { |
| 321 | - this.busy = true; | |
| 322 | 329 | var now = new Date(); |
| 323 | 330 | if (this.gmtOffset != null) { |
| 324 | 331 | // Use GMT + gmtOffset |
| 325 | 332 | var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60)); |
| 326 | - this.render(offsetNow.getUTCHours(), offsetNow.getUTCMinutes(), offsetNow.getUTCSeconds(), offsetNow.toLocaleDateString()); | |
| 327 | - } else { | |
| 333 | + this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds(),offsetNow.toLocaleDateString()); | |
| 334 | + } | |
| 335 | + else { | |
| 328 | 336 | // Use local time |
| 329 | - this.render(now.getHours(), now.getMinutes(), now.getSeconds(), now.toLocaleDateString()); | |
| 337 | + this.render(now.getHours(),now.getMinutes(),now.getSeconds(),now.toLocaleDateString()); | |
| 330 | 338 | } |
| 331 | - this.busy = false; | |
| 332 | 339 | }, |
| 333 | 340 | |
| 341 | + | |
| 334 | 342 | // Check the canvas element hasn't been removed |
| 335 | 343 | stillHere: function() { |
| 336 | 344 | return document.getElementById(this.canvasId) != null; |
| 337 | 345 | }, |
| @@ -346,16 +354,11 @@ | ||
| 346 | 354 | this.active = true; |
| 347 | 355 | }, |
| 348 | 356 | |
| 349 | 357 | getSkin: function() { |
| 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; | |
| 358 | + var skin = CoolClock.config.skins[this.skinId]; | |
| 359 | + if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin]; | |
| 360 | + return skin; | |
| 358 | 361 | } |
| 359 | 362 | }; |
| 360 | 363 | |
| 361 | 364 | // Find all canvas elements that have the CoolClock class and turns them into clocks |
| @@ -361,9 +364,9 @@ | ||
| 361 | 364 | // Find all canvas elements that have the CoolClock class and turns them into clocks |
| 362 | 365 | CoolClock.findAndCreateClocks = function() { |
| 363 | 366 | // (Let's not use a jQuery selector here so it's easier to use frameworks other than jQuery) |
| 364 | 367 | var canvases = document.getElementsByTagName("canvas"); |
| 365 | - for (var i = 0; i < canvases.length; i++) { | |
| 368 | + for (var i=0;i<canvases.length;i++) { | |
| 366 | 369 | // Pull out the fields from the class. Example "CoolClock:chunkySwissOnBlack:1000" |
| 367 | 370 | var fields = canvases[i].className.split(" ")[0].split(":"); |
| 368 | 371 | if (fields[0] == "CoolClock") { |
| 369 | 372 | if (!canvases[i].id) { |
| @@ -371,24 +374,20 @@ | ||
| 371 | 374 | canvases[i].id = '_coolclock_auto_id_' + CoolClock.config.noIdCount++; |
| 372 | 375 | } |
| 373 | 376 | // Create a clock object for this element |
| 374 | 377 | new CoolClock({ |
| 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' | |
| 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] | |
| 391 | 390 | }); |
| 392 | 391 | } |
| 393 | 392 | } |
| 394 | 393 | // Start ticking |
| @@ -396,5 +395,5 @@ | ||
| 396 | 395 | }; |
| 397 | 396 | |
| 398 | 397 | // If you don't have jQuery then you need a body onload like this: <body onload="CoolClock.findAndCreateClocks()"> |
| 399 | 398 | // If you do have jQuery and it's loaded already then we can do it right now |
| 400 | -//if (window.jQuery) jQuery(document).ready(CoolClock.findAndCreateClocks); | |
| 399 | +if (window.jQuery) jQuery(document).ready(CoolClock.findAndCreateClocks); | |
