add-resize-listener - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

index.js

@@ -9,98 +9,95 @@ /**
  **/
-var attachEvent = document.attachEvent,
-  stylesCreated = false;
+var stylesCreated = false;
 
-if (!attachEvent) {
-  var requestFrame = (function() {
-    var raf =
-      window.requestAnimationFrame ||
-      window.mozRequestAnimationFrame ||
-      window.webkitRequestAnimationFrame ||
-      function(fn) {
-        return window.setTimeout(fn, 20);
-      };
-    return function(fn) {
-      return raf(fn);
+var requestFrame = (function() {
+  var raf =
+    window.requestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    function(fn) {
+      return window.setTimeout(fn, 20);
     };
-  })();
+  return function(fn) {
+    return raf(fn);
+  };
+})();
 
-  var cancelFrame = (function() {
-    var cancel =
-      window.cancelAnimationFrame ||
-      window.mozCancelAnimationFrame ||
-      window.webkitCancelAnimationFrame ||
-      window.clearTimeout;
-    return function(id) {
-      return cancel(id);
-    };
-  })();
+var cancelFrame = (function() {
+  var cancel =
+    window.cancelAnimationFrame ||
+    window.mozCancelAnimationFrame ||
+    window.webkitCancelAnimationFrame ||
+    window.clearTimeout;
+  return function(id) {
+    return cancel(id);
+  };
+})();
 
-  function resetTriggers(element) {
-    var triggers = element.__resizeTriggers__,
-      expand = triggers.firstElementChild,
-      contract = triggers.lastElementChild,
-      expandChild = expand.firstElementChild;
-    contract.scrollLeft = contract.scrollWidth;
-    contract.scrollTop = contract.scrollHeight;
-    expandChild.style.width = expand.offsetWidth + 1 + 'px';
-    expandChild.style.height = expand.offsetHeight + 1 + 'px';
-    expand.scrollLeft = expand.scrollWidth;
-    expand.scrollTop = expand.scrollHeight;
-  }
+resetTriggers = function resetTriggers(element) {
+  var triggers = element.__resizeTriggers__,
+    expand = triggers.firstElementChild,
+    contract = triggers.lastElementChild,
+    expandChild = expand.firstElementChild;
+  contract.scrollLeft = contract.scrollWidth;
+  contract.scrollTop = contract.scrollHeight;
+  expandChild.style.width = expand.offsetWidth + 1 + 'px';
+  expandChild.style.height = expand.offsetHeight + 1 + 'px';
+  expand.scrollLeft = expand.scrollWidth;
+  expand.scrollTop = expand.scrollHeight;
+}
 
-  function checkTriggers(element) {
-    return (
-      element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height
-    );
-  }
+function checkTriggers(element) {
+  return (
+    element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height
+  );
+}
 
-  function scrollListener(e) {
-    var element = this;
-    resetTriggers(this);
-    if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
-    this.__resizeRAF__ = requestFrame(function() {
-      if (checkTriggers(element)) {
-        element.__resizeLast__.width = element.offsetWidth;
-        element.__resizeLast__.height = element.offsetHeight;
-        element.__resizeListeners__.forEach(function(fn) {
-          fn.call(element, e);
-        });
-      }
-    });
+function scrollListener(e) {
+  var element = this;
+  resetTriggers(this);
+  if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
+  this.__resizeRAF__ = requestFrame(function() {
+    if (checkTriggers(element)) {
+      element.__resizeLast__.width = element.offsetWidth;
+      element.__resizeLast__.height = element.offsetHeight;
+      element.__resizeListeners__.forEach(function(fn) {
+        fn.call(element, e);
+      });
+    }
+  });
+}
+
+/* Detect CSS Animations support to detect element display/re-attach */
+var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  animationstartevent = 'animationstart',
+  domPrefixes = 'Webkit Moz O ms'.split(' '),
+  startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
+  pfx = '';
+{
+  var elm = document.createElement('fakeelement');
+  if (elm.style.animationName !== undefined) {
+    animation = true;
   }
 
-  /* Detect CSS Animations support to detect element display/re-attach */
-  var animation = false,
-    animationstring = 'animation',
-    keyframeprefix = '',
-    animationstartevent = 'animationstart',
-    domPrefixes = 'Webkit Moz O ms'.split(' '),
-    startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
-    pfx = '';
-  {
-    var elm = document.createElement('fakeelement');
-    if (elm.style.animationName !== undefined) {
-      animation = true;
-    }
-
-    if (animation === false) {
-      for (var i = 0; i < domPrefixes.length; i++) {
-        if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
-          pfx = domPrefixes[i];
-          animationstring = pfx + 'Animation';
-          keyframeprefix = '-' + pfx.toLowerCase() + '-';
-          animationstartevent = startEvents[i];
-          animation = true;
-          break;
-        }
+  if (animation === false) {
+    for (var i = 0; i < domPrefixes.length; i++) {
+      if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+        pfx = domPrefixes[i];
+        animationstring = pfx + 'Animation';
+        keyframeprefix = '-' + pfx.toLowerCase() + '-';
+        animationstartevent = startEvents[i];
+        animation = true;
+        break;
       }
     }
   }
-
-  var animationName = 'resizeanim';
-  var animationKeyframes =
-    '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
-  var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
 }
 
+var animationName = 'resizeanim';
+var animationKeyframes =
+  '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
+var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+
 function createStyles() {
@@ -140,24 +137,21 @@ if (!stylesCreated) {
   }
-  if (attachEvent) element.attachEvent('onresize', fn);
-  else {
-    if (!element.__resizeTriggers__) {
-      if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
-      createStyles();
-      element.__resizeLast__ = {};
-      element.__resizeListeners__ = [];
-      (element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
-      element.__resizeTriggers__.innerHTML =
-        '<div class="expand-trigger"><div></div></div>' + '<div class="contract-trigger"></div>';
-      element.appendChild(element.__resizeTriggers__);
-      resetTriggers(element);
-      element.addEventListener('scroll', scrollListener, true);
+  if (!element.__resizeTriggers__) {
+    if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
+    createStyles();
+    element.__resizeLast__ = {};
+    element.__resizeListeners__ = [];
+    (element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
+    element.__resizeTriggers__.innerHTML =
+      '<div class="expand-trigger"><div></div></div>' + '<div class="contract-trigger"></div>';
+    element.appendChild(element.__resizeTriggers__);
+    resetTriggers(element);
+    element.addEventListener('scroll', scrollListener, true);
 
-      /* Listen for a css animation to detect element display/re-attach */
-      animationstartevent &&
-        element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
-          if (e.animationName == animationName) resetTriggers(element);
-        });
-    }
-    element.__resizeListeners__.push(fn);
+    /* Listen for a css animation to detect element display/re-attach */
+    animationstartevent &&
+      element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
+        if (e.animationName == animationName) resetTriggers(element);
+      });
   }
+  element.__resizeListeners__.push(fn);
   return function unsubscribeResizeListener() {
@@ -169,9 +163,6 @@ removeResizeListener(element, fn);
 var removeResizeListener = function(element, fn) {
-  if (attachEvent) element.detachEvent('onresize', fn);
-  else {
-    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-    if (!element.__resizeListeners__.length) {
-      element.removeEventListener('scroll', scrollListener);
-      element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-    }
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+  if (!element.__resizeListeners__.length) {
+    element.removeEventListener('scroll', scrollListener);
+    element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
   }
@@ -178,0 +169,0 @@ };

package.json

 {
   "name": "add-resize-listener",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A Cross-Browser, Event-based, Element Resize Detection",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

25198

decreased by-1.54%

Lines of code

478

decreased by-1.85%

No dependency changes