├── .travis.yml ├── src ├── id-generator.js ├── state-handler.js ├── collection-utils.js ├── browser-detector.js ├── reporter.js ├── id-handler.js ├── element-utils.js ├── listener-handler.js ├── detection-strategy │ ├── object.js │ └── scroll.js └── element-resize-detector.js ├── .jshintrc ├── bower.json ├── .gitignore ├── specrunner.html ├── LICENSE ├── examples ├── inline.html ├── padding-fontsize.html ├── index.html ├── perf.html └── detached.html ├── package.json ├── karma.conf.js ├── benchmark ├── install.js ├── index.html └── resize.js ├── karma.sauce.conf.js ├── README.md ├── Gruntfile.js ├── dist └── element-resize-detector.min.js └── test └── element-resize-detector_test.js /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | script: 5 | "npm run-script test-ci" 6 | after_failure: 7 | "cat sauce-connect.log" -------------------------------------------------------------------------------- /src/id-generator.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = function() { 4 | var idCount = 1; 5 | 6 | /** 7 | * Generates a new unique id in the context. 8 | * @public 9 | * @returns {number} A unique id in the context. 10 | */ 11 | function generate() { 12 | return idCount++; 13 | } 14 | 15 | return { 16 | generate: generate 17 | }; 18 | }; 19 | -------------------------------------------------------------------------------- /src/state-handler.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var prop = "_erd"; 4 | 5 | function initState(element) { 6 | element[prop] = {}; 7 | return getState(element); 8 | } 9 | 10 | function getState(element) { 11 | return element[prop]; 12 | } 13 | 14 | function cleanState(element) { 15 | delete element[prop]; 16 | } 17 | 18 | module.exports = { 19 | initState: initState, 20 | getState: getState, 21 | cleanState: cleanState 22 | }; 23 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "expr": true, 3 | "nonbsp": true, 4 | "trailing": true, 5 | "indent": 4, 6 | "quotmark": "double", 7 | "eqeqeq": true, 8 | "curly": true, 9 | "forin": true, 10 | "immed": true, 11 | "newcap": true, 12 | "noempty": true, 13 | "nonew": true, 14 | "undef": true, 15 | "strict": true, 16 | "globalstrict": true, 17 | "browser": true, 18 | "globals": { 19 | "require": false, 20 | "module": false, 21 | "exports": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-resize-detector", 3 | "description": "Resize event emitter for elements.", 4 | "main": "dist/element-resize-detector.js", 5 | "authors": [ 6 | "Lucas Wiener " 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "element", 11 | "resize" 12 | ], 13 | "homepage": "https://github.com/wnr/element-resize-detector", 14 | "moduleType": [], 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.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 | 30 | build/ 31 | -------------------------------------------------------------------------------- /specrunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spec Runner 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/collection-utils.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var utils = module.exports = {}; 4 | 5 | /** 6 | * Loops through the collection and calls the callback for each element. if the callback returns truthy, the loop is broken and returns the same value. 7 | * @public 8 | * @param {*} collection The collection to loop through. Needs to have a length property set and have indices set from 0 to length - 1. 9 | * @param {function} callback The callback to be called for each element. The element will be given as a parameter to the callback. If this callback returns truthy, the loop is broken and the same value is returned. 10 | * @returns {*} The value that a callback has returned (if truthy). Otherwise nothing. 11 | */ 12 | utils.forEach = function(collection, callback) { 13 | for(var i = 0; i < collection.length; i++) { 14 | var result = callback(collection[i]); 15 | if(result) { 16 | return result; 17 | } 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /src/browser-detector.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var detector = module.exports = {}; 4 | 5 | detector.isIE = function(version) { 6 | function isAnyIeVersion() { 7 | var agent = navigator.userAgent.toLowerCase(); 8 | return agent.indexOf("msie") !== -1 || agent.indexOf("trident") !== -1 || agent.indexOf(" edge/") !== -1; 9 | } 10 | 11 | if(!isAnyIeVersion()) { 12 | return false; 13 | } 14 | 15 | if(!version) { 16 | return true; 17 | } 18 | 19 | //Shamelessly stolen from https://gist.github.com/padolsey/527683 20 | var ieVersion = (function(){ 21 | var undef, 22 | v = 3, 23 | div = document.createElement("div"), 24 | all = div.getElementsByTagName("i"); 25 | 26 | do { 27 | div.innerHTML = ""; 28 | } 29 | while (all[0]); 30 | 31 | return v > 4 ? v : undef; 32 | }()); 33 | 34 | return version === ieVersion; 35 | }; 36 | 37 | detector.isLegacyOpera = function() { 38 | return !!window.opera; 39 | }; 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Lucas Wiener 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 | -------------------------------------------------------------------------------- /examples/inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 |
15 |
16 | elementResizeDetector width px 17 |
18 | 21 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/reporter.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | /* global console: false */ 4 | 5 | /** 6 | * Reporter that handles the reporting of logs, warnings and errors. 7 | * @public 8 | * @param {boolean} quiet Tells if the reporter should be quiet or not. 9 | */ 10 | module.exports = function(quiet) { 11 | function noop() { 12 | //Does nothing. 13 | } 14 | 15 | var reporter = { 16 | log: noop, 17 | warn: noop, 18 | error: noop 19 | }; 20 | 21 | if(!quiet && window.console) { 22 | var attachFunction = function(reporter, name) { 23 | //The proxy is needed to be able to call the method with the console context, 24 | //since we cannot use bind. 25 | reporter[name] = function reporterProxy() { 26 | var f = console[name]; 27 | if (f.apply) { //IE9 does not support console.log.apply :) 28 | f.apply(console, arguments); 29 | } else { 30 | for (var i = 0; i < arguments.length; i++) { 31 | f(arguments[i]); 32 | } 33 | } 34 | }; 35 | }; 36 | 37 | attachFunction(reporter, "log"); 38 | attachFunction(reporter, "warn"); 39 | attachFunction(reporter, "error"); 40 | } 41 | 42 | return reporter; 43 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-resize-detector", 3 | "version": "1.1.9", 4 | "description": "Resize event emitter for elements.", 5 | "homepage": "https://github.com/wnr/element-resize-detector", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/wnr/element-resize-detector.git" 9 | }, 10 | "main": "src/element-resize-detector.js", 11 | "private": false, 12 | "license": "MIT", 13 | "dependencies": { 14 | "batch-processor": "^1.0.0" 15 | }, 16 | "devDependencies": { 17 | "benchmark": "^1.0.0", 18 | "grunt": "^0.4.5", 19 | "grunt-banner": "^0.3.1", 20 | "grunt-browserify": "^3.3.0", 21 | "grunt-cli": "^0.1.13", 22 | "grunt-contrib-jshint": "^0.11.0", 23 | "grunt-contrib-uglify": "^0.7.0", 24 | "grunt-karma": "^0.10.1", 25 | "jasmine-core": "^2.2.0", 26 | "jquery": "^1.11.2", 27 | "karma": "^0.12.31", 28 | "karma-chrome-launcher": "^0.1.7", 29 | "karma-firefox-launcher": "^0.1.4", 30 | "karma-jasmine": "^0.3.5", 31 | "karma-safari-launcher": "^0.1.1", 32 | "karma-sauce-launcher": "^0.2.10", 33 | "load-grunt-tasks": "^3.0.0", 34 | "lodash": "^3.3.1", 35 | "sauce-connect-launcher": "^0.10.1" 36 | }, 37 | "scripts": { 38 | "build": "grunt build", 39 | "dist": "grunt dist", 40 | "test": "grunt test", 41 | "test-ci": "grunt ci" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/id-handler.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = function(options) { 4 | var idGenerator = options.idGenerator; 5 | var getState = options.stateHandler.getState; 6 | 7 | /** 8 | * Gets the resize detector id of the element. 9 | * @public 10 | * @param {element} element The target element to get the id of. 11 | * @returns {string|number|null} The id of the element. Null if it has no id. 12 | */ 13 | function getId(element) { 14 | var state = getState(element); 15 | 16 | if (state && state.id !== undefined) { 17 | return state.id; 18 | } 19 | 20 | return null; 21 | } 22 | 23 | /** 24 | * Sets the resize detector id of the element. Requires the element to have a resize detector state initialized. 25 | * @public 26 | * @param {element} element The target element to set the id of. 27 | * @returns {string|number|null} The id of the element. 28 | */ 29 | function setId(element) { 30 | var state = getState(element); 31 | 32 | if (!state) { 33 | throw new Error("setId required the element to have a resize detection state."); 34 | } 35 | 36 | var id = idGenerator.generate(); 37 | 38 | state.id = id; 39 | 40 | return id; 41 | } 42 | 43 | return { 44 | get: getId, 45 | set: setId 46 | }; 47 | }; 48 | -------------------------------------------------------------------------------- /src/element-utils.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = function(options) { 4 | var getState = options.stateHandler.getState; 5 | 6 | /** 7 | * Tells if the element has been made detectable and ready to be listened for resize events. 8 | * @public 9 | * @param {element} The element to check. 10 | * @returns {boolean} True or false depending on if the element is detectable or not. 11 | */ 12 | function isDetectable(element) { 13 | var state = getState(element); 14 | return state && !!state.isDetectable; 15 | } 16 | 17 | /** 18 | * Marks the element that it has been made detectable and ready to be listened for resize events. 19 | * @public 20 | * @param {element} The element to mark. 21 | */ 22 | function markAsDetectable(element) { 23 | getState(element).isDetectable = true; 24 | } 25 | 26 | /** 27 | * Tells if the element is busy or not. 28 | * @public 29 | * @param {element} The element to check. 30 | * @returns {boolean} True or false depending on if the element is busy or not. 31 | */ 32 | function isBusy(element) { 33 | return !!getState(element).busy; 34 | } 35 | 36 | /** 37 | * Marks the object is busy and should not be made detectable. 38 | * @public 39 | * @param {element} element The element to mark. 40 | * @param {boolean} busy If the element is busy or not. 41 | */ 42 | function markBusy(element, busy) { 43 | getState(element).busy = !!busy; 44 | } 45 | 46 | return { 47 | isDetectable: isDetectable, 48 | markAsDetectable: markAsDetectable, 49 | isBusy: isBusy, 50 | markBusy: markBusy 51 | }; 52 | }; 53 | -------------------------------------------------------------------------------- /examples/padding-fontsize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 21 | 22 | 23 | 24 |
25 |

erd is watching this element

26 | 27 |
28 | 29 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/listener-handler.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = function(idHandler) { 4 | var eventListeners = {}; 5 | 6 | /** 7 | * Gets all listeners for the given element. 8 | * @public 9 | * @param {element} element The element to get all listeners for. 10 | * @returns All listeners for the given element. 11 | */ 12 | function getListeners(element) { 13 | var id = idHandler.get(element); 14 | 15 | if (id === undefined) { 16 | return []; 17 | } 18 | 19 | return eventListeners[id] || []; 20 | } 21 | 22 | /** 23 | * Stores the given listener for the given element. Will not actually add the listener to the element. 24 | * @public 25 | * @param {element} element The element that should have the listener added. 26 | * @param {function} listener The callback that the element has added. 27 | */ 28 | function addListener(element, listener) { 29 | var id = idHandler.get(element); 30 | 31 | if(!eventListeners[id]) { 32 | eventListeners[id] = []; 33 | } 34 | 35 | eventListeners[id].push(listener); 36 | } 37 | 38 | function removeListener(element, listener) { 39 | var listeners = getListeners(element); 40 | for (var i = 0, len = listeners.length; i < len; ++i) { 41 | if (listeners[i] === listener) { 42 | listeners.splice(i, 1); 43 | break; 44 | } 45 | } 46 | } 47 | 48 | function removeAllListeners(element) { 49 | var listeners = getListeners(element); 50 | if (!listeners) { return; } 51 | listeners.length = 0; 52 | } 53 | 54 | return { 55 | get: getListeners, 56 | add: addListener, 57 | removeListener: removeListener, 58 | removeAllListeners: removeAllListeners 59 | }; 60 | }; 61 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Karma configuration 4 | 5 | module.exports = function(config) { 6 | config.set({ 7 | 8 | // base path that will be used to resolve all patterns (eg. files, exclude) 9 | basePath: "", 10 | 11 | 12 | // frameworks to use 13 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 14 | frameworks: ["jasmine"], 15 | 16 | 17 | // list of files / patterns to load in the browser 18 | files: [ 19 | "node_modules/jquery/dist/jquery.min.js", 20 | { pattern: "node_modules/jquery/dist/jquery.min.map", watched: false, included: false, served: true }, 21 | "node_modules/lodash/index.js", 22 | "build/element-resize-detector.js", 23 | "js/*_test.js", 24 | "test/*_test.js" 25 | ], 26 | 27 | 28 | // list of files to exclude 29 | exclude: [ 30 | ], 31 | 32 | 33 | // preprocess matching files before serving them to the browser 34 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 35 | preprocessors: { 36 | }, 37 | 38 | 39 | // test results reporter to use 40 | // possible values: 'dots', 'progress' 41 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 42 | reporters: ["progress"], 43 | 44 | 45 | // web server port 46 | port: 9876, 47 | 48 | 49 | // enable / disable colors in the output (reporters and logs) 50 | colors: true, 51 | 52 | 53 | // level of logging 54 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 55 | logLevel: config.LOG_INFO, 56 | 57 | 58 | // enable / disable watching file and executing tests whenever any file changes 59 | autoWatch: false, 60 | 61 | 62 | // start these browsers 63 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 64 | browsers: [ 65 | // "Chrome" 66 | //, "IE8 - Win7", "IE10 - Win7", "IE11 - Win8.1" 67 | ], 68 | 69 | 70 | // Continuous Integration mode 71 | // if true, Karma captures browsers, runs the tests and exits 72 | singleRun: false 73 | }); 74 | }; 75 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 37 | 38 | 39 |
40 |
41 |
42 | x 43 |
44 |
45 |
46 | 47 | 48 | 49 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /benchmark/install.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | 4 | var numElements = 100; 5 | 6 | function createDiv(width) { 7 | var d = document.createElement("div"); 8 | d.className = "item"; 9 | d.style.width = width; 10 | // erd.listenTo({ 11 | // callOnAdd: false 12 | // }, d, onElementResize); 13 | return d; 14 | } 15 | 16 | function loopCreateAndAppend(numNested, create, target) { 17 | for(var i = 0; i < numNested; i++) { 18 | var d = create(); 19 | target.appendChild(d); 20 | } 21 | 22 | return target; 23 | } 24 | 25 | var suite = new Benchmark.Suite("install", { 26 | defer: true, 27 | }); 28 | 29 | var originalRun = suite.run; 30 | 31 | suite.run = function() { 32 | console.log("Setting up suite..."); 33 | var self = this; 34 | setup(function ready() { 35 | console.log("Setup done"); 36 | getComputedStyle(document.body); 37 | originalRun.call(self); 38 | }); 39 | } 40 | 41 | var erdScroll = elementResizeDetectorMaker({ 42 | callOnAdd: false, 43 | strategy: "scroll" 44 | }); 45 | 46 | var erdObject = elementResizeDetectorMaker({ 47 | callOnAdd: false, 48 | strategy: "object" 49 | }); 50 | 51 | function setup(callback) { 52 | $("#fixtures").html("
"); 53 | callback(); 54 | } 55 | 56 | suite.add("scroll strategy", function(deferred) { 57 | $("#fixtures #scroll").html(""); 58 | loopCreateAndAppend(numElements, createDiv.bind(null, "100%"), $("#fixtures #scroll")[0]); 59 | 60 | var start = Date.now(); 61 | erdScroll.listenTo({ 62 | onReady: function() { 63 | deferred.resolve(); 64 | var diff = Date.now() - start; 65 | if(diff === 0) { 66 | throw new Error("lol"); 67 | } 68 | console.log("Test finished in " + (diff) + " ms"); 69 | } 70 | }, $("#scroll .item"), function noop() { 71 | //noop. 72 | }); 73 | }, { 74 | defer: true, 75 | // maxTime: 20, 76 | }); 77 | 78 | suite.add("object strategy", function(deferred) { 79 | $("#fixtures #object").html(""); 80 | loopCreateAndAppend(numElements, createDiv.bind(null, "100%"), $("#fixtures #object")[0]); 81 | 82 | var start = Date.now(); 83 | 84 | erdObject.listenTo({ 85 | onReady: function() { 86 | deferred.resolve(); 87 | console.log("Test finished in " + (Date.now() - start) + " ms"); 88 | } 89 | }, $("#object .item"), function noop() { 90 | //noop. 91 | }); 92 | }, { 93 | defer: true, 94 | // maxTime: 20 95 | }); 96 | 97 | registerSuite(suite); 98 | })(); -------------------------------------------------------------------------------- /examples/perf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /karma.sauce.conf.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var sharedConfig = require("./karma.conf.js"); 4 | 5 | module.exports = function(config) { 6 | sharedConfig(config); 7 | 8 | // define SL browsers 9 | var customLaunchers = { 10 | 11 | //Chrome 12 | "SL_CHROME_LATEST_OSX": { 13 | base: "SauceLabs", 14 | platform: "Mac 10.9", 15 | browserName: "chrome" 16 | }, 17 | "SL_CHROME_LATEST_WINDOWS": { 18 | base: "SauceLabs", 19 | platform: "Windows 8.1", 20 | browserName: "chrome" 21 | }, 22 | "SL_CHROME_LATEST_LINUX": { 23 | base: "SauceLabs", 24 | platform: "Linux", 25 | browserName: "chrome" 26 | }, 27 | 28 | //Firefox 29 | "SL_FIREFOX_LATEST_OSX": { 30 | base: "SauceLabs", 31 | platform: "Mac 10.9", 32 | browserName: "firefox" 33 | }, 34 | "SL_FIREFOX_LATEST_WINDOWS": { 35 | base: "SauceLabs", 36 | platform: "Windows 8.1", 37 | browserName: "firefox" 38 | }, 39 | "SL_FIREFOX_LATEST_LINUX": { 40 | base: "SauceLabs", 41 | platform: "Linux", 42 | browserName: "firefox" 43 | }, 44 | 45 | //Safari 46 | "SL_SAFARI_LATEST_OSX": { 47 | base: "SauceLabs", 48 | platform: "Mac 10.9", 49 | browserName: "safari" 50 | }, 51 | "SL_SAFARI_LATEST_WINDOWS": { 52 | base: "SauceLabs", 53 | platform: "Windows 7", 54 | browserName: "safari" 55 | }, 56 | 57 | //IE 58 | "SL_IE_LATEST_WINDOWS": { 59 | base: "SauceLabs", 60 | platform: "Windows 8.1", 61 | browserName: "internet explorer" 62 | }, 63 | "SL_IE_10_WINDOWS": { 64 | base: "SauceLabs", 65 | platform: "Windows 7", 66 | browserName: "internet explorer", 67 | version: "10" 68 | }, 69 | "SL_IE_9_WINDOWS": { 70 | base: "SauceLabs", 71 | platform: "Windows 7", 72 | browserName: "internet explorer", 73 | version: "9" 74 | }, 75 | "SL_IE_8_WINDOWS": { 76 | base: "SauceLabs", 77 | platform: "Windows xp", 78 | browserName: "internet explorer", 79 | version: "8" 80 | }, 81 | 82 | //Opera 83 | "SL_OPERA_LATEST_WINDOWS": { 84 | base: "SauceLabs", 85 | platform: "Windows 7", 86 | browserName: "opera" 87 | }, 88 | "SL_OPERA_LATEST_LINUX": { 89 | base: "SauceLabs", 90 | platform: "Linux", 91 | browserName: "opera" 92 | }, 93 | 94 | //iPhone, 95 | "SL_IOS_LATEST_IPHONE": { 96 | base: "SauceLabs", 97 | platform: "OS X 10.9", 98 | browserName: "iphone", 99 | version: "8" //Sauce defaults to 5 if this is omitted. 100 | }, 101 | "SL_IOS_7_IPHONE": { 102 | base: "SauceLabs", 103 | platform: "OS X 10.9", 104 | browserName: "iphone", 105 | version: "7" 106 | }, 107 | 108 | //iPad, 109 | "SL_IOS_LATEST_IPAD": { 110 | base: "SauceLabs", 111 | platform: "OS X 10.9", 112 | browserName: "ipad", 113 | version: "8" //Sauce defaults to 5 if this is omitted. 114 | }, 115 | "SL_IOS_7_IPAD": { 116 | base: "SauceLabs", 117 | platform: "OS X 10.9", 118 | browserName: "ipad", 119 | version: "7" 120 | } 121 | }; 122 | 123 | config.set({ 124 | autoWatch: false, 125 | 126 | reporters: ["dots", "saucelabs"], 127 | 128 | // If browser does not capture in given timeout [ms], kill it 129 | captureTimeout: 5*60*1000, 130 | browserNoActivityTimeout: 60*1000, 131 | 132 | sauceLabs: { 133 | testName: "element-resize-detector", 134 | recordScreenshots: false, 135 | startConnect: false 136 | }, 137 | 138 | customLaunchers: customLaunchers, 139 | singleRun: true 140 | }); 141 | }; 142 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # element-resize-detector 2 | Super-optimized cross-browser resize listener for elements. Up to 37x faster than related approaches (read section 5 of the [article](http://arxiv.org/pdf/1511.01223v1.pdf)). 3 | 4 | ``` 5 | npm install element-resize-detector 6 | ``` 7 | 8 | ## Usage 9 | Include the script in the browser: 10 | ```html 11 | 12 | ``` 13 | This will create a global function `elementResizeDetectorMaker`, which is the maker function that makes an element resize detector instance. 14 | 15 | You can also `require` it like so: 16 | ```js 17 | var elementResizeDetectorMaker = require("element-resize-detector"); 18 | ``` 19 | 20 | ### Create instance 21 | ```js 22 | // With default options (will use the object-based approach). 23 | // The object-based approach is deprecated, and will be removed in v2. 24 | var erd = elementResizeDetectorMaker(); 25 | 26 | // With the ultra fast scroll-based approach. 27 | // This will be the default in v2. 28 | var erdUltraFast = elementResizeDetectorMaker({ 29 | strategy: "scroll" //<- For ultra performance. 30 | }); 31 | ``` 32 | 33 | ## API 34 | 35 | ### listenTo(element, listener) 36 | Listens to the element for resize events and calls the listener function with the element as argument on resize events. 37 | 38 | **Example usage:** 39 | 40 | ```js 41 | erd.listenTo(document.getElementById("test"), function(element) { 42 | var width = element.offsetWidth; 43 | var height = element.offsetHeight; 44 | console.log("Size: " + width + "x" + height); 45 | }); 46 | ``` 47 | 48 | ### removeListener(element, listener) 49 | Removes the listener from the element. 50 | 51 | ### removeAllListeners(element) 52 | Removes all listeners from the element, but does not completely remove the detector. Use this function if you may add listeners later and don't want the detector to have to initialize again. 53 | 54 | ### uninstall(element) 55 | Completely removes the detector and all listeners. 56 | 57 | ## Caveats 58 | 59 | 1. If the element has `position: static` it will be changed to `position: relative`. Any unintentional `top/right/bottom/left/z-index` styles will therefore be applied and absolute positioned children will be positioned relative to the element. 60 | 2. A hidden element will be injected as a direct child to the element. 61 | 62 | ## Credits 63 | This library is using the two approaches (scroll and object) as first described at [http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). 64 | 65 | The scroll based approach implementation was based on Marc J's implementation [https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js](https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js). 66 | 67 | Please note that both approaches have been heavily reworked for better performance and robustness. 68 | 69 | ## Changelog 70 | 71 | #### 1.1.9 72 | 73 | * Fixed uninstall issue when `callOnAdd` being true. Also now removing `onAnimationStart` listener when uninstalling. See #49. 74 | 75 | #### 1.1.8 76 | 77 | * Fixed a compatability issue with `options.idHandler.get`. 78 | 79 | #### 1.1.7 80 | 81 | * Fixed some rare issues with uninstalling elements while preparing/resizing. 82 | 83 | #### 1.1.6 84 | 85 | * Fixed an issue with the resize detector changing the dimensions of the target element in some browsers (e.g., IE and FireFox). 86 | 87 | #### 1.1.5 88 | 89 | * Fixed an issue with having parent elements `dir=RTL`. 90 | 91 | #### 1.1.4 92 | 93 | * Added extra safety styles to injected elements to make them more resilient to global CSS affecting them. 94 | 95 | #### 1.1.3 96 | 97 | * Now `uninstall` supports being called with elements that haven't been initialized. `uninstall` simply ignores non-erd elements. 98 | * `uninstall` now also supports a collection of elements. 99 | 100 | #### 1.1.2 101 | 102 | * Fixed so that `uninstall` may be called directly after a `listenTo` call. 103 | * Fixed a typo in the readme. 104 | * Fixed an invalid test. 105 | 106 | #### 1.1.1 107 | 108 | * Using `window.getComputedStyle` instead of relying on the method being available in the global scope. This enables this library to be used in simulated browser environments such as jsdom. 109 | 110 | #### 1.1.0 111 | 112 | * Supporting inline elements 113 | * Event-based solution for detecting attached/rendered events so that detached/unrendered elements can be listened to without polling 114 | * Now all changes that affects the offset size of an element are properly detected (such as padding and font-size). 115 | * Scroll is stabilized, and is the preferred strategy to use. The object strategy will be deprecated (and is currently only used for some legacy browsers such as IE9 and Opera 12). 116 | -------------------------------------------------------------------------------- /examples/detached.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /benchmark/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 135 | 136 | 137 | 148 | 149 | -------------------------------------------------------------------------------- /benchmark/resize.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | 4 | var numElements = 100; 5 | 6 | var count; 7 | 8 | var onAllElementsResized; 9 | var lastSize; 10 | var shrink; 11 | 12 | function onResize() { 13 | count++; 14 | 15 | if(count === numElements) { 16 | count = 0; 17 | onAllElementsResized(); 18 | } 19 | } 20 | 21 | function resize(selector) { 22 | var newWidth; 23 | if(shrink) { 24 | shrink = false; 25 | newWidth = lastSize / 2; 26 | } else { 27 | shrink = true; 28 | newWidth = lastSize * 2; 29 | } 30 | 31 | $(selector).width(newWidth + "px"); 32 | lastSize = newWidth; 33 | } 34 | 35 | function createDiv(width) { 36 | var d = document.createElement("div"); 37 | d.className = "item"; 38 | d.style.width = width; 39 | // erd.listenTo({ 40 | // callOnAdd: false 41 | // }, d, onElementResize); 42 | return d; 43 | } 44 | 45 | function loopCreateAndAppend(numNested, create, target) { 46 | for(var i = 0; i < numNested; i++) { 47 | var d = create(); 48 | target.appendChild(d); 49 | } 50 | 51 | return target; 52 | } 53 | 54 | var suite = new Benchmark.Suite("resize", { 55 | defer: true, 56 | }); 57 | 58 | var originalRun = suite.run; 59 | 60 | suite.run = function() { 61 | console.log("Setting up suite..."); 62 | var self = this; 63 | setup(function ready() { 64 | console.log("Setup done"); 65 | getComputedStyle(document.body); 66 | setTimeout(function() { 67 | originalRun.call(self); 68 | }, 2000); 69 | }); 70 | } 71 | 72 | var erdScroll = elementResizeDetectorMaker({ 73 | callOnAdd: false, 74 | strategy: "scroll" 75 | }); 76 | 77 | var erdObject = elementResizeDetectorMaker({ 78 | callOnAdd: false, 79 | strategy: "object" 80 | }); 81 | 82 | function setup(callback) { 83 | $("#fixtures").html("
"); 84 | loopCreateAndAppend(numElements, createDiv.bind(null, "100%"), $("#fixtures #scroll")[0]); 85 | loopCreateAndAppend(numElements, createDiv.bind(null, "100%"), $("#fixtures #object")[0]); 86 | 87 | var scrollready = false; 88 | var objectready = false; 89 | 90 | erdScroll.listenTo({ 91 | onReady: function onReady() { 92 | console.log("scroll ready"); 93 | scrollready = true; 94 | 95 | if(objectready) { 96 | callback(); 97 | } 98 | } 99 | },$("#fixtures #scroll .item"), onResize); 100 | erdObject.listenTo({ 101 | onReady: function onReady() { 102 | console.log("object ready"); 103 | 104 | objectready = true; 105 | 106 | if(scrollready) { 107 | callback(); 108 | } 109 | } 110 | }, $("#fixtures #object .item"), onResize); 111 | } 112 | 113 | suite.add("scroll strategy", function(deferred) { 114 | onAllElementsResized = function() { 115 | deferred.resolve(); 116 | console.log("Test finished in " + (Date.now() - start) + " ms"); 117 | } 118 | 119 | var start = Date.now(); 120 | resize("#scroll"); 121 | }, { 122 | defer: true, 123 | // maxTime: 20, 124 | onStart: function() { 125 | lastSize = $("#scroll").width(); 126 | count = 0; 127 | shrink = true; 128 | } 129 | }); 130 | 131 | suite.add("object strategy", function(deferred) { 132 | onAllElementsResized = function() { 133 | deferred.resolve(); 134 | console.log("Test finished in " + (Date.now() - start) + " ms"); 135 | } 136 | 137 | var start = Date.now(); 138 | resize("#object"); 139 | }, { 140 | defer: true, 141 | // maxTime: 20, 142 | onStart: function() { 143 | console.time("test"); 144 | lastSize = $("#object").width(); 145 | count = 0; 146 | shrink = true; 147 | }, 148 | onComplete: function() { 149 | console.timeEnd("test"); 150 | } 151 | }); 152 | 153 | registerSuite(suite); 154 | })(); 155 | 156 | // var objectsready = false; 157 | // suite("resize", function() { 158 | // benchmark("object strategy initiater dummy", function (deferred) { 159 | // if(objectsready) { 160 | // deferred.resolve(); 161 | // return; 162 | // } 163 | 164 | // setTimeout(function() { 165 | // if(objectsready) { 166 | // deferred.resolve(); 167 | // } 168 | // }, 0); 169 | // }, { 170 | // defer: true, 171 | // onStart: function() { 172 | // var erd = elementResizeDetectorMaker({ 173 | // callOnAdd: true, 174 | // strategy: "object" 175 | // }); 176 | 177 | // loopCreateAndAppend(numElements, createDiv.bind(null, numElements), document.getElementById("fixtures")); 178 | // lastSize = $("#fixtures").width(); 179 | // shrink = true; 180 | // count = 0; 181 | 182 | // var calledcount = 0; 183 | 184 | // erd.listenTo($(".item"), function() { 185 | // calledcount++; 186 | 187 | // if(calledcount === numElements) { 188 | // objectsready = true; 189 | // } 190 | 191 | // if(calledcount > numElements) { 192 | // onResize(); 193 | // } 194 | // }); 195 | // }, 196 | // }); 197 | 198 | // benchmark("object strategy", function(deferred) { 199 | // onAllElementsResized = function() { 200 | // deferred.resolve(); 201 | // //console.log("Test finished in " + (Date.now() - start) + " ms"); 202 | // } 203 | 204 | // var start = Date.now(); 205 | // resize(); 206 | // }, { 207 | // defer: true, 208 | // onComplete: function() { 209 | // $("#fixtures").html(""); 210 | // } 211 | // }); 212 | 213 | // benchmark("scroll strategy", function(deferred) { 214 | // onAllElementsResized = function() { 215 | // deferred.resolve(); 216 | // //console.log("Test finished in " + (Date.now() - start) + " ms"); 217 | // } 218 | 219 | // var start = Date.now(); 220 | // resize(); 221 | // }, { 222 | // defer: true, 223 | // onStart: function() { 224 | // var erd = elementResizeDetectorMaker({ 225 | // callOnAdd: false, 226 | // strategy: "scroll" 227 | // }); 228 | 229 | // loopCreateAndAppend(numElements, createDiv.bind(null, numElements), document.getElementById("fixtures")); 230 | // lastSize = $("#fixtures").width(); 231 | // shrink = true; 232 | // count = 0; 233 | 234 | // erd.listenTo($(".item"), onResize); 235 | // }, 236 | // onComplete: function() { 237 | // $("#fixtures").html(""); 238 | // } 239 | // }); 240 | // }, { 241 | // onComplete: function(event) { 242 | // var bench = event.target; 243 | // var name = bench.name; 244 | // var hz = bench.hz; 245 | // var deviation = bench.stats.deviation; 246 | // var mean = bench.stats.mean; 247 | 248 | // console.log("bench: " + name); 249 | // console.log("hz: " + hz); 250 | // console.log("deviation: " + deviation); 251 | // console.log("mean: " + mean); 252 | // } 253 | // }); -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* global process:false */ 2 | 3 | "use strict"; 4 | 5 | var _ = require("lodash"); 6 | var sauceConnectLauncher = require("sauce-connect-launcher"); 7 | 8 | function registerSauceBrowsers(config, sauceBrowsers, configFile) { 9 | function capitalize(string) { 10 | if(!string.charAt) { 11 | return string; 12 | } 13 | 14 | return string.charAt(0).toUpperCase() + string.slice(1); 15 | } 16 | 17 | var karma = config.karma; 18 | 19 | var tasks = []; 20 | 21 | var formatName = function(result, part) { 22 | return result + capitalize(part); 23 | }; 24 | 25 | for(var key in sauceBrowsers) { 26 | if(sauceBrowsers.hasOwnProperty(key)) { 27 | var parts = key.toLowerCase().split("_"); 28 | var name = _.reduce(parts, formatName, "sauce"); 29 | 30 | var configObject = { 31 | configFile: configFile, 32 | options: { 33 | browsers: sauceBrowsers[key] 34 | } 35 | }; 36 | 37 | karma[name] = configObject; 38 | 39 | tasks.push("karma:" + name); 40 | } 41 | } 42 | 43 | return tasks; 44 | } 45 | 46 | module.exports = function(grunt) { 47 | require("load-grunt-tasks")(grunt); 48 | 49 | var config = { 50 | pkg: grunt.file.readJSON("package.json"), 51 | banner: "/*!\n" + 52 | " * element-resize-detector <%= pkg.version %>\n" + 53 | " * Copyright (c) 2016 Lucas Wiener\n" + 54 | " * <%= pkg.homepage %>\n" + 55 | " * Licensed under <%= pkg.license %>\n" + 56 | " */\n", 57 | jshint: { 58 | src: { 59 | src: ["src/**/*.js", "*.js"] 60 | }, 61 | test: { 62 | src: "test/**/*.js" 63 | }, 64 | options: { 65 | jshintrc: true 66 | } 67 | }, 68 | browserify: { 69 | dev: { 70 | src: ["src/element-resize-detector.js"], 71 | dest: "build/element-resize-detector.js", 72 | options: { 73 | browserifyOptions: { 74 | standalone: "elementResizeDetectorMaker", 75 | debug: true 76 | } 77 | } 78 | }, 79 | dist: { 80 | src: ["src/element-resize-detector.js"], 81 | dest: "dist/element-resize-detector.js", 82 | options: { 83 | browserifyOptions: { 84 | standalone: "elementResizeDetectorMaker" 85 | } 86 | } 87 | } 88 | }, 89 | usebanner: { 90 | dist: { 91 | options: { 92 | position: "top", 93 | banner: "<%= banner %>" 94 | }, 95 | files: { 96 | src: "dist/**/*" 97 | } 98 | } 99 | }, 100 | uglify: { 101 | dist: { 102 | files: { 103 | "dist/element-resize-detector.min.js": "dist/element-resize-detector.js" 104 | } 105 | } 106 | }, 107 | karma: { 108 | local: { 109 | configFile: "karma.conf.js", 110 | options: { 111 | browsers: [ 112 | "Chrome", 113 | "Safari", 114 | "Firefox", 115 | //"IE8 - Win7", 116 | //"IE10 - Win7", 117 | //"IE11 - Win8.1" 118 | ], 119 | singleRun: true 120 | } 121 | } 122 | }, 123 | "sauce_connect": { 124 | options: { 125 | username: process.env.SAUCE_USERNAME, 126 | accessKey: process.env.SAUCE_ACCESS_KEY, 127 | verbose: true, 128 | build: process.env.TRAVIS_BUILD_NUMBER || process.env.BUILD_NUMBER, 129 | testName: "element-resize-detector" 130 | }, 131 | tunnel: {} 132 | } 133 | }; 134 | 135 | var sauceBrowsers = [ 136 | "SL_CHROME_LATEST_OSX", "SL_CHROME_LATEST_WINDOWS", "SL_CHROME_LATEST_LINUX", 137 | "SL_FIREFOX_LATEST_OSX", "SL_FIREFOX_LATEST_WINDOWS", "SL_FIREFOX_LATEST_LINUX", 138 | "SL_SAFARI_LATEST_OSX", "SL_SAFARI_LATEST_WINDOWS", 139 | "SL_OPERA_LATEST_WINDOWS", "SL_OPERA_LATEST_LINUX", 140 | "SL_IE_LATEST_WINDOWS", "SL_IE_10_WINDOWS", "SL_IE_9_WINDOWS", "SL_IE_8_WINDOWS", 141 | "SL_IOS_LATEST_IPHONE", "SL_IOS_LATEST_IPAD", 142 | "SL_IOS_7_IPHONE", "SL_IOS_7_IPAD" 143 | ]; 144 | 145 | function batchSauceBrowsers(browsers, batchSize) { 146 | var number = 1; 147 | var batchMap = {}; 148 | _.forEach(_.chunk(browsers, batchSize), function(chunk) { 149 | batchMap["sauceBrowserChunk" + number++] = chunk; 150 | }); 151 | return batchMap; 152 | } 153 | 154 | var NUM_PARALLEL_BROWSERS = 3; 155 | var sauceBrowserTasks = registerSauceBrowsers(config, batchSauceBrowsers(sauceBrowsers, NUM_PARALLEL_BROWSERS), "karma.sauce.conf.js"); 156 | 157 | grunt.initConfig(config); 158 | 159 | grunt.registerTask("build:dev", ["browserify:dev"]); 160 | grunt.registerTask("build:dist", ["browserify:dist"]); 161 | 162 | grunt.registerTask("build", ["build:dev"]); 163 | grunt.registerTask("dist", ["build:dist", "uglify:dist", "usebanner:dist"]); 164 | 165 | grunt.registerTask("test:style", ["jshint"]); 166 | grunt.registerTask("test:sauce", ["build"].concat(sauceBrowserTasks)); 167 | grunt.registerTask("test", ["test:style", "build:dev", "karma:local"]); 168 | 169 | // grunt.registerTask("ci", ["test:style", "sauceConnectTunnel", "test:sauce"]); 170 | grunt.registerTask("ci", ["test:style"]); // Use this until sauce labs actually works >:( 171 | 172 | grunt.registerTask("default", ["test"]); 173 | 174 | var sauceConnectTunnel = {}; 175 | 176 | grunt.registerTask("sauceConnectTunnel", "Starts a sauce connect tunnel", function(keepAlive) { 177 | if(!process.env.SAUCE_USERNAME) { 178 | grunt.log.error("env SAUCE_USERNAME needs to be set."); 179 | return false; 180 | } 181 | 182 | if(!process.env.SAUCE_ACCESS_KEY) { 183 | grunt.log.error("env SAUCE_ACCESS_KEY needs to be set."); 184 | return false; 185 | } 186 | 187 | var done = this.async(); 188 | 189 | sauceConnectLauncher({ 190 | username: process.env.SAUCE_USERNAME, 191 | accessKey: process.env.SAUCE_ACCESS_KEY, 192 | logger: grunt.log.writeln, 193 | verbose: true, 194 | logfile: "sauce-connect.log" 195 | }, function (err, sauceConnectProcess) { 196 | function stop() { 197 | grunt.log.writeln("Stopping..."); 198 | sauceConnectTunnel.process.close(function() { 199 | grunt.log.writeln("Closed Sauce Connect process"); 200 | done(); 201 | }); 202 | } 203 | 204 | if (err) { 205 | grunt.log.error(err.message); 206 | done(false); 207 | } 208 | 209 | sauceConnectTunnel.process = sauceConnectProcess; 210 | 211 | grunt.log.success("Sauce Connect ready!"); 212 | 213 | if(keepAlive) { 214 | grunt.log.writeln("The tunnel will be kept alive. Stop it by terminating this process with SIGINT (Ctrl-C)."); 215 | 216 | process.on("SIGINT", function() { 217 | grunt.log.writeln(); 218 | stop(); 219 | }); 220 | } else { 221 | grunt.log.writeln("Closing tunnel since the :keepAlive argument is not present..."); 222 | done(); 223 | } 224 | }); 225 | }); 226 | }; 227 | -------------------------------------------------------------------------------- /src/detection-strategy/object.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Resize detection strategy that injects objects to elements in order to detect resize events. 3 | * Heavily inspired by: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/ 4 | */ 5 | 6 | "use strict"; 7 | 8 | var browserDetector = require("../browser-detector"); 9 | 10 | module.exports = function(options) { 11 | options = options || {}; 12 | var reporter = options.reporter; 13 | var batchProcessor = options.batchProcessor; 14 | var getState = options.stateHandler.getState; 15 | 16 | if(!reporter) { 17 | throw new Error("Missing required dependency: reporter."); 18 | } 19 | 20 | /** 21 | * Adds a resize event listener to the element. 22 | * @public 23 | * @param {element} element The element that should have the listener added. 24 | * @param {function} listener The listener callback to be called for each resize event of the element. The element will be given as a parameter to the listener callback. 25 | */ 26 | function addListener(element, listener) { 27 | if(!getObject(element)) { 28 | throw new Error("Element is not detectable by this strategy."); 29 | } 30 | 31 | function listenerProxy() { 32 | listener(element); 33 | } 34 | 35 | if(browserDetector.isIE(8)) { 36 | //IE 8 does not support object, but supports the resize event directly on elements. 37 | getState(element).object = { 38 | proxy: listenerProxy 39 | }; 40 | element.attachEvent("onresize", listenerProxy); 41 | } else { 42 | var object = getObject(element); 43 | object.contentDocument.defaultView.addEventListener("resize", listenerProxy); 44 | } 45 | } 46 | 47 | /** 48 | * Makes an element detectable and ready to be listened for resize events. Will call the callback when the element is ready to be listened for resize changes. 49 | * @private 50 | * @param {object} options Optional options object. 51 | * @param {element} element The element to make detectable 52 | * @param {function} callback The callback to be called when the element is ready to be listened for resize changes. Will be called with the element as first parameter. 53 | */ 54 | function makeDetectable(options, element, callback) { 55 | if (!callback) { 56 | callback = element; 57 | element = options; 58 | options = null; 59 | } 60 | 61 | options = options || {}; 62 | var debug = options.debug; 63 | 64 | function injectObject(element, callback) { 65 | var OBJECT_STYLE = "display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0; opacity: 0; z-index: -1000; pointer-events: none;"; 66 | 67 | //The target element needs to be positioned (everything except static) so the absolute positioned object will be positioned relative to the target element. 68 | 69 | // Position altering may be performed directly or on object load, depending on if style resolution is possible directly or not. 70 | var positionCheckPerformed = false; 71 | 72 | // The element may not yet be attached to the DOM, and therefore the style object may be empty in some browsers. 73 | // Since the style object is a reference, it will be updated as soon as the element is attached to the DOM. 74 | var style = window.getComputedStyle(element); 75 | var width = element.offsetWidth; 76 | var height = element.offsetHeight; 77 | 78 | getState(element).startSize = { 79 | width: width, 80 | height: height 81 | }; 82 | 83 | function mutateDom() { 84 | function alterPositionStyles() { 85 | if(style.position === "static") { 86 | element.style.position = "relative"; 87 | 88 | var removeRelativeStyles = function(reporter, element, style, property) { 89 | function getNumericalValue(value) { 90 | return value.replace(/[^-\d\.]/g, ""); 91 | } 92 | 93 | var value = style[property]; 94 | 95 | if(value !== "auto" && getNumericalValue(value) !== "0") { 96 | reporter.warn("An element that is positioned static has style." + property + "=" + value + " which is ignored due to the static positioning. The element will need to be positioned relative, so the style." + property + " will be set to 0. Element: ", element); 97 | element.style[property] = 0; 98 | } 99 | }; 100 | 101 | //Check so that there are no accidental styles that will make the element styled differently now that is is relative. 102 | //If there are any, set them to 0 (this should be okay with the user since the style properties did nothing before [since the element was positioned static] anyway). 103 | removeRelativeStyles(reporter, element, style, "top"); 104 | removeRelativeStyles(reporter, element, style, "right"); 105 | removeRelativeStyles(reporter, element, style, "bottom"); 106 | removeRelativeStyles(reporter, element, style, "left"); 107 | } 108 | } 109 | 110 | function onObjectLoad() { 111 | // The object has been loaded, which means that the element now is guaranteed to be attached to the DOM. 112 | if (!positionCheckPerformed) { 113 | alterPositionStyles(); 114 | } 115 | 116 | /*jshint validthis: true */ 117 | 118 | function getDocument(element, callback) { 119 | //Opera 12 seem to call the object.onload before the actual document has been created. 120 | //So if it is not present, poll it with an timeout until it is present. 121 | //TODO: Could maybe be handled better with object.onreadystatechange or similar. 122 | if(!element.contentDocument) { 123 | setTimeout(function checkForObjectDocument() { 124 | getDocument(element, callback); 125 | }, 100); 126 | 127 | return; 128 | } 129 | 130 | callback(element.contentDocument); 131 | } 132 | 133 | //Mutating the object element here seems to fire another load event. 134 | //Mutating the inner document of the object element is fine though. 135 | var objectElement = this; 136 | 137 | //Create the style element to be added to the object. 138 | getDocument(objectElement, function onObjectDocumentReady(objectDocument) { 139 | //Notify that the element is ready to be listened to. 140 | callback(element); 141 | }); 142 | } 143 | 144 | // The element may be detached from the DOM, and some browsers does not support style resolving of detached elements. 145 | // The alterPositionStyles needs to be delayed until we know the element has been attached to the DOM (which we are sure of when the onObjectLoad has been fired), if style resolution is not possible. 146 | if (style.position !== "") { 147 | alterPositionStyles(style); 148 | positionCheckPerformed = true; 149 | } 150 | 151 | //Add an object element as a child to the target element that will be listened to for resize events. 152 | var object = document.createElement("object"); 153 | object.style.cssText = OBJECT_STYLE; 154 | object.type = "text/html"; 155 | object.onload = onObjectLoad; 156 | 157 | //Safari: This must occur before adding the object to the DOM. 158 | //IE: Does not like that this happens before, even if it is also added after. 159 | if(!browserDetector.isIE()) { 160 | object.data = "about:blank"; 161 | } 162 | 163 | element.appendChild(object); 164 | getState(element).object = object; 165 | 166 | //IE: This must occur after adding the object to the DOM. 167 | if(browserDetector.isIE()) { 168 | object.data = "about:blank"; 169 | } 170 | } 171 | 172 | if(batchProcessor) { 173 | batchProcessor.add(mutateDom); 174 | } else { 175 | mutateDom(); 176 | } 177 | } 178 | 179 | if(browserDetector.isIE(8)) { 180 | //IE 8 does not support objects properly. Luckily they do support the resize event. 181 | //So do not inject the object and notify that the element is already ready to be listened to. 182 | //The event handler for the resize event is attached in the utils.addListener instead. 183 | callback(element); 184 | } else { 185 | injectObject(element, callback); 186 | } 187 | } 188 | 189 | /** 190 | * Returns the child object of the target element. 191 | * @private 192 | * @param {element} element The target element. 193 | * @returns The object element of the target. 194 | */ 195 | function getObject(element) { 196 | return getState(element).object; 197 | } 198 | 199 | function uninstall(element) { 200 | if(browserDetector.isIE(8)) { 201 | element.detachEvent("onresize", getState(element).object.proxy); 202 | } else { 203 | element.removeChild(getObject(element)); 204 | } 205 | delete getState(element).object; 206 | } 207 | 208 | return { 209 | makeDetectable: makeDetectable, 210 | addListener: addListener, 211 | uninstall: uninstall 212 | }; 213 | }; 214 | -------------------------------------------------------------------------------- /src/element-resize-detector.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var forEach = require("./collection-utils").forEach; 4 | var elementUtilsMaker = require("./element-utils"); 5 | var listenerHandlerMaker = require("./listener-handler"); 6 | var idGeneratorMaker = require("./id-generator"); 7 | var idHandlerMaker = require("./id-handler"); 8 | var reporterMaker = require("./reporter"); 9 | var browserDetector = require("./browser-detector"); 10 | var batchProcessorMaker = require("batch-processor"); 11 | var stateHandler = require("./state-handler"); 12 | 13 | //Detection strategies. 14 | var objectStrategyMaker = require("./detection-strategy/object.js"); 15 | var scrollStrategyMaker = require("./detection-strategy/scroll.js"); 16 | 17 | function isCollection(obj) { 18 | return Array.isArray(obj) || obj.length !== undefined; 19 | } 20 | 21 | function toArray(collection) { 22 | if (!Array.isArray(collection)) { 23 | var array = []; 24 | forEach(collection, function (obj) { 25 | array.push(obj); 26 | }); 27 | return array; 28 | } else { 29 | return collection; 30 | } 31 | } 32 | 33 | function isElement(obj) { 34 | return obj && obj.nodeType === 1; 35 | } 36 | 37 | /** 38 | * @typedef idHandler 39 | * @type {object} 40 | * @property {function} get Gets the resize detector id of the element. 41 | * @property {function} set Generate and sets the resize detector id of the element. 42 | */ 43 | 44 | /** 45 | * @typedef Options 46 | * @type {object} 47 | * @property {boolean} callOnAdd Determines if listeners should be called when they are getting added. 48 | Default is true. If true, the listener is guaranteed to be called when it has been added. 49 | If false, the listener will not be guarenteed to be called when it has been added (does not prevent it from being called). 50 | * @property {idHandler} idHandler A custom id handler that is responsible for generating, setting and retrieving id's for elements. 51 | If not provided, a default id handler will be used. 52 | * @property {reporter} reporter A custom reporter that handles reporting logs, warnings and errors. 53 | If not provided, a default id handler will be used. 54 | If set to false, then nothing will be reported. 55 | * @property {boolean} debug If set to true, the the system will report debug messages as default for the listenTo method. 56 | */ 57 | 58 | /** 59 | * Creates an element resize detector instance. 60 | * @public 61 | * @param {Options?} options Optional global options object that will decide how this instance will work. 62 | */ 63 | module.exports = function(options) { 64 | options = options || {}; 65 | 66 | //idHandler is currently not an option to the listenTo function, so it should not be added to globalOptions. 67 | var idHandler; 68 | 69 | if (options.idHandler) { 70 | // To maintain compatability with idHandler.get(element, readonly), make sure to wrap the given idHandler 71 | // so that readonly flag always is true when it's used here. This may be removed next major version bump. 72 | idHandler = { 73 | get: function (element) { return options.idHandler.get(element, true); }, 74 | set: options.idHandler.set 75 | }; 76 | } else { 77 | var idGenerator = idGeneratorMaker(); 78 | var defaultIdHandler = idHandlerMaker({ 79 | idGenerator: idGenerator, 80 | stateHandler: stateHandler 81 | }); 82 | idHandler = defaultIdHandler; 83 | } 84 | 85 | //reporter is currently not an option to the listenTo function, so it should not be added to globalOptions. 86 | var reporter = options.reporter; 87 | 88 | if(!reporter) { 89 | //If options.reporter is false, then the reporter should be quiet. 90 | var quiet = reporter === false; 91 | reporter = reporterMaker(quiet); 92 | } 93 | 94 | //batchProcessor is currently not an option to the listenTo function, so it should not be added to globalOptions. 95 | var batchProcessor = getOption(options, "batchProcessor", batchProcessorMaker({ reporter: reporter })); 96 | 97 | //Options to be used as default for the listenTo function. 98 | var globalOptions = {}; 99 | globalOptions.callOnAdd = !!getOption(options, "callOnAdd", true); 100 | globalOptions.debug = !!getOption(options, "debug", false); 101 | 102 | var eventListenerHandler = listenerHandlerMaker(idHandler); 103 | var elementUtils = elementUtilsMaker({ 104 | stateHandler: stateHandler 105 | }); 106 | 107 | //The detection strategy to be used. 108 | var detectionStrategy; 109 | var desiredStrategy = getOption(options, "strategy", "object"); 110 | var strategyOptions = { 111 | reporter: reporter, 112 | batchProcessor: batchProcessor, 113 | stateHandler: stateHandler, 114 | idHandler: idHandler 115 | }; 116 | 117 | if(desiredStrategy === "scroll") { 118 | if (browserDetector.isLegacyOpera()) { 119 | reporter.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."); 120 | desiredStrategy = "object"; 121 | } else if (browserDetector.isIE(9)) { 122 | reporter.warn("Scroll strategy is not supported on IE9. Changing to object strategy."); 123 | desiredStrategy = "object"; 124 | } 125 | } 126 | 127 | if(desiredStrategy === "scroll") { 128 | detectionStrategy = scrollStrategyMaker(strategyOptions); 129 | } else if(desiredStrategy === "object") { 130 | detectionStrategy = objectStrategyMaker(strategyOptions); 131 | } else { 132 | throw new Error("Invalid strategy name: " + desiredStrategy); 133 | } 134 | 135 | //Calls can be made to listenTo with elements that are still being installed. 136 | //Also, same elements can occur in the elements list in the listenTo function. 137 | //With this map, the ready callbacks can be synchronized between the calls 138 | //so that the ready callback can always be called when an element is ready - even if 139 | //it wasn't installed from the function itself. 140 | var onReadyCallbacks = {}; 141 | 142 | /** 143 | * Makes the given elements resize-detectable and starts listening to resize events on the elements. Calls the event callback for each event for each element. 144 | * @public 145 | * @param {Options?} options Optional options object. These options will override the global options. Some options may not be overriden, such as idHandler. 146 | * @param {element[]|element} elements The given array of elements to detect resize events of. Single element is also valid. 147 | * @param {function} listener The callback to be executed for each resize event for each element. 148 | */ 149 | function listenTo(options, elements, listener) { 150 | function onResizeCallback(element) { 151 | var listeners = eventListenerHandler.get(element); 152 | forEach(listeners, function callListenerProxy(listener) { 153 | listener(element); 154 | }); 155 | } 156 | 157 | function addListener(callOnAdd, element, listener) { 158 | eventListenerHandler.add(element, listener); 159 | 160 | if(callOnAdd) { 161 | listener(element); 162 | } 163 | } 164 | 165 | //Options object may be omitted. 166 | if(!listener) { 167 | listener = elements; 168 | elements = options; 169 | options = {}; 170 | } 171 | 172 | if(!elements) { 173 | throw new Error("At least one element required."); 174 | } 175 | 176 | if(!listener) { 177 | throw new Error("Listener required."); 178 | } 179 | 180 | if (isElement(elements)) { 181 | // A single element has been passed in. 182 | elements = [elements]; 183 | } else if (isCollection(elements)) { 184 | // Convert collection to array for plugins. 185 | // TODO: May want to check so that all the elements in the collection are valid elements. 186 | elements = toArray(elements); 187 | } else { 188 | return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements."); 189 | } 190 | 191 | var elementsReady = 0; 192 | 193 | var callOnAdd = getOption(options, "callOnAdd", globalOptions.callOnAdd); 194 | var onReadyCallback = getOption(options, "onReady", function noop() {}); 195 | var debug = getOption(options, "debug", globalOptions.debug); 196 | 197 | forEach(elements, function attachListenerToElement(element) { 198 | if (!stateHandler.getState(element)) { 199 | stateHandler.initState(element); 200 | idHandler.set(element); 201 | } 202 | 203 | var id = idHandler.get(element); 204 | 205 | debug && reporter.log("Attaching listener to element", id, element); 206 | 207 | if(!elementUtils.isDetectable(element)) { 208 | debug && reporter.log(id, "Not detectable."); 209 | if(elementUtils.isBusy(element)) { 210 | debug && reporter.log(id, "System busy making it detectable"); 211 | 212 | //The element is being prepared to be detectable. Do not make it detectable. 213 | //Just add the listener, because the element will soon be detectable. 214 | addListener(callOnAdd, element, listener); 215 | onReadyCallbacks[id] = onReadyCallbacks[id] || []; 216 | onReadyCallbacks[id].push(function onReady() { 217 | elementsReady++; 218 | 219 | if(elementsReady === elements.length) { 220 | onReadyCallback(); 221 | } 222 | }); 223 | return; 224 | } 225 | 226 | debug && reporter.log(id, "Making detectable..."); 227 | //The element is not prepared to be detectable, so do prepare it and add a listener to it. 228 | elementUtils.markBusy(element, true); 229 | return detectionStrategy.makeDetectable({ debug: debug }, element, function onElementDetectable(element) { 230 | debug && reporter.log(id, "onElementDetectable"); 231 | 232 | if (stateHandler.getState(element)) { 233 | elementUtils.markAsDetectable(element); 234 | elementUtils.markBusy(element, false); 235 | detectionStrategy.addListener(element, onResizeCallback); 236 | addListener(callOnAdd, element, listener); 237 | 238 | // Since the element size might have changed since the call to "listenTo", we need to check for this change, 239 | // so that a resize event may be emitted. 240 | // Having the startSize object is optional (since it does not make sense in some cases such as unrendered elements), so check for its existance before. 241 | // Also, check the state existance before since the element may have been uninstalled in the installation process. 242 | var state = stateHandler.getState(element); 243 | if (state && state.startSize) { 244 | var width = element.offsetWidth; 245 | var height = element.offsetHeight; 246 | if (state.startSize.width !== width || state.startSize.height !== height) { 247 | onResizeCallback(element); 248 | } 249 | } 250 | 251 | if(onReadyCallbacks[id]) { 252 | forEach(onReadyCallbacks[id], function(callback) { 253 | callback(); 254 | }); 255 | } 256 | } else { 257 | // The element has been unisntalled before being detectable. 258 | debug && reporter.log(id, "Element uninstalled before being detectable."); 259 | } 260 | 261 | delete onReadyCallbacks[id]; 262 | 263 | elementsReady++; 264 | if(elementsReady === elements.length) { 265 | onReadyCallback(); 266 | } 267 | }); 268 | } 269 | 270 | debug && reporter.log(id, "Already detecable, adding listener."); 271 | 272 | //The element has been prepared to be detectable and is ready to be listened to. 273 | addListener(callOnAdd, element, listener); 274 | elementsReady++; 275 | }); 276 | 277 | if(elementsReady === elements.length) { 278 | onReadyCallback(); 279 | } 280 | } 281 | 282 | function uninstall(elements) { 283 | if(!elements) { 284 | return reporter.error("At least one element is required."); 285 | } 286 | 287 | if (isElement(elements)) { 288 | // A single element has been passed in. 289 | elements = [elements]; 290 | } else if (isCollection(elements)) { 291 | // Convert collection to array for plugins. 292 | // TODO: May want to check so that all the elements in the collection are valid elements. 293 | elements = toArray(elements); 294 | } else { 295 | return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements."); 296 | } 297 | 298 | forEach(elements, function (element) { 299 | eventListenerHandler.removeAllListeners(element); 300 | detectionStrategy.uninstall(element); 301 | stateHandler.cleanState(element); 302 | }); 303 | } 304 | 305 | return { 306 | listenTo: listenTo, 307 | removeListener: eventListenerHandler.removeListener, 308 | removeAllListeners: eventListenerHandler.removeAllListeners, 309 | uninstall: uninstall 310 | }; 311 | }; 312 | 313 | function getOption(options, name, defaultValue) { 314 | var value = options[name]; 315 | 316 | if((value === undefined || value === null) && defaultValue !== undefined) { 317 | return defaultValue; 318 | } 319 | 320 | return value; 321 | } 322 | -------------------------------------------------------------------------------- /dist/element-resize-detector.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * element-resize-detector 1.1.9 3 | * Copyright (c) 2016 Lucas Wiener 4 | * https://github.com/wnr/element-resize-detector 5 | * Licensed under MIT 6 | */ 7 | 8 | !function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.elementResizeDetectorMaker=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;gf?f=a:g>a&&(g=a),d[a]||(d[a]=[]),d[a].push(b),e++}function b(){for(var a=g;f>=a;a++)for(var b=d[a],c=0;c";while(d[0]);return b>4?b:a}();return a===c},d.isLegacyOpera=function(){return!!window.opera}},{}],4:[function(a,b,c){"use strict";var d=b.exports={};d.forEach=function(a,b){for(var c=0;c div::-webkit-scrollbar { display: none; }\n\n",f+="."+e+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+d+"; animation-name: "+d+"; }\n",f+="@-webkit-keyframes "+d+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",f+="@keyframes "+d+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }",c(f)}}function e(a){a.className+=" "+s+"_animation_active"}function f(a,b,c){if(a.addEventListener)a.addEventListener(b,c);else{if(!a.attachEvent)return m.error("[scroll] Don't know how to add event listeners.");a.attachEvent("on"+b,c)}}function g(a,b,c){if(a.removeEventListener)a.removeEventListener(b,c);else{if(!a.detachEvent)return m.error("[scroll] Don't know how to remove event listeners.");a.detachEvent("on"+b,c)}}function h(a){return o(a).container.childNodes[0].childNodes[0].childNodes[0]}function i(a){return o(a).container.childNodes[0].childNodes[0].childNodes[1]}function j(a,b){var c=o(a).listeners;if(!c.push)throw new Error("Cannot add listener to an element that is not detectable.");o(a).listeners.push(b)}function k(a,b,c){function g(){if(a.debug){var c=Array.prototype.slice.call(arguments);if(c.unshift(p.get(b),"Scroll: "),m.log.apply)m.log.apply(null,c);else for(var d=0;de;++e)if(d[e]===c){d.splice(e,1);break}}function e(a){var c=b(a);c&&(c.length=0)}var f={};return{get:b,add:c,removeListener:d,removeAllListeners:e}}},{}],12:[function(a,b,c){"use strict";b.exports=function(a){function b(){}var c={log:b,warn:b,error:b};if(!a&&window.console){var d=function(a,b){a[b]=function(){var a=console[b];if(a.apply)a.apply(console,arguments);else for(var c=0;c div::-webkit-scrollbar { display: none; }\n\n"; 78 | style += "." + containerAnimationActiveClass + " { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: " + containerAnimationClass + "; animation-name: " + containerAnimationClass + "; }\n"; 79 | style += "@-webkit-keyframes " + containerAnimationClass + " { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n"; 80 | style += "@keyframes " + containerAnimationClass + " { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }"; 81 | injectStyle(style); 82 | } 83 | } 84 | 85 | function addAnimationClass(element) { 86 | element.className += " " + detectionContainerClass + "_animation_active"; 87 | } 88 | 89 | function addEvent(el, name, cb) { 90 | if (el.addEventListener) { 91 | el.addEventListener(name, cb); 92 | } else if(el.attachEvent) { 93 | el.attachEvent("on" + name, cb); 94 | } else { 95 | return reporter.error("[scroll] Don't know how to add event listeners."); 96 | } 97 | } 98 | 99 | function removeEvent(el, name, cb) { 100 | if (el.removeEventListener) { 101 | el.removeEventListener(name, cb); 102 | } else if(el.detachEvent) { 103 | el.detachEvent("on" + name, cb); 104 | } else { 105 | return reporter.error("[scroll] Don't know how to remove event listeners."); 106 | } 107 | } 108 | 109 | function getExpandElement(element) { 110 | return getState(element).container.childNodes[0].childNodes[0].childNodes[0]; 111 | } 112 | 113 | function getShrinkElement(element) { 114 | return getState(element).container.childNodes[0].childNodes[0].childNodes[1]; 115 | } 116 | 117 | /** 118 | * Adds a resize event listener to the element. 119 | * @public 120 | * @param {element} element The element that should have the listener added. 121 | * @param {function} listener The listener callback to be called for each resize event of the element. The element will be given as a parameter to the listener callback. 122 | */ 123 | function addListener(element, listener) { 124 | var listeners = getState(element).listeners; 125 | 126 | if (!listeners.push) { 127 | throw new Error("Cannot add listener to an element that is not detectable."); 128 | } 129 | 130 | getState(element).listeners.push(listener); 131 | } 132 | 133 | /** 134 | * Makes an element detectable and ready to be listened for resize events. Will call the callback when the element is ready to be listened for resize changes. 135 | * @private 136 | * @param {object} options Optional options object. 137 | * @param {element} element The element to make detectable 138 | * @param {function} callback The callback to be called when the element is ready to be listened for resize changes. Will be called with the element as first parameter. 139 | */ 140 | function makeDetectable(options, element, callback) { 141 | if (!callback) { 142 | callback = element; 143 | element = options; 144 | options = null; 145 | } 146 | 147 | options = options || {}; 148 | 149 | function debug() { 150 | if (options.debug) { 151 | var args = Array.prototype.slice.call(arguments); 152 | args.unshift(idHandler.get(element), "Scroll: "); 153 | if (reporter.log.apply) { 154 | reporter.log.apply(null, args); 155 | } else { 156 | for (var i = 0; i < args.length; i++) { 157 | reporter.log(args[i]); 158 | } 159 | } 160 | } 161 | } 162 | 163 | function isDetached(element) { 164 | function isInDocument(element) { 165 | return element === element.ownerDocument.body || element.ownerDocument.body.contains(element); 166 | } 167 | return !isInDocument(element); 168 | } 169 | 170 | function isUnrendered(element) { 171 | // Check the absolute positioned container since the top level container is display: inline. 172 | var container = getState(element).container.childNodes[0]; 173 | return !container || getComputedStyle(container).width.indexOf("px") === -1; //Can only compute pixel value when rendered. 174 | } 175 | 176 | function getStyle() { 177 | // Some browsers only force layouts when actually reading the style properties of the style object, so make sure that they are all read here, 178 | // so that the user of the function can be sure that it will perform the layout here, instead of later (important for batching). 179 | var elementStyle = getComputedStyle(element); 180 | var style = {}; 181 | style.position = elementStyle.position; 182 | style.width = element.offsetWidth; 183 | style.height = element.offsetHeight; 184 | style.top = elementStyle.top; 185 | style.right = elementStyle.right; 186 | style.bottom = elementStyle.bottom; 187 | style.left = elementStyle.left; 188 | style.widthCSS = elementStyle.width; 189 | style.heightCSS = elementStyle.height; 190 | return style; 191 | } 192 | 193 | function storeStartSize() { 194 | var style = getStyle(); 195 | getState(element).startSize = { 196 | width: style.width, 197 | height: style.height 198 | }; 199 | debug("Element start size", getState(element).startSize); 200 | } 201 | 202 | function initListeners() { 203 | getState(element).listeners = []; 204 | } 205 | 206 | function storeStyle() { 207 | debug("storeStyle invoked."); 208 | if (!getState(element)) { 209 | debug("Aborting because element has been uninstalled"); 210 | return; 211 | } 212 | 213 | var style = getStyle(); 214 | getState(element).style = style; 215 | } 216 | 217 | function storeCurrentSize(element, width, height) { 218 | getState(element).lastWidth = width; 219 | getState(element).lastHeight = height; 220 | } 221 | 222 | function getExpandChildElement(element) { 223 | return getExpandElement(element).childNodes[0]; 224 | } 225 | 226 | function getWidthOffset() { 227 | return 2 * scrollbarSizes.width + 1; 228 | } 229 | 230 | function getHeightOffset() { 231 | return 2 * scrollbarSizes.height + 1; 232 | } 233 | 234 | function getExpandWidth(width) { 235 | return width + 10 + getWidthOffset(); 236 | } 237 | 238 | function getExpandHeight(height) { 239 | return height + 10 + getHeightOffset(); 240 | } 241 | 242 | function getShrinkWidth(width) { 243 | return width * 2 + getWidthOffset(); 244 | } 245 | 246 | function getShrinkHeight(height) { 247 | return height * 2 + getHeightOffset(); 248 | } 249 | 250 | function positionScrollbars(element, width, height) { 251 | var expand = getExpandElement(element); 252 | var shrink = getShrinkElement(element); 253 | var expandWidth = getExpandWidth(width); 254 | var expandHeight = getExpandHeight(height); 255 | var shrinkWidth = getShrinkWidth(width); 256 | var shrinkHeight = getShrinkHeight(height); 257 | expand.scrollLeft = expandWidth; 258 | expand.scrollTop = expandHeight; 259 | shrink.scrollLeft = shrinkWidth; 260 | shrink.scrollTop = shrinkHeight; 261 | } 262 | 263 | function injectContainerElement() { 264 | var container = getState(element).container; 265 | 266 | if (!container) { 267 | container = document.createElement("div"); 268 | container.className = detectionContainerClass; 269 | container.style.cssText = "visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;"; 270 | getState(element).container = container; 271 | addAnimationClass(container); 272 | element.appendChild(container); 273 | 274 | var onAnimationStart = function () { 275 | getState(element).onRendered && getState(element).onRendered(); 276 | }; 277 | 278 | addEvent(container, "animationstart", onAnimationStart); 279 | 280 | // Store the event handler here so that they may be removed when uninstall is called. 281 | // See uninstall function for an explanation why it is needed. 282 | getState(element).onAnimationStart = onAnimationStart; 283 | } 284 | 285 | return container; 286 | } 287 | 288 | function injectScrollElements() { 289 | function alterPositionStyles() { 290 | var style = getState(element).style; 291 | 292 | if(style.position === "static") { 293 | element.style.position = "relative"; 294 | 295 | var removeRelativeStyles = function(reporter, element, style, property) { 296 | function getNumericalValue(value) { 297 | return value.replace(/[^-\d\.]/g, ""); 298 | } 299 | 300 | var value = style[property]; 301 | 302 | if(value !== "auto" && getNumericalValue(value) !== "0") { 303 | reporter.warn("An element that is positioned static has style." + property + "=" + value + " which is ignored due to the static positioning. The element will need to be positioned relative, so the style." + property + " will be set to 0. Element: ", element); 304 | element.style[property] = 0; 305 | } 306 | }; 307 | 308 | //Check so that there are no accidental styles that will make the element styled differently now that is is relative. 309 | //If there are any, set them to 0 (this should be okay with the user since the style properties did nothing before [since the element was positioned static] anyway). 310 | removeRelativeStyles(reporter, element, style, "top"); 311 | removeRelativeStyles(reporter, element, style, "right"); 312 | removeRelativeStyles(reporter, element, style, "bottom"); 313 | removeRelativeStyles(reporter, element, style, "left"); 314 | } 315 | } 316 | 317 | function getLeftTopBottomRightCssText(left, top, bottom, right) { 318 | left = (!left ? "0" : (left + "px")); 319 | top = (!top ? "0" : (top + "px")); 320 | bottom = (!bottom ? "0" : (bottom + "px")); 321 | right = (!right ? "0" : (right + "px")); 322 | 323 | return "left: " + left + "; top: " + top + "; right: " + right + "; bottom: " + bottom + ";"; 324 | } 325 | 326 | debug("Injecting elements"); 327 | 328 | if (!getState(element)) { 329 | debug("Aborting because element has been uninstalled"); 330 | return; 331 | } 332 | 333 | alterPositionStyles(); 334 | 335 | var rootContainer = getState(element).container; 336 | 337 | if (!rootContainer) { 338 | rootContainer = injectContainerElement(); 339 | } 340 | 341 | // Due to this WebKit bug https://bugs.webkit.org/show_bug.cgi?id=80808 (currently fixed in Blink, but still present in WebKit browsers such as Safari), 342 | // we need to inject two containers, one that is width/height 100% and another that is left/top -1px so that the final container always is 1x1 pixels bigger than 343 | // the targeted element. 344 | // When the bug is resolved, "containerContainer" may be removed. 345 | 346 | // The outer container can occasionally be less wide than the targeted when inside inline elements element in WebKit (see https://bugs.webkit.org/show_bug.cgi?id=152980). 347 | // This should be no problem since the inner container either way makes sure the injected scroll elements are at least 1x1 px. 348 | 349 | var scrollbarWidth = scrollbarSizes.width; 350 | var scrollbarHeight = scrollbarSizes.height; 351 | var containerContainerStyle = "position: absolute; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;"; 352 | var containerStyle = "position: absolute; overflow: hidden; z-index: -1; visibility: hidden; " + getLeftTopBottomRightCssText(-(1 + scrollbarWidth), -(1 + scrollbarHeight), -scrollbarHeight, -scrollbarWidth); 353 | var expandStyle = "position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;"; 354 | var shrinkStyle = "position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;"; 355 | var expandChildStyle = "position: absolute; left: 0; top: 0;"; 356 | var shrinkChildStyle = "position: absolute; width: 200%; height: 200%;"; 357 | 358 | var containerContainer = document.createElement("div"); 359 | var container = document.createElement("div"); 360 | var expand = document.createElement("div"); 361 | var expandChild = document.createElement("div"); 362 | var shrink = document.createElement("div"); 363 | var shrinkChild = document.createElement("div"); 364 | 365 | // Some browsers choke on the resize system being rtl, so force it to ltr. https://github.com/wnr/element-resize-detector/issues/56 366 | // However, dir should not be set on the top level container as it alters the dimensions of the target element in some browsers. 367 | containerContainer.dir = "ltr"; 368 | 369 | containerContainer.style.cssText = containerContainerStyle; 370 | containerContainer.className = detectionContainerClass; 371 | container.className = detectionContainerClass; 372 | container.style.cssText = containerStyle; 373 | expand.style.cssText = expandStyle; 374 | expandChild.style.cssText = expandChildStyle; 375 | shrink.style.cssText = shrinkStyle; 376 | shrinkChild.style.cssText = shrinkChildStyle; 377 | 378 | expand.appendChild(expandChild); 379 | shrink.appendChild(shrinkChild); 380 | container.appendChild(expand); 381 | container.appendChild(shrink); 382 | containerContainer.appendChild(container); 383 | rootContainer.appendChild(containerContainer); 384 | 385 | function onExpandScroll() { 386 | getState(element).onExpand && getState(element).onExpand(); 387 | } 388 | 389 | function onShrinkScroll() { 390 | getState(element).onShrink && getState(element).onShrink(); 391 | } 392 | 393 | addEvent(expand, "scroll", onExpandScroll); 394 | addEvent(shrink, "scroll", onShrinkScroll); 395 | 396 | // Store the event handlers here so that they may be removed when uninstall is called. 397 | // See uninstall function for an explanation why it is needed. 398 | getState(element).onExpandScroll = onExpandScroll; 399 | getState(element).onShrinkScroll = onShrinkScroll; 400 | } 401 | 402 | function registerListenersAndPositionElements() { 403 | function updateChildSizes(element, width, height) { 404 | var expandChild = getExpandChildElement(element); 405 | var expandWidth = getExpandWidth(width); 406 | var expandHeight = getExpandHeight(height); 407 | expandChild.style.width = expandWidth + "px"; 408 | expandChild.style.height = expandHeight + "px"; 409 | } 410 | 411 | function updateDetectorElements(done) { 412 | var width = element.offsetWidth; 413 | var height = element.offsetHeight; 414 | 415 | debug("Storing current size", width, height); 416 | 417 | // Store the size of the element sync here, so that multiple scroll events may be ignored in the event listeners. 418 | // Otherwise the if-check in handleScroll is useless. 419 | storeCurrentSize(element, width, height); 420 | 421 | // Since we delay the processing of the batch, there is a risk that uninstall has been called before the batch gets to execute. 422 | // Since there is no way to cancel the fn executions, we need to add an uninstall guard to all fns of the batch. 423 | 424 | batchProcessor.add(0, function performUpdateChildSizes() { 425 | if (!getState(element)) { 426 | debug("Aborting because element has been uninstalled"); 427 | return; 428 | } 429 | 430 | if (options.debug) { 431 | var w = element.offsetWidth; 432 | var h = element.offsetHeight; 433 | 434 | if (w !== width || h !== height) { 435 | reporter.warn(idHandler.get(element), "Scroll: Size changed before updating detector elements."); 436 | } 437 | } 438 | 439 | updateChildSizes(element, width, height); 440 | }); 441 | 442 | batchProcessor.add(1, function updateScrollbars() { 443 | if (!getState(element)) { 444 | debug("Aborting because element has been uninstalled"); 445 | return; 446 | } 447 | 448 | positionScrollbars(element, width, height); 449 | }); 450 | 451 | if (done) { 452 | batchProcessor.add(2, function () { 453 | if (!getState(element)) { 454 | debug("Aborting because element has been uninstalled"); 455 | return; 456 | } 457 | 458 | done(); 459 | }); 460 | } 461 | } 462 | 463 | function areElementsInjected() { 464 | return !!getState(element).container; 465 | } 466 | 467 | function notifyListenersIfNeeded() { 468 | function isFirstNotify() { 469 | return getState(element).lastNotifiedWidth === undefined; 470 | } 471 | 472 | debug("notifyListenersIfNeeded invoked"); 473 | 474 | var state = getState(element); 475 | 476 | // Don't notify the if the current size is the start size, and this is the first notification. 477 | if (isFirstNotify() && state.lastWidth === state.startSize.width && state.lastHeight === state.startSize.height) { 478 | return debug("Not notifying: Size is the same as the start size, and there has been no notification yet."); 479 | } 480 | 481 | // Don't notify if the size already has been notified. 482 | if (state.lastWidth === state.lastNotifiedWidth && state.lastHeight === state.lastNotifiedHeight) { 483 | return debug("Not notifying: Size already notified"); 484 | } 485 | 486 | 487 | debug("Current size not notified, notifying..."); 488 | state.lastNotifiedWidth = state.lastWidth; 489 | state.lastNotifiedHeight = state.lastHeight; 490 | forEach(getState(element).listeners, function (listener) { 491 | listener(element); 492 | }); 493 | } 494 | 495 | function handleRender() { 496 | debug("startanimation triggered."); 497 | 498 | if (isUnrendered(element)) { 499 | debug("Ignoring since element is still unrendered..."); 500 | return; 501 | } 502 | 503 | debug("Element rendered."); 504 | var expand = getExpandElement(element); 505 | var shrink = getShrinkElement(element); 506 | if (expand.scrollLeft === 0 || expand.scrollTop === 0 || shrink.scrollLeft === 0 || shrink.scrollTop === 0) { 507 | debug("Scrollbars out of sync. Updating detector elements..."); 508 | updateDetectorElements(notifyListenersIfNeeded); 509 | } 510 | } 511 | 512 | function handleScroll() { 513 | debug("Scroll detected."); 514 | 515 | if (isUnrendered(element)) { 516 | // Element is still unrendered. Skip this scroll event. 517 | debug("Scroll event fired while unrendered. Ignoring..."); 518 | return; 519 | } 520 | 521 | var width = element.offsetWidth; 522 | var height = element.offsetHeight; 523 | 524 | if (width !== element.lastWidth || height !== element.lastHeight) { 525 | debug("Element size changed."); 526 | updateDetectorElements(notifyListenersIfNeeded); 527 | } else { 528 | debug("Element size has not changed (" + width + "x" + height + ")."); 529 | } 530 | } 531 | 532 | debug("registerListenersAndPositionElements invoked."); 533 | 534 | if (!getState(element)) { 535 | debug("Aborting because element has been uninstalled"); 536 | return; 537 | } 538 | 539 | getState(element).onRendered = handleRender; 540 | getState(element).onExpand = handleScroll; 541 | getState(element).onShrink = handleScroll; 542 | 543 | var style = getState(element).style; 544 | updateChildSizes(element, style.width, style.height); 545 | } 546 | 547 | function finalizeDomMutation() { 548 | debug("finalizeDomMutation invoked."); 549 | 550 | if (!getState(element)) { 551 | debug("Aborting because element has been uninstalled"); 552 | return; 553 | } 554 | 555 | var style = getState(element).style; 556 | storeCurrentSize(element, style.width, style.height); 557 | positionScrollbars(element, style.width, style.height); 558 | } 559 | 560 | function ready() { 561 | callback(element); 562 | } 563 | 564 | function install() { 565 | debug("Installing..."); 566 | initListeners(); 567 | storeStartSize(); 568 | 569 | batchProcessor.add(0, storeStyle); 570 | batchProcessor.add(1, injectScrollElements); 571 | batchProcessor.add(2, registerListenersAndPositionElements); 572 | batchProcessor.add(3, finalizeDomMutation); 573 | batchProcessor.add(4, ready); 574 | } 575 | 576 | debug("Making detectable..."); 577 | 578 | if (isDetached(element)) { 579 | debug("Element is detached"); 580 | 581 | injectContainerElement(); 582 | 583 | debug("Waiting until element is attached..."); 584 | 585 | getState(element).onRendered = function () { 586 | debug("Element is now attached"); 587 | install(); 588 | }; 589 | } else { 590 | install(); 591 | } 592 | } 593 | 594 | function uninstall(element) { 595 | var state = getState(element); 596 | 597 | if (!state) { 598 | // Uninstall has been called on a non-erd element. 599 | return; 600 | } 601 | 602 | // Uninstall may have been called in the following scenarios: 603 | // (1) Right between the sync code and async batch (here state.busy = true, but nothing have been registered or injected). 604 | // (2) In the ready callback of the last level of the batch by another element (here, state.busy = true, but all the stuff has been injected). 605 | // (3) After the installation process (here, state.busy = false and all the stuff has been injected). 606 | // So to be on the safe side, let's check for each thing before removing. 607 | 608 | // We need to remove the event listeners, because otherwise the event might fire on an uninstall element which results in an error when trying to get the state of the element. 609 | state.onExpandScroll && removeEvent(getExpandElement(element), "scroll", state.onExpandScroll); 610 | state.onShrinkScroll && removeEvent(getShrinkElement(element), "scroll", state.onShrinkScroll); 611 | state.onAnimationStart && removeEvent(state.container, "animationstart", state.onAnimationStart); 612 | 613 | state.container && element.removeChild(state.container); 614 | } 615 | 616 | return { 617 | makeDetectable: makeDetectable, 618 | addListener: addListener, 619 | uninstall: uninstall 620 | }; 621 | }; 622 | -------------------------------------------------------------------------------- /test/element-resize-detector_test.js: -------------------------------------------------------------------------------- 1 | /* global describe:false, it:false, beforeEach:false, expect:false, elementResizeDetectorMaker:false, _:false, $:false, jasmine:false */ 2 | 3 | "use strict"; 4 | 5 | function ensureMapEqual(before, after, ignore) { 6 | var beforeKeys = _.keys(before); 7 | var afterKeys = _.keys(after); 8 | 9 | var unionKeys = _.union(beforeKeys, afterKeys); 10 | 11 | var diffValueKeys = _.filter(unionKeys, function(key) { 12 | var beforeValue = before[key]; 13 | var afterValue = after[key]; 14 | return !ignore(key, beforeValue, afterValue) && beforeValue !== afterValue; 15 | }); 16 | 17 | if(diffValueKeys.length) { 18 | var beforeDiffObject = {}; 19 | var afterDiffObject = {}; 20 | 21 | _.forEach(diffValueKeys, function(key) { 22 | beforeDiffObject[key] = before[key]; 23 | afterDiffObject[key] = after[key]; 24 | }); 25 | 26 | expect(afterDiffObject).toEqual(beforeDiffObject); 27 | } 28 | } 29 | 30 | function getStyle(element) { 31 | function clone(styleObject) { 32 | var clonedTarget = {}; 33 | _.forEach(styleObject.cssText.split(";").slice(0, -1), function(declaration){ 34 | var colonPos = declaration.indexOf(":"); 35 | var attr = declaration.slice(0, colonPos).trim(); 36 | if(attr.indexOf("-") === -1){ // Remove attributes like "background-image", leaving "backgroundImage" 37 | clonedTarget[attr] = declaration.slice(colonPos+2); 38 | } 39 | }); 40 | return clonedTarget; 41 | } 42 | 43 | var style = getComputedStyle(element); 44 | return clone(style); 45 | } 46 | 47 | function getAttributes(element) { 48 | var attrs = {}; 49 | _.forEach(element.attributes, function(attr) { 50 | attrs[attr.nodeName] = attr.value; 51 | }); 52 | return attrs; 53 | } 54 | 55 | var ensureAttributes = ensureMapEqual; 56 | 57 | var reporter = { 58 | log: function() { 59 | throw new Error("Reporter.log should not be called"); 60 | }, 61 | warn: function() { 62 | throw new Error("Reporter.warn should not be called"); 63 | }, 64 | error: function() { 65 | throw new Error("Reporter.error should not be called"); 66 | } 67 | }; 68 | 69 | $("body").prepend("
"); 70 | 71 | function listenToTest(strategy) { 72 | describe("[" + strategy + "] listenTo", function() { 73 | it("should be able to attach a listener to an element", function(done) { 74 | var erd = elementResizeDetectorMaker({ 75 | callOnAdd: false, 76 | reporter: reporter, 77 | strategy: strategy 78 | }); 79 | 80 | var listener = jasmine.createSpy("listener"); 81 | 82 | erd.listenTo($("#test")[0], listener); 83 | 84 | setTimeout(function() { 85 | $("#test").width(300); 86 | }, 200); 87 | 88 | setTimeout(function() { 89 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 90 | done(); 91 | }, 400); 92 | }); 93 | 94 | it("should throw on invalid parameters", function() { 95 | var erd = elementResizeDetectorMaker({ 96 | callOnAdd: false, 97 | reporter: reporter, 98 | strategy: strategy 99 | }); 100 | 101 | expect(erd.listenTo).toThrow(); 102 | 103 | expect(_.partial(erd.listenTo, $("#test")[0])).toThrow(); 104 | }); 105 | 106 | describe("option.onReady", function() { 107 | it("should be called when installing a listener to an element", function(done) { 108 | var erd = elementResizeDetectorMaker({ 109 | callOnAdd: false, 110 | reporter: reporter, 111 | strategy: strategy 112 | }); 113 | 114 | var listener = jasmine.createSpy("listener"); 115 | 116 | erd.listenTo({ 117 | onReady: function() { 118 | $("#test").width(200); 119 | setTimeout(function() { 120 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 121 | done(); 122 | }, 200); 123 | } 124 | }, $("#test")[0], listener); 125 | }); 126 | 127 | it("should be called when all elements are ready", function(done) { 128 | var erd = elementResizeDetectorMaker({ 129 | callOnAdd: false, 130 | reporter: reporter, 131 | strategy: strategy 132 | }); 133 | 134 | var listener = jasmine.createSpy("listener"); 135 | 136 | erd.listenTo({ 137 | onReady: function() { 138 | $("#test").width(200); 139 | $("#test2").width(300); 140 | setTimeout(function() { 141 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 142 | expect(listener).toHaveBeenCalledWith($("#test2")[0]); 143 | done(); 144 | }, 200); 145 | } 146 | }, $("#test, #test2"), listener); 147 | }); 148 | 149 | it("should be able to handle listeners for the same element but different calls", function(done) { 150 | var erd = elementResizeDetectorMaker({ 151 | callOnAdd: false, 152 | reporter: reporter, 153 | strategy: strategy 154 | }); 155 | 156 | var onReady1 = jasmine.createSpy("listener"); 157 | var onReady2 = jasmine.createSpy("listener"); 158 | 159 | erd.listenTo({ 160 | onReady: onReady1 161 | }, $("#test"), function noop() {}); 162 | erd.listenTo({ 163 | onReady: onReady2 164 | }, $("#test"), function noop() {}); 165 | 166 | setTimeout(function() { 167 | expect(onReady1.calls.count()).toBe(1); 168 | expect(onReady2.calls.count()).toBe(1); 169 | done(); 170 | }, 300); 171 | }); 172 | 173 | it("should be able to handle when elements occur multiple times in the same call (and other calls)", function(done) { 174 | var erd = elementResizeDetectorMaker({ 175 | callOnAdd: false, 176 | reporter: reporter, 177 | strategy: strategy 178 | }); 179 | 180 | var onReady1 = jasmine.createSpy("listener"); 181 | var onReady2 = jasmine.createSpy("listener"); 182 | 183 | erd.listenTo({ 184 | onReady: onReady1 185 | }, [$("#test")[0], $("#test")[0]], function noop() {}); 186 | erd.listenTo({ 187 | onReady: onReady2 188 | }, $("#test"), function noop() {}); 189 | 190 | setTimeout(function() { 191 | expect(onReady1.calls.count()).toBe(1); 192 | expect(onReady2.calls.count()).toBe(1); 193 | done(); 194 | }, 300); 195 | }); 196 | }); 197 | 198 | it("should be able to attach multiple listeners to an element", function(done) { 199 | var erd = elementResizeDetectorMaker({ 200 | callOnAdd: false, 201 | reporter: reporter, 202 | strategy: strategy 203 | }); 204 | 205 | var listener1 = jasmine.createSpy("listener1"); 206 | var listener2 = jasmine.createSpy("listener2"); 207 | 208 | erd.listenTo($("#test")[0], listener1); 209 | erd.listenTo($("#test")[0], listener2); 210 | 211 | setTimeout(function() { 212 | $("#test").width(300); 213 | }, 200); 214 | 215 | setTimeout(function() { 216 | expect(listener1).toHaveBeenCalledWith($("#test")[0]); 217 | expect(listener2).toHaveBeenCalledWith($("#test")[0]); 218 | done(); 219 | }, 400); 220 | }); 221 | 222 | it("should be able to attach a listener to an element multiple times within the same call", function(done) { 223 | var erd = elementResizeDetectorMaker({ 224 | callOnAdd: false, 225 | reporter: reporter, 226 | strategy: strategy 227 | }); 228 | 229 | var listener1 = jasmine.createSpy("listener1"); 230 | 231 | erd.listenTo([$("#test")[0], $("#test")[0]], listener1); 232 | 233 | setTimeout(function() { 234 | $("#test").width(300); 235 | }, 200); 236 | 237 | setTimeout(function() { 238 | expect(listener1).toHaveBeenCalledWith($("#test")[0]); 239 | expect(listener1.calls.count()).toBe(2); 240 | done(); 241 | }, 400); 242 | }); 243 | 244 | it("should be able to attach listeners to multiple elements", function(done) { 245 | var erd = elementResizeDetectorMaker({ 246 | callOnAdd: false, 247 | reporter: reporter, 248 | strategy: strategy 249 | }); 250 | 251 | var listener1 = jasmine.createSpy("listener1"); 252 | 253 | erd.listenTo($("#test, #test2"), listener1); 254 | 255 | setTimeout(function() { 256 | $("#test").width(200); 257 | }, 200); 258 | 259 | setTimeout(function() { 260 | expect(listener1).toHaveBeenCalledWith($("#test")[0]); 261 | }, 400); 262 | 263 | setTimeout(function() { 264 | $("#test2").width(500); 265 | }, 600); 266 | 267 | setTimeout(function() { 268 | expect(listener1).toHaveBeenCalledWith($("#test2")[0]); 269 | done(); 270 | }, 800); 271 | }); 272 | 273 | //Only run this test if the browser actually is able to get the computed style of an element. 274 | //Only IE8 is lacking the getComputedStyle method. 275 | if(window.getComputedStyle) { 276 | it("should keep the style of the element intact", function(done) { 277 | var erd = elementResizeDetectorMaker({ 278 | callOnAdd: false, 279 | reporter: reporter, 280 | strategy: strategy 281 | }); 282 | 283 | function ignoreStyleChange(key, before, after) { 284 | return (key === "position" && before === "static" && after === "relative") || 285 | (/^(top|right|bottom|left)$/.test(key) && before === "auto" && after === "0px"); 286 | } 287 | 288 | var beforeComputedStyle = getStyle($("#test")[0]); 289 | erd.listenTo($("#test")[0], _.noop); 290 | var afterComputedStyle = getStyle($("#test")[0]); 291 | ensureMapEqual(beforeComputedStyle, afterComputedStyle, ignoreStyleChange); 292 | 293 | //Test styles async since making an element listenable is async. 294 | setTimeout(function() { 295 | var afterComputedStyleAsync = getStyle($("#test")[0]); 296 | ensureMapEqual(beforeComputedStyle, afterComputedStyleAsync, ignoreStyleChange); 297 | expect(true).toEqual(true); // Needed so that jasmine does not warn about no expects in the test (the actual expects are in the ensureMapEqual). 298 | done(); 299 | }, 200); 300 | }); 301 | } 302 | 303 | describe("options.callOnAdd", function() { 304 | it("should be true default and call all functions when listenTo succeeds", function(done) { 305 | var erd = elementResizeDetectorMaker({ 306 | reporter: reporter, 307 | strategy: strategy 308 | }); 309 | 310 | var listener = jasmine.createSpy("listener"); 311 | var listener2 = jasmine.createSpy("listener2"); 312 | 313 | erd.listenTo($("#test")[0], listener); 314 | erd.listenTo($("#test")[0], listener2); 315 | 316 | setTimeout(function() { 317 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 318 | expect(listener2).toHaveBeenCalledWith($("#test")[0]); 319 | listener.calls.reset(); 320 | listener2.calls.reset(); 321 | $("#test").width(300); 322 | }, 200); 323 | 324 | setTimeout(function() { 325 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 326 | expect(listener2).toHaveBeenCalledWith($("#test")[0]); 327 | done(); 328 | }, 400); 329 | }); 330 | 331 | it("should call listener multiple times when listening to multiple elements", function(done) { 332 | var erd = elementResizeDetectorMaker({ 333 | reporter: reporter, 334 | strategy: strategy 335 | }); 336 | 337 | var listener1 = jasmine.createSpy("listener1"); 338 | erd.listenTo($("#test, #test2"), listener1); 339 | 340 | setTimeout(function() { 341 | expect(listener1).toHaveBeenCalledWith($("#test")[0]); 342 | expect(listener1).toHaveBeenCalledWith($("#test2")[0]); 343 | done(); 344 | }, 200); 345 | }); 346 | }); 347 | 348 | it("should call listener if the element is changed synchronously after listenTo", function(done) { 349 | var erd = elementResizeDetectorMaker({ 350 | callOnAdd: false, 351 | reporter: reporter, 352 | strategy: strategy 353 | }); 354 | 355 | var listener1 = jasmine.createSpy("listener1"); 356 | erd.listenTo($("#test"), listener1); 357 | $("#test").width(200); 358 | 359 | setTimeout(function() { 360 | expect(listener1).toHaveBeenCalledWith($("#test")[0]); 361 | done(); 362 | }, 200); 363 | }); 364 | 365 | it("should not emit resize when listenTo is called", function (done) { 366 | var erd = elementResizeDetectorMaker({ 367 | callOnAdd: false, 368 | reporter: reporter, 369 | strategy: strategy 370 | }); 371 | 372 | var listener1 = jasmine.createSpy("listener1"); 373 | erd.listenTo($("#test"), listener1); 374 | 375 | setTimeout(function() { 376 | expect(listener1).not.toHaveBeenCalledWith($("#test")[0]); 377 | done(); 378 | }, 200); 379 | }); 380 | 381 | it("should not emit resize event even though the element is back to its start size", function (done) { 382 | var erd = elementResizeDetectorMaker({ 383 | callOnAdd: false, 384 | reporter: reporter, 385 | strategy: strategy 386 | }); 387 | 388 | var listener = jasmine.createSpy("listener1"); 389 | $("#test").width(200); 390 | erd.listenTo($("#test"), listener); 391 | 392 | setTimeout(function() { 393 | expect(listener).not.toHaveBeenCalledWith($("#test")[0]); 394 | listener.calls.reset(); 395 | $("#test").width(100); 396 | }, 200); 397 | 398 | setTimeout(function() { 399 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 400 | listener.calls.reset(); 401 | $("#test").width(200); 402 | }, 400); 403 | 404 | setTimeout(function() { 405 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 406 | done(); 407 | }, 600); 408 | }); 409 | 410 | it("should use the option.idHandler if present", function(done) { 411 | var ID_ATTR = "some-fancy-id-attr"; 412 | 413 | var idHandler = { 414 | get: function(element, readonly) { 415 | if(element[ID_ATTR] === undefined) { 416 | if (readonly) { 417 | return null; 418 | } 419 | 420 | this.set(element); 421 | } 422 | 423 | return $(element).attr(ID_ATTR); 424 | }, 425 | set: function (element) { 426 | var id; 427 | 428 | if($(element).attr("id") === "test") { 429 | id = "test+1"; 430 | } else if($(element).attr("id") === "test2") { 431 | id = "test2+2"; 432 | } 433 | 434 | $(element).attr(ID_ATTR, id); 435 | 436 | return id; 437 | } 438 | }; 439 | 440 | var erd = elementResizeDetectorMaker({ 441 | idHandler: idHandler, 442 | callOnAdd: false, 443 | reporter: reporter, 444 | strategy: strategy 445 | }); 446 | 447 | var listener1 = jasmine.createSpy("listener1"); 448 | var listener2 = jasmine.createSpy("listener1"); 449 | 450 | var attrsBeforeTest = getAttributes($("#test")[0]); 451 | var attrsBeforeTest2 = getAttributes($("#test2")[0]); 452 | 453 | erd.listenTo($("#test"), listener1); 454 | erd.listenTo($("#test, #test2"), listener2); 455 | 456 | var attrsAfterTest = getAttributes($("#test")[0]); 457 | var attrsAfterTest2 = getAttributes($("#test2")[0]); 458 | 459 | var ignoreValidIdAttrAndStyle = function(key) { 460 | return key === ID_ATTR || key === "style"; 461 | }; 462 | 463 | ensureAttributes(attrsBeforeTest, attrsAfterTest, ignoreValidIdAttrAndStyle); 464 | ensureAttributes(attrsBeforeTest2, attrsAfterTest2, ignoreValidIdAttrAndStyle); 465 | 466 | expect($("#test").attr(ID_ATTR)).toEqual("test+1"); 467 | expect($("#test2").attr(ID_ATTR)).toEqual("test2+2"); 468 | 469 | setTimeout(function() { 470 | $("#test").width(300); 471 | $("#test2").width(500); 472 | }, 200); 473 | 474 | setTimeout(function() { 475 | expect(listener1).toHaveBeenCalledWith($("#test")[0]); 476 | expect(listener2).toHaveBeenCalledWith($("#test")[0]); 477 | expect(listener2).toHaveBeenCalledWith($("#test2")[0]); 478 | done(); 479 | }, 600); 480 | }); 481 | 482 | it("should be able to install into elements that are detached from the DOM", function(done) { 483 | var erd = elementResizeDetectorMaker({ 484 | callOnAdd: false, 485 | reporter: reporter, 486 | strategy: strategy 487 | }); 488 | 489 | var listener1 = jasmine.createSpy("listener1"); 490 | var div = document.createElement("div"); 491 | div.style.width = "100%"; 492 | div.style.height = "100%"; 493 | erd.listenTo(div, listener1); 494 | 495 | setTimeout(function () { 496 | $("#test")[0].appendChild(div); 497 | }, 200); 498 | 499 | setTimeout(function () { 500 | $("#test").width(200); 501 | }, 400); 502 | 503 | setTimeout(function() { 504 | expect(listener1).toHaveBeenCalledWith(div); 505 | done(); 506 | }, 600); 507 | }); 508 | 509 | it("should detect resizes caused by padding and font-size changes", function (done) { 510 | var erd = elementResizeDetectorMaker({ 511 | callOnAdd: false, 512 | reporter: reporter, 513 | strategy: strategy 514 | }); 515 | 516 | var listener = jasmine.createSpy("listener"); 517 | $("#test").html("test"); 518 | $("#test").css("padding", "0px"); 519 | $("#test").css("font-size", "16px"); 520 | 521 | erd.listenTo($("#test"), listener); 522 | 523 | $("#test").css("padding", "10px"); 524 | 525 | setTimeout(function() { 526 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 527 | listener.calls.reset(); 528 | $("#test").css("font-size", "20px"); 529 | }, 200); 530 | 531 | setTimeout(function() { 532 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 533 | done(); 534 | }, 400); 535 | }); 536 | 537 | describe("should handle unrendered elements correctly", function () { 538 | it("when installing", function (done) { 539 | var erd = elementResizeDetectorMaker({ 540 | callOnAdd: false, 541 | reporter: reporter, 542 | strategy: strategy 543 | }); 544 | 545 | $("#test").html("
"); 546 | $("#test").css("display", "none"); 547 | 548 | var listener = jasmine.createSpy("listener"); 549 | erd.listenTo($("#inner"), listener); 550 | 551 | setTimeout(function () { 552 | expect(listener).not.toHaveBeenCalled(); 553 | $("#test").css("display", ""); 554 | }, 200); 555 | 556 | setTimeout(function () { 557 | expect(listener).toHaveBeenCalledWith($("#inner")[0]); 558 | listener.calls.reset(); 559 | $("#inner").width("300px"); 560 | }, 400); 561 | 562 | setTimeout(function () { 563 | expect(listener).toHaveBeenCalledWith($("#inner")[0]); 564 | listener.calls.reset(); 565 | done(); 566 | }, 600); 567 | }); 568 | 569 | it("when element gets unrendered after installation", function (done) { 570 | var erd = elementResizeDetectorMaker({ 571 | callOnAdd: false, 572 | reporter: reporter, 573 | strategy: strategy 574 | }); 575 | 576 | // The div is rendered to begin with. 577 | $("#test").html("
"); 578 | 579 | var listener = jasmine.createSpy("listener"); 580 | erd.listenTo($("#inner"), listener); 581 | 582 | // The it gets unrendered, and it changes width. 583 | setTimeout(function () { 584 | expect(listener).not.toHaveBeenCalled(); 585 | $("#test").css("display", "none"); 586 | $("#inner").width("300px"); 587 | }, 100); 588 | 589 | // Render the element again. 590 | setTimeout(function () { 591 | expect(listener).not.toHaveBeenCalled(); 592 | $("#test").css("display", ""); 593 | }, 200); 594 | 595 | // ERD should detect that the element has changed size as soon as it gets rendered again. 596 | setTimeout(function () { 597 | expect(listener).toHaveBeenCalledWith($("#inner")[0]); 598 | done(); 599 | }, 300); 600 | }); 601 | }); 602 | 603 | describe("inline elements", function () { 604 | it("should be listenable", function (done) { 605 | var erd = elementResizeDetectorMaker({ 606 | callOnAdd: false, 607 | reporter: reporter, 608 | strategy: strategy 609 | }); 610 | 611 | $("#test").html("test"); 612 | 613 | var listener = jasmine.createSpy("listener"); 614 | erd.listenTo($("#inner"), listener); 615 | 616 | setTimeout(function () { 617 | expect(listener).not.toHaveBeenCalled(); 618 | $("#inner").append("testing testing"); 619 | }, 100); 620 | 621 | setTimeout(function () { 622 | expect(listener).toHaveBeenCalledWith($("#inner")[0]); 623 | done(); 624 | }, 200); 625 | }); 626 | 627 | it("should not get altered dimensions", function (done) { 628 | var erd = elementResizeDetectorMaker({ 629 | callOnAdd: false, 630 | reporter: reporter, 631 | strategy: strategy 632 | }); 633 | 634 | $("#test").html(""); 635 | 636 | var widthBefore = $("#inner").width(); 637 | var heightBefore = $("#inner").height(); 638 | 639 | var listener = jasmine.createSpy("listener"); 640 | erd.listenTo($("#inner"), listener); 641 | 642 | setTimeout(function () { 643 | expect($("#inner").width()).toEqual(widthBefore); 644 | expect($("#inner").height()).toEqual(heightBefore); 645 | done(); 646 | }, 100); 647 | }); 648 | }); 649 | 650 | it("should handle dir=rtl correctly", function (done) { 651 | var erd = elementResizeDetectorMaker({ 652 | callOnAdd: false, 653 | reporter: reporter, 654 | strategy: strategy 655 | }); 656 | 657 | var listener = jasmine.createSpy("listener"); 658 | 659 | $("#test")[0].dir = "rtl"; 660 | erd.listenTo($("#test")[0], listener); 661 | 662 | setTimeout(function() { 663 | $("#test").width(300); 664 | }, 200); 665 | 666 | setTimeout(function() { 667 | expect(listener).toHaveBeenCalledWith($("#test")[0]); 668 | done(); 669 | }, 400); 670 | }); 671 | }); 672 | } 673 | 674 | function removalTest(strategy) { 675 | describe("[" + strategy + "] resizeDetector.removeListener", function() { 676 | it("should remove listener from element", function(done) { 677 | var erd = elementResizeDetectorMaker({ 678 | callOnAdd: false, 679 | strategy: strategy 680 | }); 681 | 682 | var $testElem = $("#test"); 683 | 684 | var listenerCall = jasmine.createSpy("listener"); 685 | var listenerNotCall = jasmine.createSpy("listener"); 686 | 687 | erd.listenTo($testElem[0], listenerCall); 688 | erd.listenTo($testElem[0], listenerNotCall); 689 | 690 | setTimeout(function() { 691 | erd.removeListener($testElem[0], listenerNotCall); 692 | $testElem.width(300); 693 | }, 200); 694 | 695 | setTimeout(function() { 696 | expect(listenerCall).toHaveBeenCalled(); 697 | expect(listenerNotCall).not.toHaveBeenCalled(); 698 | done(); 699 | }, 400); 700 | }); 701 | }); 702 | 703 | describe("[" + strategy + "] resizeDetector.removeAllListeners", function() { 704 | it("should remove all listeners from element", function(done) { 705 | var erd = elementResizeDetectorMaker({ 706 | callOnAdd: false, 707 | strategy: strategy 708 | }); 709 | 710 | var $testElem = $("#test"); 711 | 712 | var listener1 = jasmine.createSpy("listener"); 713 | var listener2 = jasmine.createSpy("listener"); 714 | 715 | erd.listenTo($testElem[0], listener1); 716 | erd.listenTo($testElem[0], listener2); 717 | 718 | setTimeout(function() { 719 | erd.removeAllListeners($testElem[0]); 720 | $testElem.width(300); 721 | }, 200); 722 | 723 | setTimeout(function() { 724 | expect(listener1).not.toHaveBeenCalled(); 725 | expect(listener2).not.toHaveBeenCalled(); 726 | done(); 727 | }, 400); 728 | }); 729 | 730 | it("should work for elements that don't have the detector installed", function() { 731 | var erd = elementResizeDetectorMaker({ 732 | strategy: strategy 733 | }); 734 | var $testElem = $("#test"); 735 | expect(erd.removeAllListeners.bind(erd, $testElem[0])).not.toThrow(); 736 | }); 737 | }); 738 | 739 | describe("[" + strategy + "] resizeDetector.uninstall", function() { 740 | it("should completely remove detector from element", function(done) { 741 | var erd = elementResizeDetectorMaker({ 742 | callOnAdd: false, 743 | strategy: strategy 744 | }); 745 | 746 | var $testElem = $("#test"); 747 | 748 | var listener = jasmine.createSpy("listener"); 749 | 750 | erd.listenTo($testElem[0], listener); 751 | 752 | setTimeout(function() { 753 | erd.uninstall($testElem[0]); 754 | // detector element should be removed 755 | expect($testElem[0].childNodes.length).toBe(0); 756 | $testElem.width(300); 757 | }, 200); 758 | 759 | setTimeout(function() { 760 | expect(listener).not.toHaveBeenCalled(); 761 | done(); 762 | }, 400); 763 | }); 764 | 765 | it("should completely remove detector from multiple elements", function(done) { 766 | var erd = elementResizeDetectorMaker({ 767 | callOnAdd: false, 768 | strategy: strategy 769 | }); 770 | 771 | var listener = jasmine.createSpy("listener"); 772 | 773 | erd.listenTo($("#test, #test2"), listener); 774 | 775 | setTimeout(function() { 776 | erd.uninstall($("#test, #test2")); 777 | // detector element should be removed 778 | expect($("#test")[0].childNodes.length).toBe(0); 779 | expect($("#test2")[0].childNodes.length).toBe(0); 780 | $("#test, #test2").width(300); 781 | }, 200); 782 | 783 | setTimeout(function() { 784 | expect(listener).not.toHaveBeenCalled(); 785 | done(); 786 | }, 400); 787 | }); 788 | 789 | it("should be able to call uninstall directly after listenTo", function () { 790 | var erd = elementResizeDetectorMaker({ 791 | strategy: strategy 792 | }); 793 | 794 | var $testElem = $("#test"); 795 | var listener = jasmine.createSpy("listener"); 796 | 797 | erd.listenTo($testElem[0], listener); 798 | expect(erd.uninstall.bind(erd, $testElem[0])).not.toThrow(); 799 | }); 800 | 801 | it("should be able to call uninstall directly async after listenTo", function (done) { 802 | var erd = elementResizeDetectorMaker({ 803 | strategy: strategy 804 | }); 805 | 806 | var $testElem = $("#test"); 807 | var listener = jasmine.createSpy("listener"); 808 | 809 | erd.listenTo($testElem[0], listener); 810 | setTimeout(function () { 811 | expect(erd.uninstall.bind(erd, $testElem[0])).not.toThrow(); 812 | done(); 813 | }, 0); 814 | }); 815 | 816 | it("should be able to call uninstall in the middle of a resize", function (done) { 817 | var erd = elementResizeDetectorMaker({ 818 | strategy: strategy 819 | }); 820 | 821 | var $testElem = $("#test"); 822 | var testElem = $testElem[0]; 823 | var listener = jasmine.createSpy("listener"); 824 | 825 | erd.listenTo(testElem, listener); 826 | setTimeout(function () { 827 | // We want the uninstall to happen exactly when a scroll event occured before the delayed batched is going to be processed. 828 | // So we intercept the erd shrink/expand functions in the state so that we may call uninstall after the handling of the event. 829 | var uninstalled = false; 830 | function wrapOnScrollEvent(oldFn) { 831 | return function () { 832 | oldFn(); 833 | if (!uninstalled) { 834 | expect(erd.uninstall.bind(erd, testElem)).not.toThrow(); 835 | uninstalled = true; 836 | done(); 837 | } 838 | }; 839 | } 840 | var state = testElem._erd; 841 | state.onExpand = wrapOnScrollEvent(state.onExpand); 842 | state.onShrink = wrapOnScrollEvent(state.onShrink); 843 | $("#test").width(300); 844 | }, 50); 845 | }); 846 | 847 | it("should be able to call uninstall in callOnAdd callback", function (done) { 848 | var error = false; 849 | 850 | // Ugly hack to catch async errors. 851 | window.onerror = function () { 852 | error = true; 853 | }; 854 | 855 | var erd = elementResizeDetectorMaker({ 856 | strategy: strategy, 857 | callOnAdd: true 858 | }); 859 | 860 | erd.listenTo($("#test"), function () { 861 | expect(erd.uninstall.bind(null, ($("#test")))).not.toThrow(); 862 | }); 863 | 864 | setTimeout(function () { 865 | expect(error).toBe(false); 866 | done(); 867 | window.error = null; 868 | }, 50); 869 | }); 870 | 871 | it("should be able to call uninstall in callOnAdd callback with multiple elements", function (done) { 872 | var error = false; 873 | 874 | // Ugly hack to catch async errors. 875 | window.onerror = function () { 876 | error = true; 877 | }; 878 | 879 | var erd = elementResizeDetectorMaker({ 880 | strategy: strategy, 881 | callOnAdd: true 882 | }); 883 | 884 | var listener = jasmine.createSpy("listener"); 885 | 886 | erd.listenTo($("#test, #test2"), function () { 887 | expect(erd.uninstall.bind(null, ($("#test, #test2")))).not.toThrow(); 888 | listener(); 889 | }); 890 | 891 | setTimeout(function () { 892 | expect(listener.calls.count()).toBe(1); 893 | expect(error).toBe(false); 894 | done(); 895 | window.error = null; 896 | }, 50); 897 | }); 898 | 899 | it("should be able to call uninstall on non-erd elements", function () { 900 | var erd = elementResizeDetectorMaker({ 901 | strategy: strategy 902 | }); 903 | 904 | var $testElem = $("#test"); 905 | 906 | expect(erd.uninstall.bind(erd, $testElem[0])).not.toThrow(); 907 | 908 | var listener = jasmine.createSpy("listener"); 909 | erd.listenTo($testElem[0], listener); 910 | expect(erd.uninstall.bind(erd, $testElem[0])).not.toThrow(); 911 | expect(erd.uninstall.bind(erd, $testElem[0])).not.toThrow(); 912 | }); 913 | }); 914 | } 915 | 916 | describe("element-resize-detector", function() { 917 | beforeEach(function() { 918 | //This messed with tests in IE8. 919 | //TODO: Investigate why, because it would be nice to have instead of the current solution. 920 | //loadFixtures("element-resize-detector_fixture.html"); 921 | $("#fixtures").html("
"); 922 | }); 923 | 924 | describe("elementResizeDetectorMaker", function() { 925 | it("should be globally defined", function() { 926 | expect(elementResizeDetectorMaker).toBeDefined(); 927 | }); 928 | 929 | it("should create an element-resize-detector instance", function() { 930 | var erd = elementResizeDetectorMaker(); 931 | 932 | expect(erd).toBeDefined(); 933 | expect(erd.listenTo).toBeDefined(); 934 | }); 935 | }); 936 | 937 | // listenToTest("object"); 938 | // removalTest("object"); 939 | // 940 | // //Scroll only supported on non-opera browsers. 941 | // if(!window.opera) { 942 | // listenToTest("scroll"); 943 | // removalTest("scroll"); 944 | // } 945 | 946 | listenToTest("scroll"); 947 | removalTest("scroll"); 948 | }); 949 | --------------------------------------------------------------------------------