easy-component-ui 3.0.14 → 3.0.15

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

@@ -0,0 +1,532 @@
+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
+};