Clear home timeout on URL change

When the user navigated to home, if he navigated to another section before the timeout ended, (handleHotCards * enabled cards) functions were run, and, if there were hot cards in the given section, the elements were duplicated because of the additional handleHotCards that would run in the current page.

- Add reusable overrideHistoryMethods function in helpers.js
- Replace code with new overrideHistoryMethods function

plugins/hotCards/hotCards.js

@@ -165,8 +165,12 @@
    */
   function handleHomeHotCards() {
     const pattern = /^\/$/;
+    let timeoutId;
+
+    overrideHistoryMethods(() => clearTimeout(timeoutId));
+
     registerPathChangeListener(pattern, () => {
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         for (const card of Object.values(CARDS))
           if (card.enabled) handleHotCards(card, true);
       }, 3000);
@@ -871,11 +875,5 @@
     hotCards.length = 0;
   }
 
-  ["pushState", "replaceState"].forEach((method) => {
-    const original = history[method];
-    history[method] = function () {
-      restoreCards();
-      return original.apply(this, arguments);
-    };
-  });
+  overrideHistoryMethods(restoreCards);
 })();

plugins/hotCards/hotCards.yml

@@ -7,10 +7,10 @@ ui:
   requires:
     - CommunityScriptsUILibrary
   javascript:
+    - utils/helpers.js
     - utils/fetchInterceptor.js
     - utils/stashHandler.js
     - utils/registerPathChangeListener.js
-    - utils/helpers.js
     - hotCards.js
   css:
     - hotCards.css

plugins/hotCards/utils/helpers.js

@@ -63,3 +63,16 @@ function waitForImageLoad(imageEl, callback) {
   if (imageEl.complete) return callback(imageEl);
   setTimeout(waitForImageLoad, 100, imageEl, callback);
 }
+
+/** History */
+
+function overrideHistoryMethods(callback) {
+  ["pushState", "replaceState"].forEach((method) => {
+    const original = history[method];
+    history[method] = function () {
+      const result = original.apply(this, arguments);
+      callback();
+      return result;
+    };
+  });
+}

plugins/hotCards/utils/registerPathChangeListener.js

@@ -10,14 +10,7 @@ function registerPathChangeListener(pattern, callback) {
   window.addEventListener("popstate", checkURL);
 
   // Hijack pushState and replaceState methods
-  ["pushState", "replaceState"].forEach((method) => {
-    const original = history[method];
-    history[method] = function () {
-      const result = original.apply(this, arguments);
-      checkURL();
-      return result;
-    };
-  });
+  overrideHistoryMethods(checkURL);
 
   // Initial check
   checkURL();