Merge pull request #57 from KristjanESPERANTO/seconds

Seconds

Author: sdetweil

CHANGELOG.md

@@ -16,7 +16,8 @@ planned for 2025-04-01
 ### Added
 
 - Added Arabic translation.
-- add support for css on digital clock hour/minute thru css using clock_hour and clock_minute classes
+- Add CSS support to the digital clock hour/minute/second through the use of the classes `clock-hour-digital`, `clock-minute-digital`, and `clock-second-digital`.
+- Mark option `secondsColor` as deprecated in clock module.
 
 ### Changed
 

js/app.js

@@ -153,11 +153,23 @@ function App () {
 	 */
 	function checkDeprecatedOptions (userConfig) {
 		const deprecated = require(`${global.root_path}/js/deprecated`);
-		const deprecatedOptions = deprecated.configs;
 
+		// check for deprecated core options
+		const deprecatedOptions = deprecated.configs;
 		const usedDeprecated = deprecatedOptions.filter((option) => userConfig.hasOwnProperty(option));
 		if (usedDeprecated.length > 0) {
-			Log.warn(`WARNING! Your config is using deprecated options: ${usedDeprecated.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`);
+			Log.warn(`WARNING! Your config is using deprecated option(s): ${usedDeprecated.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`);
+		}
+
+		// check for deprecated module options
+		for (const element of userConfig.modules) {
+			if (deprecated[element.module] !== undefined && element.config !== undefined) {
+				const deprecatedModuleOptions = deprecated[element.module];
+				const usedDeprecatedModuleOptions = deprecatedModuleOptions.filter((option) => element.config.hasOwnProperty(option));
+				if (usedDeprecatedModuleOptions.length > 0) {
+					Log.warn(`WARNING! Your config for module ${element.module} is using deprecated option(s): ${usedDeprecatedModuleOptions.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`);
+				}
+			}
 		}
 	}
 

js/deprecated.js

@@ -1,3 +1,4 @@
 module.exports = {
-	configs: ["kioskmode"]
+	configs: ["kioskmode"],
+	clock: ["secondsColor"]
 };

modules/default/clock/clock.js

@@ -23,9 +23,7 @@ Module.register("clock", {
 		analogFace: "simple", // options: 'none', 'simple', 'face-###' (where ### is 001 to 012 inclusive)
 		analogPlacement: "bottom", // options: 'top', 'bottom', 'left', 'right'
 		analogShowDate: "top", // OBSOLETE, can be replaced with analogPlacement and showTime, options: false, 'top', or 'bottom'
-		secondsColor: "#888888",
-		minutesColor: "#fff",
-		hoursColor: "#fff",
+		secondsColor: "#888888", // DEPRECATED, use CSS instead. Class "clock-second-digital" for digital clock, "clock-second" for analog clock.
 
 		showSunTimes: false,
 		showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase)
@@ -107,6 +105,8 @@ Module.register("clock", {
 		 */
 		const dateWrapper = document.createElement("div");
 		const timeWrapper = document.createElement("div");
+		const hoursWrapper = document.createElement("span");
+		const minutesWrapper = document.createElement("span");
 		const secondsWrapper = document.createElement("sup");
 		const periodWrapper = document.createElement("span");
 		const sunWrapper = document.createElement("div");
@@ -116,45 +116,40 @@ Module.register("clock", {
 		// Style Wrappers
 		dateWrapper.className = "date normal medium";
 		timeWrapper.className = "time bright large light";
-		secondsWrapper.className = "seconds dimmed";
+		hoursWrapper.className = "clock-hour-digital";
+		minutesWrapper.className = "clock-minute-digital";
+		secondsWrapper.className = "clock-second-digital dimmed";
 		sunWrapper.className = "sun dimmed small";
 		moonWrapper.className = "moon dimmed small";
 		weekWrapper.className = "week dimmed medium";
 
 		// Set content of wrappers.
-		// The moment().format("h") method has a bug on the Raspberry Pi.
-		// So we need to generate the timestring manually.
-		// See issue: https://github.com/MagicMirrorOrg/MagicMirror/issues/181
-		let timeString;
 		const now = moment();
 		if (this.config.timezone) {
 			now.tz(this.config.timezone);
 		}
 
-		let hourSymbol = "HH";
-		if (this.config.timeFormat !== 24) {
-			hourSymbol = "h";
-		}
-
-		if (this.config.clockBold) {
-			timeString = now.format(`${hourSymbol}[<span class="bold">]mm[</span>]`);
-		} else {
-			timeString = now.format(`${hourSymbol}:mm`);
-		}
-
 		if (this.config.showDate) {
 			dateWrapper.innerHTML = now.format(this.config.dateFormat);
 			digitalWrapper.appendChild(dateWrapper);
 		}
 
 		if (this.config.displayType !== "analog" && this.config.showTime) {
-			let ts = timeString.split(":");
-			let hour_style_string = "";
-			let minute_style_string = "";
-			if (this.defaults.hoursColor !== this.config.hoursColor) hour_style_string = ` style="color:${this.config.hoursColor}"`;
-			if (this.defaults.minutesColor !== this.config.minutesColor) minute_style_string = ` style="color:${this.config.minutesColor}"`;
-			timeString = `<span class="clock-hour-digital" ${hour_style_string} ">${ts[0]}</span>:<span class="clock-minute-digital" ${minute_style_string}>${ts[1]}</span>`;
-			timeWrapper.innerHTML = timeString;
+			let hourSymbol = "HH";
+			if (this.config.timeFormat !== 24) {
+				hourSymbol = "h";
+			}
+
+			hoursWrapper.innerHTML = now.format(hourSymbol);
+			minutesWrapper.innerHTML = now.format("mm");
+
+			timeWrapper.appendChild(hoursWrapper);
+			if (this.config.clockBold) {
+				minutesWrapper.classList.add("bold");
+			} else {
+				timeWrapper.innerHTML += ":";
+			}
+			timeWrapper.appendChild(minutesWrapper);
 			secondsWrapper.innerHTML = now.format("ss");
 			if (this.config.showPeriodUpper) {
 				periodWrapper.innerHTML = now.format("A");
@@ -260,12 +255,10 @@ Module.register("clock", {
 			const clockHour = document.createElement("div");
 			clockHour.id = "clock-hour";
 			clockHour.style.transform = `rotate(${hour}deg)`;
-			clockHour.style.backgroundColor = this.config.hoursColor;
 			clockHour.className = "clock-hour";
 			const clockMinute = document.createElement("div");
 			clockMinute.id = "clock-minute";
 			clockMinute.style.transform = `rotate(${minute}deg)`;
-			clockMinute.style.backgroundColor = this.config.minutesColor;
 			clockMinute.className = "clock-minute";
 
 			// Combine analog wrappers
@@ -277,7 +270,6 @@ Module.register("clock", {
 				clockSecond.id = "clock-second";
 				clockSecond.style.transform = `rotate(${second}deg)`;
 				clockSecond.className = "clock-second";
-				clockSecond.style.backgroundColor = this.config.secondsColor;
 				clockFace.appendChild(clockSecond);
 			}
 			analogWrapper.appendChild(clockFace);

modules/default/clock/clock_styles.css

@@ -92,10 +92,14 @@
   flex: 1;
 }
 
-/*
 .module.clock .clock-hour-digital {
-
+  color: var(--color-text-bright);
 }
+
 .module.clock .clock-minute-digital {
+  color: var(--color-text-bright);
+}
 
-} */
+.module.clock .clock-second-digital {
+  color: var(--color-text-dimmed);
+}