Merge pull request #661 from artifactdev/master

Color options for calendar and weather forecast

CHANGELOG.md

@@ -30,6 +30,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Icelandic Translation.
 - Add use a script to prevent when is run by SSH session set DISPLAY enviroment.
 - Enable ability to set configuration file by the enviroment variable called MM_CONFIG_FILE.
+- Option to give each calendar a different color
+- Option for colored min-temp and max-temp
 - Add test e2e helloworld
 - Add test e2e enviroment
 

modules/default/calendar/README.md

@@ -48,10 +48,12 @@ The following properties can be configured:
 ### Calendar configuration
 
 The `calendars` property contains an array of the configured calendars.
+The `colored` property gives the option for an individual color for each calendar.
 
 #### Default value:
 ````javascript
 config: {
+    	colored: false,
 	calendars: [
 		{
 			url: 'http://www.calendarlabs.com/templates/ical/US-Holidays.ics',
@@ -63,10 +65,13 @@ config: {
 
 
 #### Calendar configuration options:
-| Option                | Description
+
-| --------------------- | -----------
+-| Option                | Description
-| `url`	                | The url of the calendar .ical. This property is required. <br><br> **Possible values:** Any public accessble .ical calendar.
+ -| --------------------- | -----------
-| `symbol`              | The symbol to show in front of an event. This property is optional. <br><br> **Possible values:** See [Font Awesome](http://fontawesome.io/icons/) website.
+ -| `url`	                | The url of the calendar .ical. This property is required. <br><br> **Possible values:** Any public accessble .ical calendar.
-| `repeatingCountTitle`	| The count title for yearly repating events in this calendar.  <br><br> **Example:** `'Birthday'`
+ -| `symbol`              | The symbol to show in front of an event. This property is optional. <br><br> **Possible values:** See [Font Awesome](http://fontawesome.io/icons/) website.
-| `user`                | The username for HTTP Basic authentication.
+  -| `color`              | The font color of an event from this calendar. This property should be set if the config is set to colored: true. <br><br> **Possible values:** HEX, RGB or RGBA values (#efefef, rgb(242,242,242), rgba(242,242,242,0.5)).
-| `pass`                | The password for HTTP Basic authentication.
+ -| `repeatingCountTitle`	| The count title for yearly repating events in this calendar.  <br><br> **Example:** `'Birthday'`
+ -| `user`                | The username for HTTP Basic authentication.
+ -| `pass`                | The password for HTTP Basic authentication.
+ 

modules/default/calendar/calendar.js

@@ -27,6 +27,7 @@ Module.register("calendar", {
 		getRelative: 6,
 		fadePoint: 0.25, // Start on 1/4th of the list.
 		hidePrivate: false,
+		colored: false,
 		calendars: [
 			{
 				symbol: "calendar",
@@ -114,6 +115,11 @@ Module.register("calendar", {
 			var event = events[e];
 
 			var eventWrapper = document.createElement("tr");
+
+			if (this.config.colored) {
+				eventWrapper.style.cssText = "color:" + this.colorForUrl(event.url);
+			}
+
 			eventWrapper.className = "normal";
 
 			if (this.config.displaySymbol) {
@@ -142,7 +148,13 @@ Module.register("calendar", {
 			}
 
 			titleWrapper.innerHTML = this.titleTransform(event.title) + repeatingCountTitle;
-			titleWrapper.className = "title bright";
+
+			if (!this.config.colored) {
+				titleWrapper.className = "title bright";
+			} else {
+				titleWrapper.className = "title";
+			}
+
 			eventWrapper.appendChild(titleWrapper);
 
 			var timeWrapper = document.createElement("td");
@@ -273,8 +285,8 @@ Module.register("calendar", {
 				var event = calendar[e];
 				if(this.config.hidePrivate) {
 					if(event.class === "PRIVATE") {
-					      // do not add the current event, skip it
+						  // do not add the current event, skip it
-					      continue;
+						  continue;
 					}
 				}
 				event.url = c;
@@ -323,6 +335,24 @@ Module.register("calendar", {
 
 		return this.config.defaultSymbol;
 	},
+
+	/* colorForUrl(url)
+	 * Retrieves the color for a specific url.
+	 *
+	 * argument url sting - Url to look for.
+	 *
+	 * return string - The Color
+	 */
+	colorForUrl: function (url) {
+		for (var c in this.config.calendars) {
+			var calendar = this.config.calendars[c];
+			if (calendar.url === url && typeof calendar.color === "string") {
+				return calendar.color;
+			}
+		}
+
+		return "#fff";
+	},
 	/* countTitleForUrl(url)
 	 * Retrieves the name for a specific url.
 	 *

modules/default/weatherforecast/README.md

@@ -47,6 +47,7 @@ The following properties can be configured:
 | `appendLocationNameToHeader` | If set to `true`, the returned location name will be appended to the header of the module, if the header is enabled. This is mainly intresting when using calender based weather. <br><br> **Default value:**  `true`
 | `calendarClass`              | The class for the calender module to base the event based weather information on. <br><br> **Default value:** `'calendar'`
 | `iconTable`                  | The conversion table to convert the weather conditions to weather-icons. <br><br> **Default value:** view table below
+  `colored`                    | If set 'colored' to true the min-temp get a blue tone and the max-temp get a red tone. <br><br> **Default value:** `'false'`
 
 #### Default Icon Table
 ````javascript

modules/default/weatherforecast/weatherforecast.css

@@ -17,3 +17,11 @@
   padding-left: 20px;
   padding-right: 0;
 }
+
+.weatherforecast tr.colored .min-temp {
+    color: #BCDDFF;
+}
+
+.weatherforecast tr.colored .max-temp {
+    color: #FF8E99;
+}

modules/default/weatherforecast/weatherforecast.js

@@ -23,6 +23,7 @@ Module.register("weatherforecast",{
 		lang: config.language,
 		fade: true,
 		fadePoint: 0.25, // Start on 1/4th of the list.
+		colored: false,
 
 		initialLoadDelay: 2500, // 2.5 seconds delay. This delay is used to keep the OpenWeather API happy.
 		retryDelay: 2500,
@@ -120,6 +121,9 @@ Module.register("weatherforecast",{
 			var forecast = this.forecast[f];
 
 			var row = document.createElement("tr");
+			if (this.config.colored) {
+				row.className = "colored";
+			}
 			table.appendChild(row);
 
 			var dayCell = document.createElement("td");