Merge pull request #1161 from thobach/master

Allow to scroll in full page article view of default newsfeed module

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.

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. <br> The module expects that the module's configuration option `showDescription` is set to `false` (default value). <br><br> When received a _second consecutive time_, shows the full news article in an IFRAME. <br> 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. <br> The module expects that the module's configuration option `showDescription` is set to `false` (default value). <br><br> When received a _second consecutive time_, shows the full news article in an IFRAME. <br> 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`.<br><br>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. <br><br> **Possible values:**`'title'`, `'description'`, `'both'`
 | `endTags`          | List the tags you would like to have removed at the end of the feed item <br><br> **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) <br><br> **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.<br><br> **Possible values:** `1` or `10000` <br> **Default value:** `500`
 
 The `feeds` property contains an array with multiple objects. These objects have the following properties:
 

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;
 				fullArticle.style.zIndex = 1;
 				wrapper.appendChild(fullArticle);
 			}
@@ -323,6 +325,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();
 		}
@@ -351,12 +357,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;
+			// full article is already showing, so scrolling down
-			this.config.showFullArticle = !this.config.showDescription;
+			if(this.config.showFullArticle == true){
-			clearInterval(timer);
+				this.scrollPosition += this.config.scrollLength;
-			timer = null;
+				window.scrollTo(0, this.scrollPosition);
-			Log.info(this.name + " - showing " + this.config.showDescription ? "article description" : "full article");
+				Log.info(this.name + " - scrolling down");
-			this.updateDom(100);
+				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");