Sha256: 6df041a2e5cdea5f472c95a200d2dc53eca6296c8d165a7d3aaac21cd66ad49a

Contents?: true

Size: 1007 Bytes

Versions: 73

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

73 entries across 73 versions & 1 rubygems

Version Path
coveragebook_components-0.8.4 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.8.3 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.8.2 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.8.1 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.8.0 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.8.0.beta.3 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.8.0.beta.2 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.8.0.beta.1 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.10 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.9 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.8 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.7 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.6 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.5 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.4 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.3 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.2 app/assets/js/libs/alpine/directives/dimensions.js
coveragebook_components-0.7.1 app/assets/js/libs/alpine/plugins/dimensions.js
coveragebook_components-0.7.0 app/assets/js/libs/alpine/plugins/dimensions.js
coveragebook_components-0.6.5 app/assets/js/libs/alpine/plugins/dimensions.js