wj-elements 0.1.136 → 0.1.137

package/dist/wje-masonry.js

@@ -0,0 +1,267 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import WJElement from "./wje-element.js";
+const DEFAULT_DEBOUNCE_MS = 300;
+const COL_COUNT_CSS_VAR_NAME = `--wje-masonry-layout-col-count`;
+const GAP_CSS_VAR_NAME = `--wje-masonry-layout-gap`;
+const ELEMENT_NODE_TYPE = 1;
+const DEBOUNCE_MAP = /* @__PURE__ */ new Map();
+function getNumberAttribute($elem, name, defaultValue) {
+  const value = parseFloat($elem.getAttribute(name) || "");
+  return isNaN(value) ? defaultValue : value;
+}
+function getColCount(totalWidth, cols, maxColWidth) {
+  return isNaN(cols) ? Math.max(1, Math.ceil(totalWidth / maxColWidth)) : cols;
+}
+function debounce(cb, ms, id) {
+  const existingTimeout = DEBOUNCE_MAP.get(id);
+  if (existingTimeout !== null && existingTimeout !== void 0) window.clearTimeout(existingTimeout);
+  DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
+}
+function findSmallestColIndex(colHeights) {
+  let smallestIndex = 0;
+  let smallestHeight = Infinity;
+  colHeights.forEach((height, i) => {
+    if (height < smallestHeight) {
+      smallestHeight = height;
+      smallestIndex = i;
+    }
+  });
+  return smallestIndex;
+}
+const styles = "/*\n[ WJ Masonry ]\n*/\n\n:host {\n    display: flex;\n    align-items: flex-start;\n    justify-content: stretch;\n    width: 100%;\n}\n\n.column {\n    max-width: calc(\n        (\n            100% / var(--wje-masonry-layout-col-count, 1) -\n                (\n                    (\n                        var(--wje-masonry-layout-gap, 1rem) * (var(--wje-masonry-layout-col-count, 1) - 1) /\n                            var(--wje-masonry-layout-col-count, 1)\n                    )\n                )\n        )\n    );\n    width: 100%;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.column:not(:last-child) {\n    margin-inline-end: var(--wje-masonry-layout-gap, 1rem);\n}\n\n.column ::slotted(*) {\n    margin-block-end: var(--wje-masonry-layout-gap, 1rem);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n/* Hide the items that has not yet found the correct slot */\n#unset-items {\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n";
+class Masonry extends WJElement {
+  /**
+   * Constructor for the Masonry class.
+   */
+  constructor() {
+    super();
+    __publicField(this, "debounceId", `layout_${Math.random()}`);
+    __publicField(this, "ro");
+    __publicField(this, "className", "Masonry");
+    /**
+     * Called when the slot changes.
+     */
+    __publicField(this, "onSlotChange", () => {
+      const $unsetElements = (this.unsetSlot.assignedNodes() || []).filter(
+        (node) => node.nodeType === ELEMENT_NODE_TYPE
+      );
+      if ($unsetElements.length > 0) {
+        this.layout();
+      }
+    });
+    /**
+     * Called when the window resizes.
+     * @param {Array} entries The entries to use.
+     */
+    __publicField(this, "onResize", (entries) => {
+      const { width } = entries !== null && entries !== void 0 && Array.isArray(entries) && entries.length > 0 ? entries[0].contentRect : { width: this.offsetWidth };
+      const colCount = getColCount(width, this.cols, this.maxColWidth);
+      if (colCount !== this.columns.length) {
+        this.scheduleLayout();
+      }
+    });
+    /**
+     * Lays out the element.
+     */
+    __publicField(this, "layout", () => {
+      if (this.currentRequestAnimationFrameCallback !== null && this.currentRequestAnimationFrameCallback !== void 0) {
+        window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
+      }
+      this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
+        const gap = this.gap;
+        const $elements = Array.from(this.children).filter((node) => node.nodeType === ELEMENT_NODE_TYPE);
+        const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);
+        const colHeights = Array(colCount).fill(0);
+        const writes = [];
+        for (const elem of $elements) {
+          const height = elem.getBoundingClientRect().height;
+          let smallestColIndex = findSmallestColIndex(colHeights);
+          colHeights[smallestColIndex] += height + +gap;
+          const newSlot = smallestColIndex;
+          if (elem.slot !== newSlot) {
+            writes.push(() => elem.slot = newSlot);
+          }
+        }
+        for (const write of writes) {
+          write();
+        }
+        this.renderCols(colCount);
+      });
+    });
+    this.debounceId = `layout_${Math.random()}`;
+    this.ro = void 0;
+    this.currentRequestAnimationFrameCallback = void 0;
+    this.unsetSlot = void 0;
+  }
+  /**
+   * Setter for the maxColWidth property.
+   * @param {number} value The maximum column width.
+   */
+  set maxColWidth(value) {
+    this.setAttribute("max-col-width", value);
+  }
+  /**
+   * Getter for the maxColWidth property.
+   * @returns {number} The maximum column width.
+   */
+  get maxColWidth() {
+    return this.hasAttribute("max-col-width") ? +this.getAttribute("max-col-width") : 500;
+  }
+  /**
+   * Setter for the cols property.
+   * @param {number} value The number of columns.
+   */
+  set cols(value) {
+    if (this.hasAttribute("cols")) this.setAttribute("cols", value);
+    else this.setAttribute("cols", "auto");
+  }
+  /**
+   * Getter for the cols property.
+   * @returns {number} The number of columns.
+   */
+  get cols() {
+    return getNumberAttribute(this, "cols", "auto");
+  }
+  /**
+   * Setter for the gap property.
+   * @param {number} value The gap between columns.
+   */
+  set gap(value) {
+    this.setAttribute("gap", value);
+  }
+  /**
+   * Getter for the gap property.
+   * @returns {number} The gap between columns.
+   */
+  get gap() {
+    return getNumberAttribute(this, "gap", "24");
+  }
+  /**
+   * Setter for the debounce property.
+   * @param {number} value The debounce time.
+   */
+  set debounce(value) {
+    this.setAttribute("debounce", value);
+  }
+  /**
+   * Getter for the debounce property.
+   * @returns {number} The debounce time.
+   */
+  get debounce() {
+    return getNumberAttribute(this, "debounce", DEFAULT_DEBOUNCE_MS);
+  }
+  /**
+   * Getter for the columns property.
+   * @returns {Array} An array of all the columns.
+   */
+  get columns() {
+    return Array.from(this.shadowRoot.querySelectorAll(`.column`));
+  }
+  /**
+   * Getter for the cssStyleSheet property.
+   * @static
+   * @returns {CSSStyleSheet} The CSS style sheet for the masonry layout.
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Getter for the observedAttributes property.
+   * @returns {Array} An array of the observed attributes.
+   */
+  static get observedAttributes() {
+    return ["max-col-width", "gap", "cols"];
+  }
+  /**
+   * Callback for when an attribute changes.
+   */
+  attributeChangedCallback(name, old, newName) {
+    switch (name) {
+      case "gap":
+        this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);
+        break;
+    }
+    this.scheduleLayout();
+  }
+  /**
+   * Callback for when the element is disconnected.
+   */
+  beforeDisconnect() {
+    this.unsetSlot.removeEventListener("slotchange", this.onSlotChange);
+    window.removeEventListener("resize", this.onResize);
+    if (this.ro !== null && this.ro !== void 0) {
+      this.ro.unobserve(this);
+    }
+  }
+  /**
+   * Sets up the attributes for the element.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the element for the masonry layout.
+   * @returns {DocumentFragment} The drawn element.
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("id", "unset-items");
+    native.setAttribute("part", "native");
+    let unsetSlot = document.createElement("slot");
+    native.appendChild(unsetSlot);
+    this.unsetSlot = unsetSlot;
+    this.native = native;
+    fragment.appendChild(native);
+    return fragment;
+  }
+  /**
+   * Called after the element is drawn.
+   */
+  afterDraw() {
+    this.onSlotChange();
+    this.onResize();
+    this.layout();
+    this.unsetSlot.addEventListener("slotchange", this.onSlotChange);
+    if ("ResizeObserver" in window) {
+      this.ro = new ResizeObserver(this.onResize);
+      this.ro.observe(this);
+    } else {
+      window.addEventListener("resize", this.onResize);
+    }
+  }
+  /**
+   * Renders the columns.
+   * @param {number} colCount The number of columns to render.
+   */
+  renderCols(colCount) {
+    const columns = this.columns;
+    if (columns.length === colCount) {
+      return;
+    }
+    for (let i = 0; i < colCount; i++) {
+      const column = document.createElement("div");
+      column.classList.add("column");
+      column.setAttribute("part", `column column-${i}`);
+      const slot = document.createElement("slot");
+      slot.setAttribute("name", i);
+      column.appendChild(slot);
+      this.context.appendChild(column);
+    }
+    this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount);
+  }
+  /**
+   * Schedules a layout.
+   * @param {number} ms The number of milliseconds to wait before laying out.
+   */
+  scheduleLayout(ms = this.debounce) {
+    debounce(this.layout, ms, this.debounceId);
+  }
+}
+Masonry.define("wje-masonry", Masonry);
+export {
+  Masonry as default
+};
+//# sourceMappingURL=wje-masonry.js.map

package/dist/wje-masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-masonry.js","sources":["../packages/wje-masonry/service/service.js","../packages/wje-masonry/masonry.element.js","../packages/wje-masonry/masonry.js"],"sourcesContent":["export const DEFAULT_MAX_COL_WIDTH = 500;\nexport const DEFAULT_DEBOUNCE_MS = 300;\n\nexport const COL_COUNT_CSS_VAR_NAME = `--wje-masonry-layout-col-count`;\nexport const GAP_CSS_VAR_NAME = `--wje-masonry-layout-gap`;\n\nexport const ELEMENT_NODE_TYPE = 1;\n\nconst DEBOUNCE_MAP = new Map();\n\n/**\n * Returns a number attribute from an element.\n * @param $elem\n * @param name\n * @param defaultValue\n * @returns {string|number}\n */\nexport function getNumberAttribute($elem, name, defaultValue) {\n    const value = parseFloat($elem.getAttribute(name) || '');\n    return isNaN(value) ? defaultValue : value;\n}\n\n/**\n * Returns the amount of cols that the masonry grid should have.\n * @param totalWidth\n * @param cols\n * @param maxColWidth\n */\nexport function getColCount(totalWidth, cols, maxColWidth) {\n    return isNaN(cols) ? Math.max(1, Math.ceil(totalWidth / maxColWidth)) : cols;\n}\n\n/**\n * Debounces a function.\n * @param cb\n * @param ms\n * @param id\n */\nexport function debounce(cb, ms, id) {\n    const existingTimeout = DEBOUNCE_MAP.get(id);\n    if (existingTimeout !== null && existingTimeout !== undefined) window.clearTimeout(existingTimeout);\n    DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));\n}\n\n/**\n * Returns the index of the column with the smallest height.\n * @param colHeights\n */\nexport function findSmallestColIndex(colHeights) {\n    let smallestIndex = 0;\n    let smallestHeight = Infinity;\n\n    colHeights.forEach((height, i) => {\n        if (height < smallestHeight) {\n            smallestHeight = height;\n            smallestIndex = i;\n        }\n    });\n\n    return smallestIndex;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport {\n    COL_COUNT_CSS_VAR_NAME,\n    debounce,\n    DEFAULT_DEBOUNCE_MS,\n    DEFAULT_MAX_COL_WIDTH,\n    ELEMENT_NODE_TYPE,\n    findSmallestColIndex,\n    GAP_CSS_VAR_NAME,\n    getColCount,\n    getNumberAttribute,\n} from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Masonry` is a custom web component that represents a masonry layout.\n * It extends from `WJElement`.\n * @summary This element represents a masonry layout.\n * @documentation https://elements.webjet.sk/components/masonry\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the masonry layout.\n * @csspart column - The individual columns in the masonry layout.\n * @slot - The default slot for the masonry layout.\n * @cssproperty [--wje-masonry-gap=1rem] - The gap between items in the masonry layout. Accepts any valid CSS length. Default is 1rem.\n * @cssproperty [--wje-masonry-layout-col-count=1] - The count column in the masonry layout. Accepts any valid CSS length.\n * @tag wje-masonry\n */\nexport default class Masonry extends WJElement {\n    /**\n     * Constructor for the Masonry class.\n     */\n    constructor() {\n        super();\n\n        this.debounceId = `layout_${Math.random()}`;\n        this.ro = undefined;\n        this.currentRequestAnimationFrameCallback = undefined;\n        this.unsetSlot = undefined;\n    }\n\n    /**\n     * Setter for the maxColWidth property.\n     * @param {number} value The maximum column width.\n     */\n    set maxColWidth(value) {\n        this.setAttribute('max-col-width', value);\n    }\n\n    /**\n     * Getter for the maxColWidth property.\n     * @returns {number} The maximum column width.\n     */\n    get maxColWidth() {\n        return this.hasAttribute('max-col-width') ? +this.getAttribute('max-col-width') : +DEFAULT_MAX_COL_WIDTH;\n    }\n\n    /**\n     * Setter for the cols property.\n     * @param {number} value The number of columns.\n     */\n    set cols(value) {\n        if (this.hasAttribute('cols')) this.setAttribute('cols', value);\n        else this.setAttribute('cols', 'auto');\n    }\n\n    /**\n     * Getter for the cols property.\n     * @returns {number} The number of columns.\n     */\n    get cols() {\n        return getNumberAttribute(this, 'cols', 'auto');\n    }\n\n    /**\n     * Setter for the gap property.\n     * @param {number} value The gap between columns.\n     */\n    set gap(value) {\n        this.setAttribute('gap', value);\n    }\n\n    /**\n     * Getter for the gap property.\n     * @returns {number} The gap between columns.\n     */\n    get gap() {\n        return getNumberAttribute(this, 'gap', '24');\n    }\n\n    /**\n     * Setter for the debounce property.\n     * @param {number} value The debounce time.\n     */\n    set debounce(value) {\n        this.setAttribute('debounce', value);\n    }\n\n    /**\n     * Getter for the debounce property.\n     * @returns {number} The debounce time.\n     */\n    get debounce() {\n        return getNumberAttribute(this, 'debounce', DEFAULT_DEBOUNCE_MS);\n    }\n\n    /**\n     * Getter for the columns property.\n     * @returns {Array} An array of all the columns.\n     */\n    get columns() {\n        return Array.from(this.shadowRoot.querySelectorAll(`.column`));\n    }\n\n    debounceId = `layout_${Math.random()}`;\n\n    ro = undefined;\n\n    className = 'Masonry';\n\n    /**\n     * Getter for the cssStyleSheet property.\n     * @static\n     * @returns {CSSStyleSheet} The CSS style sheet for the masonry layout.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes property.\n     * @returns {Array} An array of the observed attributes.\n     */\n    static get observedAttributes() {\n        return ['max-col-width', 'gap', 'cols'];\n    }\n\n    /**\n     * Callback for when an attribute changes.\n     */\n    attributeChangedCallback(name, old, newName) {\n        switch (name) {\n            case 'gap':\n                this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);\n                break;\n        }\n\n        this.scheduleLayout();\n    }\n\n    /**\n     * Callback for when the element is disconnected.\n     */\n    beforeDisconnect() {\n        this.unsetSlot.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.onResize);\n        if (this.ro !== null && this.ro !== undefined) {\n            this.ro.unobserve(this);\n        }\n    }\n\n    /**\n     * Sets up the attributes for the element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the element for the masonry layout.\n     * @returns {DocumentFragment} The drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('id', 'unset-items');\n        native.setAttribute('part', 'native');\n\n        let unsetSlot = document.createElement('slot');\n\n        native.appendChild(unsetSlot);\n\n        this.unsetSlot = unsetSlot;\n        this.native = native;\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the element is drawn.\n     */\n    afterDraw() {\n        this.onSlotChange();\n        this.onResize();\n        this.layout();\n\n        this.unsetSlot.addEventListener('slotchange', this.onSlotChange);\n\n        if ('ResizeObserver' in window) {\n            this.ro = new ResizeObserver(this.onResize);\n            this.ro.observe(this);\n        } else {\n            window.addEventListener('resize', this.onResize);\n        }\n    }\n\n    /**\n     * Called when the slot changes.\n     */\n    onSlotChange = () => {\n        const $unsetElements = (this.unsetSlot.assignedNodes() || []).filter(\n            (node) => node.nodeType === ELEMENT_NODE_TYPE\n        );\n        if ($unsetElements.length > 0) {\n            this.layout();\n        }\n    };\n\n    /**\n     * Called when the window resizes.\n     * @param {Array} entries The entries to use.\n     */\n    onResize = (entries) => {\n        const { width } =\n            entries !== null && entries !== undefined && Array.isArray(entries) && entries.length > 0\n                ? entries[0].contentRect\n                : { width: this.offsetWidth };\n        const colCount = getColCount(width, this.cols, this.maxColWidth);\n        if (colCount !== this.columns.length) {\n            this.scheduleLayout();\n        }\n    };\n\n    /**\n     * Renders the columns.\n     * @param {number} colCount The number of columns to render.\n     */\n    renderCols(colCount) {\n        const columns = this.columns;\n\n        if (columns.length === colCount) {\n            return;\n        }\n\n        for (let i = 0; i < colCount; i++) {\n            const column = document.createElement('div');\n            column.classList.add('column');\n            column.setAttribute('part', `column column-${i}`);\n\n            const slot = document.createElement('slot');\n            slot.setAttribute('name', i);\n\n            column.appendChild(slot);\n\n            this.context.appendChild(column);\n        }\n\n        this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount);\n    }\n\n    /**\n     * Schedules a layout.\n     * @param {number} ms The number of milliseconds to wait before laying out.\n     */\n    scheduleLayout(ms = this.debounce) {\n        debounce(this.layout, ms, this.debounceId);\n    }\n\n    /**\n     * Lays out the element.\n     */\n    layout = () => {\n        if (\n            this.currentRequestAnimationFrameCallback !== null &&\n            this.currentRequestAnimationFrameCallback !== undefined\n        ) {\n            window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);\n        }\n\n        this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {\n            const gap = this.gap;\n            const $elements = Array.from(this.children).filter((node) => node.nodeType === ELEMENT_NODE_TYPE);\n            const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);\n            const colHeights = Array(colCount).fill(0);\n            const writes = [];\n\n            for (const elem of $elements) {\n                const height = elem.getBoundingClientRect().height;\n                let smallestColIndex = findSmallestColIndex(colHeights);\n\n                colHeights[smallestColIndex] += height + +gap;\n\n                const newSlot = smallestColIndex;\n\n                if (elem.slot !== newSlot) {\n                    writes.push(() => (elem.slot = newSlot));\n                }\n            }\n\n            for (const write of writes) {\n                write();\n            }\n\n            this.renderCols(colCount);\n        });\n    };\n}\n","import Masonry from './masonry.element.js';\n\nexport default Masonry;\n\nMasonry.define('wje-masonry', Masonry);\n"],"names":[],"mappings":"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"}