element-resize-detector
Advanced tools
element-resize-detector - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
| /*! | ||
| * element-resize-detector 1.0.1 | ||
| * element-resize-detector 1.0.2 | ||
| * https://github.com/wnr/element-resize-detector | ||
@@ -242,6 +242,16 @@ * Licensed under MIT | ||
| * @private | ||
| * @param {object} options Optional options object. | ||
| * @param {element} element The element to make detectable | ||
| * @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. | ||
| */ | ||
| function makeDetectable(element, callback) { | ||
| function makeDetectable(options, element, callback) { | ||
| if (!callback) { | ||
| callback = element; | ||
| element = options; | ||
| options = null; | ||
| } | ||
| options = options || {}; | ||
| var debug = options.debug; | ||
| function injectObject(element, callback) { | ||
@@ -404,2 +414,4 @@ 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;"; | ||
| var forEach = require("../collection-utils").forEach; | ||
| module.exports = function(options) { | ||
@@ -410,2 +422,3 @@ options = options || {}; | ||
| var getState = options.stateHandler.getState; | ||
| var idHandler = options.idHandler; | ||
@@ -433,36 +446,9 @@ // The injected container needs to have a class, so that it may be styled with CSS (pseudo elements). | ||
| function addListener(element, listener) { | ||
| var changed = function() { | ||
| var elementStyle = getComputedStyle(element); | ||
| var width = parseSize(elementStyle.width); | ||
| var height = parseSize(elementStyle.height); | ||
| var listeners = getState(element).listeners; | ||
| // Store the size of the element sync here, so that multiple scroll events may be ignored in the event listeners. | ||
| // Otherwise the if-check in handleScroll is useless. | ||
| storeCurrentSize(element, width, height); | ||
| batchProcessor.add(function updateDetectorElements() { | ||
| updateChildSizes(element, width, height); | ||
| }); | ||
| batchProcessor.add(1, function updateScrollbars() { | ||
| positionScrollbars(element, width, height); | ||
| listener(element); | ||
| }); | ||
| }; | ||
| function handleScroll() { | ||
| var style = getComputedStyle(element); | ||
| var width = parseSize(style.width); | ||
| var height = parseSize(style.height); | ||
| if (width !== element.lastWidth || height !== element.lastHeight) { | ||
| changed(); | ||
| } | ||
| if (!listeners.push) { | ||
| throw new Error("Cannot add listener to an element that is not detectable."); | ||
| } | ||
| var expand = getExpandElement(element); | ||
| var shrink = getShrinkElement(element); | ||
| addEvent(expand, "scroll", handleScroll); | ||
| addEvent(shrink, "scroll", handleScroll); | ||
| getState(element).listeners.push(listener); | ||
| } | ||
@@ -473,6 +459,16 @@ | ||
| * @private | ||
| * @param {object} options Optional options object. | ||
| * @param {element} element The element to make detectable | ||
| * @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. | ||
| */ | ||
| function makeDetectable(element, callback) { | ||
| function makeDetectable(options, element, callback) { | ||
| if (!callback) { | ||
| callback = element; | ||
| element = options; | ||
| options = null; | ||
| } | ||
| options = options || {}; | ||
| var debug = options.debug; | ||
| function isStyleResolved() { | ||
@@ -506,21 +502,34 @@ function isPxValue(length) { | ||
| // Style is to be retrieved in the first level (before mutating the DOM) so that a forced layout is avoided later. | ||
| var style = getStyle(); | ||
| function storeStartSize() { | ||
| var style = getStyle(); | ||
| getState(element).startSizeStyle = { | ||
| width: style.widthStyle, | ||
| height: style.heightStyle | ||
| }; | ||
| } | ||
| getState(element).startSizeStyle = { | ||
| width: style.widthStyle, | ||
| height: style.heightStyle | ||
| }; | ||
| function initListeners() { | ||
| getState(element).listeners = []; | ||
| } | ||
| var readyExpandScroll = false; | ||
| var readyShrinkScroll = false; | ||
| var readyOverall = false; | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Installing scroll elements..."); | ||
| function ready() { | ||
| if(readyExpandScroll && readyShrinkScroll && readyOverall) { | ||
| callback(element); | ||
| } | ||
| storeStartSize(); | ||
| initListeners(); | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Element start size", getState(element).startSizeStyle); | ||
| function storeStyle() { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: storeStyle invoked."); | ||
| // Style is to be retrieved in the first level (before mutating the DOM) so that a forced layout is avoided later. | ||
| var style = getStyle(); | ||
| getState(element).style = style; | ||
| } | ||
| function mutateDom() { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: mutateDom invoked."); | ||
| var style = getState(element).style; | ||
| function alterPositionStyles() { | ||
@@ -589,12 +598,39 @@ if(style.position === "static") { | ||
| addEvent(expand, "scroll", function onFirstExpandScroll() { | ||
| removeEvent(expand, "scroll", onFirstExpandScroll); | ||
| readyExpandScroll = true; | ||
| ready(); | ||
| function handleScroll() { | ||
| function changed() { | ||
| var elementStyle = getComputedStyle(element); | ||
| var width = parseSize(elementStyle.width); | ||
| var height = parseSize(elementStyle.height); | ||
| // Store the size of the element sync here, so that multiple scroll events may be ignored in the event listeners. | ||
| // Otherwise the if-check in handleScroll is useless. | ||
| storeCurrentSize(element, width, height); | ||
| batchProcessor.add(function updateDetectorElements() { | ||
| updateChildSizes(element, width, height); | ||
| }); | ||
| batchProcessor.add(1, function updateScrollbars() { | ||
| positionScrollbars(element, width, height); | ||
| forEach(getState(element).listeners, function (listener) { | ||
| listener(element); | ||
| }); | ||
| }); | ||
| }; | ||
| var style = getComputedStyle(element); | ||
| var width = parseSize(style.width); | ||
| var height = parseSize(style.height); | ||
| if (width !== element.lastWidth || height !== element.lastHeight) { | ||
| changed(); | ||
| } | ||
| } | ||
| addEvent(expand, "scroll", function onExpand() { | ||
| handleScroll(); | ||
| }); | ||
| addEvent(shrink, "scroll", function onFirstShrinkScroll() { | ||
| removeEvent(shrink, "scroll", onFirstShrinkScroll); | ||
| readyShrinkScroll = true; | ||
| ready(); | ||
| addEvent(shrink, "scroll", function onShrink() { | ||
| handleScroll(); | ||
| }); | ||
@@ -606,26 +642,44 @@ | ||
| function finalizeDomMutation() { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: finalizeDomMutation invoked."); | ||
| var style = getState(element).style; | ||
| storeCurrentSize(element, style.width, style.height); | ||
| positionScrollbars(element, style.width, style.height); | ||
| readyOverall = true; | ||
| ready(); | ||
| } | ||
| function ready() { | ||
| callback(element); | ||
| } | ||
| if(batchProcessor) { | ||
| batchProcessor.add(mutateDom); | ||
| batchProcessor.add(1, finalizeDomMutation); | ||
| batchProcessor.add(0, storeStyle); | ||
| batchProcessor.add(1, mutateDom); | ||
| batchProcessor.add(2, finalizeDomMutation); | ||
| batchProcessor.add(3, ready); | ||
| } else { | ||
| storeStyle(); | ||
| mutateDom(); | ||
| finalizeDomMutation(); | ||
| ready(); | ||
| } | ||
| } | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Making detectable..."); | ||
| // Only install the strategy if the style has been resolved (this does not always mean that the element is attached). | ||
| if (isStyleResolved()) { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Style resolved"); | ||
| install(); | ||
| } else { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Style not resolved"); | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Polling for style resolution..."); | ||
| // Need to perform polling in order to detect when the element has been attached to the DOM. | ||
| var timeout = setInterval(function () { | ||
| if (isStyleResolved()) { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Poll. Style resolved."); | ||
| install(); | ||
| clearTimeout(timeout); | ||
| } else { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Poll. Style not resolved."); | ||
| } | ||
@@ -760,3 +814,3 @@ }, 50); | ||
| },{}],7:[function(require,module,exports){ | ||
| },{"../collection-utils":4}],7:[function(require,module,exports){ | ||
| "use strict"; | ||
@@ -845,3 +899,4 @@ | ||
| batchProcessor: batchProcessor, | ||
| stateHandler: stateHandler | ||
| stateHandler: stateHandler, | ||
| idHandler: idHandler | ||
| }; | ||
@@ -941,2 +996,3 @@ | ||
| var onReadyCallback = getOption(options, "onReady", function noop() {}); | ||
| var debug = getOption(options, "debug", false); | ||
@@ -946,4 +1002,9 @@ forEach(elements, function attachListenerToElement(element) { | ||
| debug && reporter.log("Attaching listener to element", id, element); | ||
| if(!elementUtils.isDetectable(element)) { | ||
| debug && reporter.log(id, "Not detectable."); | ||
| if(elementUtils.isBusy(element)) { | ||
| debug && reporter.log(id, "System busy making it detectable"); | ||
| //The element is being prepared to be detectable. Do not make it detectable. | ||
@@ -963,5 +1024,8 @@ //Just add the listener, because the element will soon be detectable. | ||
| debug && reporter.log(id, "Making detectable..."); | ||
| //The element is not prepared to be detectable, so do prepare it and add a listener to it. | ||
| elementUtils.markBusy(element, true); | ||
| return detectionStrategy.makeDetectable(element, function onElementDetectable(element) { | ||
| return detectionStrategy.makeDetectable({ debug: debug }, element, function onElementDetectable(element) { | ||
| debug && reporter.log(id, "onElementDetectable"); | ||
| elementUtils.markAsDetectable(element); | ||
@@ -993,2 +1057,4 @@ elementUtils.markBusy(element, false); | ||
| debug && reporter.log(id, "Already detecable, adding listener."); | ||
| //The element has been prepared to be detectable and is ready to be listened to. | ||
@@ -995,0 +1061,0 @@ addListener(callOnAdd, element, listener); |
| /*! | ||
| * element-resize-detector 1.0.1 | ||
| * element-resize-detector 1.0.2 | ||
| * https://github.com/wnr/element-resize-detector | ||
@@ -7,2 +7,2 @@ * Licensed under MIT | ||
| !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;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"use strict";var d=a("./utils");b.exports=function(a){function b(a,b){b||(b=a,a=0),a>o?o=a:p>a&&(p=a),m[a]||(m[a]=[]),l&&k&&0===n&&f(),m[a].push(b),n++}function c(a){void 0===a&&(a=k),q&&(h(q),q=null),a?f():e()}function e(){for(var a=p;o>=a;a++)for(var b=m[a],c=0;c<b.length;c++){var d=b[c];d()}g()}function f(){q=i(e)}function g(){m={},n=0,o=0,p=0}function h(a){var b=window.clearTimeout;return b(a)}function i(a){var b=function(a){return window.setTimeout(a,0)};return b(a)}a=a||{};var j=a.reporter,k=d.getOption(a,"async",!0),l=d.getOption(a,"auto",!0);l&&!k&&(j&&j.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),k=!0);var m,n,o,p;g();var q;return{add:b,force:c}}},{"./utils":2}],2:[function(a,b,c){"use strict";function d(a,b,c){var d=a[b];return void 0!==d&&null!==d||void 0===c?d:c}var e=b.exports={};e.getOption=d},{}],3:[function(a,b,c){"use strict";var d=b.exports={};d.isIE=function(a){function b(){var a=navigator.userAgent.toLowerCase();return-1!==a.indexOf("msie")||-1!==a.indexOf("trident")||-1!==a.indexOf(" edge/")}if(!b())return!1;if(!a)return!0;var c=function(){var a,b=3,c=document.createElement("div"),d=c.getElementsByTagName("i");do c.innerHTML="<!--[if gt IE "+ ++b+"]><i></i><![endif]-->";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<a.length;c++){var d=b(a[c]);if(d)return d}}},{}],5:[function(a,b,c){"use strict";var d=a("../browser-detector");b.exports=function(a){function b(a,b){function c(){b(a)}if(!e(a))throw new Error("Element is not detectable by this strategy.");if(d.isIE(8))i(a).object={proxy:c},a.attachEvent("onresize",c);else{var f=e(a);f.contentDocument.defaultView.addEventListener("resize",c)}}function c(a,b){function c(a,b){function c(){function c(){if("static"===j.position){a.style.position="relative";var b=function(a,b,c,d){function e(a){return a.replace(/[^-\d\.]/g,"")}var f=c[d];"auto"!==f&&"0"!==e(f)&&(a.warn("An element that is positioned static has style."+d+"="+f+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+d+" will be set to 0. Element: ",b),b.style[d]=0)};b(g,a,j,"top"),b(g,a,j,"right"),b(g,a,j,"bottom"),b(g,a,j,"left")}}function h(){function d(a,b){return a.contentDocument?void b(a.contentDocument):void setTimeout(function(){d(a,b)},100)}f||c();var e=this;d(e,function(c){b(a)})}""!==j.position&&(c(j),f=!0);var k=document.createElement("object");k.style.cssText=e,k.type="text/html",k.onload=h,d.isIE()||(k.data="about:blank"),a.appendChild(k),i(a).object=k,d.isIE()&&(k.data="about:blank")}var e="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;",f=!1,j=getComputedStyle(a);i(a).startSizeStyle={width:j.width,height:j.height},h?h.add(c):c()}d.isIE(8)?b(a):c(a,b)}function e(a){return i(a).object}function f(a){d.isIE(8)?a.detachEvent("onresize",i(a).object.proxy):a.removeChild(e(a)),delete i(a).object}a=a||{};var g=a.reporter,h=a.batchProcessor,i=a.stateHandler.getState;if(!g)throw new Error("Missing required dependency: reporter.");return{makeDetectable:c,addListener:b,uninstall:f}}},{"../browser-detector":3}],6:[function(a,b,c){"use strict";b.exports=function(a){function b(a,b){function c(){var b=getComputedStyle(a),c=n(b.width),d=n(b.height);(c!==a.lastWidth||d!==a.lastHeight)&&e()}var e=function(){var c=getComputedStyle(a),d=n(c.width),e=n(c.height);j(a,d,e),s.add(function(){i(a,d,e)}),s.add(1,function(){k(a,d,e),b(a)})},g=d(a),h=f(a);l(g,"scroll",c),l(h,"scroll",c)}function c(a,b){function c(){function b(a){return-1!==a.indexOf("px")}var c=getComputedStyle(a);return c.position&&b(c.width)&&b(c.height)}function d(){function c(){var b={},c=getComputedStyle(a);return b.position=c.position,b.width=n(c.width),b.height=n(c.height),b.top=c.top,b.right=c.right,b.bottom=c.bottom,b.left=c.left,b.widthStyle=c.width,b.heightStyle=c.height,b}function d(){h&&o&&p&&b(a)}function e(){function b(){if("static"===g.position){a.style.position="relative";var b=function(a,b,c,d){function e(a){return a.replace(/[^-\d\.]/g,"")}var f=c[d];"auto"!==f&&"0"!==e(f)&&(a.warn("An element that is positioned static has style."+d+"="+f+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+d+" will be set to 0. Element: ",b),b.style[d]=0)};b(r,a,g,"top"),b(r,a,g,"right"),b(r,a,g,"bottom"),b(r,a,g,"left")}}function c(a,b,c,d){return a=a?a+"px":"0",b=b?b+"px":"0",c=c?c+"px":"0",d=d?d+"px":"0","position: absolute; left: "+a+"; top: "+b+"; right: "+d+"; bottom: "+c+"; overflow: scroll; z-index: -1; visibility: hidden;"}b(g);var e=v.width,f=v.height,j=c(-1,-1,-f,-e),k=c(0,0,-f,-e),n="position: absolute; left: 0; top: 0;",p=document.createElement("div"),q=document.createElement("div"),s=document.createElement("div"),w=document.createElement("div"),x=document.createElement("div");p.className=u,p.style.cssText=j,q.style.cssText=k,s.style.cssText=n,w.style.cssText=k,x.style.cssText=n+" width: 200%; height: 200%;",q.appendChild(s),w.appendChild(x),p.appendChild(q),p.appendChild(w),a.appendChild(p),t(a).element=p,l(q,"scroll",function y(){m(q,"scroll",y),h=!0,d()}),l(w,"scroll",function z(){m(w,"scroll",z),o=!0,d()}),i(a,g.width,g.height)}function f(){j(a,g.width,g.height),k(a,g.width,g.height),p=!0,d()}var g=c();t(a).startSizeStyle={width:g.widthStyle,height:g.heightStyle};var h=!1,o=!1,p=!1;s?(s.add(e),s.add(1,f)):(e(),f())}if(c())d();else var e=setInterval(function(){c()&&(d(),clearTimeout(e))},50)}function d(a){return t(a).element.childNodes[0]}function e(a){return d(a).childNodes[0]}function f(a){return t(a).element.childNodes[1]}function g(a){return a+10}function h(a){return 2*a}function i(a,b,c){var d=e(a),f=g(b),h=g(c);d.style.width=f+"px",d.style.height=h+"px"}function j(a,b,c){a.lastWidth=b,a.lastHeight=c}function k(a,b,c){var e=d(a),i=f(a),j=g(b),k=g(c),l=h(b),m=h(c);e.scrollLeft=j,e.scrollTop=k,i.scrollLeft=l,i.scrollTop=m}function l(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener(b,c)}function m(a,b,c){a.attachEvent?a.detachEvent("on"+b,c):a.removeEventListener(b,c)}function n(a){return parseFloat(a.replace(/px/,""))}function o(){var a=500,b=500,c=document.createElement("div");c.style.cssText="position: absolute; width: "+2*a+"px; height: "+2*b+"px; visibility: hidden;";var d=document.createElement("div");d.style.cssText="position: absolute; width: "+a+"px; height: "+b+"px; overflow: scroll; visibility: none; top: "+3*-a+"px; left: "+3*-b+"px; visibility: hidden;",d.appendChild(c),document.body.insertBefore(d,document.body.firstChild);var e=a-d.clientWidth,f=b-d.clientHeight;return document.body.removeChild(d),{width:e,height:f}}function p(a,b){function c(b,c){c=c||function(a){document.head.appendChild(a)};var d=document.createElement("style");return d.innerHTML=b,d.id=a,c(d),d}if(!document.getElementById(a)){var d="/* Created by the element-resize-detector library. */\n";d+="."+b+" > div::-webkit-scrollbar { display: none; }",c(d)}}function q(a){var b=t(a);a.removeChild(b.element),delete b.element}a=a||{};var r=a.reporter,s=a.batchProcessor,t=a.stateHandler.getState,u="erd_scroll_detection_container";if(!r)throw new Error("Missing required dependency: reporter.");var v=o(),w="erd_scroll_detection_scrollbar_style";return p(w,u),{makeDetectable:c,addListener:b,uninstall:q}}},{}],7:[function(a,b,c){"use strict";function d(a,b,c){var d=a[b];return void 0!==d&&null!==d||void 0===c?d:c}var e=a("./collection-utils").forEach,f=a("./element-utils"),g=a("./listener-handler"),h=a("./id-generator"),i=a("./id-handler"),j=a("./reporter"),k=a("./browser-detector"),l=a("batch-processor"),m=a("./state-handler"),n=a("./detection-strategy/object.js"),o=a("./detection-strategy/scroll.js");b.exports=function(a){function b(a,b,c){function f(a){var b=x.get(a);e(b,function(b){b(a)})}function g(a,b,c){x.add(b,c),a&&c(b)}function h(a){return Array.isArray(a)||void 0!==a.length}function i(a){if(Array.isArray(a))return a;var c=[];return e(b,function(a){c.push(a)}),c}function j(a){return a&&1===a.nodeType}if(c||(c=b,b=a,a={}),!b)throw new Error("At least one element required.");if(!c)throw new Error("Listener required.");if(j(b))b=[b];else{if(!h(b))return s.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");b=i(b)}var k=0,l=d(a,"callOnAdd",v.callOnAdd),n=d(a,"onReady",function(){});e(b,function(a){var d=p.get(a);return y.isDetectable(a)?(g(l,a,c),void k++):y.isBusy(a)?(g(l,a,c),B[d]=B[d]||[],void B[d].push(function(){k++,k===b.length&&n()})):(y.markBusy(a,!0),w.makeDetectable(a,function(a){y.markAsDetectable(a),y.markBusy(a,!1),w.addListener(a,f),g(l,a,c);var h=getComputedStyle(a);(m.getState(a).startSizeStyle.width!==h.width||m.getState(a).startSizeStyle.height!==h.height)&&f(a),k++,k===b.length&&n(),B[d]&&(e(B[d],function(a){a()}),delete B[d])}))}),k===b.length&&n()}function c(a){x.removeAllListeners(a),w.uninstall(a),m.cleanState(a)}a=a||{};var p=a.idHandler;if(!p){var q=h(),r=i({idGenerator:q,stateHandler:m});p=r}var s=a.reporter;if(!s){var t=s===!1;s=j(t)}var u=d(a,"batchProcessor",l({reporter:s})),v={};v.callOnAdd=!!d(a,"callOnAdd",!0);var w,x=g(p),y=f({stateHandler:m}),z=d(a,"strategy","object"),A={reporter:s,batchProcessor:u,stateHandler:m};if("scroll"===z&&k.isLegacyOpera()&&(s.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),z="object"),"scroll"===z)w=o(A);else{if("object"!==z)throw new Error("Invalid strategy name: "+z);w=n(A)}var B={};return{listenTo:b,removeListener:x.removeListener,removeAllListeners:x.removeAllListeners,uninstall:c}}},{"./browser-detector":3,"./collection-utils":4,"./detection-strategy/object.js":5,"./detection-strategy/scroll.js":6,"./element-utils":8,"./id-generator":9,"./id-handler":10,"./listener-handler":11,"./reporter":12,"./state-handler":13,"batch-processor":1}],8:[function(a,b,c){"use strict";b.exports=function(a){function b(a){return!!f(a).isDetectable}function c(a){f(a).isDetectable=!0}function d(a){return!!f(a).busy}function e(a,b){f(a).busy=!!b}var f=a.stateHandler.getState;return{isDetectable:b,markAsDetectable:c,isBusy:d,markBusy:e}}},{}],9:[function(a,b,c){"use strict";b.exports=function(){function a(){return b++}var b=1;return{generate:a}}},{}],10:[function(a,b,c){"use strict";b.exports=function(a){function b(a,b){return b||d(a)||c(a),g(a).id}function c(a){var b=f.generate();return g(a).id=b,b}function d(a){return void 0!==g(a).id}function e(a){delete g(a).id}var f=a.idGenerator,g=a.stateHandler.getState;return{get:b,remove:e}}},{}],11:[function(a,b,c){"use strict";b.exports=function(a){function b(b){return f[a.get(b)]||[]}function c(b,c){var d=a.get(b);f[d]||(f[d]=[]),f[d].push(c)}function d(a,c){for(var d=b(a),e=0,f=d.length;f>e;++e)if(d[e]===c){d.splice(e,1);break}}function e(b){var c=f[a.get(b)];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(){console[b].apply(console,arguments)}};d(c,"log"),d(c,"warn"),d(c,"error")}return c}},{}],13:[function(a,b,c){"use strict";function d(a){return a[g]={},e(a)}function e(a){return a[g]||d(a)}function f(a){delete a[g]}var g="_erd";b.exports={initState:d,getState:e,cleanState:f}},{}]},{},[7])(7)}); | ||
| !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;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"use strict";var d=a("./utils");b.exports=function(a){function b(a,b){b||(b=a,a=0),a>o?o=a:p>a&&(p=a),m[a]||(m[a]=[]),l&&k&&0===n&&f(),m[a].push(b),n++}function c(a){void 0===a&&(a=k),q&&(h(q),q=null),a?f():e()}function e(){for(var a=p;o>=a;a++)for(var b=m[a],c=0;c<b.length;c++){var d=b[c];d()}g()}function f(){q=i(e)}function g(){m={},n=0,o=0,p=0}function h(a){var b=window.clearTimeout;return b(a)}function i(a){var b=function(a){return window.setTimeout(a,0)};return b(a)}a=a||{};var j=a.reporter,k=d.getOption(a,"async",!0),l=d.getOption(a,"auto",!0);l&&!k&&(j&&j.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),k=!0);var m,n,o,p;g();var q;return{add:b,force:c}}},{"./utils":2}],2:[function(a,b,c){"use strict";function d(a,b,c){var d=a[b];return void 0!==d&&null!==d||void 0===c?d:c}var e=b.exports={};e.getOption=d},{}],3:[function(a,b,c){"use strict";var d=b.exports={};d.isIE=function(a){function b(){var a=navigator.userAgent.toLowerCase();return-1!==a.indexOf("msie")||-1!==a.indexOf("trident")||-1!==a.indexOf(" edge/")}if(!b())return!1;if(!a)return!0;var c=function(){var a,b=3,c=document.createElement("div"),d=c.getElementsByTagName("i");do c.innerHTML="<!--[if gt IE "+ ++b+"]><i></i><![endif]-->";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<a.length;c++){var d=b(a[c]);if(d)return d}}},{}],5:[function(a,b,c){"use strict";var d=a("../browser-detector");b.exports=function(a){function b(a,b){function c(){b(a)}if(!e(a))throw new Error("Element is not detectable by this strategy.");if(d.isIE(8))i(a).object={proxy:c},a.attachEvent("onresize",c);else{var f=e(a);f.contentDocument.defaultView.addEventListener("resize",c)}}function c(a,b,c){function e(a,b){function c(){function c(){if("static"===j.position){a.style.position="relative";var b=function(a,b,c,d){function e(a){return a.replace(/[^-\d\.]/g,"")}var f=c[d];"auto"!==f&&"0"!==e(f)&&(a.warn("An element that is positioned static has style."+d+"="+f+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+d+" will be set to 0. Element: ",b),b.style[d]=0)};b(g,a,j,"top"),b(g,a,j,"right"),b(g,a,j,"bottom"),b(g,a,j,"left")}}function h(){function d(a,b){return a.contentDocument?void b(a.contentDocument):void setTimeout(function(){d(a,b)},100)}f||c();var e=this;d(e,function(c){b(a)})}""!==j.position&&(c(j),f=!0);var k=document.createElement("object");k.style.cssText=e,k.type="text/html",k.onload=h,d.isIE()||(k.data="about:blank"),a.appendChild(k),i(a).object=k,d.isIE()&&(k.data="about:blank")}var e="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;",f=!1,j=getComputedStyle(a);i(a).startSizeStyle={width:j.width,height:j.height},h?h.add(c):c()}c||(c=b,b=a,a=null),a=a||{};a.debug;d.isIE(8)?c(b):e(b,c)}function e(a){return i(a).object}function f(a){d.isIE(8)?a.detachEvent("onresize",i(a).object.proxy):a.removeChild(e(a)),delete i(a).object}a=a||{};var g=a.reporter,h=a.batchProcessor,i=a.stateHandler.getState;if(!g)throw new Error("Missing required dependency: reporter.");return{makeDetectable:c,addListener:b,uninstall:f}}},{"../browser-detector":3}],6:[function(a,b,c){"use strict";var d=a("../collection-utils").forEach;b.exports=function(a){function b(a,b){var c=t(a).listeners;if(!c.push)throw new Error("Cannot add listener to an element that is not detectable.");t(a).listeners.push(b)}function c(a,b,c){function e(){function a(a){return-1!==a.indexOf("px")}var c=getComputedStyle(b);return c.position&&a(c.width)&&a(c.height)}function f(){function a(){var a={},c=getComputedStyle(b);return a.position=c.position,a.width=n(c.width),a.height=n(c.height),a.top=c.top,a.right=c.right,a.bottom=c.bottom,a.left=c.left,a.widthStyle=c.width,a.heightStyle=c.height,a}function e(){var c=a();t(b).startSizeStyle={width:c.widthStyle,height:c.heightStyle}}function f(){t(b).listeners=[]}function h(){g&&r.log(u.get(b),"Scroll: storeStyle invoked.");var c=a();t(b).style=c}function i(){function a(){if("static"===f.position){b.style.position="relative";var a=function(a,b,c,d){function e(a){return a.replace(/[^-\d\.]/g,"")}var f=c[d];"auto"!==f&&"0"!==e(f)&&(a.warn("An element that is positioned static has style."+d+"="+f+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+d+" will be set to 0. Element: ",b),b.style[d]=0)};a(r,b,f,"top"),a(r,b,f,"right"),a(r,b,f,"bottom"),a(r,b,f,"left")}}function c(a,b,c,d){return a=a?a+"px":"0",b=b?b+"px":"0",c=c?c+"px":"0",d=d?d+"px":"0","position: absolute; left: "+a+"; top: "+b+"; right: "+d+"; bottom: "+c+"; overflow: scroll; z-index: -1; visibility: hidden;"}function e(){function a(){var a=getComputedStyle(b),c=n(a.width),e=n(a.height);k(b,c,e),s.add(function(){j(b,c,e)}),s.add(1,function(){l(b,c,e),d(t(b).listeners,function(a){a(b)})})}var c=getComputedStyle(b),e=n(c.width),f=n(c.height);(e!==b.lastWidth||f!==b.lastHeight)&&a()}g&&r.log(u.get(b),"Scroll: mutateDom invoked.");var f=t(b).style;a(f);var h=w.width,i=w.height,o=c(-1,-1,-i,-h),p=c(0,0,-i,-h),q="position: absolute; left: 0; top: 0;",x=document.createElement("div"),y=document.createElement("div"),z=document.createElement("div"),A=document.createElement("div"),B=document.createElement("div");x.className=v,x.style.cssText=o,y.style.cssText=p,z.style.cssText=q,A.style.cssText=p,B.style.cssText=q+" width: 200%; height: 200%;",y.appendChild(z),A.appendChild(B),x.appendChild(y),x.appendChild(A),b.appendChild(x),t(b).element=x,m(y,"scroll",function(){e()}),m(A,"scroll",function(){e()}),j(b,f.width,f.height)}function o(){g&&r.log(u.get(b),"Scroll: finalizeDomMutation invoked.");var a=t(b).style;k(b,a.width,a.height),l(b,a.width,a.height)}function p(){c(b)}g&&r.log(u.get(b),"Scroll: Installing scroll elements..."),e(),f(),g&&r.log(u.get(b),"Scroll: Element start size",t(b).startSizeStyle),s?(s.add(0,h),s.add(1,i),s.add(2,o),s.add(3,p)):(h(),i(),o(),p())}c||(c=b,b=a,a=null),a=a||{};var g=a.debug;if(g&&r.log(u.get(b),"Scroll: Making detectable..."),e())g&&r.log(u.get(b),"Scroll: Style resolved"),f();else{g&&r.log(u.get(b),"Scroll: Style not resolved"),g&&r.log(u.get(b),"Scroll: Polling for style resolution...");var h=setInterval(function(){e()?(g&&r.log(u.get(b),"Scroll: Poll. Style resolved."),f(),clearTimeout(h)):g&&r.log(u.get(b),"Scroll: Poll. Style not resolved.")},50)}}function e(a){return t(a).element.childNodes[0]}function f(a){return e(a).childNodes[0]}function g(a){return t(a).element.childNodes[1]}function h(a){return a+10}function i(a){return 2*a}function j(a,b,c){var d=f(a),e=h(b),g=h(c);d.style.width=e+"px",d.style.height=g+"px"}function k(a,b,c){a.lastWidth=b,a.lastHeight=c}function l(a,b,c){var d=e(a),f=g(a),j=h(b),k=h(c),l=i(b),m=i(c);d.scrollLeft=j,d.scrollTop=k,f.scrollLeft=l,f.scrollTop=m}function m(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener(b,c)}function n(a){return parseFloat(a.replace(/px/,""))}function o(){var a=500,b=500,c=document.createElement("div");c.style.cssText="position: absolute; width: "+2*a+"px; height: "+2*b+"px; visibility: hidden;";var d=document.createElement("div");d.style.cssText="position: absolute; width: "+a+"px; height: "+b+"px; overflow: scroll; visibility: none; top: "+3*-a+"px; left: "+3*-b+"px; visibility: hidden;",d.appendChild(c),document.body.insertBefore(d,document.body.firstChild);var e=a-d.clientWidth,f=b-d.clientHeight;return document.body.removeChild(d),{width:e,height:f}}function p(a,b){function c(b,c){c=c||function(a){document.head.appendChild(a)};var d=document.createElement("style");return d.innerHTML=b,d.id=a,c(d),d}if(!document.getElementById(a)){var d="/* Created by the element-resize-detector library. */\n";d+="."+b+" > div::-webkit-scrollbar { display: none; }",c(d)}}function q(a){var b=t(a);a.removeChild(b.element),delete b.element}a=a||{};var r=a.reporter,s=a.batchProcessor,t=a.stateHandler.getState,u=a.idHandler,v="erd_scroll_detection_container";if(!r)throw new Error("Missing required dependency: reporter.");var w=o(),x="erd_scroll_detection_scrollbar_style";return p(x,v),{makeDetectable:c,addListener:b,uninstall:q}}},{"../collection-utils":4}],7:[function(a,b,c){"use strict";function d(a,b,c){var d=a[b];return void 0!==d&&null!==d||void 0===c?d:c}var e=a("./collection-utils").forEach,f=a("./element-utils"),g=a("./listener-handler"),h=a("./id-generator"),i=a("./id-handler"),j=a("./reporter"),k=a("./browser-detector"),l=a("batch-processor"),m=a("./state-handler"),n=a("./detection-strategy/object.js"),o=a("./detection-strategy/scroll.js");b.exports=function(a){function b(a,b,c){function f(a){var b=x.get(a);e(b,function(b){b(a)})}function g(a,b,c){x.add(b,c),a&&c(b)}function h(a){return Array.isArray(a)||void 0!==a.length}function i(a){if(Array.isArray(a))return a;var c=[];return e(b,function(a){c.push(a)}),c}function j(a){return a&&1===a.nodeType}if(c||(c=b,b=a,a={}),!b)throw new Error("At least one element required.");if(!c)throw new Error("Listener required.");if(j(b))b=[b];else{if(!h(b))return s.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");b=i(b)}var k=0,l=d(a,"callOnAdd",v.callOnAdd),n=d(a,"onReady",function(){}),o=d(a,"debug",!1);e(b,function(a){var d=p.get(a);return o&&s.log("Attaching listener to element",d,a),y.isDetectable(a)?(o&&s.log(d,"Already detecable, adding listener."),g(l,a,c),void k++):(o&&s.log(d,"Not detectable."),y.isBusy(a)?(o&&s.log(d,"System busy making it detectable"),g(l,a,c),B[d]=B[d]||[],void B[d].push(function(){k++,k===b.length&&n()})):(o&&s.log(d,"Making detectable..."),y.markBusy(a,!0),w.makeDetectable({debug:o},a,function(a){o&&s.log(d,"onElementDetectable"),y.markAsDetectable(a),y.markBusy(a,!1),w.addListener(a,f),g(l,a,c);var h=getComputedStyle(a);(m.getState(a).startSizeStyle.width!==h.width||m.getState(a).startSizeStyle.height!==h.height)&&f(a),k++,k===b.length&&n(),B[d]&&(e(B[d],function(a){a()}),delete B[d])})))}),k===b.length&&n()}function c(a){x.removeAllListeners(a),w.uninstall(a),m.cleanState(a)}a=a||{};var p=a.idHandler;if(!p){var q=h(),r=i({idGenerator:q,stateHandler:m});p=r}var s=a.reporter;if(!s){var t=s===!1;s=j(t)}var u=d(a,"batchProcessor",l({reporter:s})),v={};v.callOnAdd=!!d(a,"callOnAdd",!0);var w,x=g(p),y=f({stateHandler:m}),z=d(a,"strategy","object"),A={reporter:s,batchProcessor:u,stateHandler:m,idHandler:p};if("scroll"===z&&k.isLegacyOpera()&&(s.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),z="object"),"scroll"===z)w=o(A);else{if("object"!==z)throw new Error("Invalid strategy name: "+z);w=n(A)}var B={};return{listenTo:b,removeListener:x.removeListener,removeAllListeners:x.removeAllListeners,uninstall:c}}},{"./browser-detector":3,"./collection-utils":4,"./detection-strategy/object.js":5,"./detection-strategy/scroll.js":6,"./element-utils":8,"./id-generator":9,"./id-handler":10,"./listener-handler":11,"./reporter":12,"./state-handler":13,"batch-processor":1}],8:[function(a,b,c){"use strict";b.exports=function(a){function b(a){return!!f(a).isDetectable}function c(a){f(a).isDetectable=!0}function d(a){return!!f(a).busy}function e(a,b){f(a).busy=!!b}var f=a.stateHandler.getState;return{isDetectable:b,markAsDetectable:c,isBusy:d,markBusy:e}}},{}],9:[function(a,b,c){"use strict";b.exports=function(){function a(){return b++}var b=1;return{generate:a}}},{}],10:[function(a,b,c){"use strict";b.exports=function(a){function b(a,b){return b||d(a)||c(a),g(a).id}function c(a){var b=f.generate();return g(a).id=b,b}function d(a){return void 0!==g(a).id}function e(a){delete g(a).id}var f=a.idGenerator,g=a.stateHandler.getState;return{get:b,remove:e}}},{}],11:[function(a,b,c){"use strict";b.exports=function(a){function b(b){return f[a.get(b)]||[]}function c(b,c){var d=a.get(b);f[d]||(f[d]=[]),f[d].push(c)}function d(a,c){for(var d=b(a),e=0,f=d.length;f>e;++e)if(d[e]===c){d.splice(e,1);break}}function e(b){var c=f[a.get(b)];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(){console[b].apply(console,arguments)}};d(c,"log"),d(c,"warn"),d(c,"error")}return c}},{}],13:[function(a,b,c){"use strict";function d(a){return a[g]={},e(a)}function e(a){return a[g]||d(a)}function f(a){delete a[g]}var g="_erd";b.exports={initState:d,getState:e,cleanState:f}},{}]},{},[7])(7)}); |
| { | ||
| "name": "element-resize-detector", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "Resize event emitter for elements.", | ||
@@ -5,0 +5,0 @@ "homepage": "https://github.com/wnr/element-resize-detector", |
@@ -50,6 +50,16 @@ /** | ||
| * @private | ||
| * @param {object} options Optional options object. | ||
| * @param {element} element The element to make detectable | ||
| * @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. | ||
| */ | ||
| function makeDetectable(element, callback) { | ||
| function makeDetectable(options, element, callback) { | ||
| if (!callback) { | ||
| callback = element; | ||
| element = options; | ||
| options = null; | ||
| } | ||
| options = options || {}; | ||
| var debug = options.debug; | ||
| function injectObject(element, callback) { | ||
@@ -56,0 +66,0 @@ 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;"; |
@@ -8,2 +8,4 @@ /** | ||
| var forEach = require("../collection-utils").forEach; | ||
| module.exports = function(options) { | ||
@@ -14,2 +16,3 @@ options = options || {}; | ||
| var getState = options.stateHandler.getState; | ||
| var idHandler = options.idHandler; | ||
@@ -37,36 +40,9 @@ // The injected container needs to have a class, so that it may be styled with CSS (pseudo elements). | ||
| function addListener(element, listener) { | ||
| var changed = function() { | ||
| var elementStyle = getComputedStyle(element); | ||
| var width = parseSize(elementStyle.width); | ||
| var height = parseSize(elementStyle.height); | ||
| var listeners = getState(element).listeners; | ||
| // Store the size of the element sync here, so that multiple scroll events may be ignored in the event listeners. | ||
| // Otherwise the if-check in handleScroll is useless. | ||
| storeCurrentSize(element, width, height); | ||
| batchProcessor.add(function updateDetectorElements() { | ||
| updateChildSizes(element, width, height); | ||
| }); | ||
| batchProcessor.add(1, function updateScrollbars() { | ||
| positionScrollbars(element, width, height); | ||
| listener(element); | ||
| }); | ||
| }; | ||
| function handleScroll() { | ||
| var style = getComputedStyle(element); | ||
| var width = parseSize(style.width); | ||
| var height = parseSize(style.height); | ||
| if (width !== element.lastWidth || height !== element.lastHeight) { | ||
| changed(); | ||
| } | ||
| if (!listeners.push) { | ||
| throw new Error("Cannot add listener to an element that is not detectable."); | ||
| } | ||
| var expand = getExpandElement(element); | ||
| var shrink = getShrinkElement(element); | ||
| addEvent(expand, "scroll", handleScroll); | ||
| addEvent(shrink, "scroll", handleScroll); | ||
| getState(element).listeners.push(listener); | ||
| } | ||
@@ -77,6 +53,16 @@ | ||
| * @private | ||
| * @param {object} options Optional options object. | ||
| * @param {element} element The element to make detectable | ||
| * @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. | ||
| */ | ||
| function makeDetectable(element, callback) { | ||
| function makeDetectable(options, element, callback) { | ||
| if (!callback) { | ||
| callback = element; | ||
| element = options; | ||
| options = null; | ||
| } | ||
| options = options || {}; | ||
| var debug = options.debug; | ||
| function isStyleResolved() { | ||
@@ -110,21 +96,34 @@ function isPxValue(length) { | ||
| // Style is to be retrieved in the first level (before mutating the DOM) so that a forced layout is avoided later. | ||
| var style = getStyle(); | ||
| function storeStartSize() { | ||
| var style = getStyle(); | ||
| getState(element).startSizeStyle = { | ||
| width: style.widthStyle, | ||
| height: style.heightStyle | ||
| }; | ||
| } | ||
| getState(element).startSizeStyle = { | ||
| width: style.widthStyle, | ||
| height: style.heightStyle | ||
| }; | ||
| function initListeners() { | ||
| getState(element).listeners = []; | ||
| } | ||
| var readyExpandScroll = false; | ||
| var readyShrinkScroll = false; | ||
| var readyOverall = false; | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Installing scroll elements..."); | ||
| function ready() { | ||
| if(readyExpandScroll && readyShrinkScroll && readyOverall) { | ||
| callback(element); | ||
| } | ||
| storeStartSize(); | ||
| initListeners(); | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Element start size", getState(element).startSizeStyle); | ||
| function storeStyle() { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: storeStyle invoked."); | ||
| // Style is to be retrieved in the first level (before mutating the DOM) so that a forced layout is avoided later. | ||
| var style = getStyle(); | ||
| getState(element).style = style; | ||
| } | ||
| function mutateDom() { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: mutateDom invoked."); | ||
| var style = getState(element).style; | ||
| function alterPositionStyles() { | ||
@@ -193,12 +192,39 @@ if(style.position === "static") { | ||
| addEvent(expand, "scroll", function onFirstExpandScroll() { | ||
| removeEvent(expand, "scroll", onFirstExpandScroll); | ||
| readyExpandScroll = true; | ||
| ready(); | ||
| function handleScroll() { | ||
| function changed() { | ||
| var elementStyle = getComputedStyle(element); | ||
| var width = parseSize(elementStyle.width); | ||
| var height = parseSize(elementStyle.height); | ||
| // Store the size of the element sync here, so that multiple scroll events may be ignored in the event listeners. | ||
| // Otherwise the if-check in handleScroll is useless. | ||
| storeCurrentSize(element, width, height); | ||
| batchProcessor.add(function updateDetectorElements() { | ||
| updateChildSizes(element, width, height); | ||
| }); | ||
| batchProcessor.add(1, function updateScrollbars() { | ||
| positionScrollbars(element, width, height); | ||
| forEach(getState(element).listeners, function (listener) { | ||
| listener(element); | ||
| }); | ||
| }); | ||
| }; | ||
| var style = getComputedStyle(element); | ||
| var width = parseSize(style.width); | ||
| var height = parseSize(style.height); | ||
| if (width !== element.lastWidth || height !== element.lastHeight) { | ||
| changed(); | ||
| } | ||
| } | ||
| addEvent(expand, "scroll", function onExpand() { | ||
| handleScroll(); | ||
| }); | ||
| addEvent(shrink, "scroll", function onFirstShrinkScroll() { | ||
| removeEvent(shrink, "scroll", onFirstShrinkScroll); | ||
| readyShrinkScroll = true; | ||
| ready(); | ||
| addEvent(shrink, "scroll", function onShrink() { | ||
| handleScroll(); | ||
| }); | ||
@@ -210,26 +236,44 @@ | ||
| function finalizeDomMutation() { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: finalizeDomMutation invoked."); | ||
| var style = getState(element).style; | ||
| storeCurrentSize(element, style.width, style.height); | ||
| positionScrollbars(element, style.width, style.height); | ||
| readyOverall = true; | ||
| ready(); | ||
| } | ||
| function ready() { | ||
| callback(element); | ||
| } | ||
| if(batchProcessor) { | ||
| batchProcessor.add(mutateDom); | ||
| batchProcessor.add(1, finalizeDomMutation); | ||
| batchProcessor.add(0, storeStyle); | ||
| batchProcessor.add(1, mutateDom); | ||
| batchProcessor.add(2, finalizeDomMutation); | ||
| batchProcessor.add(3, ready); | ||
| } else { | ||
| storeStyle(); | ||
| mutateDom(); | ||
| finalizeDomMutation(); | ||
| ready(); | ||
| } | ||
| } | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Making detectable..."); | ||
| // Only install the strategy if the style has been resolved (this does not always mean that the element is attached). | ||
| if (isStyleResolved()) { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Style resolved"); | ||
| install(); | ||
| } else { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Style not resolved"); | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Polling for style resolution..."); | ||
| // Need to perform polling in order to detect when the element has been attached to the DOM. | ||
| var timeout = setInterval(function () { | ||
| if (isStyleResolved()) { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Poll. Style resolved."); | ||
| install(); | ||
| clearTimeout(timeout); | ||
| } else { | ||
| debug && reporter.log(idHandler.get(element), "Scroll: Poll. Style not resolved."); | ||
| } | ||
@@ -236,0 +280,0 @@ }, 50); |
@@ -84,3 +84,4 @@ "use strict"; | ||
| batchProcessor: batchProcessor, | ||
| stateHandler: stateHandler | ||
| stateHandler: stateHandler, | ||
| idHandler: idHandler | ||
| }; | ||
@@ -180,2 +181,3 @@ | ||
| var onReadyCallback = getOption(options, "onReady", function noop() {}); | ||
| var debug = getOption(options, "debug", false); | ||
@@ -185,4 +187,9 @@ forEach(elements, function attachListenerToElement(element) { | ||
| debug && reporter.log("Attaching listener to element", id, element); | ||
| if(!elementUtils.isDetectable(element)) { | ||
| debug && reporter.log(id, "Not detectable."); | ||
| if(elementUtils.isBusy(element)) { | ||
| debug && reporter.log(id, "System busy making it detectable"); | ||
| //The element is being prepared to be detectable. Do not make it detectable. | ||
@@ -202,5 +209,8 @@ //Just add the listener, because the element will soon be detectable. | ||
| debug && reporter.log(id, "Making detectable..."); | ||
| //The element is not prepared to be detectable, so do prepare it and add a listener to it. | ||
| elementUtils.markBusy(element, true); | ||
| return detectionStrategy.makeDetectable(element, function onElementDetectable(element) { | ||
| return detectionStrategy.makeDetectable({ debug: debug }, element, function onElementDetectable(element) { | ||
| debug && reporter.log(id, "onElementDetectable"); | ||
| elementUtils.markAsDetectable(element); | ||
@@ -232,2 +242,4 @@ elementUtils.markBusy(element, false); | ||
| debug && reporter.log(id, "Already detecable, adding listener."); | ||
| //The element has been prepared to be detectable and is ready to be listened to. | ||
@@ -234,0 +246,0 @@ addListener(callOnAdd, element, listener); |
@@ -95,3 +95,3 @@ /* global describe:false, it:false, beforeEach:false, expect:false, elementResizeDetectorMaker:false, _:false, $:false, jasmine:false */ | ||
| $("#test").width(300); | ||
| }, 100); | ||
| }, 200); | ||
@@ -132,3 +132,3 @@ setTimeout(function() { | ||
| done(); | ||
| }, 100); | ||
| }, 200); | ||
| } | ||
@@ -155,3 +155,3 @@ }, $("#test")[0], listener); | ||
| done(); | ||
| }, 100); | ||
| }, 200); | ||
| } | ||
@@ -269,11 +269,11 @@ }, $("#test, #test2"), listener); | ||
| $("#test").width(200); | ||
| }, 100); | ||
| }, 200); | ||
| setTimeout(function() { | ||
| expect(listener1).toHaveBeenCalledWith($("#test")[0]); | ||
| }, 300); | ||
| }, 400); | ||
| setTimeout(function() { | ||
| $("#test2").width(500); | ||
| }, 400); | ||
| }, 600); | ||
@@ -306,3 +306,3 @@ setTimeout(function() { | ||
| done(); | ||
| }, 100); | ||
| }, 200); | ||
| }); | ||
@@ -325,3 +325,3 @@ } | ||
| done(); | ||
| }, 100); | ||
| }, 200); | ||
| }); | ||
@@ -343,3 +343,3 @@ | ||
| done(); | ||
| }, 100); | ||
| }, 200); | ||
| }); | ||
@@ -362,7 +362,7 @@ | ||
| $("#test")[0].appendChild(div); | ||
| }, 100); | ||
| }, 200); | ||
| setTimeout(function () { | ||
| $("#test").width(200); | ||
| }, 200); | ||
| }, 400); | ||
@@ -372,3 +372,3 @@ setTimeout(function() { | ||
| done(); | ||
| }, 300); | ||
| }, 600); | ||
| }); | ||
@@ -429,3 +429,3 @@ | ||
| $("#test2").width(500); | ||
| }, 100); | ||
| }, 200); | ||
@@ -481,3 +481,3 @@ setTimeout(function() { | ||
| $("#test").width(300); | ||
| }, 100); | ||
| }, 200); | ||
@@ -509,3 +509,3 @@ setTimeout(function() { | ||
| $testElem.width(300); | ||
| }, 100); | ||
| }, 200); | ||
@@ -537,3 +537,3 @@ setTimeout(function() { | ||
| $testElem.width(300); | ||
| }, 100); | ||
| }, 200); | ||
@@ -572,3 +572,3 @@ setTimeout(function() { | ||
| $testElem.width(300); | ||
| }, 100); | ||
| }, 200); | ||
@@ -600,3 +600,3 @@ setTimeout(function() { | ||
| $testElem.width(300); | ||
| }, 100); | ||
| }, 200); | ||
@@ -603,0 +603,0 @@ setTimeout(function() { |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.19%
167298
- Lines of code
- increased by3.05%
3177
No dependency changes