Adds more review feedback

LianaHarris360 · Oct 17, 2022 · 84ef450 · 84ef450
1 parent 94abe9e
commit 84ef450
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/lib/useKResponsiveWindow/MediaQuery.js b/lib/useKResponsiveWindow/MediaQuery.js
@@ -15,7 +15,7 @@ export default class MediaQuery {
   /**
    * @returns {Object} Media query list
    */
-  mediaQueryList() {
+  get mediaQueryList() {
     return window.matchMedia(this.query);
   }
 
@@ -37,21 +37,21 @@ export default class MediaQuery {
       return;
     }
 
-    if (this.mediaQueryList().addEventListener) {
-      this.mediaQueryList().addEventListener('change', this.eventHandler);
+    if (this.mediaQueryList.addEventListener) {
+      this.mediaQueryList.addEventListener('change', this.eventHandler);
     } else {
-      this.mediaQueryList().addListener(this.eventHandler);
+      this.mediaQueryList.addListener(this.eventHandler);
     }
   }
 
   /**
    * Stop listening for media query events
    */
   stopListening() {
-    if (this.mediaQueryList().removeEventListener) {
-      this.mediaQueryList().removeEventListener('change', this.eventHandler);
+    if (this.mediaQueryList.removeEventListener) {
+      this.mediaQueryList.removeEventListener('change', this.eventHandler);
     } else {
-      this.mediaQueryList().removeListener(this.eventHandler);
+      this.mediaQueryList.removeListener(this.eventHandler);
     }
   }
 }
diff --git a/lib/useKResponsiveWindow/index.js b/lib/useKResponsiveWindow/index.js
@@ -56,11 +56,11 @@ export default function useKResponsiveWindow() {
    * Initialize window properties
    */
   const initProps = () => {
-    orientationQuery.eventHandler(orientationQuery.mediaQueryList());
-    heightQuery.eventHandler(heightQuery.mediaQueryList());
+    orientationQuery.eventHandler(orientationQuery.mediaQueryList);
+    heightQuery.eventHandler(heightQuery.mediaQueryList);
     for (const widthQuery of widthQueries) {
-      if (widthQuery.mediaQueryList().matches) {
-        widthQuery.eventHandler(widthQuery.mediaQueryList());
+      if (widthQuery.mediaQueryList.matches) {
+        widthQuery.eventHandler(widthQuery.mediaQueryList);
         break;
       }
     }

diff --git a/lib/useKWindowDimensions.js b/lib/useKWindowDimensions.js
@@ -1,9 +1,11 @@
 import './composition-api'; //Due to @vue/composition-api shortcomings, add plugin prior to use in kolibri, studio and tests
-import { onBeforeUnmount, onMounted, ref } from '@vue/composition-api';
+import { onMounted, onUnmounted, ref } from '@vue/composition-api';
 
-/** Window dimensions */
+/** Global variables */
 const windowWidth = ref(null);
 const windowHeight = ref(null);
+const isListenerAdded = ref(false);
+const usageCount = ref(0);
 
 /**
  * Update window width and height
@@ -37,31 +39,45 @@ function isNuxtServerSideRendering() {
  * @param {CallableFunction} eventHandler - The event callback function
  */
 function addWindowListener(eventHandler) {
-  //Only add listeners when not server side rendering
-  if (!isNuxtServerSideRendering()) {
+  //Only add listeners when not server side rendering and listener doesnt exist
+  if (!isNuxtServerSideRendering() && !isListenerAdded.value) {
     if (window.addEventListener) {
       window.addEventListener('resize', eventHandler, true);
     } else if (window.attachEvent) {
       window.attachEvent('onresize', eventHandler);
     }
     //First time initialization of dimensions
     eventHandler();
+
+    //Prevent addition of multiple listeners
+    isListenerAdded.value = true;
   }
 }
 
 /**
  * @param {CallableFunction} eventHandler - The event callback function
  */
 function removeWindowListener(eventHandler) {
-  window.removeEventListener(eventHandler);
+  if (!isUseKWindowDimensionsActiveElsewhere()) {
+    window.removeEventListener(eventHandler);
+
+    //Allow addition of a listener
+    isListenerAdded.value = false;
+  }
+}
+
+function isUseKWindowDimensionsActiveElsewhere() {
+  return usageCount.value > 0;
 }
 
 export default function useKWindowDimensions() {
   onMounted(() => {
+    usageCount.value++;
     addWindowListener(updateWindow);
   });
 
-  onBeforeUnmount(() => {
+  onUnmounted(() => {
+    usageCount.value--;
     removeWindowListener(updateWindow);
   });