{{on-resize}} element modifier

import functionalModifier from "ember-functional-modifiers";
import ResizeObserver from "resize-observer-polyfill";

export function onResize(element, [action]) {

  let resizeObserver = new ResizeObserver(entries => {
    let entry = entries[0];

    if (entry) {
      let rectangle = entry.contentRect;

      let data = {
        left: rectangle.left,
        right: rectangle.right,
        top: rectangle.top,
        bottom: rectangle.bottom,
        width: rectangle.width,
        height: rectangle.height,
        x: rectangle.x,
        y: rectangle.y,
      };

      action(data);
    }
  });

  resizeObserver.observe(element);

  return () => {
    resizeObserver.unobserve(element);
  };
}

export default functionalModifier(onResize);