Sha256: 6df041a2e5cdea5f472c95a200d2dc53eca6296c8d165a7d3aaac21cd66ad49a

Contents?: true

Size: 1007 Bytes

Versions: 74

Compression:

Stored size: 1007 Bytes

Contents

import { setData, getData } from "@helpers/alpine";

export default function (Alpine) {
  Alpine.directive(
    "dimensions",
    (el, { value, modifiers, expression }, { evaluateLater, cleanup }) => {
      if (value) return;

      const data = getData(el);
      let target;
      if (modifiers.includes("parent")) {
        target = el.parentNode;
      } else {
        target = el.querySelector("[x-dimensions\\:target]") || el;
      }

      const evaluate = evaluateLater(expression);
      const sizeObserver = new ResizeObserver((entries) => {
        const dimensions = entries[0].contentRect;

        evaluate(() => {}, {
          scope: {
            dimensions: {
              width: dimensions.width,
              height: dimensions.height,
              x: dimensions.x,
              y: dimensions.y,
            },
          },
        });
      });

      sizeObserver.observe(target);

      cleanup(() => {
        sizeObserver && sizeObserver.disconnect();
      });
    }
  );
}

Version data entries

74 entries across 74 versions & 1 rubygems

Version Path
coveragebook_components-0.19.9 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.8 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.7 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.6 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.5 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.4 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.3 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.2 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.1 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.19.0 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.18.8 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.18.7 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.18.0 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.17.7 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.17.6 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.17.5 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.17.4 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.17.3 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.17.2 app/assets/js/base/alpine/directives/dimensions.js
coveragebook_components-0.17.1 app/assets/js/base/alpine/directives/dimensions.js