diff --git a/web/components/visualization/results-zone.js b/web/components/visualization/results-zone.js index 105ceeaf12ec93756f48a4d686f89a3c25df22e0..23a85ffdf10de16fb753d52fd788833be59f31e0 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 15cea30cbbfc070cfa4e39986395d08f6c186267..4878353b2c8204ae7c35f7b3d6b9c256cb1f6902 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; - } - } }