Merge pull request #7 from rndmerle/resize-listener

fix: store state (and event-listener) on element
clampy-js · Oct 9, 2018 · c35c56d · c35c56d
2 parents 5be2c82 + 0f9b6e5
commit c35c56d
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 38 deletions.
diff --git a/src/directive.js b/src/directive.js
@@ -34,16 +34,42 @@ export function setDefaults(options) {
   defaults = _extends({}, defaults, options);
 }
 
+function setup(el, clampValue) {
+  tearDown(el);
+
+  const resizeListener = () => {
+    clampElement(el, clampValue);
+  };
+
+  el.__VueClampy = {
+    clampValue,
+    resizeListener
+  };
+
+  // Re-clamp on element resize
+  // resizeDetector.listenTo(el, () => {
+  //   clampElement(el, clampValue);
+  // });
+
+  // Also re-clamp on window resize
+  window.addEventListener('resize', resizeListener);
+
+  clampElement(el, clampValue);
+}
+
+function tearDown(el) {
+  if (!el || !el.__VueClampy) return;
+  // Remove all listeners
+  // resizeDetector.removeAllListeners(el);
+  window.removeEventListener('resize', el.__VueClampy.resizeListener);
+}
+
 function setInitialContent(el) {
   if (el.clampInitialContent === undefined) {
     el.clampInitialContent = el.innerHTML.trim();
   }
 }
 
-function clampOnResize(el, clampValue) {
-  clampElement(el, clampValue);
-}
-
 function clampElement(el, clamp) {
   // We use element-resize-detector to trigger the ellipsis.
   // Element-resize-detector adds an inner div to monitor
@@ -77,27 +103,16 @@ function clampElement(el, clamp) {
 export default {
   inserted(el, binding, vnode) {
     clampValue = binding.value;
-    // Re-clamp on element resize
-    // resizeDetector.listenTo(el, () => {
-    //   clampElement(el, clampValue);
-    // });
-
-    // Also re-clamp on window resize
-    window.addEventListener('resize', clampOnResize);
-
-    clampElement(el, clampValue);
+    setup(el, clampValue);
   },
 
   update(el, binding, vnode) {
     clampValue = binding.value;
-    clampElement(el, clampValue);
+    setup(el, clampValue);
   },
 
   unbind(el, binding, vnode) {
-    clampValue = binding.value;
-
-    // Remove all listeners
-    // resizeDetector.removeAllListeners(el);
-    window.removeEventListener('resize', clampOnResize);
+    tearDown(el);
+    delete el.__VueClampy;
   }
 };
diff --git a/vue-clampy.js b/vue-clampy.js
@@ -321,16 +321,42 @@ function setDefaults(options) {
   defaults = _extends({}, defaults, options);
 }
 
+function setup(el, clampValue) {
+  tearDown(el);
+
+  var resizeListener = function resizeListener() {
+    clampElement(el, clampValue);
+  };
+
+  el.__VueClampy = {
+    clampValue: clampValue,
+    resizeListener: resizeListener
+  };
+
+  // Re-clamp on element resize
+  // resizeDetector.listenTo(el, () => {
+  //   clampElement(el, clampValue);
+  // });
+
+  // Also re-clamp on window resize
+  window.addEventListener('resize', resizeListener);
+
+  clampElement(el, clampValue);
+}
+
+function tearDown(el) {
+  if (!el || !el.__VueClampy) return;
+  // Remove all listeners
+  // resizeDetector.removeAllListeners(el);
+  window.removeEventListener('resize', el.__VueClampy.resizeListener);
+}
+
 function setInitialContent(el) {
   if (el.clampInitialContent === undefined) {
     el.clampInitialContent = el.innerHTML.trim();
   }
 }
 
-function clampOnResize(el, clampValue) {
-  clampElement(el, clampValue);
-}
-
 function clampElement(el, clamp) {
   // We use element-resize-detector to trigger the ellipsis.
   // Element-resize-detector adds an inner div to monitor
@@ -364,26 +390,15 @@ function clampElement(el, clamp) {
 var VueClampy$1 = {
   inserted: function inserted(el, binding, vnode) {
     clampValue = binding.value;
-    // Re-clamp on element resize
-    // resizeDetector.listenTo(el, () => {
-    //   clampElement(el, clampValue);
-    // });
-
-    // Also re-clamp on window resize
-    window.addEventListener('resize', clampOnResize);
-
-    clampElement(el, clampValue);
+    setup(el, clampValue);
   },
   update: function update(el, binding, vnode) {
     clampValue = binding.value;
-    clampElement(el, clampValue);
+    setup(el, clampValue);
   },
   unbind: function unbind(el, binding, vnode) {
-    clampValue = binding.value;
-
-    // Remove all listeners
-    // resizeDetector.removeAllListeners(el);
-    window.removeEventListener('resize', clampOnResize);
+    tearDown(el);
+    delete el.__VueClampy;
   }
 };