Add in ability to wrap calendar events to multiple lines

CHANGELOG.md

@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 
 ### Added
+- Add in option to wrap long calendar events to multiple lines using `wrapEvents` configuration option
 
 ### Updated
 

modules/default/calendar/README.md

@@ -31,6 +31,7 @@ The following properties can be configured:
 | `displaySymbol`              | Display a symbol in front of an entry. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
 | `defaultSymbol`              | The default symbol. <br><br> **Possible values:** See [Font Awsome](http://fontawesome.io/icons/) website. <br> **Default value:** `calendar`
 | `maxTitleLength`             | The maximum title length. <br><br> **Possible values:** `10` - `50` <br> **Default value:** `25`
+| `wrapEvents`                 | Wrap event titles to multiple lines. Breaks lines at the length defined by `maxTitleLength`. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
 | `fetchInterval`              | How often does the content needs to be fetched? (Milliseconds) <br><br> **Possible values:** `1000` - `86400000` <br> **Default value:** `300000` (5 minutes)
 | `animationSpeed`             | Speed of the update animation. (Milliseconds) <br><br> **Possible values:**`0` - `5000` <br> **Default value:** `2000` (2 seconds)
 | `fade`                       | Fade the future events to black. (Gradient) <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`

modules/default/calendar/calendar.css

@@ -2,6 +2,7 @@
   padding-left: 0;
   padding-right: 10px;
   font-size: 80%;
+  vertical-align: top;
 }
 
 .calendar .symbol span {

modules/default/calendar/calendar.js

@@ -18,6 +18,7 @@ Module.register("calendar", {
 		displayRepeatingCountTitle: false,
 		defaultRepeatingCountTitle: "",
 		maxTitleLength: 25,
+		wrapEvents: false, // wrap events to multiple lines breaking at maxTitleLength
 		fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
 		animationSpeed: 2000,
 		fade: true,
@@ -414,15 +415,38 @@ Module.register("calendar", {
 	 *
 	 * argument string string - The string to shorten.
 	 * argument maxLength number - The max length of the string.
+   * argument wrapEvents - Wrap the text after the line has reached maxLength
 	 *
 	 * return string - The shortened string.
 	 */
-	shorten: function (string, maxLength) {
-		if (string.length > maxLength) {
-			return string.slice(0, maxLength) + "…";
+	shorten: function (string, maxLength, wrapEvents) {
+		if (wrapEvents) {
+			var temp = "";
+			var currentLine = "";
+			var words = string.split(" ");
+
+			for (var i = 0; i < words.length; i++) {
+				var word = words[i];
+				if (currentLine.length + word.length < 25 - 1) { // max - 1 to account for a space
+					currentLine += (word + " ");
+				} else {
+					if (currentLine.length > 0) {
+						temp += (currentLine + "<br>" + word + " ");
+					} else {
+						temp += (word + "<br>");
+					}
+					currentLine = "";
+				}
 			}
 
+			return temp + currentLine;
+		} else {
+			if (string.length > maxLength) {
+				return string.slice(0, maxLength) + "&hellip;";
+			} else {
 				return string;
+			}
+		}
 	},
 
 	/* capFirst(string)
@@ -437,7 +461,7 @@ Module.register("calendar", {
 	/* titleTransform(title)
 	 * Transforms the title of an event for usage.
 	 * Replaces parts of the text as defined in config.titleReplace.
-	 * Shortens title based on config.maxTitleLength
+	 * Shortens title based on config.maxTitleLength and config.wrapEvents
 	 *
 	 * argument title string - The title to transform.
 	 *
@@ -456,7 +480,7 @@ Module.register("calendar", {
 			title = title.replace(needle, replacement);
 		}
 
-		title = this.shorten(title, this.config.maxTitleLength);
+		title = this.shorten(title, this.config.maxTitleLength, this.config.wrapEvents);
 		return title;
 	},