@ribajs/shopify/dist/binders/shopify-img.binder.js

Shopify extension for Riba.js

import { Binder } from "@ribajs/core";
import { getViewportDimensions, throttle } from "@ribajs/utils";
import { imgUrlFormatter } from "../formatters/img-url.formatter.js";
const PX_OFFSET = 10;
const OVERWRITE_ORIGINAL_SRC = true;
export class ShopifyImgBinder extends Binder {
    static key = "shopify-img";
    initialSrc;
    oldImageWidth = (PX_OFFSET + 1) * -1;
    resizeObserver;
    setSrcset(width) {
        if (width > 5760) {
            width = 5760;
        }
        let currentSrcset = this.el.srcset;
        let currentSizes = this.el.sizes;
        if (!imgUrlFormatter.read) {
            throw new Error("Shopify imgUrlFormatter read method is missing!");
        }
        const vw = getViewportDimensions().w;
        const filterScale = Math.round(window.devicePixelRatio || 1);
        const filterSize = width + "x";
        const newSrc = imgUrlFormatter.read(this.initialSrc, filterSize, filterScale, undefined, undefined, this.el);
        if (typeof currentSrcset === "string" && currentSrcset.length > 0) {
            currentSrcset = currentSrcset + ", ";
        }
        else {
            currentSrcset = "";
        }
        if (typeof currentSizes === "string" && currentSizes.length > 0) {
            currentSizes = currentSizes + ", ";
        }
        else {
            currentSizes = "";
        }
        const newSrcset = `${currentSrcset}${newSrc} ${width}w`;
        const newSizes = `${currentSizes} (width: ${vw}px) ${width}px`;
        this.el.srcset = newSrcset;
        this.el.sizes = newSizes;
        if (OVERWRITE_ORIGINAL_SRC) {
            this.el.src = newSrc;
        }
    }
    _onResize() {
        const currentImageWidth = this.el.offsetWidth;
        const currentSrcset = this.el.srcset;
        if (this.oldImageWidth + PX_OFFSET < currentImageWidth &&
            currentImageWidth > 0 &&
            !currentSrcset.includes(`${currentImageWidth}w`)) {
            this.setSrcset(currentImageWidth);
            this.oldImageWidth = currentImageWidth;
        }
    }
    onResize = throttle(this._onResize.bind(this));
    bind(el) {
        this.initialSrc = el.src;
        if (window.ResizeObserver) {
            this.resizeObserver = new ResizeObserver((entries) => {
                entries.forEach(() => {
                    this.onResize();
                });
            });
            this.resizeObserver.observe(el);
        }
        else {
            window.addEventListener("resize", this.onResize);
        }
    }
    unbind(el) {
        window.removeEventListener("resize", this.onResize);
        if (this.resizeObserver && this.resizeObserver.unobserve) {
            this.resizeObserver.unobserve(el);
        }
    }
    routine(el, src) {
        this.el = el;
        if (!imgUrlFormatter.read) {
            throw new Error("Shopify imgUrlFormatter read method is missing!");
        }
        if (src) {
            this._onResize();
            setTimeout(this.onResize, 200);
            if (!this.initialSrc ||
                typeof this.initialSrc !== "string" ||
                this.initialSrc.length <= 0) {
                this.initialSrc = src;
                el.src = src;
            }
        }
    }
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hvcGlmeS1pbWcuYmluZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2JpbmRlcnMvc2hvcGlmeS1pbWcuYmluZGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDdEMsT0FBTyxFQUFFLHFCQUFxQixFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFFckUsTUFBTSxTQUFTLEdBQUcsRUFBRSxDQUFDO0FBQ3JCLE1BQU0sc0JBQXNCLEdBQUcsSUFBSSxDQUFDO0FBUXBDLE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxNQUFnQztJQUNwRSxNQUFNLENBQUMsR0FBRyxHQUFHLGFBQWEsQ0FBQztJQUVuQixVQUFVLENBQVU7SUFFcEIsYUFBYSxHQUFHLENBQUMsU0FBUyxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBRXJDLGNBQWMsQ0FBa0I7SUFFaEMsU0FBUyxDQUFDLEtBQWE7UUFFN0IsSUFBSSxLQUFLLEdBQUcsSUFBSSxFQUFFLENBQUM7WUFDakIsS0FBSyxHQUFHLElBQUksQ0FBQztRQUNmLENBQUM7UUFDRCxJQUFJLGFBQWEsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQztRQUNuQyxJQUFJLFlBQVksR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQztRQUNqQyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQzFCLE1BQU0sSUFBSSxLQUFLLENBQUMsaURBQWlELENBQUMsQ0FBQztRQUNyRSxDQUFDO1FBQ0QsTUFBTSxFQUFFLEdBQUcscUJBQXFCLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDckMsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsZ0JBQWdCLElBQUks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