maz-ui 3.22.4 → 3.23.1

package/components/chunks/MazLazyImg-47d3449a.mjs

@@ -0,0 +1,254 @@
+var u = Object.defineProperty;
+var f = (a, e, s) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[e] = s;
+var i = (a, e, s) => (f(a, typeof e != "symbol" ? e + "" : e, s), s);
+import "../assets/MazLazyImg.css";
+import { defineComponent as p, defineAsyncComponent as v, computed as A, withDirectives as I, openBlock as d, createElementBlock as c, normalizeClass as b, Fragment as y, renderList as C, createElementVNode as E, mergeProps as L, createVNode as O, unref as h, createCommentVNode as z, renderSlot as P } from "vue";
+import { _ as w } from "./MazAvatar-1636f58b.mjs";
+const B = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", S = {
+  baseClass: "m-lazy-img",
+  loadedClass: "m-lazy-loaded",
+  loadingClass: "m-lazy-loading",
+  errorClass: "m-lazy-error",
+  noPhotoClass: "m-lazy-no-photo",
+  noPhoto: !1,
+  observerOnce: !0,
+  loadOnce: !1,
+  noUseErrorPhoto: !1,
+  observerOptions: {
+    threshold: 0.1
+  }
+};
+class H {
+  constructor(e = {}) {
+    i(this, "observers", []);
+    i(this, "defaultOptions", S);
+    i(this, "options");
+    i(this, "onImgLoadedCallback");
+    i(this, "onImgErrorCallback");
+    i(this, "hasImgLoaded", !1);
+    this.options = this.buildOptions(e), this.onImgLoadedCallback = this.imageIsLoaded.bind(this), this.onImgErrorCallback = this.imageHasError.bind(this);
+  }
+  async loadErrorPhoto() {
+    const { default: e } = await import("./no-photography-4c6c77cf.mjs");
+    return e;
+  }
+  buildOptions(e) {
+    return {
+      ...this.defaultOptions,
+      ...e,
+      observerOptions: {
+        ...this.defaultOptions.observerOptions,
+        ...e.observerOptions
+      }
+    };
+  }
+  removeClass(e, s) {
+    e.classList.remove(s);
+  }
+  addClass(e, s) {
+    e.classList.add(s);
+  }
+  removeAllStateClasses(e) {
+    this.removeClass(e, this.options.loadedClass), this.removeClass(e, this.options.loadingClass), this.removeClass(e, this.options.errorClass), this.removeClass(e, this.options.noPhotoClass);
+  }
+  setBaseClass(e) {
+    this.addClass(e, this.options.baseClass);
+  }
+  imageIsLoading(e) {
+    var s, t;
+    this.addClass(e, this.options.loadingClass), (t = (s = this.options).onLoading) == null || t.call(s, e);
+  }
+  imageHasNoPhoto(e) {
+    this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.noPhotoClass), this.setDefaultPhoto(e);
+  }
+  imageIsLoaded(e) {
+    var s, t;
+    this.hasImgLoaded = !0, this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.loadedClass), (t = (s = this.options).onLoaded) == null || t.call(s, e);
+  }
+  imageHasError(e, s) {
+    var t, o;
+    console.warn("[maz-ui][MazLazyImg] Error while loading image", s), this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.errorClass), (o = (t = this.options).onError) == null || o.call(t, e), this.setDefaultPhoto(e);
+  }
+  getImageUrl(e, s) {
+    const t = this.getImgElement(e).getAttribute("data-lazy-src");
+    if (t)
+      return t;
+    s.value;
+    const o = typeof s.value == "object" ? s.value.src : s.value;
+    return o || console.warn("[maz-ui][MazLazyImg] src url is not defined"), o;
+  }
+  async setPictureSourceUrls(e) {
+    const s = e.querySelectorAll("source");
+    if (s.length > 0)
+      for await (const t of s) {
+        const o = t.getAttribute("data-lazy-srcset");
+        o ? t.srcset = o : console.warn(
+          '[maz-ui][MazLazyImg] the "[data-lazy-srcset]" attribute is not provided on "<source />"'
+        );
+      }
+    else
+      console.warn(
+        '[maz-ui][MazLazyImg] No "<source />" elements provided into the "<picture />" element'
+      ), this.imageHasError(e);
+  }
+  hasBgImgMode(e) {
+    return e.arg === "bg-image";
+  }
+  isPictureElement(e) {
+    return e instanceof HTMLPictureElement;
+  }
+  getImgElement(e) {
+    return this.isPictureElement(e) ? e.querySelector("img") : e;
+  }
+  async setDefaultPhoto(e) {
+    if (this.options.noUseErrorPhoto)
+      return;
+    const s = this.options.errorPhoto ?? await this.loadErrorPhoto(), t = e.querySelectorAll("source");
+    if (t.length > 0)
+      for await (const o of t)
+        o.srcset = s;
+    else
+      this.setImgSrc(e, s);
+  }
+  addEventListenerToImg(e) {
+    const s = this.getImgElement(e);
+    s.addEventListener("load", () => this.onImgLoadedCallback(e), {
+      once: !0
+    }), s.addEventListener("error", (t) => this.onImgErrorCallback(e, t), { once: !0 });
+  }
+  async loadImage(e, s) {
+    if (this.imageIsLoading(e), this.isPictureElement(e))
+      this.addEventListenerToImg(e), await this.setPictureSourceUrls(e);
+    else {
+      const t = this.getImageUrl(e, s);
+      if (!t)
+        return this.imageHasError(e);
+      this.hasBgImgMode(s) ? (e.style.backgroundImage = `url('${t}')`, this.imageIsLoaded(e)) : (this.addEventListenerToImg(e), this.setImgSrc(e, t));
+    }
+  }
+  setImgSrc(e, s) {
+    const t = this.getImgElement(e);
+    t.src = s;
+  }
+  handleIntersectionObserver(e, s, t, o) {
+    var l, r;
+    this.observers.push(o);
+    for (const n of t)
+      if (n.isIntersecting) {
+        if ((r = (l = this.options).onIntersecting) == null || r.call(l, n.target), this.options.observerOnce && o.unobserve(e), this.options.loadOnce && this.hasImgLoaded)
+          return;
+        this.loadImage(e, s);
+      }
+  }
+  createObserver(e, s) {
+    const t = (r, n) => {
+      this.handleIntersectionObserver(e, s, r, n);
+    }, o = this.options.observerOptions;
+    new IntersectionObserver(t, o).observe(e);
+  }
+  async imageHandler(e, s, t) {
+    if (t === "update")
+      for await (const o of this.observers)
+        o.unobserve(e);
+    window.IntersectionObserver ? this.createObserver(e, s) : this.loadImage(e, s);
+  }
+  async bindUpdateHandler(e, s, t) {
+    if (this.options.noPhoto)
+      return this.imageHasNoPhoto(e);
+    await this.imageHandler(e, s, t);
+  }
+  async add(e, s) {
+    if (this.hasBgImgMode(s) && this.isPictureElement(e))
+      throw new Error(`[MazLazyImg] You can't use the "bg-image" mode with "<picture />" element`);
+    setTimeout(() => this.setBaseClass(e), 0), e.getAttribute("src") || this.setImgSrc(e, B), await this.bindUpdateHandler(e, s, "bind");
+  }
+  async update(e, s) {
+    s.value !== s.oldValue && (this.hasImgLoaded = !1, this.removeAllStateClasses(e), await this.bindUpdateHandler(e, s, "update"));
+  }
+  remove(e, s) {
+    this.hasImgLoaded = !1, this.hasBgImgMode(s) && (e.style.backgroundImage = ""), this.removeAllStateClasses(e);
+    for (const t of this.observers)
+      t.unobserve(e);
+    this.observers = [];
+  }
+}
+let m;
+const M = {
+  created(a, e) {
+    const s = typeof e.value == "object" ? e.value : {};
+    m = new H(s), m.add(a, e);
+  },
+  updated(a, e) {
+    m.update(a, e);
+  },
+  unmounted(a, e) {
+    m.remove(a, e);
+  }
+}, k = ["data-lazy-srcset", "media"], U = ["alt"], T = {
+  key: 0,
+  class: "m-lazy-img-component-loader"
+}, D = /* @__PURE__ */ p({
+  __name: "MazLazyImg",
+  props: {
+    image: { type: [String, Object], default: void 0 },
+    alt: { type: String, default: void 0 },
+    noPhoto: { type: Boolean, default: !1 },
+    noLoader: { type: Boolean, default: !1 },
+    noObserverOnce: { type: Boolean, default: !1 },
+    loadOnce: { type: Boolean, default: !1 },
+    imageHeightFull: { type: Boolean, default: !1 },
+    observerOptions: { type: Object, default: null }
+  },
+  emits: ["intersecting", "loading", "loaded", "error"],
+  setup(a) {
+    const e = v(() => import("./MazSpinner-7895f54f.mjs")), s = a, t = A(() => {
+      var o;
+      return typeof s.image == "string" ? [{ srcset: s.image }] : (o = s.image) == null ? void 0 : o.sources;
+    });
+    return (o, l) => I((d(), c(
+      "picture",
+      {
+        class: b(["m-lazy-img-component", { "-use-loader": !a.noLoader, "--height-full": a.imageHeightFull }])
+      },
+      [
+        (d(!0), c(
+          y,
+          null,
+          C(t.value, ({ srcset: r, media: n }, g) => (d(), c("source", {
+            key: g,
+            "data-lazy-srcset": r,
+            media: n
+          }, null, 8, k))),
+          128
+          /* KEYED_FRAGMENT */
+        )),
+        E("img", L(o.$attrs, {
+          src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+          loading: "lazy",
+          alt: a.alt
+        }), null, 16, U),
+        a.noLoader ? z("v-if", !0) : (d(), c("div", T, [
+          O(h(e), { size: "2em" })
+        ])),
+        P(o.$slots, "default", {}, void 0, !0)
+      ],
+      2
+      /* CLASS */
+    )), [
+      [h(M), {
+        noPhoto: a.noPhoto,
+        observerOnce: !a.noObserverOnce,
+        loadOnce: a.loadOnce,
+        onIntersecting: (r) => o.$emit("intersecting", r),
+        onLoading: (r) => o.$emit("loading", r),
+        onLoaded: (r) => o.$emit("loaded", r),
+        onError: (r) => o.$emit("error", r),
+        observerOptions: a.observerOptions
+      }]
+    ]);
+  }
+});
+const F = /* @__PURE__ */ w(D, [["__scopeId", "data-v-3bfe9795"]]);
+export {
+  F as default
+};