Merge pull request #373 from MichMich/develop

Release of 2.0.3.

.travis.yml

@@ -2,8 +2,6 @@ language: node_js
 node_js:
  - "6"
  - "5.1"
- - "4"
- - "0.12"
 before_script:
  - npm install grunt-cli -g
-script: grunt
+script: grunt

CHANGELOG.md

@@ -2,6 +2,20 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.0.3] - 2016-07-12
+### Added
+- 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)
+- Removed 'null' reference from updateModuleContent(). This fixes recent Edge and Internet Explorer browser displays (Issue #319)
+
+### Changed
+- Added default string to calendar titleReplace.
+
 ## [2.0.2] - 2016-06-05
 ### Added
 - Norwegian Translations (nb and nn)

js/main.js

@@ -144,7 +144,7 @@ var MM = (function() {
 		var moduleWrapper = document.getElementById(module.identifier);
 		var contentWrapper = moduleWrapper.getElementsByClassName("module-content")[0];
 
-		contentWrapper.innerHTML = null;
+		contentWrapper.innerHTML = "";
 		contentWrapper.appendChild(content);
 	};
 

modules/default/alert/alert.js

@@ -35,9 +35,20 @@ Module.register("alert",{
 	},
 	show_notification: function(message) {
 		if (this.config.effect == "slide") {this.config.effect = this.config.effect + "-" + this.config.position;}
-		message = "<span class='thin' style='line-height: 35px; font-size:24px' color='#4A4A4A'>" + message.title + "</span><br /><span class='light' style='font-size:28px;line-height: 30px;'>" + message.message + "</span>";
+
+		msg = "";
+		if (message.title) {
+			msg += "<span class='thin' style='line-height: 35px; font-size:24px' color='#4A4A4A'>" + message.title + "</span>";
+		}
+		if (message.message){
+			if (msg != ""){
+				msg+= "<br />";
+			}
+			msg += "<span class='light' style='font-size:28px;line-height: 30px;'>" + message.message + "</span>";
+		}
+
 		new NotificationFx({
-			message: message,
+			message: msg,
 			layout: "growl",
 			effect: this.config.effect,
 			ttl: this.config.display_time
@@ -67,7 +78,19 @@ Module.register("alert",{
 			this.hide_alert(sender);
 		}
 
-		message = "<span class='light' style='line-height: 35px; font-size:30px' color='#4A4A4A'>" + params.title + "</span><br /><span class='thin' style='font-size:22px;line-height: 30px;'>" + params.message + "</span>";
+		//Display title and message only if they are provided in notification parameters
+		message ="";
+		if (params.title) {
+			message += "<span class='light' style='line-height: 35px; font-size:30px' color='#4A4A4A'>" + params.title + "</span>"
+		}
+		if (params.message) {
+			if (message != ""){
+				message += "<br />";
+			}
+
+			message += "<span class='thin' style='font-size:22px;line-height: 30px;'>" + params.message + "</span>";
+		}
+
 		//Store alert in this.alerts
 		this.alerts[sender.name] = new NotificationFx({
 			message: image + message,

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%;
+}