Merge pull request #372 from KirAsh4/upstream-dev

Analog clock addition

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Add max newsitems parameter to the newsfeed module.
 - Translations for Simplified Chinese, Traditional Chinese and Japanese.
 - Polish Translation
+- Add an analog clock in addition to the digital one.
 
 ### Fixed
 - Edit Alert Module to display title & message if they are provided in the notification (Issue #300)

modules/default/clock/README.md

@@ -66,5 +66,40 @@ 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><strong>Specific to the analog clock.</strong> 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><strong>Specific to the analog clock.</strong> Specifies which clock face to use.<br>
+				<br><b>Possible values:</b> <code>simple</code> for a simple border, <code>none</code> for no face or border, or <code>face-###</code> (where ### is currently a value between 001 and 012, inclusive)
+				<br><b>Default value:</b> <code>simple</code>
+			</td>
+		</tr>
+		<tr>
+			<td><code>secondsColor</code></td>
+			<td><strong>Specific to the analog clock.</strong> Specifies what color to make the 'seconds' hand.<br>
+				<br><b>Possible values:</b> <code>any HTML RGB Color</code>
+				<br><b>Default value:</b> <code>#888888</code>
+			</td>
+		</tr>
+		<tr>
+			<td><code>analogPlacement</code></td>
+			<td><strong>Specific to the analog clock. <em>(requires displayType set to <code>'both'</code>)</em></strong> 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

@@ -8,31 +8,51 @@
 Module.register("clock",{
 	// Module config defaults.
 	defaults: {
+		displayType: 'digital', // options: digital, analog, both
+
 		timeFormat: config.timeFormat,
 		displaySeconds: true,
 		showPeriod: true,
 		showPeriodUpper: false,
-		clockBold: false
+		clockBold: false,
+
+		/* specific to the analog clock */
+		analogSize: '200px',
+		analogFace: 'simple', // options: 'none', 'simple', 'face-###' (where ### is 001 to 012 inclusive)
+		analogPlacement: 'bottom', // options: top, bottom, left, right
+		secondsColor: '#888888',
 	},
 	// 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 +92,127 @@ 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
+
+			// Calculate the degree offset for each hand of the clock
+			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 != 'simple' && this.config.analogFace != 'none') {
+				clockCircle.style.background = "url("+ this.data.path + "faces/" + this.config.analogFace + ".svg)";
+				clockCircle.style.backgroundSize = "100%";
+			} else if (this.config.analogFace != 'none') {
+				clockCircle.style.border = "2px solid 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";
+
+			// Combine analog wrappers
+			clockFace.appendChild(clockHour);
+			clockFace.appendChild(clockMinute);
+
+			if (this.config.displaySeconds) {
+				var clockSecond = document.createElement("div");
+				clockSecond.id = "clockSecond";
+				clockSecond.style.transform = "rotate(" + second + "deg)";
+				clockSecond.className = "clockSecond";
+				clockSecond.style.backgroundColor = this.config.secondsColor;
+				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 = "15px";
+			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;
 	}

modules/default/clock/clock_styles.css

@@ -0,0 +1,74 @@
+#analog {
+}
+
+#digital {
+}
+
+.clockCircle {
+	margin: 0 auto;
+	position: relative;
+	border-radius: 50%;
+	background-size: 100%;
+}
+
+.clockFace {
+	width: 100%;
+	height: 100%;
+}
+
+.clockFace:after {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 6px;
+	height: 6px;
+	margin: -3px 0 0 -3px;
+	background: white;
+	border-radius: 3px;
+	content: "";
+	display: block;
+}
+
+.clockHour {
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -2px 0 -2px -25%;	/* numbers much match negative length & thickness */
+	padding: 2px 0 2px 25%;		/* indicator length & thickness */
+	background: white;
+	-webkit-transform-origin: 100% 50%;
+	-ms-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	border-radius: 3px 0 0 3px;
+}
+
+.clockMinute {
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -35% -2px 0;	/* numbers must match negative length & thickness */
+	padding: 35% 2px 0;	/* indicator length & thickness */
+	background: white;
+	-webkit-transform-origin: 50% 100%;
+	-ms-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	border-radius: 3px 0 0 3px;
+}
+
+.clockSecond {
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -38% -1px 0 0;	/* numbers must match negative length & thickness */
+	padding: 38% 1px 0 0;	/* indicator length & thickness */
+	background: #888888;
+	-webkit-transform-origin: 50% 100%;
+	-ms-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+}

modules/default/clock/faces/face-001.svg

@@ -0,0 +1 @@
+<svg id="Hour_Markers_-_Singlets" data-name="Hour Markers - Singlets" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;}.cls-2{stroke-width:0.5px;}</style></defs><title>face-001</title><line class="cls-1" x1="125" y1="1.25" x2="125" y2="16.23"/><line class="cls-1" x1="186.87" y1="17.83" x2="179.39" y2="30.8"/><line class="cls-1" x1="232.17" y1="63.12" x2="219.2" y2="70.61"/><line class="cls-1" x1="248.75" y1="125" x2="233.77" y2="125"/><line class="cls-1" x1="232.17" y1="186.87" x2="219.2" y2="179.39"/><line class="cls-1" x1="186.88" y1="232.17" x2="179.39" y2="219.2"/><line class="cls-1" x1="125" y1="248.75" x2="125" y2="233.77"/><line class="cls-1" x1="63.13" y1="232.17" x2="70.61" y2="219.2"/><line class="cls-1" x1="17.83" y1="186.88" x2="30.8" y2="179.39"/><line class="cls-1" x1="1.25" y1="125" x2="16.23" y2="125"/><line class="cls-1" x1="17.83" y1="63.13" x2="30.8" y2="70.61"/><line class="cls-1" x1="63.12" y1="17.83" x2="70.61" y2="30.8"/><line class="cls-2" x1="138.01" y1="1.25" x2="136.96" y2="11.23"/><line class="cls-2" x1="150.87" y1="3.29" x2="148.78" y2="13.11"/><line class="cls-2" x1="163.45" y1="6.66" x2="160.35" y2="16.21"/><line class="cls-2" x1="175.61" y1="11.33" x2="171.53" y2="20.5"/><line class="cls-2" x1="198.14" y1="24.33" x2="192.24" y2="32.45"/><line class="cls-2" x1="208.26" y1="32.53" x2="201.54" y2="39.99"/><line class="cls-2" x1="217.47" y1="41.74" x2="210.01" y2="48.46"/><line class="cls-2" x1="225.67" y1="51.86" x2="217.55" y2="57.76"/><line class="cls-2" x1="238.67" y1="74.39" x2="229.5" y2="78.47"/><line class="cls-2" x1="243.34" y1="86.55" x2="233.79" y2="89.65"/><line class="cls-2" x1="246.71" y1="99.13" x2="236.89" y2="101.22"/><line class="cls-2" x1="248.75" y1="111.99" x2="238.77" y2="113.04"/><line class="cls-2" x1="248.75" y1="138.01" x2="238.77" y2="136.96"/><line class="cls-2" x1="246.71" y1="150.87" x2="236.89" y2="148.78"/><line class="cls-2" x1="243.34" y1="163.45" x2="233.79" y2="160.35"/><line class="cls-2" x1="238.67" y1="175.61" x2="229.5" y2="171.53"/><line class="cls-2" x1="225.67" y1="198.14" x2="217.55" y2="192.24"/><line class="cls-2" x1="217.47" y1="208.26" x2="210.01" y2="201.54"/><line class="cls-2" x1="208.26" y1="217.47" x2="201.54" y2="210.01"/><line class="cls-2" x1="198.14" y1="225.67" x2="192.24" y2="217.55"/><line class="cls-2" x1="175.61" y1="238.67" x2="171.53" y2="229.5"/><line class="cls-2" x1="163.45" y1="243.34" x2="160.35" y2="233.79"/><line class="cls-2" x1="150.87" y1="246.71" x2="148.78" y2="236.89"/><line class="cls-2" x1="138.01" y1="248.75" x2="136.96" y2="238.77"/><line class="cls-2" x1="111.99" y1="248.75" x2="113.04" y2="238.77"/><line class="cls-2" x1="99.13" y1="246.71" x2="101.22" y2="236.89"/><line class="cls-2" x1="86.55" y1="243.34" x2="89.65" y2="233.79"/><line class="cls-2" x1="74.39" y1="238.67" x2="78.47" y2="229.5"/><line class="cls-2" x1="51.86" y1="225.67" x2="57.76" y2="217.55"/><line class="cls-2" x1="41.74" y1="217.47" x2="48.46" y2="210.01"/><line class="cls-2" x1="32.53" y1="208.26" x2="39.99" y2="201.54"/><line class="cls-2" x1="24.33" y1="198.14" x2="32.45" y2="192.24"/><line class="cls-2" x1="11.33" y1="175.61" x2="20.5" y2="171.53"/><line class="cls-2" x1="6.66" y1="163.45" x2="16.21" y2="160.35"/><line class="cls-2" x1="3.29" y1="150.87" x2="13.11" y2="148.78"/><line class="cls-2" x1="1.25" y1="138.01" x2="11.23" y2="136.96"/><line class="cls-2" x1="1.25" y1="111.99" x2="11.23" y2="113.04"/><line class="cls-2" x1="3.29" y1="99.13" x2="13.11" y2="101.22"/><line class="cls-2" x1="6.66" y1="86.55" x2="16.21" y2="89.65"/><line class="cls-2" x1="11.33" y1="74.39" x2="20.5" y2="78.47"/><line class="cls-2" x1="24.33" y1="51.86" x2="32.45" y2="57.76"/><line class="cls-2" x1="32.53" y1="41.74" x2="39.99" y2="48.46"/><line class="cls-2" x1="41.74" y1="32.53" x2="48.46" y2="39.99"/><line class="cls-2" x1="51.86" y1="24.33" x2="57.76" y2="32.45"/><line class="cls-2" x1="74.39" y1="11.33" x2="78.47" y2="20.5"/><line class="cls-2" x1="86.55" y1="6.66" x2="89.65" y2="16.21"/><line class="cls-2" x1="99.13" y1="3.29" x2="101.22" y2="13.11"/><line class="cls-2" x1="111.99" y1="1.25" x2="113.04" y2="11.23"/></svg>

modules/default/clock/faces/face-002.svg

@@ -0,0 +1 @@
+<svg id="Hour_Markers_-_Doubles" data-name="Hour Markers - Doubles" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2.98px;}</style></defs><title>face-002</title><line class="cls-1" x1="122.01" y1="1.75" x2="122.01" y2="16.67"/><line class="cls-1" x1="186.62" y1="18.26" x2="179.17" y2="31.18"/><line class="cls-1" x1="231.74" y1="63.37" x2="218.82" y2="70.83"/><line class="cls-1" x1="248.25" y1="127.99" x2="233.33" y2="127.99"/><line class="cls-1" x1="231.74" y1="186.62" x2="218.82" y2="179.17"/><line class="cls-1" x1="186.63" y1="231.74" x2="179.17" y2="218.82"/><line class="cls-1" x1="127.99" y1="248.25" x2="127.99" y2="233.33"/><line class="cls-1" x1="63.38" y1="231.74" x2="70.83" y2="218.82"/><line class="cls-1" x1="18.26" y1="186.63" x2="31.18" y2="179.17"/><line class="cls-1" x1="1.75" y1="122.01" x2="16.67" y2="122.01"/><line class="cls-1" x1="18.26" y1="63.38" x2="31.18" y2="70.83"/><line class="cls-1" x1="63.37" y1="18.26" x2="70.83" y2="31.18"/><line class="cls-1" x1="127.99" y1="1.75" x2="127.99" y2="16.67"/><line class="cls-1" x1="248.25" y1="122.01" x2="233.33" y2="122.01"/><line class="cls-1" x1="122.01" y1="248.25" x2="122.01" y2="233.33"/><line class="cls-1" x1="1.75" y1="127.99" x2="16.67" y2="127.99"/></svg>