From 132c98b767ff1a7ff9ce9cc1bc4a3ba8d1bc8986 Mon Sep 17 00:00:00 2001 From: buxxi Date: Sat, 16 Jan 2021 11:10:53 +0100 Subject: [PATCH 1/6] refactoring newsfeed, moving tag stripping to loading instead of presentation logic --- modules/default/newsfeed/newsfeed.js | 76 ++++++++++++++-------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/modules/default/newsfeed/newsfeed.js b/modules/default/newsfeed/newsfeed.js index 7fe2fb21..bbb7523f 100644 --- a/modules/default/newsfeed/newsfeed.js +++ b/modules/default/newsfeed/newsfeed.js @@ -118,44 +118,6 @@ Module.register("newsfeed", { wrapper.appendChild(sourceAndTimestamp); } - //Remove selected tags from the beginning of rss feed items (title or description) - - if (this.config.removeStartTags === "title" || this.config.removeStartTags === "both") { - for (let f = 0; f < this.config.startTags.length; f++) { - if (this.newsItems[this.activeItem].title.slice(0, this.config.startTags[f].length) === this.config.startTags[f]) { - this.newsItems[this.activeItem].title = this.newsItems[this.activeItem].title.slice(this.config.startTags[f].length, this.newsItems[this.activeItem].title.length); - } - } - } - - if (this.config.removeStartTags === "description" || this.config.removeStartTags === "both") { - if (this.isShowingDescription) { - for (let f = 0; f < this.config.startTags.length; f++) { - if (this.newsItems[this.activeItem].description.slice(0, this.config.startTags[f].length) === this.config.startTags[f]) { - this.newsItems[this.activeItem].description = this.newsItems[this.activeItem].description.slice(this.config.startTags[f].length, this.newsItems[this.activeItem].description.length); - } - } - } - } - - //Remove selected tags from the end of rss feed items (title or description) - - if (this.config.removeEndTags) { - for (let f = 0; f < this.config.endTags.length; f++) { - if (this.newsItems[this.activeItem].title.slice(-this.config.endTags[f].length) === this.config.endTags[f]) { - this.newsItems[this.activeItem].title = this.newsItems[this.activeItem].title.slice(0, -this.config.endTags[f].length); - } - } - - if (this.isShowingDescription) { - for (let f = 0; f < this.config.endTags.length; f++) { - if (this.newsItems[this.activeItem].description.slice(-this.config.endTags[f].length) === this.config.endTags[f]) { - this.newsItems[this.activeItem].description = this.newsItems[this.activeItem].description.slice(0, -this.config.endTags[f].length); - } - } - } - } - if (!this.config.showFullArticle) { const title = document.createElement("div"); title.className = "newsfeed-title bright medium light" + (!this.config.wrapTitle ? " no-wrap" : ""); @@ -257,6 +219,44 @@ Module.register("newsfeed", { }, this); } + for (var item of newsItems) { + //Remove selected tags from the beginning of rss feed items (title or description) + if (this.config.removeStartTags === "title" || this.config.removeStartTags === "both") { + for (let f = 0; f < this.config.startTags.length; f++) { + if (item.title.slice(0, this.config.startTags[f].length) === this.config.startTags[f]) { + item.title = item.title.slice(this.config.startTags[f].length, item.title.length); + } + } + } + + if (this.config.removeStartTags === "description" || this.config.removeStartTags === "both") { + if (this.isShowingDescription) { + for (let f = 0; f < this.config.startTags.length; f++) { + if (item.description.slice(0, this.config.startTags[f].length) === this.config.startTags[f]) { + item.description = item.description.slice(this.config.startTags[f].length, item.description.length); + } + } + } + } + + //Remove selected tags from the end of rss feed items (title or description) + + if (this.config.removeEndTags) { + for (let f = 0; f < this.config.endTags.length; f++) { + if (item.title.slice(-this.config.endTags[f].length) === this.config.endTags[f]) { + item.title = item.title.slice(0, -this.config.endTags[f].length); + } + } + + if (this.isShowingDescription) { + for (let f = 0; f < this.config.endTags.length; f++) { + if (item.description.slice(-this.config.endTags[f].length) === this.config.endTags[f]) { + item.description = item.description.slice(0, -this.config.endTags[f].length); + } + } + } + } + } // get updated news items and broadcast them var updatedItems = []; newsItems.forEach((value) => { From 8538d835208b149d05c53c2d44ccd699a50de770 Mon Sep 17 00:00:00 2001 From: buxxi Date: Sat, 16 Jan 2021 11:52:55 +0100 Subject: [PATCH 2/6] Moving newsfeed styling from js to a new css file --- modules/default/newsfeed/newsfeed.css | 14 ++++++++++++++ modules/default/newsfeed/newsfeed.js | 21 ++++++++------------- 2 files changed, 22 insertions(+), 13 deletions(-) create mode 100644 modules/default/newsfeed/newsfeed.css diff --git a/modules/default/newsfeed/newsfeed.css b/modules/default/newsfeed/newsfeed.css new file mode 100644 index 00000000..6f32b2e5 --- /dev/null +++ b/modules/default/newsfeed/newsfeed.css @@ -0,0 +1,14 @@ +iframe.newsfeed-fullarticle { + width: 100vw; + /* very large height value to allow scrolling */ + height: 3000px; + top: 0; + left: 0; + border: none; + z-index: 1; +} + +.region.bottom.bar.newsfeed-fullarticle { + bottom: inherit; + top: -90px; +} diff --git a/modules/default/newsfeed/newsfeed.js b/modules/default/newsfeed/newsfeed.js index bbb7523f..0659876b 100644 --- a/modules/default/newsfeed/newsfeed.js +++ b/modules/default/newsfeed/newsfeed.js @@ -44,6 +44,11 @@ Module.register("newsfeed", { return ["moment.js"]; }, + //Define required styles. + getStyles: function () { + return ["newsfeed.css"]; + }, + // Define required translations. getTranslations: function () { // The translations for the default modules are defined in the core translation files. @@ -135,16 +140,8 @@ Module.register("newsfeed", { if (this.config.showFullArticle) { const fullArticle = document.createElement("iframe"); - fullArticle.className = ""; - fullArticle.style.width = "100vw"; - // very large height value to allow scrolling - fullArticle.height = "3000"; - fullArticle.style.height = "3000"; - fullArticle.style.top = "0"; - fullArticle.style.left = "0"; - fullArticle.style.border = "none"; + fullArticle.className = "newsfeed-fullarticle"; fullArticle.src = this.getActiveItemURL(); - fullArticle.style.zIndex = 1; wrapper.appendChild(fullArticle); } @@ -335,8 +332,7 @@ Module.register("newsfeed", { this.config.showFullArticle = false; this.scrollPosition = 0; // reset bottom bar alignment - document.getElementsByClassName("region bottom bar")[0].style.bottom = "0"; - document.getElementsByClassName("region bottom bar")[0].style.top = "inherit"; + document.getElementsByClassName("region bottom bar")[0].classList.remove("newsfeed-fullarticle"); if (!this.timer) { this.scheduleUpdateInterval(); } @@ -406,8 +402,7 @@ Module.register("newsfeed", { this.config.showFullArticle = !this.isShowingDescription; // make bottom bar align to top to allow scrolling if (this.config.showFullArticle === true) { - document.getElementsByClassName("region bottom bar")[0].style.bottom = "inherit"; - document.getElementsByClassName("region bottom bar")[0].style.top = "-90px"; + document.getElementsByClassName("region bottom bar")[0].classList.add("newsfeed-fullarticle"); } clearInterval(this.timer); this.timer = null; From aaaf1f660c2e999530f5980c4c87de905d36a46e Mon Sep 17 00:00:00 2001 From: buxxi Date: Sat, 16 Jan 2021 12:26:38 +0100 Subject: [PATCH 3/6] refactoring newsfeed, moving hiding of module while loading away from dom-generation --- modules/default/newsfeed/newsfeed.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/modules/default/newsfeed/newsfeed.js b/modules/default/newsfeed/newsfeed.js index 0659876b..bcd91c8e 100644 --- a/modules/default/newsfeed/newsfeed.js +++ b/modules/default/newsfeed/newsfeed.js @@ -80,6 +80,9 @@ Module.register("newsfeed", { this.generateFeed(payload); if (!this.loaded) { + if (this.config.hideLoading) { + this.show(); + } this.scheduleUpdateInterval(); } @@ -144,17 +147,9 @@ Module.register("newsfeed", { fullArticle.src = this.getActiveItemURL(); wrapper.appendChild(fullArticle); } - - if (this.config.hideLoading) { - this.show(); - } } else { - if (this.config.hideLoading) { - this.hide(); - } else { - wrapper.innerHTML = this.translate("LOADING"); - wrapper.className = "small dimmed"; - } + wrapper.innerHTML = this.translate("LOADING"); + wrapper.className = "small dimmed"; } return wrapper; @@ -340,7 +335,9 @@ Module.register("newsfeed", { notificationReceived: function (notification, payload, sender) { const before = this.activeItem; - if (notification === "ARTICLE_NEXT") { + if (notification === "MODULE_DOM_CREATED" && this.config.hideLoading) { + this.hide(); + } else if (notification === "ARTICLE_NEXT") { this.activeItem++; if (this.activeItem >= this.newsItems.length) { this.activeItem = 0; From 69c053a94f652662e0a0f2196509233e597c65a3 Mon Sep 17 00:00:00 2001 From: buxxi Date: Sat, 16 Jan 2021 13:37:18 +0100 Subject: [PATCH 4/6] refactoring newsfeed to use templates instead of generating dom in the code --- modules/default/newsfeed/fullarticle.njk | 3 + modules/default/newsfeed/newsfeed.js | 86 +++++++++--------------- modules/default/newsfeed/newsfeed.njk | 28 ++++++++ modules/default/newsfeed/oldconfig.njk | 3 + 4 files changed, 64 insertions(+), 56 deletions(-) create mode 100644 modules/default/newsfeed/fullarticle.njk create mode 100644 modules/default/newsfeed/newsfeed.njk create mode 100644 modules/default/newsfeed/oldconfig.njk diff --git a/modules/default/newsfeed/fullarticle.njk b/modules/default/newsfeed/fullarticle.njk new file mode 100644 index 00000000..6570396e --- /dev/null +++ b/modules/default/newsfeed/fullarticle.njk @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/modules/default/newsfeed/newsfeed.js b/modules/default/newsfeed/newsfeed.js index bcd91c8e..e877c738 100644 --- a/modules/default/newsfeed/newsfeed.js +++ b/modules/default/newsfeed/newsfeed.js @@ -90,69 +90,43 @@ Module.register("newsfeed", { } }, - // Override dom generator. - getDom: function () { - const wrapper = document.createElement("div"); - + //Override fetching of template name + getTemplate: function () { if (this.config.feedUrl) { - wrapper.className = "small bright"; - wrapper.innerHTML = this.translate("MODULE_CONFIG_CHANGED", { MODULE_NAME: "Newsfeed" }); - return wrapper; + return "oldconfig.njk"; + } else if (this.config.showFullArticle) { + return "fullarticle.njk"; + } + return "newsfeed.njk"; + }, + + //Override template data and return whats used for the current template + getTemplateData: function () { + // this.config.showFullArticle is a run-time configuration, triggered by optional notifications + if (this.config.showFullArticle) { + return { + url: this.getActiveItemURL() + }; + } + if (this.newsItems.length == 0) { + return { + loaded: false + }; } if (this.activeItem >= this.newsItems.length) { this.activeItem = 0; } + const item = this.newsItems[this.activeItem]; - if (this.newsItems.length > 0) { - // this.config.showFullArticle is a run-time configuration, triggered by optional notifications - if (!this.config.showFullArticle && (this.config.showSourceTitle || this.config.showPublishDate)) { - const sourceAndTimestamp = document.createElement("div"); - sourceAndTimestamp.className = "newsfeed-source light small dimmed"; - - if (this.config.showSourceTitle && this.newsItems[this.activeItem].sourceTitle !== "") { - sourceAndTimestamp.innerHTML = this.newsItems[this.activeItem].sourceTitle; - } - if (this.config.showSourceTitle && this.newsItems[this.activeItem].sourceTitle !== "" && this.config.showPublishDate) { - sourceAndTimestamp.innerHTML += ", "; - } - if (this.config.showPublishDate) { - sourceAndTimestamp.innerHTML += moment(new Date(this.newsItems[this.activeItem].pubdate)).fromNow(); - } - if ((this.config.showSourceTitle && this.newsItems[this.activeItem].sourceTitle !== "") || this.config.showPublishDate) { - sourceAndTimestamp.innerHTML += ":"; - } - - wrapper.appendChild(sourceAndTimestamp); - } - - if (!this.config.showFullArticle) { - const title = document.createElement("div"); - title.className = "newsfeed-title bright medium light" + (!this.config.wrapTitle ? " no-wrap" : ""); - title.innerHTML = this.newsItems[this.activeItem].title; - wrapper.appendChild(title); - } - - if (this.isShowingDescription) { - const description = document.createElement("div"); - description.className = "newsfeed-desc small light" + (!this.config.wrapDescription ? " no-wrap" : ""); - const txtDesc = this.newsItems[this.activeItem].description; - description.innerHTML = this.config.truncDescription ? (txtDesc.length > this.config.lengthDescription ? txtDesc.substring(0, this.config.lengthDescription) + "..." : txtDesc) : txtDesc; - wrapper.appendChild(description); - } - - if (this.config.showFullArticle) { - const fullArticle = document.createElement("iframe"); - fullArticle.className = "newsfeed-fullarticle"; - fullArticle.src = this.getActiveItemURL(); - wrapper.appendChild(fullArticle); - } - } else { - wrapper.innerHTML = this.translate("LOADING"); - wrapper.className = "small dimmed"; - } - - return wrapper; + return { + loaded: true, + config: this.config, + sourceTitle: item.sourceTitle, + publishDate: moment(new Date(item.pubdate)).fromNow(), + title: item.title, + description: item.description + }; }, getActiveItemURL: function () { diff --git a/modules/default/newsfeed/newsfeed.njk b/modules/default/newsfeed/newsfeed.njk new file mode 100644 index 00000000..3d9ecc0b --- /dev/null +++ b/modules/default/newsfeed/newsfeed.njk @@ -0,0 +1,28 @@ +{% if loaded %} +
+ {% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %} +
+ {% if sourceTitle and config.showSourceTitle %} + {{ sourceTitle }}{% if config.showPublishDate %}, {% else %}: {% endif %} + {% endif %} + {% if config.showPublishDate %} + {{ publishDate }}: + {% endif %} +
+ {% endif %} +
+ {{ title }} +
+
+ {% if config.truncDescription %} + {{ description | truncate(config.lengthDescription) }} + {% else %} + {{ description }} + {% endif %} +
+
+{% else %} +
+ {{ "LOADING" | translate | safe }} +
+{% endif %} \ No newline at end of file diff --git a/modules/default/newsfeed/oldconfig.njk b/modules/default/newsfeed/oldconfig.njk new file mode 100644 index 00000000..db0f8d4b --- /dev/null +++ b/modules/default/newsfeed/oldconfig.njk @@ -0,0 +1,3 @@ +
+ {{ "MODULE_CONFIG_CHANGED" | translate({MODULE_NAME: "Newsfeed"}) | safe }} +
\ No newline at end of file From 2d9d28aa0fd5a128817732696c73661096f797df Mon Sep 17 00:00:00 2001 From: buxxi Date: Sat, 16 Jan 2021 13:47:16 +0100 Subject: [PATCH 5/6] updating changelog with newsfeed changes --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fbebb44a..9458b406 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ _This release is scheduled to be released on 2021-04-01._ - Cleaned up old code on server side. - Convert `-0` to `0` when displaying temperature. - Code cleanup for FEELS like and added {DEGREE} placeholder for FEELSLIKE for each language +- Converted newsfeed module to use templates. ### Removed From a5bb9d962d5165c3c8848a7a4d9541f90a9b706f Mon Sep 17 00:00:00 2001 From: buxxi Date: Sat, 16 Jan 2021 14:06:07 +0100 Subject: [PATCH 6/6] Fixing eslint issues --- modules/default/newsfeed/newsfeed.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/modules/default/newsfeed/newsfeed.js b/modules/default/newsfeed/newsfeed.js index e877c738..71681867 100644 --- a/modules/default/newsfeed/newsfeed.js +++ b/modules/default/newsfeed/newsfeed.js @@ -108,7 +108,7 @@ Module.register("newsfeed", { url: this.getActiveItemURL() }; } - if (this.newsItems.length == 0) { + if (this.newsItems.length === 0) { return { loaded: false }; @@ -185,7 +185,7 @@ Module.register("newsfeed", { }, this); } - for (var item of newsItems) { + newsItems.forEach((item) => { //Remove selected tags from the beginning of rss feed items (title or description) if (this.config.removeStartTags === "title" || this.config.removeStartTags === "both") { for (let f = 0; f < this.config.startTags.length; f++) { @@ -222,7 +222,8 @@ Module.register("newsfeed", { } } } - } + }); + // get updated news items and broadcast them var updatedItems = []; newsItems.forEach((value) => {