|
|
|
@ -1,120 +1,557 @@ |
|
|
|
/** |
|
|
|
/** |
|
|
|
* Detect Element Resize. |
|
|
|
* Detect Element Resize. |
|
|
|
* Forked in order to guard against unsafe 'window' and 'document' references. |
|
|
|
* A minimal library which polyfills the ResizeObserver API and is entirely based on the latest Draft Specification. |
|
|
|
* |
|
|
|
* https://github.com/juggle/resize-observer
|
|
|
|
* https://github.com/sdecima/javascript-detect-element-resize
|
|
|
|
* version: 3.4.0 |
|
|
|
* Sebastian Decima |
|
|
|
|
|
|
|
* |
|
|
|
|
|
|
|
* version: 0.5.3 |
|
|
|
|
|
|
|
**/ |
|
|
|
**/ |
|
|
|
!(function () { |
|
|
|
var ResizeObserverPolyfill = (function (exports) { |
|
|
|
var attachEvent = _global.document && _global.document.attachEvent, |
|
|
|
'use strict'; |
|
|
|
stylesCreated = false; |
|
|
|
|
|
|
|
|
|
|
|
var resizeObservers = []; |
|
|
|
if (_global.document && !attachEvent) { |
|
|
|
|
|
|
|
var requestFrame = (function () { |
|
|
|
var hasActiveObservations = function () { |
|
|
|
var raf = _global.requestAnimationFrame || _global.mozRequestAnimationFrame || _global.webkitRequestAnimationFrame || |
|
|
|
return resizeObservers.some(function (ro) { |
|
|
|
function (fn) { return _global.setTimeout(fn, 20); }; |
|
|
|
return ro.activeTargets.length > 0; |
|
|
|
return function (fn) { return raf(fn); }; |
|
|
|
}); |
|
|
|
})(); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
var cancelFrame = (function () { |
|
|
|
var hasSkippedObservations = function () { |
|
|
|
var cancel = _global.cancelAnimationFrame || _global.mozCancelAnimationFrame || _global.webkitCancelAnimationFrame || |
|
|
|
return resizeObservers.some(function (ro) { |
|
|
|
_global.clearTimeout; |
|
|
|
return ro.skippedTargets.length > 0; |
|
|
|
return function (id) { return cancel(id); }; |
|
|
|
}); |
|
|
|
})(); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
var resetTriggers = function (element) { |
|
|
|
var msg = 'ResizeObserver loop completed with undelivered notifications.'; |
|
|
|
var triggers = element.__resizeTriggers__, |
|
|
|
var deliverResizeLoopError = function () { |
|
|
|
expand = triggers.firstElementChild, |
|
|
|
var event; |
|
|
|
contract = triggers.lastElementChild, |
|
|
|
if (typeof ErrorEvent === 'function') { |
|
|
|
expandChild = expand.firstElementChild; |
|
|
|
event = new ErrorEvent('error', { |
|
|
|
contract.scrollLeft = contract.scrollWidth; |
|
|
|
message: msg |
|
|
|
contract.scrollTop = contract.scrollHeight; |
|
|
|
}); |
|
|
|
expandChild.style.width = expand.offsetWidth + 1 + "px"; |
|
|
|
} else { |
|
|
|
expandChild.style.height = expand.offsetHeight + 1 + "px"; |
|
|
|
event = document.createEvent('Event'); |
|
|
|
expand.scrollLeft = expand.scrollWidth; |
|
|
|
event.initEvent('error', false, false); |
|
|
|
expand.scrollTop = expand.scrollHeight; |
|
|
|
event.message = msg; |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
window.dispatchEvent(event); |
|
|
|
var checkTriggers = function (element) { |
|
|
|
}; |
|
|
|
return element.offsetWidth !== element.__resizeLast__.width || |
|
|
|
|
|
|
|
element.offsetHeight !== element.__resizeLast__.height; |
|
|
|
var ResizeObserverBoxOptions; |
|
|
|
}; |
|
|
|
(function (ResizeObserverBoxOptions) { |
|
|
|
|
|
|
|
ResizeObserverBoxOptions["BORDER_BOX"] = "border-box"; |
|
|
|
var scrollListener = function (e) { |
|
|
|
ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box"; |
|
|
|
var element = this; |
|
|
|
ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box"; |
|
|
|
resetTriggers(this); |
|
|
|
})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {})); |
|
|
|
if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__); |
|
|
|
|
|
|
|
this.__resizeRAF__ = requestFrame(function () { |
|
|
|
var freeze = function (obj) { |
|
|
|
if (checkTriggers(element)) { |
|
|
|
return Object.freeze(obj); |
|
|
|
element.__resizeLast__.width = element.offsetWidth; |
|
|
|
}; |
|
|
|
element.__resizeLast__.height = element.offsetHeight; |
|
|
|
|
|
|
|
element.__resizeListeners__.forEach(function (fn) { |
|
|
|
var ResizeObserverSize = (function () { |
|
|
|
fn.call(element, e); |
|
|
|
function ResizeObserverSize(inlineSize, blockSize) { |
|
|
|
}); |
|
|
|
this.inlineSize = inlineSize; |
|
|
|
} |
|
|
|
this.blockSize = blockSize; |
|
|
|
}); |
|
|
|
freeze(this); |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Detect CSS Animations support to detect element display/re-attach */ |
|
|
|
return ResizeObserverSize; |
|
|
|
var animation = false, |
|
|
|
}()); |
|
|
|
animationstring = "animation", |
|
|
|
|
|
|
|
keyframeprefix = "", |
|
|
|
var DOMRectReadOnly = (function () { |
|
|
|
animationstartevent = "animationstart", |
|
|
|
function DOMRectReadOnly(x, y, width, height) { |
|
|
|
domPrefixes = "Webkit Moz O ms".split(" "), |
|
|
|
this.x = x; |
|
|
|
startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "), |
|
|
|
this.y = y; |
|
|
|
pfx = ""; |
|
|
|
this.width = width; |
|
|
|
{ |
|
|
|
this.height = height; |
|
|
|
var elm = document.createElement("fakeelement"); |
|
|
|
this.top = this.y; |
|
|
|
if (elm.style.animationName !== undefined) { |
|
|
|
this.left = this.x; |
|
|
|
animation = true; |
|
|
|
this.bottom = this.top + this.height; |
|
|
|
} |
|
|
|
this.right = this.left + this.width; |
|
|
|
|
|
|
|
return freeze(this); |
|
|
|
if (animation === false) { |
|
|
|
} |
|
|
|
for (var i = 0; i < domPrefixes.length; i++) { |
|
|
|
|
|
|
|
if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) { |
|
|
|
DOMRectReadOnly.prototype.toJSON = function () { |
|
|
|
pfx = domPrefixes[i]; |
|
|
|
var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, |
|
|
|
animationstring = pfx + "Animation"; |
|
|
|
width = _a.width, height = _a.height; |
|
|
|
keyframeprefix = "-" + pfx.toLowerCase() + "-"; |
|
|
|
return { x: x, y: y, top: top, right: right, bottom: bottom, left: left, width: width, height: height }; |
|
|
|
animationstartevent = startEvents[i]; |
|
|
|
}; |
|
|
|
animation = true; |
|
|
|
DOMRectReadOnly.fromRect = function (rectangle) { |
|
|
|
|
|
|
|
return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
return DOMRectReadOnly; |
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var isSVG = function (target) { |
|
|
|
|
|
|
|
return target instanceof SVGElement && 'getBBox' in target; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var isHidden = function (target) { |
|
|
|
|
|
|
|
if (isSVG(target)) { |
|
|
|
|
|
|
|
var _a = target.getBBox(), width = _a.width, height = _a.height; |
|
|
|
|
|
|
|
return !width && !height; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight; |
|
|
|
|
|
|
|
return !(offsetWidth || offsetHeight || target.getClientRects().length); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var isElement = function (obj) { |
|
|
|
|
|
|
|
var _a; |
|
|
|
|
|
|
|
if (obj instanceof Element) { |
|
|
|
|
|
|
|
return true; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
var scope = (_a = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView; |
|
|
|
|
|
|
|
return !!(scope && obj instanceof scope.Element); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var isReplacedElement = function (target) { |
|
|
|
|
|
|
|
switch (target.tagName) { |
|
|
|
|
|
|
|
case 'INPUT': |
|
|
|
|
|
|
|
if (target.type !== 'image') { |
|
|
|
break; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
case 'VIDEO': |
|
|
|
|
|
|
|
case 'AUDIO': |
|
|
|
|
|
|
|
case 'EMBED': |
|
|
|
|
|
|
|
case 'OBJECT': |
|
|
|
|
|
|
|
case 'CANVAS': |
|
|
|
|
|
|
|
case 'IFRAME': |
|
|
|
|
|
|
|
case 'IMG': |
|
|
|
|
|
|
|
return true; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var global = typeof window !== 'undefined' ? window : {}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var cache = new WeakMap(); |
|
|
|
|
|
|
|
var scrollRegexp = /auto|scroll/; |
|
|
|
|
|
|
|
var verticalRegexp = /^tb|vertical/; |
|
|
|
|
|
|
|
var IE = (/msie|trident/i).test(global.navigator && global.navigator.userAgent); |
|
|
|
|
|
|
|
var parseDimension = function (pixel) { |
|
|
|
|
|
|
|
return parseFloat(pixel || '0'); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var size = function (inlineSize, blockSize, switchSizes) { |
|
|
|
|
|
|
|
if (inlineSize === void 0) { |
|
|
|
|
|
|
|
inlineSize = 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (blockSize === void 0) { |
|
|
|
|
|
|
|
blockSize = 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (switchSizes === void 0) { |
|
|
|
|
|
|
|
switchSizes = false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var zeroBoxes = freeze({ |
|
|
|
|
|
|
|
devicePixelContentBoxSize: size(), |
|
|
|
|
|
|
|
borderBoxSize: size(), |
|
|
|
|
|
|
|
contentBoxSize: size(), |
|
|
|
|
|
|
|
contentRect: new DOMRectReadOnly(0, 0, 0, 0) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
var calculateBoxSizes = function (target, forceRecalculation) { |
|
|
|
|
|
|
|
if (forceRecalculation === void 0) { |
|
|
|
|
|
|
|
forceRecalculation = false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (cache.has(target) && !forceRecalculation) { |
|
|
|
|
|
|
|
return cache.get(target); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (isHidden(target)) { |
|
|
|
|
|
|
|
cache.set(target, zeroBoxes); |
|
|
|
|
|
|
|
return zeroBoxes; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
var cs = getComputedStyle(target); |
|
|
|
|
|
|
|
var svg = isSVG(target) && target.ownerSVGElement && target.getBBox(); |
|
|
|
|
|
|
|
var removePadding = !IE && cs.boxSizing === 'border-box'; |
|
|
|
|
|
|
|
var switchSizes = verticalRegexp.test(cs.writingMode || ''); |
|
|
|
|
|
|
|
var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || ''); |
|
|
|
|
|
|
|
var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || ''); |
|
|
|
|
|
|
|
var paddingTop = svg ? 0 : parseDimension(cs.paddingTop); |
|
|
|
|
|
|
|
var paddingRight = svg ? 0 : parseDimension(cs.paddingRight); |
|
|
|
|
|
|
|
var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom); |
|
|
|
|
|
|
|
var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft); |
|
|
|
|
|
|
|
var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth); |
|
|
|
|
|
|
|
var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth); |
|
|
|
|
|
|
|
var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth); |
|
|
|
|
|
|
|
var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth); |
|
|
|
|
|
|
|
var horizontalPadding = paddingLeft + paddingRight; |
|
|
|
|
|
|
|
var verticalPadding = paddingTop + paddingBottom; |
|
|
|
|
|
|
|
var horizontalBorderArea = borderLeft + borderRight; |
|
|
|
|
|
|
|
var verticalBorderArea = borderTop + borderBottom; |
|
|
|
|
|
|
|
var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight; |
|
|
|
|
|
|
|
var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth; |
|
|
|
|
|
|
|
var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0; |
|
|
|
|
|
|
|
var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0; |
|
|
|
|
|
|
|
var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness; |
|
|
|
|
|
|
|
var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness; |
|
|
|
|
|
|
|
var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea; |
|
|
|
|
|
|
|
var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea; |
|
|
|
|
|
|
|
var boxes = freeze({ |
|
|
|
|
|
|
|
devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes), |
|
|
|
|
|
|
|
borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes), |
|
|
|
|
|
|
|
contentBoxSize: size(contentWidth, contentHeight, switchSizes), |
|
|
|
|
|
|
|
contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
cache.set(target, boxes); |
|
|
|
|
|
|
|
return boxes; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var calculateBoxSize = function (target, observedBox, forceRecalculation) { |
|
|
|
|
|
|
|
var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, |
|
|
|
|
|
|
|
contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize; |
|
|
|
|
|
|
|
switch (observedBox) { |
|
|
|
|
|
|
|
case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX: |
|
|
|
|
|
|
|
return devicePixelContentBoxSize; |
|
|
|
|
|
|
|
case ResizeObserverBoxOptions.BORDER_BOX: |
|
|
|
|
|
|
|
return borderBoxSize; |
|
|
|
|
|
|
|
default: |
|
|
|
|
|
|
|
return contentBoxSize; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ResizeObserverEntry = (function () { |
|
|
|
|
|
|
|
function ResizeObserverEntry(target) { |
|
|
|
|
|
|
|
var boxes = calculateBoxSizes(target); |
|
|
|
|
|
|
|
this.target = target; |
|
|
|
|
|
|
|
this.contentRect = boxes.contentRect; |
|
|
|
|
|
|
|
this.borderBoxSize = freeze([boxes.borderBoxSize]); |
|
|
|
|
|
|
|
this.contentBoxSize = freeze([boxes.contentBoxSize]); |
|
|
|
|
|
|
|
this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ResizeObserverEntry; |
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var calculateDepthForNode = function (node) { |
|
|
|
|
|
|
|
if (isHidden(node)) { |
|
|
|
|
|
|
|
return Infinity; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
var depth = 0; |
|
|
|
|
|
|
|
var parent = node.parentNode; |
|
|
|
|
|
|
|
while (parent) { |
|
|
|
|
|
|
|
depth += 1; |
|
|
|
|
|
|
|
parent = parent.parentNode; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return depth; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var broadcastActiveObservations = function () { |
|
|
|
|
|
|
|
var shallowestDepth = Infinity; |
|
|
|
|
|
|
|
var callbacks = []; |
|
|
|
|
|
|
|
resizeObservers.forEach(function processObserver(ro) { |
|
|
|
|
|
|
|
if (ro.activeTargets.length === 0) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
var entries = []; |
|
|
|
|
|
|
|
ro.activeTargets.forEach(function processTarget(ot) { |
|
|
|
|
|
|
|
var entry = new ResizeObserverEntry(ot.target); |
|
|
|
|
|
|
|
var targetDepth = calculateDepthForNode(ot.target); |
|
|
|
|
|
|
|
entries.push(entry); |
|
|
|
|
|
|
|
ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox); |
|
|
|
|
|
|
|
if (targetDepth < shallowestDepth) { |
|
|
|
|
|
|
|
shallowestDepth = targetDepth; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
callbacks.push(function resizeObserverCallback() { |
|
|
|
|
|
|
|
ro.callback.call(ro.observer, entries, ro.observer); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
ro.activeTargets.splice(0, ro.activeTargets.length); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
for (var _i = 0, callbacks_1 = callbacks; _i < callbacks_1.length; _i++) { |
|
|
|
|
|
|
|
var callback = callbacks_1[_i]; |
|
|
|
|
|
|
|
callback(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return shallowestDepth; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var gatherActiveObservationsAtDepth = function (depth) { |
|
|
|
|
|
|
|
resizeObservers.forEach(function processObserver(ro) { |
|
|
|
|
|
|
|
ro.activeTargets.splice(0, ro.activeTargets.length); |
|
|
|
|
|
|
|
ro.skippedTargets.splice(0, ro.skippedTargets.length); |
|
|
|
|
|
|
|
ro.observationTargets.forEach(function processTarget(ot) { |
|
|
|
|
|
|
|
if (ot.isActive()) { |
|
|
|
|
|
|
|
if (calculateDepthForNode(ot.target) > depth) { |
|
|
|
|
|
|
|
ro.activeTargets.push(ot); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
ro.skippedTargets.push(ot); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
var animationName = "resizeanim"; |
|
|
|
var process = function () { |
|
|
|
var animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } "; |
|
|
|
var depth = 0; |
|
|
|
var animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; "; |
|
|
|
gatherActiveObservationsAtDepth(depth); |
|
|
|
|
|
|
|
while (hasActiveObservations()) { |
|
|
|
|
|
|
|
depth = broadcastActiveObservations(); |
|
|
|
|
|
|
|
gatherActiveObservationsAtDepth(depth); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (hasSkippedObservations()) { |
|
|
|
|
|
|
|
deliverResizeLoopError(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return depth > 0; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var trigger; |
|
|
|
|
|
|
|
var callbacks = []; |
|
|
|
|
|
|
|
var notify = function () { |
|
|
|
|
|
|
|
return callbacks.splice(0).forEach(function (cb) { |
|
|
|
|
|
|
|
return cb(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var queueMicroTask = function (callback) { |
|
|
|
|
|
|
|
if (!trigger) { |
|
|
|
|
|
|
|
var toggle_1 = 0; |
|
|
|
|
|
|
|
var el_1 = document.createTextNode(''); |
|
|
|
|
|
|
|
var config = { characterData: true }; |
|
|
|
|
|
|
|
new MutationObserver(function () { |
|
|
|
|
|
|
|
return notify(); |
|
|
|
|
|
|
|
}).observe(el_1, config); |
|
|
|
|
|
|
|
trigger = function () { |
|
|
|
|
|
|
|
el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
callbacks.push(callback); |
|
|
|
|
|
|
|
trigger(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var queueResizeObserver = function (cb) { |
|
|
|
|
|
|
|
queueMicroTask(function ResizeObserver() { |
|
|
|
|
|
|
|
requestAnimationFrame(cb); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
var createStyles = function () { |
|
|
|
var watching = 0; |
|
|
|
if (!stylesCreated) { |
|
|
|
var isWatching = function () { |
|
|
|
// opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
|
|
|
|
return !!watching; |
|
|
|
var css = (animationKeyframes ? animationKeyframes : "") + |
|
|
|
}; |
|
|
|
".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + |
|
|
|
var CATCH_PERIOD = 250; |
|
|
|
".resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }", |
|
|
|
var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true }; |
|
|
|
head = document.head || document.getElementsByTagName("head")[0], |
|
|
|
var events = ['resize', 'load', 'transitionend', 'animationend', 'animationstart', 'animationiteration', 'keyup', 'keydown', 'mouseup', 'mousedown', 'mouseover', 'mouseout', 'blur', 'focus']; |
|
|
|
style = document.createElement("style"); |
|
|
|
var time = function (timeout) { |
|
|
|
|
|
|
|
if (timeout === void 0) { |
|
|
|
|
|
|
|
timeout = 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return Date.now() + timeout; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var scheduled = false; |
|
|
|
|
|
|
|
var Scheduler = (function () { |
|
|
|
|
|
|
|
function Scheduler() { |
|
|
|
|
|
|
|
var _this = this; |
|
|
|
|
|
|
|
this.stopped = true; |
|
|
|
|
|
|
|
this.listener = function () { |
|
|
|
|
|
|
|
return _this.schedule(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
style.type = "text/css"; |
|
|
|
Scheduler.prototype.run = function (timeout) { |
|
|
|
if (style.styleSheet) { |
|
|
|
var _this = this; |
|
|
|
style.styleSheet.cssText = css; |
|
|
|
if (timeout === void 0) { |
|
|
|
|
|
|
|
timeout = CATCH_PERIOD; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (scheduled) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
scheduled = true; |
|
|
|
|
|
|
|
var until = time(timeout); |
|
|
|
|
|
|
|
queueResizeObserver(function () { |
|
|
|
|
|
|
|
var elementsHaveResized = false; |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
elementsHaveResized = process(); |
|
|
|
|
|
|
|
} finally { |
|
|
|
|
|
|
|
scheduled = false; |
|
|
|
|
|
|
|
timeout = until - time(); |
|
|
|
|
|
|
|
if (!isWatching()) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (elementsHaveResized) { |
|
|
|
|
|
|
|
_this.run(1000); |
|
|
|
|
|
|
|
} else if (timeout > 0) { |
|
|
|
|
|
|
|
_this.run(timeout); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
style.appendChild(document.createTextNode(css)); |
|
|
|
_this.start(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Scheduler.prototype.schedule = function () { |
|
|
|
|
|
|
|
this.stop(); |
|
|
|
|
|
|
|
this.run(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Scheduler.prototype.observe = function () { |
|
|
|
|
|
|
|
var _this = this; |
|
|
|
|
|
|
|
var cb = function () { |
|
|
|
|
|
|
|
return _this.observer && _this.observer.observe(document.body, observerConfig); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
document.body ? cb() : global.addEventListener('DOMContentLoaded', cb); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Scheduler.prototype.start = function () { |
|
|
|
|
|
|
|
var _this = this; |
|
|
|
|
|
|
|
if (this.stopped) { |
|
|
|
|
|
|
|
this.stopped = false; |
|
|
|
|
|
|
|
this.observer = new MutationObserver(this.listener); |
|
|
|
|
|
|
|
this.observe(); |
|
|
|
|
|
|
|
events.forEach(function (name) { |
|
|
|
|
|
|
|
return global.addEventListener(name, _this.listener, true); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Scheduler.prototype.stop = function () { |
|
|
|
|
|
|
|
var _this = this; |
|
|
|
|
|
|
|
if (!this.stopped) { |
|
|
|
|
|
|
|
this.observer && this.observer.disconnect(); |
|
|
|
|
|
|
|
events.forEach(function (name) { |
|
|
|
|
|
|
|
return global.removeEventListener(name, _this.listener, true); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.stopped = true; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
return Scheduler; |
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
var scheduler = new Scheduler(); |
|
|
|
|
|
|
|
var updateCount = function (n) { |
|
|
|
|
|
|
|
!watching && n > 0 && scheduler.start(); |
|
|
|
|
|
|
|
watching += n; |
|
|
|
|
|
|
|
!watching && scheduler.stop(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var skipNotifyOnElement = function (target) { |
|
|
|
|
|
|
|
return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === 'inline'; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var ResizeObservation = (function () { |
|
|
|
|
|
|
|
function ResizeObservation(target, observedBox) { |
|
|
|
|
|
|
|
this.target = target; |
|
|
|
|
|
|
|
this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX; |
|
|
|
|
|
|
|
this.lastReportedSize = { |
|
|
|
|
|
|
|
inlineSize: -1, blockSize: -1 |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ResizeObservation.prototype.isActive = function () { |
|
|
|
|
|
|
|
var size = calculateBoxSize(this.target, this.observedBox, true); |
|
|
|
|
|
|
|
if (skipNotifyOnElement(this.target)) { |
|
|
|
|
|
|
|
this.lastReportedSize = size; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (this.lastReportedSize.inlineSize !== size.inlineSize || this.lastReportedSize.blockSize !== size.blockSize) { |
|
|
|
|
|
|
|
return true; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
return ResizeObservation; |
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ResizeObserverDetail = (function () { |
|
|
|
|
|
|
|
function ResizeObserverDetail(resizeObserver, callback) { |
|
|
|
|
|
|
|
this.activeTargets = []; |
|
|
|
|
|
|
|
this.skippedTargets = []; |
|
|
|
|
|
|
|
this.observationTargets = []; |
|
|
|
|
|
|
|
this.observer = resizeObserver; |
|
|
|
|
|
|
|
this.callback = callback; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ResizeObserverDetail; |
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var observerMap = new WeakMap(); |
|
|
|
|
|
|
|
var getObservationIndex = function (observationTargets, target) { |
|
|
|
|
|
|
|
for (var i = 0; i < observationTargets.length; i += 1) { |
|
|
|
|
|
|
|
if (observationTargets[i].target === target) { |
|
|
|
|
|
|
|
return i; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return -1; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
var ResizeObserverController = (function () { |
|
|
|
|
|
|
|
function ResizeObserverController() { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
head.appendChild(style); |
|
|
|
ResizeObserverController.connect = function (resizeObserver, callback) { |
|
|
|
stylesCreated = true; |
|
|
|
var detail = new ResizeObserverDetail(resizeObserver, callback); |
|
|
|
|
|
|
|
observerMap.set(resizeObserver, detail); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
ResizeObserverController.observe = function (resizeObserver, target, options) { |
|
|
|
|
|
|
|
var detail = observerMap.get(resizeObserver); |
|
|
|
|
|
|
|
var firstObservation = detail.observationTargets.length === 0; |
|
|
|
|
|
|
|
if (getObservationIndex(detail.observationTargets, target) < 0) { |
|
|
|
|
|
|
|
firstObservation && resizeObservers.push(detail); |
|
|
|
|
|
|
|
detail.observationTargets.push(new ResizeObservation(target, options && options.box)); |
|
|
|
|
|
|
|
updateCount(1); |
|
|
|
|
|
|
|
scheduler.schedule(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
ResizeObserverController.unobserve = function (resizeObserver, target) { |
|
|
|
|
|
|
|
var detail = observerMap.get(resizeObserver); |
|
|
|
|
|
|
|
var index = getObservationIndex(detail.observationTargets, target); |
|
|
|
|
|
|
|
var lastObservation = detail.observationTargets.length === 1; |
|
|
|
|
|
|
|
if (index >= 0) { |
|
|
|
|
|
|
|
lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1); |
|
|
|
|
|
|
|
detail.observationTargets.splice(index, 1); |
|
|
|
|
|
|
|
updateCount(-1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
ResizeObserverController.disconnect = function (resizeObserver) { |
|
|
|
|
|
|
|
var _this = this; |
|
|
|
|
|
|
|
var detail = observerMap.get(resizeObserver); |
|
|
|
|
|
|
|
detail.observationTargets.slice().forEach(function (ot) { |
|
|
|
|
|
|
|
return _this.unobserve(resizeObserver, ot.target); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
detail.activeTargets.splice(0, detail.activeTargets.length); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
return ResizeObserverController; |
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ResizeObserver = (function () { |
|
|
|
|
|
|
|
function ResizeObserver(callback) { |
|
|
|
|
|
|
|
if (arguments.length === 0) { |
|
|
|
|
|
|
|
throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present."); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (typeof callback !== 'function') { |
|
|
|
|
|
|
|
throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function."); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
ResizeObserverController.connect(this, callback); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ResizeObserver.prototype.observe = function (target, options) { |
|
|
|
|
|
|
|
if (arguments.length === 0) { |
|
|
|
|
|
|
|
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present."); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (!isElement(target)) { |
|
|
|
|
|
|
|
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
ResizeObserverController.observe(this, target, options); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
ResizeObserver.prototype.unobserve = function (target) { |
|
|
|
|
|
|
|
if (arguments.length === 0) { |
|
|
|
|
|
|
|
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present."); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (!isElement(target)) { |
|
|
|
|
|
|
|
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
ResizeObserverController.unobserve(this, target); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
ResizeObserver.prototype.disconnect = function () { |
|
|
|
|
|
|
|
ResizeObserverController.disconnect(this); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
ResizeObserver.toString = function () { |
|
|
|
|
|
|
|
return 'function ResizeObserver () { [polyfill code] }'; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
return ResizeObserver; |
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
exports.ResizeObserver = ResizeObserver; |
|
|
|
|
|
|
|
exports.ResizeObserverEntry = ResizeObserverEntry; |
|
|
|
|
|
|
|
exports.ResizeObserverSize = ResizeObserverSize; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return exports; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})({}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill.ResizeObserver; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!(function () { |
|
|
|
|
|
|
|
|
|
|
|
var addResizeListener = function (element, fn) { |
|
|
|
var addResizeListener = function (element, fn) { |
|
|
|
if (window.ResizeObserver) { |
|
|
|
if (ResizeObserver) { |
|
|
|
if (!element.__resizeObserver__) { |
|
|
|
if (!element.__resizeObserver__) { |
|
|
|
var resizeObserver = new window.ResizeObserver(function () { |
|
|
|
var resizeObserver = new ResizeObserver(function () { |
|
|
|
element.__resizeListeners__.forEach(function (listener) { |
|
|
|
element.__resizeListeners__.forEach(function (listener) { |
|
|
|
listener(); |
|
|
|
listener(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -126,47 +563,24 @@ |
|
|
|
element.__resizeListeners__ = []; |
|
|
|
element.__resizeListeners__ = []; |
|
|
|
} |
|
|
|
} |
|
|
|
element.__resizeListeners__.push(fn); |
|
|
|
element.__resizeListeners__.push(fn); |
|
|
|
} else if (attachEvent) { |
|
|
|
|
|
|
|
element.attachEvent("onresize", fn); |
|
|
|
|
|
|
|
BI.nextTick(fn); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
if (!element.__resizeTriggers__) { |
|
|
|
|
|
|
|
if (getComputedStyle(element).position === "static") element.style.position = "relative"; |
|
|
|
|
|
|
|
createStyles(); |
|
|
|
|
|
|
|
element.__resizeLast__ = {}; |
|
|
|
|
|
|
|
element.__resizeListeners__ = []; |
|
|
|
|
|
|
|
(element.__resizeTriggers__ = document.createElement("div")).className = "resize-triggers"; |
|
|
|
|
|
|
|
element.__resizeTriggers__.innerHTML = "<div class=\"expand-trigger\"><div></div></div>" + |
|
|
|
|
|
|
|
"<div class=\"contract-trigger\"></div>"; |
|
|
|
|
|
|
|
element.appendChild(element.__resizeTriggers__); |
|
|
|
|
|
|
|
resetTriggers(element); |
|
|
|
|
|
|
|
element.addEventListener("scroll", scrollListener, true); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 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); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
var removeResizeListener = function (element, fn) { |
|
|
|
var removeResizeListener = function (element, fn) { |
|
|
|
if (window.ResizeObserver) { |
|
|
|
if (ResizeObserver) { |
|
|
|
|
|
|
|
if (BI.isNull(fn)) { |
|
|
|
|
|
|
|
element.__resizeListeners__ = []; |
|
|
|
|
|
|
|
element.__resizeObserver__ && element.__resizeObserver__.unobserve(element); |
|
|
|
|
|
|
|
element.__resizeObserver__ = null; |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
var index = element.__resizeListeners__.indexOf(fn); |
|
|
|
var index = element.__resizeListeners__.indexOf(fn); |
|
|
|
if (index >= 0) { |
|
|
|
if (index >= 0) { |
|
|
|
element.__resizeListeners__.splice(index, 1); |
|
|
|
element.__resizeListeners__.splice(index, 1); |
|
|
|
if (!element.__resizeListeners__.length) { |
|
|
|
if (!element.__resizeListeners__.length) { |
|
|
|
element.__resizeObserver__ && element.__resizeObserver__.unobserve(element); |
|
|
|
element.__resizeObserver__ && element.__resizeObserver__.unobserve(element); |
|
|
|
|
|
|
|
element.__resizeObserver__ = null; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (attachEvent) { |
|
|
|
|
|
|
|
element.detachEvent("onresize", fn); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); |
|
|
|
|
|
|
|
if (!element.__resizeListeners__.length) { |
|
|
|
|
|
|
|
element.removeEventListener("scroll", scrollListener); |
|
|
|
|
|
|
|
element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
@ -176,8 +590,7 @@ |
|
|
|
return function () { |
|
|
|
return function () { |
|
|
|
removeResizeListener(widget.element[0], fn); |
|
|
|
removeResizeListener(widget.element[0], fn); |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, removeResizeListener: function (widget, fn) { |
|
|
|
removeResizeListener: function (widget, fn) { |
|
|
|
|
|
|
|
removeResizeListener(widget.element[0], fn); |
|
|
|
removeResizeListener(widget.element[0], fn); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
windy
2 years ago