From 6c4b82172d888e707397764f8d06fb67dc002024 Mon Sep 17 00:00:00 2001
From: Alexis POYEN <apoyen@grandlyon.com>
Date: Thu, 16 Jul 2020 11:02:59 +0200
Subject: [PATCH] Fix : auto scrolling on refreshing data
---
web/components/visualization/results-zone.js | 9 +---
web/services/common/scroller.js | 49 +++++++++-----------
2 files changed, 22 insertions(+), 36 deletions(-)
diff --git a/web/components/visualization/results-zone.js b/web/components/visualization/results-zone.js
index 105ceea..23a85ff 100644
--- a/web/components/visualization/results-zone.js
+++ b/web/components/visualization/results-zone.js
@@ -92,8 +92,8 @@ class ResultZoneComponent {
</div>
</div>
`;
+ this.scroller = Scroller.scrollInit("news-flow", document.getElementById("auto-scroll"));
this.handleDom();
- this.scroller = Scroller.scrollInit("news-flow");
}
resultFlowTemplate(zone) {
@@ -278,13 +278,6 @@ class ResultZoneComponent {
await this.displayFlowSections();
this.displaySectionsResults();
}
-
- if (document.getElementById("auto-scroll").checked) {
- this.scroller.scrollDiv();
- }
- document.getElementById("auto-scroll").addEventListener("change", () => {
- this.scroller.switch();
- });
}
async displayFlowAreas() {
diff --git a/web/services/common/scroller.js b/web/services/common/scroller.js
index 15cea30..4878353 100644
--- a/web/services/common/scroller.js
+++ b/web/services/common/scroller.js
@@ -1,38 +1,41 @@
-export function scrollInit(divName) {
- let scroller = new Scroller(divName);
+export function scrollInit(divName, autoScrollCheckbox) {
+ let scroller = new Scroller(divName, autoScrollCheckbox);
return scroller;
}
class Scroller {
- constructor(divName) {
+ constructor(divName, autoScrollCheckbox) {
this.elmnt = document.getElementById(divName);
+ this.autoScrollCheckbox = autoScrollCheckbox;
this.reachedMaxScroll = false;
this.elmnt.scrollTop = 0;
this.previousScrollTop = 0;
this.elmnt.addEventListener("mouseover", () => {
- if (this.autoScroll) this.pauseScroll();
+ if (autoScrollCheckbox.checked) this.pauseScroll();
});
this.elmnt.addEventListener("mouseout", () => {
- if (this.autoScroll) this.resumeScroll();
+ if (autoScrollCheckbox.checked) this.resumeScroll();
+ });
+
+ this.autoScrollCheckbox.addEventListener("change", () => {
+ if (autoScrollCheckbox.checked) this.resumeScroll();
+ else this.pauseScroll();
});
}
scrollDiv() {
- this.autoScroll = true;
- if (!this.reachedMaxScroll) {
- this.elmnt.scrollBy({ top: 5, left: 0, behavior: "smooth" });
- this.reachedMaxScroll =
- this.elmnt.scrollTop >=
- this.elmnt.scrollHeight - this.elmnt.offsetHeight;
- this.scrollTimeout = setTimeout(() => {
- this.scrollDiv();
- }, 100);
- } else {
- this.reachedMaxScroll = this.elmnt.scrollTop == 0 ? false : true;
- this.elmnt.scrollBy({ top: -5, left: 0, behavior: "smooth" });
-
+ if (this.autoScrollCheckbox.checked) {
+ if (!this.reachedMaxScroll) {
+ this.elmnt.scrollBy({ top: 5, left: 0, behavior: "smooth" });
+ this.reachedMaxScroll =
+ this.elmnt.scrollTop >=
+ this.elmnt.scrollHeight - this.elmnt.offsetHeight;
+ } else {
+ this.reachedMaxScroll = this.elmnt.scrollTop == 0 ? false : true;
+ this.elmnt.scrollBy({ top: -5, left: 0, behavior: "smooth" });
+ }
this.scrollTimeout = setTimeout(() => {
this.scrollDiv();
}, 100);
@@ -46,14 +49,4 @@ class Scroller {
resumeScroll() {
this.scrollDiv();
}
-
- switch() {
- if (this.autoScroll) {
- this.pauseScroll();
- this.autoScroll = false;
- } else {
- this.resumeScroll();
- this.autoScroll = true;
- }
- }
}
--
GitLab