@zohodesk/components/es/Responsive/ResizeObserverWithPolyfill.js

In this Package, we Provide Some Basic Components to Build Web App

const hasResizeObserver = !!window.ResizeObserver;
const mutationObserverOptions = {
  //NOTE: we donot consider child Count
  // childList: true,
  attributes: true
};

function getSize(element) {
  let {
    offsetHeight,
    offsetWidth
  } = element; // const { height, width } = element.getBoundingClientRect();

  return {
    height: offsetHeight,
    width: offsetWidth
  };
}

function dispatch() {
  let resizeResponsive = new Event('resizeResponsive');
  window.dispatchEvent(resizeResponsive);
}

if (!hasResizeObserver) {
  let interval = null;
  window.addEventListener('resize', () => {
    clearTimeout(interval);
    interval = setTimeout(dispatch, 100);
  });
} // NOTE: this is not full polyfill , we just wrote what types of changes wlli


export default class ResizeObserverPolyfill {
  constructor(onResize) {
    // method finding
    this.transitionEndHandler = this.transitionEndHandler.bind(this);
    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
    this.resizeHandler = this.resizeHandler.bind(this);
    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
    this.debounce = this.debounce.bind(this);
    this.onResize = onResize;
    this.targetNode = null;
    this.size = {
      height: 0,
      width: 0
    };

    if (hasResizeObserver) {
      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
    } else {
      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
    }
  }

  replaceResizeHandler(onResize) {
    this.onResize = onResize;
  }

  resizeHandler() {
    if (!this.targetNode) {
      return;
    }

    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {

    if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
      return;
    }

    this.size = currentSize;
    this.onResize(this.size, this.targetNode);
    return true;
  }

  resizeHandlerDispatch() {
    if (!this.resizeHandler() || hasResizeObserver) {
      return;
    }

    dispatch();
  }

  debounce() {
    clearTimeout(this.interval);
    this.interval = setTimeout(this.resizeHandler, 100);
  }

  transitionEndHandler(event) {
    if (event.propertyName.indexOf('color') === -1) {
      this.resizeHandlerDispatch();
    }
  }

  addEventListeners(targetNode) {
    targetNode.addEventListener('transitionend', this.transitionEndHandler);
    window.addEventListener('resizeResponsive', this.debounce);
    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
  }

  removeEventListeners(targetNode) {
    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
    window.removeEventListener('resizeResponsive', this.debounce);
    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
  }

  observe(targetNode) {
    this.targetNode = targetNode;

    if (hasResizeObserver) {
      this.resizeObserverInstance.observe(targetNode);
    } else {
      this.addEventListeners(targetNode);
      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
    }
  }

  replaceObservationElement(targetNode) {
    if (this.targetNode === targetNode) {
      return;
    }

    this.targetNode && this.disconnect();
    targetNode && this.observe(targetNode);
    targetNode && this.resizeHandlerDispatch();
  }

  disconnect() {
    this.targetNode && this.removeEventListeners(this.targetNode);
    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
    this.targetNode = null;
    this.size = {
      height: 0,
      width: 0
    };
  }

}