Allow to scroll articles with gesture events

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

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