easy-component-ui 3.0.13 → 3.0.14

package/dist/components/ea-image-preview.js

@@ -1,532 +0,0 @@
-var Z = Object.defineProperty;
-var H = (r) => {
-  throw TypeError(r);
-};
-var G = (r, n, t) => n in r ? Z(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
-var L = (r, n, t) => G(r, typeof n != "symbol" ? n + "" : n, t), j = (r, n, t) => n.has(r) || H("Cannot " + t);
-var e = (r, n, t) => (j(r, n, "read from private field"), t ? t.call(r) : n.get(r)), o = (r, n, t) => n.has(r) ? H("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t), g = (r, n, t, s) => (j(r, n, "write to private field"), s ? s.call(r, t) : n.set(r, t), t);
-import { EaOverlay as J } from "./ea-overlay.js";
-import { E as K } from "../utils/Utils.js";
-import "./ea-image.js";
-import { s as Q } from "../css/ea-image-preview.style.js";
-var v, U, k, S, q, d, Y, C, I, z, R, A, M, N, P, i, c, O, E, _, x, X, $, B, D, T;
-class W extends J {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, v);
-    /** @type {HTMLElement} */
-    o(this, U);
-    /** @type {HTMLElement} */
-    o(this, k);
-    /** @type {HTMLElement} */
-    o(this, S);
-    /** @type {HTMLElement} */
-    o(this, q);
-    /** @type {HTMLElement} */
-    o(this, d);
-    /** @type {HTMLElement} */
-    o(this, Y);
-    /** @type {HTMLElement} */
-    o(this, C);
-    /** @type {HTMLElement} */
-    o(this, I);
-    /** @type {HTMLElement} */
-    o(this, z);
-    /** @type {HTMLElement} */
-    o(this, R);
-    /** @type {HTMLElement} */
-    o(this, A);
-    /** @type {HTMLElement} */
-    o(this, M);
-    /** @type {HTMLElement} */
-    o(this, N);
-    /** @type {HTMLElement} */
-    o(this, P);
-    /** @type {AbortController} */
-    o(this, i, {
-      /** @type {AbortController | null} */
-      main: null,
-      /** @type {AbortController | null} */
-      img: null,
-      /** @type {AbortController | null} */
-      clickModal: null,
-      /** @type {AbortController | null} */
-      imgMove: null,
-      /** @type {AbortController | null} */
-      toolbar: null,
-      /** @type {AbortController | null} */
-      switchPrev: null,
-      /** @type {AbortController | null} */
-      switchNext: null,
-      /** @type {AbortController | null} */
-      zoomOut: null,
-      /** @type {AbortController | null} */
-      zoomIn: null,
-      /** @type {AbortController | null} */
-      rotateLeft: null,
-      /** @type {AbortController | null} */
-      rotateRight: null
-    });
-    o(this, c, {
-      urlList: [],
-      /** @type {"loading" | "success" | "error"} */
-      status: "loading",
-      dirtyUpdate: !1,
-      isUrlListInit: !1,
-      position: {
-        x: 0,
-        y: 0
-      }
-    });
-    L(this, "state", this.properties({
-      visible: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.status = t, t && this.urlList.length > 0 && (e(this, d).querySelector(
-            ".ea-image-preview__img"
-          ) || e(this, T).call(this, this.index));
-        }
-      },
-      "initial-index": {
-        type: Number,
-        default: 0,
-        observer: (t) => {
-          this.index = t;
-        }
-      },
-      index: {
-        type: Number,
-        default: () => this["initial-index"],
-        observer: (t, s) => {
-          if (e(this, c).dirtyUpdate) return e(this, c).dirtyUpdate = !1;
-          if (this.infinite) {
-            if (!this.urlList.length) return;
-            const a = this.urlList.length - 1;
-            if (t > a) return this.index = 0;
-            if (t < 0) return this.index = a;
-          } else if (t < 0 || t > this.urlList.length - 1)
-            return e(this, c).dirtyUpdate = !0, this.index = s;
-          e(this, T).call(this, t);
-        }
-      },
-      infinite: {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-        }
-      },
-      "append-to-body": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      },
-      zoom: {
-        type: Number,
-        default: 1,
-        observer: () => {
-        }
-      },
-      "zoom-rate": {
-        type: Number,
-        default: 1.2,
-        observer: () => {
-        }
-      },
-      scale: {
-        type: Number,
-        default: 1,
-        observer: (t, s) => {
-          if (t < this["min-scale"] || t > this["max-scale"])
-            return this.scale = s;
-          e(this, d).style.setProperty("--ea-image-preview-scale", t);
-        }
-      },
-      "min-scale": {
-        type: Number,
-        default: 0.2,
-        observer: () => {
-        }
-      },
-      "max-scale": {
-        type: Number,
-        default: 7,
-        observer: () => {
-        }
-      },
-      "close-on-press-escape": {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-        }
-      },
-      "show-progress": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "hide-on-click-modal": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var a;
-          const s = (l) => {
-            !e(this, d).querySelector(".ea-image-preview__img").contains(l.target) && !e(this, k).contains(l.target) && !e(this, S).contains(l.target) && !e(this, q).contains(l.target) && (this.hide(), this.visible = !1);
-          };
-          (a = e(this, i).clickModal) == null || a.abort(), t && (e(this, i).clickModal = new AbortController(), e(this, v).addEventListener("click", s, {
-            signal: e(this, i).clickModal.signal
-          }));
-        }
-      }
-    }));
-    L(this, "propState", this.properties({
-      urlList: {
-        props: !0,
-        type: Array,
-        default: [],
-        /** @param {String[]} newVal */
-        observer: (t) => {
-          e(this, c).isUrlListInit = !1, e(this, c).urlList = t, this.index = this["initial-index"], e(this, c).isUrlListInit = !0;
-        }
-      }
-    }));
-    /**
-     * 处理挂载到目标
-     */
-    o(this, O, () => {
-      this["append-to-body"] && document.body.appendChild(this);
-    });
-    /**
-     * 处理切换
-     * @param {'prev' | 'next'} action
-     */
-    o(this, E, (t) => {
-      t === "prev" ? this.index-- : t === "next" && this.index++;
-    });
-    /**
-     * 处理缩放
-     * @param {'in' | 'out'} action
-     */
-    o(this, _, (t) => {
-      t === "in" ? this.scale = (this.scale * this["zoom-rate"]).toFixed(3) : t === "out" && (this.scale = (this.scale / this["zoom-rate"]).toFixed(3));
-    });
-    /**
-     * 处理旋转
-     * @param {'left' | 'right' | 'reset'} action
-     */
-    o(this, x, (t) => {
-      const s = Number(
-        e(this, d).style.getPropertyValue("--ea-image-preview-rotate").split("deg")[0] || 0
-      );
-      let a = 0;
-      t === "left" ? a = s - 90 : t === "right" && (a = s + 90), e(this, d).style.setProperty(
-        "--ea-image-preview-rotate",
-        a + "deg"
-      ), this.emit("rotate", {
-        detail: {
-          oldVal: s,
-          rotate: a
-        }
-      });
-    });
-    /**
-     * 处理进度
-     * @param {Number} active
-     * @param {Number} total
-     * @returns
-     */
-    o(this, X, (t, s) => {
-      const a = this.querySelector("[slot='progress']"), l = (h, p) => {
-        h.forEach((u) => u.textContent = t), p.forEach((u) => u.textContent = s);
-      };
-      if (a)
-        try {
-          a.assignedNodes().forEach((p) => {
-            const u = p.querySelectorAll("[data-active]"), w = p.querySelectorAll("[data-total]");
-            l(u, w);
-          });
-        } catch {
-          const h = a.querySelectorAll("[data-active]"), p = a.querySelectorAll("[data-total]");
-          l(h, p);
-        }
-      else
-        e(this, R).textContent = `${t} / ${s}`;
-    });
-    /**
-     * 处理图片移动事件
-     * @param {MouseEvent} startE
-     */
-    o(this, $, (t) => {
-      var w;
-      t.preventDefault(), (w = e(this, i).imgMove) == null || w.abort(), e(this, i).imgMove = new AbortController();
-      const s = t.clientX, a = t.clientY, l = e(this, c).position.x, h = e(this, c).position.y, p = (m) => {
-        m.preventDefault();
-        const f = m.clientX - s, y = m.clientY - a, b = l + f, F = h + y;
-        e(this, d).style.setProperty(
-          "--ea-image-preview-img-move-x",
-          `${b}px`
-        ), e(this, d).style.setProperty(
-          "--ea-image-preview-img-move-y",
-          `${F}px`
-        );
-      }, u = (m) => {
-        var b;
-        m.preventDefault();
-        const f = m.clientX - s, y = m.clientY - a;
-        e(this, c).position.x = l + f, e(this, c).position.y = h + y, (b = e(this, i).imgMove) == null || b.abort();
-      };
-      window.addEventListener("mousemove", p, {
-        signal: e(this, i).imgMove.signal
-      }), window.addEventListener("mouseup", u, {
-        signal: e(this, i).imgMove.signal
-      });
-    });
-    /**
-     * 初始化工具栏的事件。
-     * 若用户传入了自定义工具，则优先使用用户元素，否则使用内置元素
-     */
-    o(this, B, () => {
-      var p;
-      let t = this.shadowRoot.querySelector("slot[name='toolbar']");
-      const s = this.closest(".ea-image-preview");
-      s && (t = s.querySelector("slot[name='toolbar']"));
-      for (const u in e(this, i))
-        (p = e(this, i)[u]) == null || p.abort(), e(this, i)[u] = new AbortController();
-      const a = {
-        "switch-prev": e(this, i).switchPrev,
-        "switch-next": e(this, i).switchNext,
-        "zoom-out": e(this, i).zoomOut,
-        "zoom-in": e(this, i).zoomIn,
-        "rotate-anticlockwise": e(this, i).rotateLeft,
-        "rotate-clockwise": e(this, i).rotateRight
-      }, l = {
-        "switch-prev": {
-          el: null,
-          callback: () => {
-            e(this, E).call(this, "prev");
-          }
-        },
-        "switch-next": {
-          el: null,
-          callback: () => {
-            e(this, E).call(this, "next");
-          }
-        },
-        "zoom-out": {
-          el: e(this, M),
-          callback: () => {
-            e(this, _).call(this, "out");
-          }
-        },
-        "zoom-in": {
-          el: e(this, A),
-          callback: () => {
-            e(this, _).call(this, "in");
-          }
-        },
-        "rotate-anticlockwise": {
-          el: e(this, N),
-          callback: () => {
-            e(this, x).call(this, "left");
-          }
-        },
-        "rotate-clockwise": {
-          el: e(this, P),
-          callback: () => {
-            e(this, x).call(this, "right");
-          }
-        }
-      }, h = () => {
-        Object.values(l).forEach((m) => {
-          m.el && (m.el.style.display = "");
-        });
-        const u = t.assignedElements(), w = /* @__PURE__ */ new Map();
-        u.forEach((m) => {
-          m.nodeType === Node.ELEMENT_NODE && m.querySelectorAll("[data-action]").forEach((y) => {
-            const b = y.getAttribute("data-action");
-            b && !w.has(b) && w.set(b, y);
-          });
-        });
-        for (const [m, f] of Object.entries(l)) {
-          const y = w.get(m);
-          y ? (f.el && (f.el.style.display = "none"), y.addEventListener("click", f.callback, {
-            signal: a[m].signal
-          })) : f.el && f.el.addEventListener("click", f.callback, {
-            signal: a[m].signal
-          });
-        }
-      };
-      t.addEventListener("slotchange", h, {
-        signal: e(this, i).toolbar.signal
-      }), setTimeout(() => h(), 0);
-    });
-    /**
-     * 关闭 Preview
-     */
-    o(this, D, () => {
-      this.hide(), this.visible = !1;
-    });
-    /**
-     * 设置当前项
-     * @param {Number} index
-     */
-    L(this, "setActiveItem", (t) => {
-      this.index = t;
-    });
-    /**
-     * 渲染指定索引的图片
-     * @param {number} index - 图片索引
-     */
-    o(this, T, (t) => {
-      var a;
-      const s = this.urlList[t];
-      if (e(this, d).innerHTML = "", s) {
-        (a = e(this, i).img) == null || a.abort(), e(this, i).img = new AbortController(), e(this, d).innerHTML = K.EaElement.h(
-          "ea-image",
-          "ea-image-preview__img",
-          {
-            src: s,
-            fit: "contain"
-          },
-          `
-          <slot name="viewer-error" slot="error"></slot>
-        `
-        );
-        const l = e(this, d).querySelector(".ea-image-preview__img"), h = () => {
-          e(this, c).status = "error", this.classList.remove(
-            "ea-image-preview--success",
-            "ea-image-preview--loading"
-          ), e(this, v).classList.add("ea-image-preview--error"), this.emit("error"), e(this, i).img.abort();
-        }, p = () => {
-          e(this, c).status = "success", e(this, v).classList.remove(
-            "ea-image-preview--error",
-            "ea-image-preview--loading"
-          ), e(this, v).classList.add("ea-image-preview--success"), e(this, i).img.abort();
-        };
-        e(this, X).call(this, t + 1, this.urlList.length), l.addEventListener("error", h, {
-          once: !0,
-          signal: e(this, i).img.signal
-        }), l.addEventListener("load", p, {
-          once: !0,
-          signal: e(this, i).img.signal
-        }), this.visible && e(this, c).isUrlListInit && this.emit("switch", {
-          detail: {
-            index: t,
-            url: s,
-            imgTarget: l
-          }
-        });
-      }
-    });
-    /**
-     * 重置状态
-     */
-    L(this, "reset", () => {
-      this.index = this["initial-index"], this.scale = 1, e(this, x).call(this, "reset"), e(this, c).position = {
-        x: 0,
-        y: 0
-      }, e(this, d).style.setProperty("--ea-image-preview-img-move-x", "0"), e(this, d).style.setProperty("--ea-image-preview-img-move-y", "0");
-    });
-    g(this, v, this.shadowRoot.querySelector(".ea-overlay")), e(this, v).innerHTML = e(this, v).innerHTML + `
-      <header class="ea-image-preview__header" part="header">
-        <ea-icon class="ea-image-preview__icon close-icon" name="xmark" part="icon close-icon"></ea-icon>
-      </header>
-      <main class="ea-image-preview__main" part="main">
-        <ea-icon class="ea-image-preview__icon prev-icon" name="angle-left" part="icon prev-icon"></ea-icon>
-        <ea-icon class="ea-image-preview__icon next-icon" name="angle-right" part="icon next-icon"></ea-icon>
-      </main>
-      <footer class="ea-image-preview__footer" part="footer">
-        <section class="ea-image-preview__progress" part="progress">
-          <slot name="progress"></slot>
-        </section>
-        <section class="ea-image-preview__toolbar" part="toolbar">
-          <slot name="toolbar">
-            <ea-icon class="ea-image-preview__icon zoom-out-icon" name="magnifying-glass-minus" part="icon zoom-out-icon"></ea-icon>
-            <ea-icon class="ea-image-preview__icon zoom-in-icon" name="magnifying-glass-plus" part="icon zoom-in-icon"></ea-icon>
-            <ea-icon class="ea-image-preview__icon rotate-left-icon" name="rotate-left" part="icon rotate-left-icon"></ea-icon>
-            <ea-icon class="ea-image-preview__icon rotate-right-icon" name="rotate-right" part="icon rotate-right-icon"></ea-icon>
-          </slot>
-        </section>
-      </footer>
-    `, g(this, U, this.shadowRoot.querySelector(".ea-overlay__content")), g(this, Y, this.shadowRoot.querySelector(".ea-overlay__mask")), g(this, d, this.shadowRoot.querySelector(".ea-overlay__content")), g(this, C, this.shadowRoot.querySelector(".close-icon")), g(this, I, this.shadowRoot.querySelector(".prev-icon")), g(this, z, this.shadowRoot.querySelector(".next-icon")), g(this, A, this.shadowRoot.querySelector(".zoom-in-icon")), g(this, M, this.shadowRoot.querySelector(".zoom-out-icon")), g(this, N, this.shadowRoot.querySelector(".rotate-left-icon")), g(this, P, this.shadowRoot.querySelector(".rotate-right-icon")), g(this, R, this.shadowRoot.querySelector(
-      ".ea-image-preview__progress slot[name='progress']"
-    )), g(this, k, this.shadowRoot.querySelector(".ea-image-preview__header")), g(this, S, this.shadowRoot.querySelector(".ea-image-preview__main")), g(this, q, this.shadowRoot.querySelector(".ea-image-preview__footer")), e(this, O).call(this);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "visible",
-      "index",
-      "initial-index",
-      "infinite",
-      "zoom-rate",
-      "scale",
-      "min-scale",
-      "max-scale",
-      "close-on-press-escape",
-      "hide-on-click-modal",
-      "show-progress",
-      "append-to-body"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = `${super.updateContainerClasslist()} ${this.computedClasslist(
-      "ea-image-preview",
-      {
-        ["--" + e(this, c).status]: e(this, c).status
-      },
-      {
-        "show-progress": this["show-progress"]
-      }
-    )}`;
-    return e(this, v).className = t, t;
-  }
-  connectedCallback() {
-    var l;
-    super.connectedCallback(), this.assignedStyle(Q), (l = e(this, i).main) == null || l.abort(), e(this, i).main = new AbortController();
-    const t = () => {
-      e(this, E).call(this, "prev");
-    }, s = () => {
-      e(this, E).call(this, "next");
-    }, a = (h) => {
-      h.preventDefault(), h.deltaY > 0 ? e(this, _).call(this, "out") : e(this, _).call(this, "in");
-    };
-    e(this, B).call(this), e(this, C).addEventListener("click", e(this, D), {
-      signal: e(this, i).main.signal
-    }), e(this, I).addEventListener("click", t, {
-      signal: e(this, i).main.signal
-    }), e(this, z).addEventListener("click", s, {
-      signal: e(this, i).main.signal
-    }), e(this, v).addEventListener("wheel", a, {
-      signal: e(this, i).main.signal,
-      passive: !1
-    }), this.addEventListener("closed", this.reset, {
-      signal: e(this, i).main.signal
-    }), e(this, d).addEventListener("mousedown", e(this, $), {
-      signal: e(this, i).main.signal
-    }), this["close-on-press-escape"] && window.addEventListener(
-      "keydown",
-      (h) => {
-        h.key === "Escape" && this.hide();
-      },
-      { signal: e(this, i).main.signal }
-    );
-  }
-  $beforeUnmounted() {
-    for (const t of Object.values(e(this, i)))
-      t == null || t.abort();
-  }
-}
-v = new WeakMap(), U = new WeakMap(), k = new WeakMap(), S = new WeakMap(), q = new WeakMap(), d = new WeakMap(), Y = new WeakMap(), C = new WeakMap(), I = new WeakMap(), z = new WeakMap(), R = new WeakMap(), A = new WeakMap(), M = new WeakMap(), N = new WeakMap(), P = new WeakMap(), i = new WeakMap(), c = new WeakMap(), O = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), X = new WeakMap(), $ = new WeakMap(), B = new WeakMap(), D = new WeakMap(), T = new WeakMap();
-window.customElements.get("ea-image-preview") || window.customElements.define("ea-image-preview", W);
-export {
-  W as EaImagePreview
-};