Chore: use resize-observer-polyfill to detect element resizes (#10779)

package.json

@@ -55,6 +55,7 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "deepmerge": "^1.2.0",
     "normalize-wheel": "^1.0.1",
+    "resize-observer-polyfill": "^1.5.0",
     "throttle-debounce": "^1.0.1"
   },
   "peerDependencies": {

src/utils/resize-event.js

@@ -1,190 +1,35 @@
-/* Modified from https://github.com/sdecima/javascript-detect-element-resize
+import ResizeObserver from 'resize-observer-polyfill';
- * version: 0.5.3
+
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2013 Sebastián Décima
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- */
 const isServer = typeof window === 'undefined';
 
 /* istanbul ignore next */
-const requestFrame = (function() {
+const resizeHandler = function(entries) {
-  if (isServer) return;
+  for (let entry of entries) {
-  const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+    const listeners = entry.target.__resizeListeners__ || [];
-    function(fn) {
+    if (listeners.length) {
-      return window.setTimeout(fn, 20);
+      listeners.forEach(fn => {
-    };
+        fn();
-  return function(fn) {
-    return raf(fn);
-  };
-})();
-
-/* istanbul ignore next */
-const cancelFrame = (function() {
-  if (isServer) return;
-  const cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
-  return function(id) {
-    return cancel(id);
-  };
-})();
-
-/* istanbul ignore next */
-const resetTrigger = function(element) {
-  const trigger = element.__resizeTrigger__;
-  const expand = trigger.firstElementChild;
-  const contract = trigger.lastElementChild;
-  const 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;
-};
-
-/* istanbul ignore next */
-const checkTriggers = function(element) {
-  return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-};
-
-/* istanbul ignore next */
-const scrollListener = function(event) {
-  resetTrigger(this);
-  if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
-  this.__resizeRAF__ = requestFrame(() => {
-    if (checkTriggers(this)) {
-      this.__resizeLast__.width = this.offsetWidth;
-      this.__resizeLast__.height = this.offsetHeight;
-      this.__resizeListeners__.forEach((fn) => {
-        fn.call(this, event);
       });
     }
-  });
-};
-
-/* Detect CSS Animations support to detect element display/re-attach */
-const attachEvent = isServer ? {} : document.attachEvent;
-const DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
-const START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
-const RESIZE_ANIMATION_NAME = 'resizeanim';
-let animation = false;
-let keyFramePrefix = '';
-let animationStartEvent = 'animationstart';
-
-/* istanbul ignore next */
-if (!attachEvent && !isServer) {
-  const testElement = document.createElement('fakeelement');
-  if (testElement.style.animationName !== undefined) {
-    animation = true;
-  }
-
-  if (animation === false) {
-    let prefix = '';
-    for (var i = 0; i < DOM_PREFIXES.length; i++) {
-      if (testElement.style[DOM_PREFIXES[i] + 'AnimationName'] !== undefined) {
-        prefix = DOM_PREFIXES[i];
-        keyFramePrefix = '-' + prefix.toLowerCase() + '-';
-        animationStartEvent = START_EVENTS[i];
-        animation = true;
-        break;
-      }
-    }
-  }
-}
-
-let stylesCreated = false;
-/* istanbul ignore next */
-const createStyles = function() {
-  if (!stylesCreated && !isServer) {
-    const animationKeyframes = `@${keyFramePrefix}keyframes ${RESIZE_ANIMATION_NAME} { from { opacity: 0; } to { opacity: 0; } } `;
-    const animationStyle = `${keyFramePrefix}animation: 1ms ${RESIZE_ANIMATION_NAME};`;
-
-    // opacity: 0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-    const css = `${animationKeyframes}
-      .resize-triggers { ${animationStyle} visibility: hidden; opacity: 0; }
-      .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1 }
-      .resize-triggers > div { background: #eee; overflow: auto; }
-      .contract-trigger:before { width: 200%; height: 200%; }`;
-
-    const head = document.head || document.getElementsByTagName('head')[0];
-    const style = document.createElement('style');
-
-    style.type = 'text/css';
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-
-    head.appendChild(style);
-    stylesCreated = true;
   }
 };
 
 /* istanbul ignore next */
 export const addResizeListener = function(element, fn) {
   if (isServer) return;
-  if (attachEvent) {
+  if (!element.__resizeListeners__) {
-    element.attachEvent('onresize', fn);
+    element.__resizeListeners__ = [];
-  } else {
+    element.__ro__ = new ResizeObserver(resizeHandler);
-    if (!element.__resizeTrigger__) {
+    element.__ro__.observe(element);
-      if (getComputedStyle(element).position === 'static') {
-        element.style.position = 'relative';
-      }
-      createStyles();
-      element.__resizeLast__ = {};
-      element.__resizeListeners__ = [];
-
-      const resizeTrigger = element.__resizeTrigger__ = document.createElement('div');
-      resizeTrigger.className = 'resize-triggers';
-      resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
-      element.appendChild(resizeTrigger);
-
-      resetTrigger(element);
-      element.addEventListener('scroll', scrollListener, true);
-
-      /* Listen for a css animation to detect element display/re-attach */
-      if (animationStartEvent) {
-        resizeTrigger.addEventListener(animationStartEvent, function(event) {
-          if (event.animationName === RESIZE_ANIMATION_NAME) {
-            resetTrigger(element);
-          }
-        });
-      }
-    }
-    element.__resizeListeners__.push(fn);
   }
+  element.__resizeListeners__.push(fn);
 };
 
 /* istanbul ignore next */
 export const removeResizeListener = function(element, fn) {
   if (!element || !element.__resizeListeners__) return;
-  if (attachEvent) {
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-    element.detachEvent('onresize', fn);
+  if (!element.__resizeListeners__.length) {
-  } else {
+    element.__ro__.disconnect();
-    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-    if (!element.__resizeListeners__.length) {
-      element.removeEventListener('scroll', scrollListener);
-      element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
-    }
   }
 };

yarn.lock

@@ -7073,6 +7073,10 @@ requires-port@1.0.x, requires-port@1.x.x:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-dir@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"