easy-component-ui 2.1.1 → 3.0.0

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

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