Skip to content

Commit

Permalink
Revert to non-iframe resize notifier
Browse files Browse the repository at this point in the history 
	- pooling perf changes seem to have fixed the hidden grid issues
  • Loading branch information
Justin Moore committed Jun 17, 2016
1 parent 1250052 commit 25783ca
Showing 1 changed file with 127 additions and 40 deletions.
167 changes: 127 additions & 40 deletions src/shared/behaviors/sizeresponsible.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,103 @@
Copyright (c) 2015 MediaMath Inc. All rights reserved.
This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
-->

<script type="text/javascript">
// adapted from https://github.com/sdecima/javascript-detect-element-resize/blob/3d9563692e169eb54f7c4fb96f4866aebc17cb4e/detect-element-resize.js
/**
* Detect Element Resize
*
* https://github.com/sdecima/javascript-detect-element-resize
* Sebastian Decima
*
* version: 0.5.3
**/

(function (scope) {

var attachEvent = document.attachEvent,
stylesCreated = false;

if (!attachEvent) {
var requestFrame = (function(){
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
function(fn){ return window.setTimeout(fn, 20); };
return function(fn){ return raf(fn); };
})();

var cancelFrame = (function(){
var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
window.clearTimeout;
return function(id){ return cancel(id); };
})();

function resetTriggers(element){
if (!element.__resizeTriggers__) { return; } // diverges from 3d9563692e169eb54f7c4fb96f4866aebc17cb4e
var triggers = element.__resizeTriggers__,
expand = triggers.firstElementChild,
contract = triggers.lastElementChild,
expandChild = expand.firstElementChild;

contract.scrollLeft = contract.scrollWidth;
contract.scrollTop = contract.scrollHeight;
expandChild.style.width = expand.offsetWidth + 1 + 'px';
expandChild.style.height = expand.offsetHeight + 1 + 'px';
expand.scrollLeft = expand.scrollWidth;
expand.scrollTop = expand.scrollHeight;
};

function checkTriggers(element){
return element.offsetWidth != element.__resizeLast__.width ||
element.offsetHeight != element.__resizeLast__.height;
}

function scrollListener(e){
var element = this;
resetTriggers(this);
if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
this.__resizeRAF__ = requestFrame(function(){
if (checkTriggers(element)) {
element.__resizeLast__.width = element.offsetWidth;
element.__resizeLast__.height = element.offsetHeight;
element.__resizeListeners__.forEach(function(fn){
fn.call(element, e);
});
}
});
};

/* Detect CSS Animations support to detect element display/re-attach */
var animation = false,
animationstring = 'animation',
keyframeprefix = '',
animationstartevent = 'animationstart',
domPrefixes = 'Webkit Moz O ms'.split(' '),
startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
pfx = '';
{

var elm = document.createElement('fakeelement');
if( elm.style.animationName !== undefined ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animationstartevent = startEvents[ i ];
animation = true;
break;
}
}
}

}

var animationName = 'resizeanim';
var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
}

scope.SizeResponsible = {

properties: {
Expand All @@ -17,54 +111,47 @@
},
},

addResizeListener: function(fn, target) {
this._listeners = this._listeners || [];
var el = target || this;
var element = Polymer.dom(el);
addResizeListener: function(fn, target){
var element = target || this;
var nameSpace = " " + this.tagName.toLocaleLowerCase() + " ";

if (el.style.position !== "relative") {
el.style.position = "relative";
}
if (attachEvent) {
element.attachEvent('onresize', fn);
} else {
if (!element.__resizeTriggers__) {
if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
element.__resizeLast__ = {};
element.__resizeListeners__ = [];
element.__resizeTriggers__ = document.createElement('div');
element.__resizeTriggers__.className = 'resize-triggers' + nameSpace;
element.__resizeTriggers__.innerHTML = '<div class="expand-trigger' + nameSpace + '"><div></div></div>' + '<div class="contract-trigger' + nameSpace + '"></div>';
Polymer.dom(element).appendChild(element.__resizeTriggers__);
Polymer.dom.flush();

var div = document.createElement("div");
div.style.cssText = "position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1";
var iframe = document.createElement("iframe");
iframe.style.cssText = "width:100%; height:100%; border:0; visibility:visible; margin:0";
resetTriggers(element);

div.appendChild(iframe);
element.appendChild(div);
element.addEventListener('scroll', scrollListener, true);

iframe.cb = fn;
if (iframe.contentWindow) {
iframe.contentWindow.stop();
iframe.contentWindow.addEventListener("resize", fn);
} else {
iframe.addEventListener("load", function handler () {
iframe.removeEventListener("load", handler);
iframe.contentWindow.addEventListener("resize", fn);
});
/* Listen for a css animation to detect element display/re-attach */
animationstartevent &&
element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
if(e.animationName == animationName) resetTriggers(element);
});
}
element.__resizeListeners__.push(fn);
}

this._listeners.push({
div:div,
iframe:iframe,
fn:fn,
target:target
});
},

removeResizeListener: function(fn, target) {
var f = this._listeners.filter(function(t) {
return t.fn === fn || t.target === target;
}).map(function(listen) {
listen.target.removeChild(listen.div);
if (listen.iframe.contentWindow) {
listen.iframe.contentWindow.removeEventListener("resize",listen.fn);
removeResizeListener: function(fn, target){
var element = target || this;
if (attachEvent) element.detachEvent('onresize', fn);
else if (element.__resizeListeners__) {
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
if (!element.__resizeListeners__.length) {
element.removeEventListener('scroll', scrollListener);
element.__resizeTriggers__ = !Polymer.dom(element).removeChild(element.__resizeTriggers__);
}
return this._listeners.indexOf(listen);
}, this).forEach(function(idx) {
this._listeners.splice(idx,1);
}, this);
}
}

};
Expand Down

0 comments on commit 25783ca

Please sign in to comment.