Analog clock addition

(cherry picked from commit f01b6325ed1784f1bebc3fc755da01e6fda60070)

modules/default/clock/README.md

@@ -66,5 +66,33 @@ The following properties can be configured:
 				<br><b>Default value:</b> <code>false</code>
 			</td>
 		</tr>
+		<tr>
+			<td><code>displayType</code></td>
+			<td>Display a digital clock, analog clock, or both together.<br>
+				<br><b>Possible values:</b> <code>digital</code>, <code>analog</code>, or <code>both</code>
+				<br><b>Default value:</b> <code>digital</code>
+			</td>
+		</tr>
+		<tr>
+			<td><code>analogSize</code></td>
+			<td>**Specific to the analog clock** Defines how large the analog display is.<br>
+				<br><b>Possible values:</b> A positive number of pixels</code>
+				<br><b>Default value:</b> <code>200px</code>
+			</td>
+		</tr>
+		<tr>
+			<td><code>analogFace</code></td>
+			<td>**Specific to the analog clock** Specifies which clock face to use.<br>
+				<br><b>Possible values:</b> <code>false</code> for a default border, <code>none</code> for no face or border, or <code>face-###</code> (where ### is currently a value between 001 and 008, inclusive)
+				<br><b>Default value:</b> <code>false</code>
+			</td>
+		</tr>
+		<tr>
+			<td><code>analogPlacement</code></td>
+			<td>**Specific to the analog clock** *(requires displayType set to <code>'both'</code>)* Specifies where the analog clock is in relation to the digital clock<br>
+				<br><b>Possible values:</b> <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code>
+				<br><b>Default value:</b> <code>bottom</code>
+			</td>
+		</tr>
 	</tbody>
 </table>

modules/default/clock/clock.js

@@ -12,27 +12,43 @@ Module.register("clock",{
 		displaySeconds: true,
 		showPeriod: true,
 		showPeriodUpper: false,
-		clockBold: false
+		clockBold: false,
+		displayType: 'digital', // options: digital, analog, both
+		/* specific to the analog clock */
+		analogSize: '200px',
+		analogFace: false,
+		analogPlacement: 'bottom',
 	},
 	// Define required scripts.
 	getScripts: function() {
 		return ["moment.js"];
 	},
+	// Define styles.
+	getStyles: function() {
+		return ["clock_styles.css"];
+	},
 	// Define start sequence.
 	start: function() {
 		Log.info("Starting module: " + this.name);
+
 		// Schedule update interval.
 		var self = this;
 		setInterval(function() {
 			self.updateDom();
 		}, 1000);
+
 		// Set locale.
 		moment.locale(config.language);
 	},
 	// Override dom generator.
 	getDom: function() {
-		// Create wrappers.
+
 		var wrapper = document.createElement("div");
+
+		/************************************
+		 * Create wrappers for DIGITAL clock
+		 */
+
 		var dateWrapper = document.createElement("div");
 		var timeWrapper = document.createElement("div");
 		var secondsWrapper = document.createElement("sup");
@@ -72,15 +88,122 @@ Module.register("clock",{
 		} else {
 			periodWrapper.innerHTML = moment().format("a");
 		}
-		// Combine wrappers.
-		wrapper.appendChild(dateWrapper);
-		wrapper.appendChild(timeWrapper);
 		if (this.config.displaySeconds) {
 			timeWrapper.appendChild(secondsWrapper);
 		}
 		if (this.config.showPeriod && this.config.timeFormat !== 24) {
 			timeWrapper.appendChild(periodWrapper);
 		}
+		if (this.config.displaySeconds) {
+			timeWrapper.appendChild(secondsWrapper);
+		}
+		if (this.config.showPeriod && this.config.timeFormat !== 24) {
+			timeWrapper.appendChild(periodWrapper);
+		}
+
+		/****************************************************************
+		 * Create wrappers for ANALOG clock, only if specified in config
+		 */
+
+		 if (this.config.displayType !== 'digital') {
+			// If it isn't 'digital', then an 'analog' clock was also requested
+			var now = moment(),
+				second = now.seconds() * 6,
+				minute = now.minute() * 6 + second / 60,
+				hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
+
+			// Create wrappers
+
+			var wrapper = document.createElement("div");
+			var clockCircle = document.createElement("div");
+			clockCircle.className = "clockCircle";
+			clockCircle.style.width = this.config.analogSize;
+			clockCircle.style.height = this.config.analogSize;
+
+			if ((this.config.analogFace != '' || this.config.analogFace != false) && this.config.analogFace !== 'none') {
+				clockCircle.style.background = "url("+ this.data.path + "/faces/" + this.config.analogFace + ".png)"
+				clockCircle.style.backgroundSize = "100%";
+			} else if (this.config.analogFace != 'none') {
+				clockCircle.style.border = "5px double white";
+			}
+			var clockFace = document.createElement("div");
+			clockFace.className = "clockFace";
+
+			var clockHour = document.createElement("div");
+			clockHour.id = "clockHour";
+			clockHour.style.transform = "rotate(" + hour + "deg)";
+			clockHour.className = "clockHour";
+			var clockMinute = document.createElement("div");
+			clockMinute.id = "clockMinute";
+			clockMinute.style.transform = "rotate(" + minute + "deg)";
+			clockMinute.className = "clockMinute";
+			var clockSecond = document.createElement("div");
+			clockSecond.id = "clockSecond";
+			clockSecond.style.transform = "rotate(" + second + "deg)";
+			clockSecond.className = "clockSecond";
+
+			// Combine analog wrappers
+			clockFace.appendChild(clockHour);
+			clockFace.appendChild(clockMinute);
+			clockFace.appendChild(clockSecond);
+			clockCircle.appendChild(clockFace);
+		}
+
+		/*******************************************
+		 * Combine wrappers, check for .displayType
+		 */
+
+		if (this.config.displayType === 'digital') {
+			// Display only a digital clock
+			wrapper.appendChild(dateWrapper);
+			wrapper.appendChild(timeWrapper);
+		} else if (this.config.displayType === 'analog') {
+			// Display only an analog clock
+			dateWrapper.style.textAlign = "center";
+			dateWrapper.style.paddingBottom = "10px";
+			wrapper.appendChild(dateWrapper);
+			wrapper.appendChild(clockCircle);
+		} else {
+			// Both clocks have been configured, check position
+			var placement = this.config.analogPlacement;
+
+			analogWrapper = document.createElement("div");
+			analogWrapper.id = "analog";
+			analogWrapper.style.cssFloat = "none";
+			analogWrapper.appendChild(clockCircle);
+			digitalWrapper = document.createElement("div");
+			digitalWrapper.id = "digital";
+			digitalWrapper.style.cssFloat = "none";
+			digitalWrapper.appendChild(dateWrapper);
+			digitalWrapper.appendChild(timeWrapper);
+
+			if (placement === 'left' || placement === 'right') {
+				digitalWrapper.style.display = "inline-block";
+				digitalWrapper.style.verticalAlign = "top";
+				analogWrapper.style.display = "inline-block";
+				if (placement === 'left') {
+					analogWrapper.style.padding = "0 20px 0 0";
+					wrapper.appendChild(analogWrapper);
+					wrapper.appendChild(digitalWrapper);
+				} else {
+					analogWrapper.style.padding = "0 0 0 20px";
+					wrapper.appendChild(digitalWrapper);
+					wrapper.appendChild(analogWrapper);
+				}
+			} else {
+				digitalWrapper.style.textAlign = "center";
+				if (placement === 'top') {
+					analogWrapper.style.padding = "0 0 20px 0";
+					wrapper.appendChild(analogWrapper);
+					wrapper.appendChild(digitalWrapper);
+				} else {
+					analogWrapper.style.padding = "20px 0 0 0";
+					wrapper.appendChild(digitalWrapper);					
+					wrapper.appendChild(analogWrapper);
+				}
+			}
+		}
+
 		// Return the wrapper to the dom.
 		return wrapper;
 	}