feat(Incito, IncitoPublicationKit): Implement pausing

Currently this will only affect section visibility tracking Fixes #180
tjek · Apr 26, 2023 · f01b4fe · f01b4fe
1 parent 8a31734
commit f01b4fe
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/lib/incito-browser/incito.ts b/lib/incito-browser/incito.ts
@@ -783,6 +783,21 @@ export default class Incito extends MicroEvent<{
 
         this.trigger('started');
     }
+    pause() {
+        // Stop receiving events that could cause further section visibility logging
+        this.removeWindowEventListeners();
+        this.sectionObserver.disconnect();
+        // Dispatch any actively visible sections
+        this.onVisibilityChange('hidden');
+
+        // Reset section visiblity tracking
+        this.sectionVisibility = new Map();
+    }
+    unpause() {
+        this.onVisibilityChange('visible');
+        this.addWindowEventListeners();
+        if (this.canLazyload) this.observeElements(this.el);
+    }
 
     destroy() {
         this.lazyObserver?.disconnect();
@@ -793,15 +808,10 @@ export default class Incito extends MicroEvent<{
 
         this.styleEl?.parentNode?.removeChild(this.styleEl);
 
-        window.removeEventListener('visibilitychange', this.handleVisibility);
-        window.removeEventListener('blur', this.handleBlur);
-        window.removeEventListener('focus', this.handleFocus);
-        window.removeEventListener('pagehide', this.handlePageHide);
-        window.removeEventListener('beforeunload', this.handleBeforeUnload);
+        this.removeWindowEventListeners();
 
         this.trigger('destroyed');
     }
-
     observeElements(el: HTMLDivElement) {
         this.sectionVisibility = new Map();
         el.querySelectorAll('[data-role="section"]').forEach(
@@ -892,12 +902,22 @@ export default class Incito extends MicroEvent<{
     handleVisibility = () => this.onVisibilityChange(document.visibilityState);
     handlePageHide = () => this.onVisibilityChange('hidden');
     handleBeforeUnload = () => this.onVisibilityChange('hidden');
-    enableLazyloading() {
+    addWindowEventListeners() {
         window.addEventListener('visibilitychange', this.handleVisibility);
         window.addEventListener('blur', this.handleBlur);
         window.addEventListener('focus', this.handleFocus);
         window.addEventListener('pagehide', this.handlePageHide);
         window.addEventListener('beforeunload', this.handleBeforeUnload);
+    }
+    removeWindowEventListeners() {
+        window.removeEventListener('visibilitychange', this.handleVisibility);
+        window.removeEventListener('blur', this.handleBlur);
+        window.removeEventListener('focus', this.handleFocus);
+        window.removeEventListener('pagehide', this.handlePageHide);
+        window.removeEventListener('beforeunload', this.handleBeforeUnload);
+    }
+    enableLazyloading() {
+        this.addWindowEventListeners();
 
         this.sectionObserver = new IntersectionObserver(
             (entries) =>

diff --git a/lib/kits/incito-publication/viewer.ts b/lib/kits/incito-publication/viewer.ts
@@ -44,6 +44,14 @@ class Viewer extends MicroEvent {
         return this;
     }
 
+    pause() {
+        this.incito.pause();
+    }
+
+    unpause() {
+        this.incito.unpause();
+    }
+
     destroy() {
         this.incito.destroy();
     }