Pull request #3130: KERNEL-13119 chore: BI.ResizeDetector 统一采用ResizeObserver实现

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '1b69ebb93a1043d5f2db83641a48419b8878ef1c':
  无JIRA fix 语法错误
  无JRIA 格式化
  无JIRA chore:  listeners支持对象,对象的value支持array
  KERNEL-13119 chore: BI.ResizeDetector 统一采用ResizeObserver实现
  无JRIA fix: destoryed前释放ResizeDetector

src/base/list/listview.js

@@ -128,7 +128,8 @@ BI.ListView = BI.inherit(BI.Widget, {
         this._populate(items);
     },
 
-    destroyed: function () {
+    beforeDestroy: function () {
+        BI.ResizeDetector.removeResizeListener(this);
         this.restore();
     },
 });

src/base/list/virtualgrouplist.js

@@ -181,6 +181,11 @@ BI.VirtualGroupList = BI.inherit(BI.Widget, {
     populate: function (items) {
         this._populate(items);
     },
+
+    beforeDestroy: function () {
+        BI.ResizeDetector.removeResizeListener(this);
+        this.restore();
+    }
 });
 BI.shortcut("bi.virtual_group_list", BI.VirtualGroupList);
 

src/base/list/virtuallist.js

@@ -201,10 +201,10 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         this._populate(items);
     },
 
-    destroyed: function () {
+    beforeDestroy: function () {
-        this.cache = {};
+        BI.ResizeDetector.removeResizeListener(this);
-        this.renderedIndex = -1;
+        this.restore();
-    },
+    }
 });
 BI.shortcut("bi.virtual_list", BI.VirtualList);
 

src/core/3.ob.js

@@ -33,7 +33,9 @@
     };
     BI._.extend(OB.prototype, {
         props: {},
+
         init: null,
+
         destroyed: null,
 
         _constructor: function (config) {
@@ -71,6 +73,12 @@
                         self.on(eventName, lis);
                         return;
                     }
+                    if (BI._.isArray(lis)) {
+                        BI._.each(lis, function (l) {
+                            self.on(eventName, l);
+                        });
+                        return;
+                    }
                     (lis.target ? lis.target : self)[lis.once ? "once" : "on"](lis.eventName, BI._.bind(lis.action, self));
                 });
                 delete this.options.listeners;
@@ -140,6 +148,7 @@
             };
             this.on(eventName, proxy);
         },
+
         /**
          * 解除观察者绑定的指定事件
          * @param {String} eventName 要解除绑定事件的名字
@@ -164,6 +173,7 @@
                 }
             }
         },
+
         /**
          * 清除观察者的所有事件绑定
          */
@@ -171,6 +181,7 @@
             /* alex:清空events*/
             this.events = {};
         },
+
         /**
          * 触发绑定过的事件
          *

src/core/5.inject.js

@@ -479,9 +479,11 @@
                             }
                         }]);
                     } else {
-                        w.listeners[BI.Events.MOUNT] = function () {
+                        w.listeners[BI.Events.MOUNT] = (w.listeners[BI.Events.MOUNT] || []).concat([
-                            BI.Plugin.getObject(elType, this);
+                            function () {
-                        }
+                                BI.Plugin.getObject(elType, this);
+                            }
+                        ]);
                     }
                 }
                 return createWidget(w, context, lazy);

src/core/platform/web/detectElementResize.js

@@ -1,120 +1,557 @@
 /**
  * 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";
-            expandChild.style.height = expand.offsetHeight + 1 + "px";
-            expand.scrollLeft = expand.scrollWidth;
-            expand.scrollTop = expand.scrollHeight;
-        };
-
-        var checkTriggers = function (element) {
-            return element.offsetWidth !== element.__resizeLast__.width ||
-                element.offsetHeight !== element.__resizeLast__.height;
-        };
-
-        var scrollListener = function (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);
-                    });
-                }
             });
+        } else {
+            event = document.createEvent('Event');
+            event.initEvent('error', false, false);
+            event.message = msg;
+        }
+        window.dispatchEvent(event);
+    };
+
+    var ResizeObserverBoxOptions;
+    (function (ResizeObserverBoxOptions) {
+        ResizeObserverBoxOptions["BORDER_BOX"] = "border-box";
+        ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box";
+        ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
+    })(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
+
+    var freeze = function (obj) {
+        return Object.freeze(obj);
+    };
+
+    var ResizeObserverSize = (function () {
+        function ResizeObserverSize(inlineSize, blockSize) {
+            this.inlineSize = inlineSize;
+            this.blockSize = blockSize;
+            freeze(this);
+        }
+
+        return ResizeObserverSize;
+    }());
+
+    var DOMRectReadOnly = (function () {
+        function DOMRectReadOnly(x, y, width, height) {
+            this.x = x;
+            this.y = y;
+            this.width = width;
+            this.height = height;
+            this.top = this.y;
+            this.left = this.x;
+            this.bottom = this.top + this.height;
+            this.right = this.left + this.width;
+            return freeze(this);
+        }
+
+        DOMRectReadOnly.prototype.toJSON = function () {
+            var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left,
+                width = _a.width, height = _a.height;
+            return { x: x, y: y, top: top, right: right, bottom: bottom, left: left, width: width, height: height };
         };
+        DOMRectReadOnly.fromRect = function (rectangle) {
+            return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+        };
+        return DOMRectReadOnly;
+    }());
 
-        /* Detect CSS Animations support to detect element display/re-attach */
+    var isSVG = function (target) {
-        var animation = false,
+        return target instanceof SVGElement && 'getBBox' in target;
-            animationstring = "animation",
+    };
-            keyframeprefix = "",
+    var isHidden = function (target) {
-            animationstartevent = "animationstart",
+        if (isSVG(target)) {
-            domPrefixes = "Webkit Moz O ms".split(" "),
+            var _a = target.getBBox(), width = _a.width, height = _a.height;
-            startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),
+            return !width && !height;
-            pfx = "";
+        }
-        {
+        var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
-            var elm = document.createElement("fakeelement");
+        return !(offsetWidth || offsetHeight || target.getClientRects().length);
-            if (elm.style.animationName !== undefined) {
+    };
-                animation = true;
+    var isElement = function (obj) {
-            }
+        var _a;
-
+        if (obj instanceof Element) {
-            if (animation === false) {
+            return true;
-                for (var i = 0; i < domPrefixes.length; i++) {
+        }
-                    if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
+        var scope = (_a = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
-                        pfx = domPrefixes[i];
+        return !!(scope && obj instanceof scope.Element);
-                        animationstring = pfx + "Animation";
+    };
-                        keyframeprefix = "-" + pfx.toLowerCase() + "-";
+    var isReplacedElement = function (target) {
-                        animationstartevent = startEvents[i];
+        switch (target.tagName) {
-                        animation = true;
+            case 'INPUT':
-                        break;
+                if (target.type !== 'image') {
-                    }
+                    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 process = function () {
+        var depth = 0;
+        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 watching = 0;
+    var isWatching = function () {
+        return !!watching;
+    };
+    var CATCH_PERIOD = 250;
+    var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
+    var events = ['resize', 'load', 'transitionend', 'animationend', 'animationstart', 'animationiteration', 'keyup', 'keydown', 'mouseup', 'mousedown', 'mouseover', 'mouseout', 'blur', 'focus'];
+    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();
+            };
         }
 
-        var animationName = "resizeanim";
+        Scheduler.prototype.run = function (timeout) {
-        var animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
+            var _this = this;
-        var animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
+            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 {
+                        _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 createStyles = function () {
+    var skipNotifyOnElement = function (target) {
-        if (!stylesCreated) {
+        return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === 'inline';
-            // opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+    };
-            var css = (animationKeyframes ? animationKeyframes : "") +
+    var ResizeObservation = (function () {
-                    ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " +
+        function ResizeObservation(target, observedBox) {
-                    ".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%; }",
+            this.target = target;
-                head = document.head || document.getElementsByTagName("head")[0],
+            this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
-                style = document.createElement("style");
+            this.lastReportedSize = {
+                inlineSize: -1, blockSize: -1
+            };
+        }
 
-            style.type = "text/css";
+        ResizeObservation.prototype.isActive = function () {
-            if (style.styleSheet) {
+            var size = calculateBoxSize(this.target, this.observedBox, true);
-                style.styleSheet.cssText = css;
+            if (skipNotifyOnElement(this.target)) {
-            } else {
+                this.lastReportedSize = size;
-                style.appendChild(document.createTextNode(css));
+            }
+            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;
+        }
 
-            head.appendChild(style);
+        return ResizeObserverDetail;
-            stylesCreated = true;
+    }());
+
+    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() {
+        }
+
+        ResizeObserverController.connect = function (resizeObserver, callback) {
+            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) {
-        if (window.ResizeObserver) {
+        if (ResizeObserver) {
             if (!element.__resizeObserver__) {
-                var resizeObserver = new window.ResizeObserver(function () {
+                var resizeObserver = new ResizeObserver(function () {
                     element.__resizeListeners__.forEach(function (listener) {
                         listener();
                     });
@@ -126,47 +563,24 @@
                 element.__resizeListeners__ = [];
             }
             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) {
-        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);
             if (index >= 0) {
                 element.__resizeListeners__.splice(index, 1);
                 if (!element.__resizeListeners__.length) {
                     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 () {
                 removeResizeListener(widget.element[0], fn);
             };
-        },
+        }, removeResizeListener: function (widget, fn) {
-        removeResizeListener: function (widget, fn) {
             removeResizeListener(widget.element[0], fn);
         }
     };