element-resize-event - npm Package Compare versions

Comparing version 2.0.9 to 3.0.1

example/bundle.js

@@ -8,3 +8,4 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 console.log(elementResizeEvent);
-console.log(elementResizeEvent(element, function() {
+
+function onResize() {
   console.log("resized!");
@@ -15,5 +16,34 @@ console.log(element.offsetWidth);
   p.innerHTML = element.offsetWidth + "px wide";
-}));
+}
 
+//check unbind when nothing is bound
+elementResizeEvent.unbind(element);
+elementResizeEvent.unbind(element, onResize);
+
+elementResizeEvent(element, onResize);
+//check unbind for bounded function
+elementResizeEvent.unbind(element, onResize);
+
+//bind again
+console.log(elementResizeEvent(element, onResize));
+
+//check unbind of non-existent function
+elementResizeEvent.unbind(element, function() {})
 },{"../index.js":2}],2:[function(require,module,exports){
+function resizeListener(e) {
+  var win = e.target || e.srcElement
+  if (win.__resizeRAF__) {
+    cancelAnimationFrame(win.__resizeRAF__)
+  }
+  win.__resizeRAF__ = requestAnimationFrame(function () {
+    var trigger = win.__resizeTrigger__
+    var listeners = trigger &&  trigger.__resizeListeners__
+    if (listeners) {
+      listeners.forEach(function (fn) {
+        fn.call(trigger, e)
+      })
+    }
+  })
+}
+
 var exports = function exports(element, fn) {
@@ -23,44 +53,9 @@ var window = this
   var isIE
-  var requestFrame
 
   var attachEvent = document.attachEvent
   if (typeof navigator !== 'undefined') {
-    isIE = navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/)
+    isIE = navigator.userAgent.match(/Trident/) ||
+      navigator.userAgent.match(/Edge/)
   }
 
-  requestFrame = (function () {
-    var raf = window.requestAnimationFrame ||
-      window.mozRequestAnimationFrame ||
-        window.webkitRequestAnimationFrame ||
-          function fallbackRAF(func) {
-            return window.setTimeout(func, 20)
-          }
-    return function requestFrameFunction(func) {
-      return raf(func)
-    }
-  })()
-
-  var cancelFrame = (function () {
-    var cancel = window.cancelAnimationFrame ||
-      window.mozCancelAnimationFrame ||
-        window.webkitCancelAnimationFrame ||
-          window.clearTimeout
-    return function cancelFrameFunction(id) {
-      return cancel(id)
-    }
-  })()
-
-  function resizeListener(e) {
-    var win = e.target || e.srcElement
-    if (win.__resizeRAF__) {
-      cancelFrame(win.__resizeRAF__)
-    }
-    win.__resizeRAF__ = requestFrame(function () {
-      var trigger = win.__resizeTrigger__
-      trigger.__resizeListeners__.forEach(function (fn) {
-        fn.call(trigger, e)
-      })
-    })
-  }
-
   function objectLoad() {
@@ -80,4 +75,7 @@ this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
       }
-      var obj = element.__resizeTrigger__ = document.createElement('object')
-      obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;')
+      var obj = (element.__resizeTrigger__ = document.createElement('object'))
+      obj.setAttribute(
+        'style',
+        'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0;'
+      )
       obj.setAttribute('class', 'resize-sensor')
@@ -99,18 +97,30 @@ obj.__resizeElement__ = element
 
-module.exports = (typeof window === 'undefined') ? exports : exports.bind(window)
+module.exports = typeof window === 'undefined' ? exports : exports.bind(window)
 
-module.exports.unbind = function(element, fn){
+module.exports.unbind = function (element, fn) {
   var attachEvent = document.attachEvent
+  var listeners = element.__resizeListeners__ || []
   if (fn) {
-    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1)
+    var index = listeners.indexOf(fn)
+    if (index !== -1) {
+      listeners.splice(index, 1)
+    }
   } else {
-    element.__resizeListeners__ = []
+    listeners = element.__resizeListeners__ = []
   }
-  if (!element.__resizeListeners__.length) {
+  if (!listeners.length) {
     if (attachEvent) {
       element.detachEvent('onresize', resizeListener)
-    } else {
-      element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener)
-      element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__)
+    } else if (element.__resizeTrigger__) {
+      var contentDocument = element.__resizeTrigger__.contentDocument;
+      var defaultView = contentDocument && contentDocument.defaultView;
+      if (defaultView) {
+        defaultView.removeEventListener('resize', resizeListener);
+        delete defaultView.__resizeTrigger__;
+      }
+      element.__resizeTrigger__ = !element.removeChild(
+        element.__resizeTrigger__
+      )
     }
+    delete element.__resizeListeners__
   }
@@ -117,0 +127,0 @@ }

example/index.js

@@ -7,3 +7,4 @@ elementResizeEvent = require('../index.js');
 console.log(elementResizeEvent);
-console.log(elementResizeEvent(element, function() {
+
+function onResize() {
   console.log("resized!");
@@ -14,2 +15,16 @@ console.log(element.offsetWidth);
   p.innerHTML = element.offsetWidth + "px wide";
-}));
+}
+
+//check unbind when nothing is bound
+elementResizeEvent.unbind(element);
+elementResizeEvent.unbind(element, onResize);
+
+elementResizeEvent(element, onResize);
+//check unbind for bounded function
+elementResizeEvent.unbind(element, onResize);
+
+//bind again
+console.log(elementResizeEvent(element, onResize));
+
+//check unbind of non-existent function
+elementResizeEvent.unbind(element, function() {})

index.js

@@ -1,35 +0,14 @@
-var requestFrame = (function () {
-  var window = this
-  var raf = window.requestAnimationFrame ||
-    window.mozRequestAnimationFrame ||
-    window.webkitRequestAnimationFrame ||
-    function fallbackRAF(func) {
-      return window.setTimeout(func, 20)
-    }
-  return function requestFrameFunction(func) {
-    return raf(func)
-  }
-})()
-
-var cancelFrame = (function () {
-  var window = this
-  var cancel = window.cancelAnimationFrame ||
-    window.mozCancelAnimationFrame ||
-    window.webkitCancelAnimationFrame ||
-    window.clearTimeout
-  return function cancelFrameFunction(id) {
-    return cancel(id)
-  }
-})()
-
 function resizeListener(e) {
   var win = e.target || e.srcElement
   if (win.__resizeRAF__) {
-    cancelFrame(win.__resizeRAF__)
+    cancelAnimationFrame(win.__resizeRAF__)
   }
-  win.__resizeRAF__ = requestFrame(function () {
+  win.__resizeRAF__ = requestAnimationFrame(function () {
     var trigger = win.__resizeTrigger__
-    trigger.__resizeListeners__.forEach(function (fn) {
-      fn.call(trigger, e)
-    })
+    var listeners = trigger &&  trigger.__resizeListeners__
+    if (listeners) {
+      listeners.forEach(function (fn) {
+        fn.call(trigger, e)
+      })
+    }
   })
@@ -88,19 +67,21 @@ }
   var attachEvent = document.attachEvent
+  var listeners = element.__resizeListeners__ || []
   if (fn) {
-    element.__resizeListeners__.splice(
-      element.__resizeListeners__.indexOf(fn),
-      1
-    )
+    var index = listeners.indexOf(fn)
+    if (index !== -1) {
+      listeners.splice(index, 1)
+    }
   } else {
-    element.__resizeListeners__ = []
+    listeners = element.__resizeListeners__ = []
   }
-  if (!element.__resizeListeners__.length) {
+  if (!listeners.length) {
     if (attachEvent) {
       element.detachEvent('onresize', resizeListener)
-    } else {
-      element.__resizeTrigger__.contentDocument.defaultView.removeEventListener(
-        'resize',
-        resizeListener
-      )
-      delete element.__resizeTrigger__.contentDocument.defaultView.__resizeTrigger__
+    } else if (element.__resizeTrigger__) {
+      var contentDocument = element.__resizeTrigger__.contentDocument;
+      var defaultView = contentDocument && contentDocument.defaultView;
+      if (defaultView) {
+        defaultView.removeEventListener('resize', resizeListener);
+        delete defaultView.__resizeTrigger__;
+      }
       element.__resizeTrigger__ = !element.removeChild(
@@ -107,0 +88,0 @@ element.__resizeTrigger__

package.json

 {
   "name": "element-resize-event",
   "description": "Polyfill to make it easy to listen for element resize events",
-  "version": "2.0.9",
+  "version": "3.0.1",
   "author": "Kyle Mathews <[e-mail]>",
@@ -6,0 +6,0 @@ "bugs": {

README.md

@@ -12,2 +12,5 @@ element-resize-event
 
+## Dependencies
+This library depends on the availability of `requestAnimationFrame` and `cancelAnimationFrame`
+
 ## Usage
@@ -24,1 +27,8 @@ ```javascript
 ```
+
+### Unbinding The Event Listener
+```javascript
+var unbind = require('element-resize-event').unbind;
+
+unbind(element);
+```

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

-100%

Number of lines in readme file

33

43.48%

Worsened metrics

Total package byte prevSize

11788

-86.34%

Number of package files

8

-57.89%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes