From 63ae2b8095aa7505407f7399a2b01c4073cc98a2 Mon Sep 17 00:00:00 2001 From: Andrew McOlash Date: Sun, 2 Apr 2017 15:06:58 -0500 Subject: [PATCH] Add in ability to wrap calendar events to multiple lines --- CHANGELOG.md | 1 + modules/default/calendar/README.md | 1 + modules/default/calendar/calendar.css | 1 + modules/default/calendar/calendar.js | 38 ++++++++++++++++++++++----- 4 files changed, 34 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f55c6ed6..a3e23c6d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/modules/default/calendar/README.md b/modules/default/calendar/README.md index 470560ba..003c13e1 100644 --- a/modules/default/calendar/README.md +++ b/modules/default/calendar/README.md @@ -31,6 +31,7 @@ The following properties can be configured: | `displaySymbol` | Display a symbol in front of an entry.

**Possible values:** `true` or `false`
**Default value:** `true` | `defaultSymbol` | The default symbol.

**Possible values:** See [Font Awsome](http://fontawesome.io/icons/) website.
**Default value:** `calendar` | `maxTitleLength` | The maximum title length.

**Possible values:** `10` - `50`
**Default value:** `25` +| `wrapEvents` | Wrap event titles to multiple lines. Breaks lines at the length defined by `maxTitleLength`.

**Possible values:** `true` or `false`
**Default value:** `false` | `fetchInterval` | How often does the content needs to be fetched? (Milliseconds)

**Possible values:** `1000` - `86400000`
**Default value:** `300000` (5 minutes) | `animationSpeed` | Speed of the update animation. (Milliseconds)

**Possible values:**`0` - `5000`
**Default value:** `2000` (2 seconds) | `fade` | Fade the future events to black. (Gradient)

**Possible values:** `true` or `false`
**Default value:** `true` diff --git a/modules/default/calendar/calendar.css b/modules/default/calendar/calendar.css index 26b1e93d..123ab084 100644 --- a/modules/default/calendar/calendar.css +++ b/modules/default/calendar/calendar.css @@ -2,6 +2,7 @@ padding-left: 0; padding-right: 10px; font-size: 80%; + vertical-align: top; } .calendar .symbol span { diff --git a/modules/default/calendar/calendar.js b/modules/default/calendar/calendar.js index 12ce290f..fa77c94a 100644 --- a/modules/default/calendar/calendar.js +++ b/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(" "); - return string; + 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 + "
" + word + " "); + } else { + temp += (word + "
"); + } + currentLine = ""; + } + } + + return temp + currentLine; + } else { + if (string.length > maxLength) { + return string.slice(0, maxLength) + "…"; + } 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; },