kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 11:50:00 +00:00
Code Issues Projects Releases Wiki Activity

Allow to scroll articles with gesture events

Browse Source
This commit is contained in:
Thomas Bachmann 2018-01-29 21:26:34 +01:00
parent b6538d5e18
commit 446a201d25
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/default/newsfeed/README.md
View File

@ -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:

31
modules/default/newsfeed/newsfeed.js
View File

@ -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"){
// 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");