From 446a201d25e17767294701eae0d125c0265ffeb7 Mon Sep 17 00:00:00 2001 From: Thomas Bachmann Date: Mon, 29 Jan 2018 21:26:34 +0100 Subject: [PATCH 1/2] Allow to scroll articles with gesture events --- modules/default/newsfeed/README.md | 3 +- modules/default/newsfeed/newsfeed.js | 43 +++++++++++++++++++++------- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/modules/default/newsfeed/README.md b/modules/default/newsfeed/README.md index a240b60f..8cee0c2c 100644 --- a/modules/default/newsfeed/README.md +++ b/modules/default/newsfeed/README.md @@ -39,7 +39,7 @@ MagicMirror's [notification mechanism](https://github.com/MichMich/MagicMirror/t | ----------------------- | ----------- | `ARTICLE_NEXT` | Shows the next news title (hiding the summary or previously fully displayed article) | `ARTICLE_PREVIOUS` | Shows the previous news title (hiding the summary or previously fully displayed article) -| `ARTICLE_MORE_DETAILS` | When received the _first time_, shows the corresponding description of the currently displayed news title.
The module expects that the module's configuration option `showDescription` is set to `false` (default value).

When received a _second consecutive time_, shows the full news article in an IFRAME.
This requires that the news page can be embedded in an IFRAME, e.g. doesn't have the HTTP response header [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) set to e.g. `DENY`. +| `ARTICLE_MORE_DETAILS` | When received the _first time_, shows the corresponding description of the currently displayed news title.
The module expects that the module's configuration option `showDescription` is set to `false` (default value).

When received a _second consecutive time_, shows the full news article in an IFRAME.
This requires that the news page can be embedded in an IFRAME, e.g. doesn't have the HTTP response header [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) set to e.g. `DENY`.

When received the _next consecutive times_, reloads the page and scrolls down by `scrollLength` pixels to paginate through the article. | `ARTICLE_LESS_DETAILS` | Hides the summary or full news article and only displays the news title of the currently viewed news item. Note the payload of the sent notification event is ignored. @@ -79,6 +79,7 @@ The following properties can be configured: | `removeEndTags` | Remove specified tags from the **end** of an item's description and/or title.

**Possible values:**`'title'`, `'description'`, `'both'` | `endTags` | List the tags you would like to have removed at the end of the feed item

**Possible values:** `['TAG']` or `['TAG1','TAG2',...]` | `prohibitedWords` | Remove news feed item if one of these words is found anywhere in the title (case insensitive and greedy matching)

**Possible values:** `['word']` or `['word1','word2',...]` +| `scrollLength` | Scrolls the full news article page by a given number of pixels when a `ARTICLE_MORE_DETAILS` notification is received and the full news article is already displayed.

**Possible values:** `1` or `10000`
**Default value:** `500` The `feeds` property contains an array with multiple objects. These objects have the following properties: diff --git a/modules/default/newsfeed/newsfeed.js b/modules/default/newsfeed/newsfeed.js index 95f05d60..06172e4e 100644 --- a/modules/default/newsfeed/newsfeed.js +++ b/modules/default/newsfeed/newsfeed.js @@ -36,7 +36,8 @@ Module.register("newsfeed",{ removeEndTags: "", startTags: [], endTags: [], - prohibitedWords: [] + prohibitedWords: [], + scrollLength: 500 }, // Define required scripts. @@ -62,6 +63,7 @@ Module.register("newsfeed",{ this.newsItems = []; this.loaded = false; this.activeItem = 0; + this.scrollPosition = 0; this.registerFeeds(); @@ -171,7 +173,6 @@ Module.register("newsfeed",{ var description = document.createElement("div"); description.className = "small light" + (!this.config.wrapDescription ? " no-wrap" : ""); var txtDesc = this.newsItems[this.activeItem].description; - //Log.info('txtDesc.length = ' + txtDesc.length + " - " + this.config.lengthDescription); description.innerHTML = (this.config.truncDescription ? (txtDesc.length > this.config.lengthDescription ? txtDesc.substring(0, this.config.lengthDescription) + "..." : txtDesc) : txtDesc); wrapper.appendChild(description); } @@ -180,12 +181,13 @@ Module.register("newsfeed",{ var fullArticle = document.createElement("iframe"); fullArticle.className = ""; fullArticle.style.width = "100%"; + // very large height value to allow scrolling + fullArticle.height = "10000"; + fullArticle.style.height = "10000"; fullArticle.style.top = "0"; fullArticle.style.left = "0"; - fullArticle.style.position = "fixed"; - fullArticle.height = window.innerHeight; fullArticle.style.border = "none"; - fullArticle.src = this.newsItems[this.activeItem].url; + fullArticle.src = typeof this.newsItems[this.activeItem].url === "string" ? this.newsItems[this.activeItem].url : this.newsItems[this.activeItem].url.href; wrapper.appendChild(fullArticle); } @@ -322,6 +324,10 @@ Module.register("newsfeed",{ resetDescrOrFullArticleAndTimer: function() { this.config.showDescription = false; 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"; if(!timer){ this.scheduleUpdateInterval(); } @@ -350,12 +356,27 @@ Module.register("newsfeed",{ } // if "more details" is received the first time: show article summary, on second time show full article else if(notification == "ARTICLE_MORE_DETAILS"){ - this.config.showDescription = !this.config.showDescription; - this.config.showFullArticle = !this.config.showDescription; - clearInterval(timer); - timer = null; - Log.info(this.name + " - showing " + this.config.showDescription ? "article description" : "full article"); - this.updateDom(100); + // full article is already showing, so scrolling down + if(this.config.showFullArticle == true){ + this.scrollPosition += this.config.scrollLength; + window.scrollTo(0, this.scrollPosition); + Log.info(this.name + " - scrolling down"); + Log.info(this.name + " - ARTICLE_MORE_DETAILS, scroll position: " + this.config.scrollLength); + } + // display full article + else { + this.config.showDescription = !this.config.showDescription; + this.config.showFullArticle = !this.config.showDescription; + // 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"; + } + clearInterval(timer); + timer = null; + Log.info(this.name + " - showing " + this.config.showDescription ? "article description" : "full article"); + this.updateDom(100); + } } else if(notification == "ARTICLE_LESS_DETAILS"){ this.resetDescrOrFullArticleAndTimer(); Log.info(this.name + " - showing only article titles again"); From 5426f0f32969f765544944ce2c662b893755148b Mon Sep 17 00:00:00 2001 From: Thomas Bachmann Date: Mon, 29 Jan 2018 21:41:43 +0100 Subject: [PATCH 2/2] Updated documentation for scroll mode in newsfeed module --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8672023f..10910f53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). - Add system notification `MODULE_DOM_CREATED` for notifying each module when their Dom has been fully loaded. - Add types for module. - Implement Danger.js to notify contributors when CHANGELOG.md is missing in PR. +- Allow to scroll in full page article view of default newsfeed module with gesture events from [MMM-Gestures](https://github.com/thobach/MMM-Gestures) ### Fixed - News article in fullscreen (iframe) is now shown in front of modules.