easy-component-ui 3.0.12 → 3.0.14

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

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