@gitlab/ui/dist/directives/resize_observer/resize_observer.js

GitLab UI Components

import { isFunction } from 'lodash-es';

let observer = null;

// Exported for testing purposes only
const resetObserver = () => {
  var _observer;
  (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
  observer = null;
};
const attachObserver = (el, resizeHandler) => {
  if (!isFunction(resizeHandler)) {
    throw TypeError('directive value must be a function');
  }
  if (!observer) {
    // the observer instance is shared for performance reasons
    // more information: https://github.com/WICG/ResizeObserver/issues/59
    observer = new ResizeObserver(entries => {
      entries.forEach(event => {
        event.target.glResizeHandler(event);
      });
    });
  }
  el.glResizeHandler = resizeHandler;
  observer.observe(el);
};
const detachObserver = el => {
  if (el.glResizeHandler) {
    var _observer2;
    delete el.glResizeHandler;
    (_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.unobserve(el);
  }
};
const GlResizeObserverDirective = {
  bind(el, _ref) {
    let resizeHandler = _ref.value,
      _ref$arg = _ref.arg,
      enabled = _ref$arg === void 0 ? true : _ref$arg;
    if (enabled) {
      attachObserver(el, resizeHandler);
    }
  },
  update(el, _ref2) {
    let resizeHandler = _ref2.value,
      _ref2$arg = _ref2.arg,
      enabled = _ref2$arg === void 0 ? true : _ref2$arg;
    if (enabled) {
      attachObserver(el, resizeHandler);
    } else {
      detachObserver(el);
    }
  },
  unbind: detachObserver
};

export { GlResizeObserverDirective, resetObserver };