├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .prettierrc.js ├── LICENSE ├── Makefile ├── README.md ├── example ├── bundle.js └── index.js ├── index.html ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | node_modules 26 | 27 | # Users Environment Variables 28 | .lock-wscript 29 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: "avoid", 3 | semi: false, 4 | overrides: [ 5 | { 6 | // This file uses semicolons. It's needed here because `documentation` 7 | // package (used to parse jsdoc and provide content for API reference pages) 8 | // behaviour is inconsistent when not using semicolons after 9 | // object declarations. 10 | files: ["**/api-node-helpers-docs.js"], 11 | options: { 12 | semi: true, 13 | }, 14 | }, 15 | { 16 | files: "docs/**/*.md", 17 | options: { 18 | parser: "mdx", 19 | }, 20 | }, 21 | ], 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Kyle Mathews 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | BIN = ./node_modules/.bin 2 | 3 | release-patch: 4 | @$(call release,patch) 5 | 6 | release-minor: 7 | @$(call release,minor) 8 | 9 | release-major: 10 | @$(call release,major) 11 | 12 | build: 13 | @$(bin)browserify example/index.js -o example/bundle.js 14 | 15 | build-windows: 16 | cmd /c ".\node_modules\.bin\browserify example\index.js -o example\bundle.js" 17 | 18 | publish: 19 | git push --tags origin HEAD:master 20 | npm publish 21 | 22 | define release 23 | npm version $(1) 24 | endef 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # element-resize-event 2 | 3 | Library to make it easy to listen for element resize events 4 | 5 | Code borrowed from a [blog post by 6 | backalleycoder.com](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). 7 | 8 | ## Install 9 | 10 | `npm install element-resize-event` 11 | 12 | ## Dependencies 13 | 14 | This library depends on the availability of `requestAnimationFrame` and `cancelAnimationFrame` 15 | 16 | ## Usage 17 | 18 | ```javascript 19 | var elementResizeEvent = require("element-resize-event") 20 | 21 | var element = document.getElementById("resize") 22 | 23 | elementResizeEvent(element, function () { 24 | console.log("resized!") 25 | console.log(element.offsetWidth) 26 | }) 27 | ``` 28 | 29 | ### Unbinding The Event Listener 30 | 31 | ```javascript 32 | var unbind = require("element-resize-event").unbind 33 | 34 | unbind(element) 35 | ``` 36 | -------------------------------------------------------------------------------- /example/bundle.js: -------------------------------------------------------------------------------- 1 | ;(function e(t, n, r) { 2 | function s(o, u) { 3 | if (!n[o]) { 4 | if (!t[o]) { 5 | var a = typeof require == "function" && require 6 | if (!u && a) return a(o, !0) 7 | if (i) return i(o, !0) 8 | var f = new Error("Cannot find module '" + o + "'") 9 | throw ((f.code = "MODULE_NOT_FOUND"), f) 10 | } 11 | var l = (n[o] = { exports: {} }) 12 | t[o][0].call( 13 | l.exports, 14 | function (e) { 15 | var n = t[o][1][e] 16 | return s(n ? n : e) 17 | }, 18 | l, 19 | l.exports, 20 | e, 21 | t, 22 | n, 23 | r 24 | ) 25 | } 26 | return n[o].exports 27 | } 28 | var i = typeof require == "function" && require 29 | for (var o = 0; o < r.length; o++) s(r[o]) 30 | return s 31 | })( 32 | { 33 | 1: [ 34 | function (require, module, exports) { 35 | elementResizeEvent = require("../index.js") 36 | 37 | element = document.getElementById("resize") 38 | window.p = p = document.getElementById("width") 39 | console.log(p) 40 | console.log(elementResizeEvent) 41 | 42 | function onResize() { 43 | console.log("resized!") 44 | console.log(element.offsetWidth) 45 | console.log(p) 46 | console.log(element.offsetWidth + "px wide") 47 | p.innerHTML = element.offsetWidth + "px wide" 48 | } 49 | 50 | //check unbind when nothing is bound 51 | elementResizeEvent.unbind(element) 52 | elementResizeEvent.unbind(element, onResize) 53 | 54 | elementResizeEvent(element, onResize) 55 | //check unbind for bounded function 56 | elementResizeEvent.unbind(element, onResize) 57 | 58 | //bind again 59 | console.log(elementResizeEvent(element, onResize)) 60 | 61 | //check unbind of non-existent function 62 | elementResizeEvent.unbind(element, function () {}) 63 | }, 64 | { "../index.js": 2 }, 65 | ], 66 | 2: [ 67 | function (require, module, exports) { 68 | function resizeListener(e) { 69 | var win = e.target || e.srcElement 70 | if (win.__resizeRAF__) { 71 | cancelAnimationFrame(win.__resizeRAF__) 72 | } 73 | win.__resizeRAF__ = requestAnimationFrame(function () { 74 | var trigger = win.__resizeTrigger__ 75 | var listeners = trigger && trigger.__resizeListeners__ 76 | if (listeners) { 77 | listeners.forEach(function (fn) { 78 | fn.call(trigger, e) 79 | }) 80 | } 81 | }) 82 | } 83 | 84 | var exports = function exports(element, fn) { 85 | var window = this 86 | var document = window.document 87 | var isIE 88 | 89 | var attachEvent = document.attachEvent 90 | if (typeof navigator !== "undefined") { 91 | isIE = 92 | navigator.userAgent.match(/Trident/) || 93 | navigator.userAgent.match(/Edge/) 94 | } 95 | 96 | function objectLoad() { 97 | this.contentDocument.defaultView.__resizeTrigger__ = 98 | this.__resizeElement__ 99 | this.contentDocument.defaultView.addEventListener( 100 | "resize", 101 | resizeListener 102 | ) 103 | } 104 | 105 | if (!element.__resizeListeners__) { 106 | element.__resizeListeners__ = [] 107 | if (attachEvent) { 108 | element.__resizeTrigger__ = element 109 | element.attachEvent("onresize", resizeListener) 110 | } else { 111 | if (getComputedStyle(element).position === "static") { 112 | element.style.position = "relative" 113 | } 114 | var obj = (element.__resizeTrigger__ = 115 | document.createElement("object")) 116 | obj.setAttribute( 117 | "style", 118 | "position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; z-index: -1; opacity: 0;" 119 | ) 120 | obj.setAttribute("class", "resize-sensor") 121 | 122 | // prevent from stealing keyboard focus 123 | obj.setAttribute("tabindex", "-1") 124 | 125 | // prevent screenreaders to see this object 126 | obj.setAttribute("title", "") 127 | 128 | obj.__resizeElement__ = element 129 | obj.onload = objectLoad 130 | obj.type = "text/html" 131 | if (isIE) { 132 | element.appendChild(obj) 133 | } 134 | obj.data = "about:blank" 135 | if (!isIE) { 136 | element.appendChild(obj) 137 | } 138 | } 139 | } 140 | element.__resizeListeners__.push(fn) 141 | } 142 | 143 | module.exports = 144 | typeof window === "undefined" ? exports : exports.bind(window) 145 | 146 | module.exports.unbind = function (element, fn) { 147 | var attachEvent = document.attachEvent 148 | var listeners = element.__resizeListeners__ || [] 149 | if (fn) { 150 | var index = listeners.indexOf(fn) 151 | if (index !== -1) { 152 | listeners.splice(index, 1) 153 | } 154 | } else { 155 | listeners = element.__resizeListeners__ = [] 156 | } 157 | if (!listeners.length) { 158 | if (attachEvent) { 159 | element.detachEvent("onresize", resizeListener) 160 | } else if (element.__resizeTrigger__) { 161 | var contentDocument = element.__resizeTrigger__.contentDocument 162 | var defaultView = contentDocument && contentDocument.defaultView 163 | if (defaultView) { 164 | defaultView.removeEventListener("resize", resizeListener) 165 | delete defaultView.__resizeTrigger__ 166 | } 167 | element.__resizeTrigger__ = !element.removeChild( 168 | element.__resizeTrigger__ 169 | ) 170 | } 171 | delete element.__resizeListeners__ 172 | } 173 | } 174 | }, 175 | {}, 176 | ], 177 | }, 178 | {}, 179 | [1] 180 | ) 181 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | elementResizeEvent = require("../index.js") 2 | 3 | element = document.getElementById("resize") 4 | window.p = p = document.getElementById("width") 5 | console.log(p) 6 | console.log(elementResizeEvent) 7 | 8 | function onResize() { 9 | console.log("resized!") 10 | console.log(element.offsetWidth) 11 | console.log(p) 12 | console.log(element.offsetWidth + "px wide") 13 | p.innerHTML = element.offsetWidth + "px wide" 14 | } 15 | 16 | //check unbind when nothing is bound 17 | elementResizeEvent.unbind(element) 18 | elementResizeEvent.unbind(element, onResize) 19 | 20 | elementResizeEvent(element, onResize) 21 | //check unbind for bounded function 22 | elementResizeEvent.unbind(element, onResize) 23 | 24 | //bind again 25 | console.log(elementResizeEvent(element, onResize)) 26 | 27 | //check unbind of non-existent function 28 | elementResizeEvent.unbind(element, function () {}) 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Example 7 | 8 | 9 | 10 | 11 |

100px wide

12 |

You can resize me!

13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function resizeListener(e) { 2 | var win = e.target || e.srcElement 3 | if (win.__resizeRAF__) { 4 | cancelAnimationFrame(win.__resizeRAF__) 5 | } 6 | win.__resizeRAF__ = requestAnimationFrame(function () { 7 | var trigger = win.__resizeTrigger__ 8 | var listeners = trigger && trigger.__resizeListeners__ 9 | if (listeners) { 10 | listeners.forEach(function (fn) { 11 | fn.call(trigger, e) 12 | }) 13 | } 14 | }) 15 | } 16 | 17 | var _exports = function exports(element, fn) { 18 | var window = this 19 | var document = window.document 20 | var isIE 21 | 22 | var attachEvent = document.attachEvent 23 | if (typeof navigator !== "undefined") { 24 | isIE = 25 | navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/) 26 | } 27 | 28 | function objectLoad() { 29 | this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__ 30 | this.contentDocument.defaultView.addEventListener("resize", resizeListener) 31 | } 32 | 33 | if (!element.__resizeListeners__) { 34 | element.__resizeListeners__ = [] 35 | if (attachEvent) { 36 | element.__resizeTrigger__ = element 37 | element.attachEvent("onresize", resizeListener) 38 | } else { 39 | if (getComputedStyle(element).position === "static") { 40 | element.style.position = "relative" 41 | } 42 | var obj = (element.__resizeTrigger__ = document.createElement("object")) 43 | obj.setAttribute( 44 | "style", 45 | "position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; z-index: -1; opacity: 0;" 46 | ) 47 | obj.setAttribute("class", "resize-sensor") 48 | 49 | // prevent from stealing keyboard focus 50 | obj.setAttribute("tabindex", "-1") 51 | 52 | // prevent screenreaders to see this object 53 | obj.setAttribute("title", "") 54 | 55 | obj.__resizeElement__ = element 56 | obj.onload = objectLoad 57 | obj.type = "text/html" 58 | if (isIE) { 59 | element.appendChild(obj) 60 | } 61 | obj.data = "about:blank" 62 | if (!isIE) { 63 | element.appendChild(obj) 64 | } 65 | } 66 | } 67 | element.__resizeListeners__.push(fn) 68 | } 69 | 70 | module.exports = 71 | typeof window === "undefined" ? _exports : _exports.bind(window) 72 | 73 | module.exports.unbind = function (element, fn) { 74 | var attachEvent = document.attachEvent 75 | var listeners = element.__resizeListeners__ || [] 76 | if (fn) { 77 | var index = listeners.indexOf(fn) 78 | if (index !== -1) { 79 | listeners.splice(index, 1) 80 | } 81 | } else { 82 | listeners = element.__resizeListeners__ = [] 83 | } 84 | if (!listeners.length) { 85 | if (attachEvent) { 86 | element.detachEvent("onresize", resizeListener) 87 | } else if (element.__resizeTrigger__) { 88 | var contentDocument = element.__resizeTrigger__.contentDocument 89 | var defaultView = contentDocument && contentDocument.defaultView 90 | if (defaultView) { 91 | defaultView.removeEventListener("resize", resizeListener) 92 | delete defaultView.__resizeTrigger__ 93 | } 94 | element.__resizeTrigger__ = !element.removeChild( 95 | element.__resizeTrigger__ 96 | ) 97 | } 98 | delete element.__resizeListeners__ 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-resize-event", 3 | "description": "Polyfill to make it easy to listen for element resize events", 4 | "version": "3.0.6", 5 | "author": "Kyle Mathews ", 6 | "bugs": { 7 | "url": "https://github.com/KyleAMathews/element-resize-event/issues" 8 | }, 9 | "devDependencies": { 10 | "browserify": "^8.1.3", 11 | "eslint": "^2.10.2", 12 | "eslint-config-airbnb-base": "^3.0.1", 13 | "eslint-plugin-import": "^1.8.0", 14 | "husky": ">=6", 15 | "lint-staged": ">=10", 16 | "prettier": "^2.3.0" 17 | }, 18 | "homepage": "https://github.com/KyleAMathews/element-resize-event", 19 | "keywords": [ 20 | "element queries", 21 | "element-query", 22 | "event", 23 | "resize" 24 | ], 25 | "license": "MIT", 26 | "lint-staged": { 27 | "*.js": "eslint --cache --fix", 28 | "*.{js,css,md}": "prettier --write" 29 | }, 30 | "main": "index.js", 31 | "repository": { 32 | "type": "git", 33 | "url": "https://github.com/KyleAMathews/element-resize-event.git" 34 | }, 35 | "scripts": { 36 | "prepare": "husky install", 37 | "prettier": "prettier --write \"**/*.{md,css,scss,yaml,yml,js}\"", 38 | "test": "echo \"Error: no test specified\" && exit 1" 39 | } 40 | } 41 | --------------------------------------------------------------------------------