@xwadex/fesd 0.0.49 → 0.0.50

package/dist/image-preview-bundle.js

@@ -334,9 +334,9 @@ const ze = {
     return n;
   }
   return JSON.parse(n);
-}, A = (n, i) => {
+}, L = (n, i) => {
   console.warn(`[${n} warn]: ${i}`);
-}, Ye = (n, i) => {
+}, Fe = (n, i) => {
   console.error(`[${n} error]: ${i}`);
 }, j = {
   on(n, i) {
@@ -384,15 +384,15 @@ const ze = {
   let y = 0;
   if (T === 0)
     return;
-  const D = (L) => {
+  const D = (A) => {
     const z = x(t);
-    i && i.emit(L, z), !i && n.on && G(n.on[L]) && n.on[L](z);
+    i && i.emit(A, z), !i && n.on && G(n.on[A]) && n.on[A](z);
   };
   D("beforeScroll");
   const U = () => {
     y += C;
-    const L = Os[r](y, v, T, o);
-    m[u] = L, y < o && requestAnimationFrame(U), y >= o && D("afterScroll");
+    const A = Os[r](y, v, T, o);
+    m[u] = A, y < o && requestAnimationFrame(U), y >= o && D("afterScroll");
   };
   requestAnimationFrame(U);
 };
@@ -474,15 +474,15 @@ const { MODALS: O } = window, Ns = (n) => {
     s.append(o);
   }), e.children[0];
 };
-var wt, ci, Tt, di, Et, ui, Lt, hi, At, pi;
+var wt, ci, Tt, di, Et, ui, At, hi, Lt, pi;
 class li extends HTMLElement {
   constructor() {
     super();
     h(this, wt);
     h(this, Tt);
     h(this, Et);
-    h(this, Lt);
     h(this, At);
+    h(this, Lt);
     this.initialize = !1;
   }
   static get observedAttributes() {
@@ -491,7 +491,7 @@ class li extends HTMLElement {
   attributeChangedCallback(t, e, s) {
     switch (t) {
       case ":state":
-        d(this, At, pi).call(this, s);
+        d(this, Lt, pi).call(this, s);
         break;
     }
   }
@@ -512,7 +512,7 @@ wt = new WeakSet(), ci = function() {
   const { ATTRS: t } = P;
   this.__events__ = {}, this.getAttribute(":state") || this.setAttribute(":state", "close");
   const e = this.getAttribute(t.id) || Ms();
-  this.getAttribute(t.id) || (A(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), O[e] && A(`the ${t.id} "${e}" is already be used.`), O[e] = this, d(this, Tt, di).call(this);
+  this.getAttribute(t.id) || (L(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), O[e] && L(`the ${t.id} "${e}" is already be used.`), O[e] = this, d(this, Tt, di).call(this);
 }, Tt = new WeakSet(), di = function() {
   this.childDom = this.childNodes, this.template = Ns(this), this.innerHTML = "", this.append(this.template), d(this, Et, ui).call(this);
 }, Et = new WeakSet(), ui = function() {
@@ -522,8 +522,8 @@ wt = new WeakSet(), ci = function() {
       x: "hidden"
     },
     autoUpdate: !0
-  }), window.modalScroll = this.__scroller__, d(this, Lt, hi).call(this);
-}, Lt = new WeakSet(), hi = function() {
+  }), window.modalScroll = this.__scroller__, d(this, At, hi).call(this);
+}, At = new WeakSet(), hi = function() {
   var a, r, l;
   const t = this, { ATTRS: e } = P, { close: s, destroy: o } = e;
   (a = t.querySelectorAll(`[${s}]`)) == null || a.forEach((c) => {
@@ -539,7 +539,7 @@ wt = new WeakSet(), ci = function() {
   }), (l = t.querySelector("[stop-propagation]")) == null || l.addEventListener("click", function(c) {
     c.stopPropagation();
   });
-}, At = new WeakSet(), pi = function(t) {
+}, Lt = new WeakSet(), pi = function(t) {
   const { __scroller__: e } = this;
   if (t === "open") {
     if (this.style.display = "block", e) {
@@ -578,7 +578,7 @@ const { MODALS: We } = window, ht = {}, mi = (n, i, ...t) => {
   e && G(e) && e.apply(n, t);
 }, gi = (n, ...i) => {
   n && G(n) && n.apply(V, i);
-}, Fe = (n, i) => {
+}, Ye = (n, i) => {
   const { target: t } = n, e = We[t] || x(n.target);
   e && fi(n, i), e || Ps(n, i);
 }, fi = (n, i) => {
@@ -605,7 +605,7 @@ const { MODALS: We } = window, ht = {}, mi = (n, i, ...t) => {
 }, Ps = async (n, i) => {
   const { target: t, route: e, container: s, on: o, e: a } = n;
   if (!e)
-    return A("modal4", "cannot find target or data-modal-route is not defined");
+    return L("modal4", "cannot find target or data-modal-route is not defined");
   const r = (l, ...c) => {
     i && (i.emit(l, ...c), mi(i, o[l], ...c)), i || gi(o[l], ...c);
   };
@@ -644,7 +644,7 @@ const B = class B {
   /** static method 'open' */
   static open(i) {
     const { SETTINGS: t } = P, e = Object.assign({}, t, { on: {} }, i);
-    Fe(e);
+    Ye(e);
   }
   /** static method 'defineMethods' */
   static defineMethods(i) {
@@ -671,7 +671,7 @@ tt = new WeakSet(), xe = function() {
   }), this.emit("init");
 }, Dt = new WeakSet(), bi = function(i) {
   const { defaultOptions: t, eventHandler: e, instance: s } = this.modal, o = qs(this.getAttribute("data-modal-on"));
-  o && typeof o != "object" && A("modal4", "data-modal-on must be a json string.");
+  o && typeof o != "object" && L("modal4", "data-modal-on must be a json string.");
   const a = {
     target: this.getAttribute("data-modal-target") || t.target,
     action: this.getAttribute("data-modal-action") || t.action,
@@ -682,7 +682,7 @@ tt = new WeakSet(), xe = function() {
   };
   this.removeEventListener("click", e), setTimeout(() => {
     this.addEventListener("click", e);
-  }, 200), Fe(a, s);
+  }, 200), Ye(a, s);
 };
 let V = B;
 Object.assign(V.prototype, j);
@@ -758,7 +758,7 @@ const Bs = (n) => {
     s.append(o);
   }), e.children[0];
 };
-var xt, Ti, $t, Ei, _t, Li, Ct, Ai, Ht, Si, Mt, Di, It, ki, qt, xi, Ot, $i, Nt, _i;
+var xt, Ti, $t, Ei, _t, Ai, Ct, Li, Ht, Si, Mt, Di, It, ki, qt, xi, Ot, $i, Nt, _i;
 class Ws extends HTMLElement {
   constructor() {
     super();
@@ -817,13 +817,13 @@ class Ws extends HTMLElement {
 }
 xt = new WeakSet(), Ti = function() {
   if (!this.getAttribute("video-id")) {
-    A("videoPlayer", "video-render needs a ['video-id'] attribute to creat player.");
+    L("videoPlayer", "video-render needs a ['video-id'] attribute to creat player.");
     return;
   }
   this.videoId = this.getAttribute("video-id"), this.videoType = this.getAttribute("video-type"), this.videoMode = this.getAttribute("video-mode"), this.autoplay = this.getAttribute("video-autoplay"), this.startTime = this.getAttribute("video-starttime"), this.videoInboxImg = this.getAttribute("video-inbox-img"), d(this, $t, Ei).call(this);
 }, $t = new WeakSet(), Ei = function() {
-  this.childDom = this.childNodes, this.template = Bs(this), this.innerHTML = "", this.append(this.template), d(this, _t, Li).call(this);
-}, _t = new WeakSet(), Li = function() {
+  this.childDom = this.childNodes, this.template = Bs(this), this.innerHTML = "", this.append(this.template), d(this, _t, Ai).call(this);
+}, _t = new WeakSet(), Ai = function() {
   const { videoType: t, videoMode: e } = this;
   let s = "";
   function o(a) {
@@ -849,7 +849,7 @@ xt = new WeakSet(), Ti = function() {
     case "youtubeAPI":
       break;
     case "youtube":
-      document.body.wd_youtube == !1 ? o("video-player") : s = d(this, Ct, Ai).call(this);
+      document.body.wd_youtube == !1 ? o("video-player") : s = d(this, Ct, Li).call(this);
       break;
     case "youkuAPI":
       break;
@@ -875,7 +875,7 @@ xt = new WeakSet(), Ti = function() {
       break;
   }
   this.querySelector(".player-wrapper").insertAdjacentHTML(S.prepend, s);
-}, Ct = new WeakSet(), Ai = function() {
+}, Ct = new WeakSet(), Li = function() {
   const { videoId: t, autoplay: e, startTime: s } = this;
   return `<iframe src="https://www.youtube.com/embed/${t}?rel=0&${e === "on" ? "autoplay=1" : ""}&start=${s}&mute=1&loop=1&enablejsapi=1" frameborder="0" allowfullscreen="0" volumn="0" allow="${e === "on" ? "autoplay;" : ""} encrypted-media; gyroscope; picture-in-picture;"></iframe>`;
 }, Ht = new WeakSet(), Si = function() {
@@ -897,10 +897,7 @@ xt = new WeakSet(), Ti = function() {
   const { videoId: t, autoplay: e } = this;
   return `<video src="${t}" ${e == "on" ? "autoplay" : ""} muted playsinline controls></video>`;
 };
-const kn = (n) => new Promise((i) => {
-  let t = setTimeout(() => (clearTimeout(t), i()), n);
-});
-let J = 0;
+let Z = 0;
 function Ci(n) {
   const i = [];
   return (n || []).forEach((t) => {
@@ -909,15 +906,15 @@ function Ci(n) {
 }
 function Hi(n) {
   const i = Ci(n);
-  J += 1, J === 1 && (document.documentElement.classList.add("scrollLock"), $s(i));
+  Z += 1, Z === 1 && (document.documentElement.classList.add("scrollLock"), $s(i));
 }
 function Mi(n) {
-  if (J = Math.max(0, J - 1), J === 0) {
+  if (Z = Math.max(0, Z - 1), Z === 0) {
     const i = Ci(n);
     _s(i), document.documentElement.classList.remove("scrollLock");
   }
 }
-async function xn(n = 0) {
+async function kn(n = 0) {
   if (f(".loading-wrapper").length)
     return;
   f("body").append(`
@@ -934,12 +931,12 @@ async function xn(n = 0) {
     Hi();
   });
 }
-function $n() {
+function xn() {
   f(".loading-wrapper").fadeOut(300).promise().done(function() {
     f(".loading-wrapper").remove(), Mi();
   });
 }
-function _n(n, i) {
+function $n(n, i) {
   new vn(n, i);
 }
 function Gs() {
@@ -947,13 +944,13 @@ function Gs() {
   } }), e = new dn();
   n == null || n.update(), t.update(), e.reValidate(), i == null || i.update();
 }
-function Cn(n, i = () => {
+function _n(n, i = () => {
 }) {
   f(`[data-tab-content=${n}]`).fadeIn(function() {
     typeof i == "function" && i();
   }).siblings("[data-tab-content]").hide(), Gs();
 }
-function Hn() {
+function Cn() {
   je(
     {
       target: document.body,
@@ -978,27 +975,30 @@ function Hn() {
     }
   );
 }
-function Mn() {
+function Hn() {
   window.onpageshow = function(n) {
     n.persisted && window.location.reload();
   };
 }
-function In() {
+function Mn() {
   const n = navigator.userAgent;
   return {
     BigSurUP: /Mac OS X 10.15/.test(n) || /Mac OS X 10_15_7/.test(n) || /Mac OS X 10_15_8/.test(n) || /Mac OS X 10_15_9/.test(n) || /Mac OS X 11_/.test(n) || /Mac OS X 12_/.test(n)
   };
 }
-function qn(n, i) {
+function In(n, i) {
   f(n).on("click", function() {
     f(this).toggleClass(i);
   });
 }
-function On(n, i) {
+function qn(n, i) {
   f(n).on("click", function() {
     f(n).not(this).removeClass(i), f(this).addClass(i);
   });
 }
+const On = (n) => new Promise((i) => {
+  let t = setTimeout(() => (clearTimeout(t), i()), n);
+});
 function Rs(n, i = 250) {
   let t = null;
   return function(...e) {
@@ -1080,7 +1080,7 @@ function Xn(n) {
     });
   });
 }
-function Yn(n) {
+function Fn(n) {
   const i = n.el, t = f(i).find(".swiper-slide-active"), e = f(t).find("video").get(0), s = f(i).find(".swiper-slide video");
   n.autoplay.stop(), f(e).off("ended"), e ? (s.each((o, a) => {
     a.currentTime = 0;
@@ -1088,7 +1088,7 @@ function Yn(n) {
     n.slideNext();
   }), e.play()) : n.params.autoplay.enabled && n.autoplay.start();
 }
-function Fn() {
+function Yn() {
   f(".number-grow").each(function(n, i) {
     const t = f(i), o = t.attr("data-num").replace(/(\d)(?=(?:\d{3})+$)/g, "$1,").split(""), a = () => {
       let r = "";
@@ -1116,12 +1116,12 @@ function Un() {
     });
   });
 }
-function Zn(n) {
+function Jn(n) {
   const i = getComputedStyle(n).transform;
   let t = i.match(/^matrix3d\((.+)\)$/);
   return t ? parseFloat(t[1].split(", ")[12]) : (t = i.match(/^matrix\((.+)\)$/), t ? parseFloat(t[1].split(", ")[4]) : 0);
 }
-function Jn(n) {
+function Zn(n) {
   const i = getComputedStyle(n).transform;
   let t = i.match(/^matrix3d\((.+)\)$/);
   return t ? parseFloat(t[1].split(", ")[13]) : (t = i.match(/^matrix\((.+)\)$/), t ? parseFloat(t[1].split(", ")[5]) : 0);
@@ -1141,7 +1141,7 @@ const X = class X {
     h(this, st);
     h(this, zt);
     if (!dt(i) && !Se(i) && !ut(i)) {
-      Ye("video4", `找不到該物件 -> ${i}`);
+      Fe("video4", `找不到該物件 -> ${i}`);
       return;
     }
     this.__storage__ = {
@@ -1172,16 +1172,16 @@ it = new WeakSet(), Ce = function() {
 }, Pt = new WeakSet(), Ii = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.video = {}, e.video.instance = this, e.video.defaultOptions = t, e.video.params = d(this, zt, Oi).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), Ue(e.video.params) && !Xs(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, jt, qi).call(this, e)), Ue(e.video.params) || Ye("video4", "無法取得影片 ID");
+    e.video = {}, e.video.instance = this, e.video.defaultOptions = t, e.video.params = d(this, zt, Oi).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), Ue(e.video.params) && !Xs(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, jt, qi).call(this, e)), Ue(e.video.params) || Fe("video4", "無法取得影片 ID");
   }), this.emit("init");
 }, jt = new WeakSet(), qi = function(i) {
   const { LAYOUT: t } = this.options, e = i.video.params, { $selector: s, videoLayoutNo: o, videoId: a, videoType: r, videoMode: l, videoButton: c, videoCover: u, videoHighQualityPic: p } = e;
   if (l === "onBox" || l === "inBox") {
     let g = null;
     if (u === "on") {
-      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), A("video4", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構，若無結構則自動加入圖片結構"));
+      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), L("video4", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構，若無結構則自動加入圖片結構"));
       const m = s.querySelector("img"), v = (m == null ? void 0 : m.getAttribute("src")) || (m == null ? void 0 : m.getAttribute("data-src")), w = t[o] ? t[o] : t[0] || "";
-      if (w ? m.insertAdjacentHTML(S.after, w) : A("video4", `找不到對應的 LAYOUT 設定 (No: ${o})，且無預設樣式。`), !v && r == "youtube")
+      if (w ? m.insertAdjacentHTML(S.after, w) : L("video4", `找不到對應的 LAYOUT 設定 (No: ${o})，且無預設樣式。`), !v && r == "youtube")
         p == "on" ? m.setAttribute("src", `https://img.youtube.com/vi/${a}/maxresdefault.jpg `) : m.setAttribute("src", `https://img.youtube.com/vi/${a}/0.jpg`);
       else if (!v && r == "vimeo")
         m.setAttribute("src", `https://vumbnail.com/${a}_large.jpg`);
@@ -1199,13 +1199,13 @@ it = new WeakSet(), Ce = function() {
           m.setAttribute("src", `${T}`);
         }).catch(function(b) {
           console.log("error");
-        }) : A("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片");
+        }) : L("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片");
     }
-    c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || A("video4", `找不到 videoButton 設定的 element -> '${c}' , 點擊物件轉移至 '${this.__storage__.el}'`)), g.video || (g.video = {}, g.video.params = e), g.video.eventHandler = d(this, st, He), g.addEventListener("click", g.video.eventHandler);
+    c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || L("video4", `找不到 videoButton 設定的 element -> '${c}' , 點擊物件轉移至 '${this.__storage__.el}'`)), g.video || (g.video = {}, g.video.params = e), g.video.eventHandler = d(this, st, He), g.addEventListener("click", g.video.eventHandler);
   } else if (l === "onPage") {
     let g = null;
     if (u == "on") {
-      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), A("video", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構"));
+      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), L("video", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構"));
       const m = s.querySelector("img");
       m.insertAdjacentHTML(S.after, t[o]);
       const v = (m == null ? void 0 : m.getAttribute("src")) || (m == null ? void 0 : m.getAttribute("data-src"));
@@ -1214,7 +1214,7 @@ it = new WeakSet(), Ce = function() {
         m.setAttribute("src", `${b}`);
       }).catch(function(w) {
         console.log("error");
-      }) : v || A("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片"), c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || A("video4", `找不到 videoButton 設定的 element -> '${c}', 點擊物件轉移至 '${this.__storage__.el}'`));
+      }) : v || L("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片"), c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || L("video4", `找不到 videoButton 設定的 element -> '${c}', 點擊物件轉移至 '${this.__storage__.el}'`));
     } else {
       s.innerHTML = pt(e);
       return;
@@ -1254,15 +1254,15 @@ it = new WeakSet(), Ce = function() {
           var U;
           const D = y.querySelectorAll("[data-overlayscrollbars-viewport]");
           if (b.update(), Hi([...D]), o == "onBox" && u == "instagram") {
-            const L = document.querySelector("[video-template] .modal-content");
+            const A = document.querySelector("[video-template] .modal-content");
             new ResizeObserver((Ge) => {
-              Ge[0].contentRect.height > 50 && L.classList.add("active");
-            }).observe(L);
+              Ge[0].contentRect.height > 50 && A.classList.add("active");
+            }).observe(A);
           }
           if (o == "inBox") {
-            const L = g || ((U = s.querySelector("img")) == null ? void 0 : U.src);
+            const A = g || ((U = s.querySelector("img")) == null ? void 0 : U.src);
             let z;
-            L == null ? z = `
+            A == null ? z = `
                   <div
                     class="photo-box"
                     video-target
@@ -1286,14 +1286,14 @@ it = new WeakSet(), Ce = function() {
                   >
                   <picture>
                   <source
-                    srcset="${L}"
+                    srcset="${A}"
                     type="image/webp"
                   />
                   <source
-                    srcset="${L}"
+                    srcset="${A}"
                     type="image/jpeg"
                   />
-                  <img src="${L}" alt="" />
+                  <img src="${A}" alt="" />
                   </picture>
                 </div>`, y.querySelector(".video-content").insertAdjacentHTML(S.prepend, z);
             const Re = y.querySelectorAll("[video-target]");
@@ -1346,7 +1346,7 @@ it = new WeakSet(), Ce = function() {
 let _e = X;
 Object.assign(_e.prototype, j);
 customElements.define("video-player", Ws);
-const Ys = {
+const Fs = {
   "zh-tw": {
     臺北市: [
       ["中正區", "100"],
@@ -2177,7 +2177,7 @@ const Ys = {
   }
 };
 let Q;
-const Fs = (n) => {
+const Ys = (n) => {
   const { TEMPLATE: i } = Be, { childDom: t } = n.s, e = document.createElement("div"), s = n.classList.contains("filter"), o = n.getAttribute("filter-placeholder"), a = n.getAttribute("d4-icon"), r = n.getAttribute("custom-template");
   e.innerHTML = i(
     s,
@@ -2196,7 +2196,7 @@ const Fs = (n) => {
   const i = (t = n.getAttribute("control-elements")) == null ? void 0 : t.split(",");
   i && i.forEach((e) => {
     const s = document.querySelector(e);
-    s || A("dropdown", `Can't not find control element(${e})`), s && s.classList.contains("disabled") && (s.classList.remove("disabled"), s.tagName === "DROPDOWN-EL" && s.s.activeLi && I(s, [...s.s.allLi].indexOf(s.s.activeLi)));
+    s || L("dropdown", `Can't not find control element(${e})`), s && s.classList.contains("disabled") && (s.classList.remove("disabled"), s.tagName === "DROPDOWN-EL" && s.s.activeLi && I(s, [...s.s.allLi].indexOf(s.s.activeLi)));
   });
 }, I = (n, i) => {
   const t = n.getAttribute("d4-placeholder"), e = n.querySelectorAll(".dropdown-list li");
@@ -2250,13 +2250,13 @@ const Fs = (n) => {
         break;
     }
   }
-}, Zs = (n) => {
+}, Js = (n) => {
   const i = n.s.cityLang;
-  f("#newCityData").length > 0 ? f("#newCityData").val() !== "" && (Q = JSON.parse(f("#newCityData").val())[0], console.log([0])) : Q = Ys, n.classList.contains("city") && (n.s.dropdownEl.querySelector(".dropdown-list").innerHTML = "", Object.keys(Q[i]).forEach((t) => {
+  f("#newCityData").length > 0 ? f("#newCityData").val() !== "" && (Q = JSON.parse(f("#newCityData").val())[0], console.log([0])) : Q = Fs, n.classList.contains("city") && (n.s.dropdownEl.querySelector(".dropdown-list").innerHTML = "", Object.keys(Q[i]).forEach((t) => {
     const e = document.createElement("li");
     e.textContent = t, e.setAttribute("data-option", t), n.s.dropdownEl.querySelector(".dropdown-list").append(e);
   }), n.s.allLi = n.querySelectorAll(".dropdown-list li"));
-}, Js = (n, i) => {
+}, Zs = (n, i) => {
   const t = n.s.cityLang;
   Q[t][i].forEach((e, s) => {
     const o = document.createElement("li");
@@ -2360,11 +2360,11 @@ class Pi extends HTMLElement {
 Bt = new WeakSet(), ji = function() {
   this.s = {}, this.__events__ = {}, this.hasAttribute("d4-status") || this.setAttribute("d4-status", "close"), this.hasAttribute("d4-value") || this.setAttribute("d4-value", ""), d(this, Wt, zi).call(this);
 }, Wt = new WeakSet(), zi = function() {
-  this.s.childDom = this.childNodes, this.s.template = Fs(this), this.innerHTML = "", this.append(this.s.template), d(this, Gt, Bi).call(this);
+  this.s.childDom = this.childNodes, this.s.template = Ys(this), this.innerHTML = "", this.append(this.s.template), d(this, Gt, Bi).call(this);
 }, Gt = new WeakSet(), Bi = function() {
   var s;
   const t = this;
-  t.s.allLi = t.querySelectorAll(".dropdown-list li"), t.s.selectDisplayEl = t.querySelector(".select-display"), t.s.dropdownEl = t.querySelector(".dropdown"), t.s.selectType = t.hasAttribute("multiple") ? "multiple" : "single", t.s.cityLang = t.hasAttribute("city-lang") ? t.getAttribute("city-lang") : "zh-tw", Zs(t), t.s.subDropdownTotalH = 0;
+  t.s.allLi = t.querySelectorAll(".dropdown-list li"), t.s.selectDisplayEl = t.querySelector(".select-display"), t.s.dropdownEl = t.querySelector(".dropdown"), t.s.selectType = t.hasAttribute("multiple") ? "multiple" : "single", t.s.cityLang = t.hasAttribute("city-lang") ? t.getAttribute("city-lang") : "zh-tw", Js(t), t.s.subDropdownTotalH = 0;
   const e = t.getAttribute("d4-value");
   switch (t.s.selectType) {
     case "single":
@@ -2373,7 +2373,7 @@ Bt = new WeakSet(), ji = function() {
         const r = document.querySelector(`dropdown-el[dist-select="${t.id}"]`), l = r ? r.getAttribute("d4-value") !== "" : !1;
         if (r && l) {
           const c = r.getAttribute("d4-value");
-          if (Js(t, c), t.s.allLi = t.querySelectorAll(".dropdown-list li"), t.classList.remove("disabled"), t.getAttribute("d4-value") !== "") {
+          if (Zs(t, c), t.s.allLi = t.querySelectorAll(".dropdown-list li"), t.classList.remove("disabled"), t.getAttribute("d4-value") !== "") {
             const u = e.split(",")[1];
             o = t.querySelector(`.dropdown-list li[data-option="${u}"]`), t.setAttribute("d4-value", u);
           }
@@ -2534,7 +2534,7 @@ function gt(n) {
     }
   }), Object.keys(i).length === 0 ? null : i;
 }
-function Ze(n) {
+function Je(n) {
   if (gt(n)) {
     let i;
     const t = Object.keys(gt(n)).map((e) => ({
@@ -2623,13 +2623,13 @@ function Ks(n) {
     i && clearTimeout(i), i = setTimeout(n, 200, t);
   };
 }
-var Xt, Gi, Yt, Ri, Ft, Xi, Ut, Yi;
+var Xt, Gi, Ft, Ri, Yt, Xi, Ut, Fi;
 class tn extends HTMLElement {
   constructor() {
     super();
     h(this, Xt);
-    h(this, Yt);
     h(this, Ft);
+    h(this, Yt);
     h(this, Ut);
     this.initialize = !1;
   }
@@ -2665,8 +2665,8 @@ Xt = new WeakSet(), Gi = function() {
     // true / false
     gap: Number(this.getAttribute("gap")) || M.SETTINGS.gap
   };
-  this.s = {}, this.s.options = t, this.s.nowDuration = Ze(this), Vs(this), d(this, Yt, Ri).call(this);
-}, Yt = new WeakSet(), Ri = function() {
+  this.s = {}, this.s.options = t, this.s.nowDuration = Je(this), Vs(this), d(this, Ft, Ri).call(this);
+}, Ft = new WeakSet(), Ri = function() {
   const { direction: t, continual: e, gap: s } = this.s.options;
   switch (t) {
     case "left":
@@ -2678,8 +2678,8 @@ Xt = new WeakSet(), Gi = function() {
       e ? this.style.cssText = `height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${s}px;` : this.style.cssText = `min-height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${s}px;`;
       break;
   }
-  d(this, Ft, Xi).call(this), d(this, Ut, Yi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
-}, Ft = new WeakSet(), Xi = function() {
+  d(this, Yt, Xi).call(this), d(this, Ut, Fi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
+}, Yt = new WeakSet(), Xi = function() {
   const t = this, { direction: e, behavior: s, duration: o, autoplay: a, pauseOnMouseenter: r, continual: l } = t.s.options;
   let c;
   function u() {
@@ -2744,11 +2744,11 @@ Xt = new WeakSet(), Gi = function() {
   }), t.addEventListener("mouseleave", function() {
     t.s.animation && r && t.s.animation.playState === "paused" && t.play();
   });
-}, Ut = new WeakSet(), Yi = function() {
+}, Ut = new WeakSet(), Fi = function() {
   const t = this;
   function e() {
     const s = t.s.animation.startTime, o = t.s.cloneAnimation ? t.s.cloneAnimation.startTime : null;
-    t.s.nowDuration = Ze(t), t.s.animation.cancel(), t.s.cloneAnimation && t.s.cloneAnimation.cancel(), t.s.animation = t.s.animateEl.animate(H(t).animate1, {
+    t.s.nowDuration = Je(t), t.s.animation.cancel(), t.s.cloneAnimation && t.s.cloneAnimation.cancel(), t.s.animation = t.s.animateEl.animate(H(t).animate1, {
       duration: t.s.nowDuration,
       iterations: 1 / 0
     }), t.s.animation.startTime = s, t.s.cloneAnimation && (t.s.cloneAnimation = t.s.cloneAnimateEl.animate(H(t).animate2, {
@@ -2760,7 +2760,7 @@ Xt = new WeakSet(), Gi = function() {
   window.addEventListener("resize", Ks(e));
 };
 customElements.define("marquee-el", tn);
-const Je = function(n, i) {
+const Ze = function(n, i) {
   let t;
   return function(e) {
     t && clearTimeout(t), t = setTimeout(n, 200, e);
@@ -2782,36 +2782,40 @@ const Je = function(n, i) {
   }
   n.classList.remove(i);
 };
-var Zt, Fi, Jt, Ui, Qt, Zi, nt, Me, Y, ft, Vt, Ji;
+var Jt, Yi, Zt, Ui, Qt, Ji, nt, Me, F, ft, Vt, Zi;
 class Qe {
   constructor(i) {
     // 初始化
-    h(this, Zt);
-    // 左右箭頭事件綁定
     h(this, Jt);
+    // 左右箭頭事件綁定
+    h(this, Zt);
     // 左右拖拉事件綁定
     h(this, Qt);
     // 卷軸位置判斷
     h(this, nt);
     // 隱藏按鈕判斷
-    h(this, Y);
+    h(this, F);
     // 選項事件綁定
     h(this, Vt);
-    this.$element = i, this.option = i.s.option.drag, d(this, Zt, Fi).call(this);
+    this.$element = i, this.option = i.s.option.drag, d(this, Jt, Yi).call(this);
   }
   // 更新 active 位置
   update(i) {
     const t = this.$element.querySelector(".wrapper"), e = t == null ? void 0 : t.querySelector(".active");
-    if (e) {
-      const s = e.offsetLeft + e.getBoundingClientRect().width / 2 - t.getBoundingClientRect().width / 2;
-      t.scrollTo({
-        left: s,
-        behavior: "smooth"
-      });
+    if (e && t) {
+      const s = t.querySelectorAll(".item"), o = e === s[0], a = e === s[s.length - 1];
+      let r = "center";
+      o ? r = "start" : a && (r = "end"), setTimeout(() => {
+        e.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: r
+        });
+      }, 100);
     }
   }
 }
-Zt = new WeakSet(), Fi = function() {
+Jt = new WeakSet(), Yi = function() {
   var s, o, a, r;
   const i = this;
   if (!i.$element)
@@ -2820,10 +2824,10 @@ Zt = new WeakSet(), Fi = function() {
   let t = !1;
   const e = () => {
     t || (requestAnimationFrame(() => {
-      d(this, nt, Me).call(this), d(this, Y, ft).call(this), t = !1;
+      d(this, nt, Me).call(this), d(this, F, ft).call(this), t = !1;
     }), t = !0);
   };
-  i.$wrapper.removeEventListener("scroll", e), i.$wrapper.addEventListener("scroll", e), window.removeEventListener("resize", e), window.addEventListener("resize", e), (i.option.draggable || i.$element.s.type == "collapse") && d(s = i, Qt, Zi).call(s), i.option.navigation && i.$element.s.type !== "collapse" && (i.$container.insertAdjacentHTML(
+  i.$wrapper.removeEventListener("scroll", e), i.$wrapper.addEventListener("scroll", e), window.removeEventListener("resize", e), window.addEventListener("resize", e), (i.option.draggable || i.$element.s.type == "collapse") && d(s = i, Qt, Ji).call(s), i.option.navigation && i.$element.s.type !== "collapse" && (i.$container.insertAdjacentHTML(
     S.prepend,
     `<div class="navigation">
         <div class="button prev">
@@ -2833,10 +2837,10 @@ Zt = new WeakSet(), Fi = function() {
           <div></div>
         </div>
       </div>`
-  ), i.$button = (o = i.$container) == null ? void 0 : o.querySelectorAll(".button"), d(a = i, Jt, Ui).call(a)), d(r = i, Vt, Ji).call(r), i.update(), requestAnimationFrame(() => {
-    d(this, nt, Me).call(this), d(this, Y, ft).call(this);
+  ), i.$button = (o = i.$container) == null ? void 0 : o.querySelectorAll(".button"), d(a = i, Zt, Ui).call(a)), d(r = i, Vt, Zi).call(r), i.update(), requestAnimationFrame(() => {
+    d(this, nt, Me).call(this), d(this, F, ft).call(this);
   });
-}, Jt = new WeakSet(), Ui = function() {
+}, Zt = new WeakSet(), Ui = function() {
   const i = this, { $wrapper: t, $button: e } = i, s = function() {
     const o = this.classList.contains("next"), a = parseInt(t.getBoundingClientRect().width * 0.7);
     t.scrollTo({
@@ -2844,13 +2848,13 @@ Zt = new WeakSet(), Fi = function() {
       behavior: "smooth"
     }), setTimeout(() => {
       var r;
-      d(r = i, Y, ft).call(r);
+      d(r = i, F, ft).call(r);
     }, 100);
   };
   e.forEach((o) => {
     o.removeEventListener("click", s), o.addEventListener("click", s);
   });
-}, Qt = new WeakSet(), Zi = function() {
+}, Qt = new WeakSet(), Ji = function() {
   const { $wrapper: i } = this;
   let t = !1, e = !1, s = 0, o = 0;
   const a = function(p) {
@@ -2883,7 +2887,7 @@ Zt = new WeakSet(), Fi = function() {
 }, nt = new WeakSet(), Me = function() {
   const { $container: i, $wrapper: t } = this, e = t.scrollWidth - t.clientWidth, s = Math.round(t.scrollLeft);
   e <= 0 || (_(i, "scrollable"), s == 0 ? (k(i, "scrollable"), _(t, "start"), k(t, "end")) : s + 1 >= e ? (k(i, "scrollable"), k(t, "start"), _(t, "end")) : (_(t, "center"), k(t, "start"), k(t, "end")));
-}, Y = new WeakSet(), ft = function() {
+}, F = new WeakSet(), ft = function() {
   const { $wrapper: i, $button: t, $element: e } = this;
   if (!t)
     return;
@@ -2905,7 +2909,7 @@ Zt = new WeakSet(), Fi = function() {
     }
     k(a, "hide");
   }) : k(t, "hide");
-}, Vt = new WeakSet(), Ji = function() {
+}, Vt = new WeakSet(), Zi = function() {
   const { $element: i } = this, t = (s) => {
     if (this.option.selected) {
       const o = s.getAttribute("data-option").trim();
@@ -2961,7 +2965,7 @@ const sn = (n) => {
   const { type: i, option: t, originalDomString: e } = n.s, s = document.createElement("div");
   return i == "drag" && (s.innerHTML = q.TEMPLATE[i]().trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(S.append, e)), i == "collapse" && (s.innerHTML = q.TEMPLATE[i](t == null ? void 0 : t.collapse).trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(S.append, e), s.querySelector(".collapse-container .wrapper").insertAdjacentHTML(S.append, e)), i == "dropdown" && (s.innerHTML = q.TEMPLATE[i](t == null ? void 0 : t.dropdown).trim(), s.querySelector("dropdown-el").insertAdjacentHTML(S.append, e)), s.children;
 };
-var se, es, ne, is, ot, Ie, F, vt;
+var se, es, ne, is, ot, Ie, Y, vt;
 class nn extends HTMLElement {
   constructor() {
     super();
@@ -2970,7 +2974,7 @@ class nn extends HTMLElement {
     // 斷點設定
     h(this, ot);
     // check type
-    h(this, F);
+    h(this, Y);
     this.initialize = !1, this.__events__ = {}, this.s = {}, this.s.originalDomString = this.innerHTML.trim().replace(/\n/g, ""), this.previousWidth = window.innerWidth;
   }
   static get observedAttributes() {
@@ -2982,7 +2986,7 @@ class nn extends HTMLElement {
       case "m4-type":
         if (e === null || e === s)
           return;
-        this.s.type = s, d(this, F, vt).call(this);
+        this.s.type = s, d(this, Y, vt).call(this);
         break;
       case "m4-status":
         if (e === s)
@@ -3016,20 +3020,20 @@ se = new WeakSet(), es = function() {
     }
     this.update();
   };
-  window.removeEventListener("resize", Je(e)), window.addEventListener("resize", Je(e)), this.s.option = {}, this.s.option.drag = Object.assign({}, q.SETTINGS.drag, t == null ? void 0 : t.drag), this.s.option.collapse = Object.assign({}, q.SETTINGS.collapse, t == null ? void 0 : t.collapse), this.s.option.dropdown = Object.assign({}, q.SETTINGS.dropdown, t == null ? void 0 : t.dropdown), this.s.option.breakpoint = Object.assign({}, q.SETTINGS.breakpoint, t == null ? void 0 : t.breakpoint), d(this, ne, is).call(this);
+  window.removeEventListener("resize", Ze(e)), window.addEventListener("resize", Ze(e)), this.s.option = {}, this.s.option.drag = Object.assign({}, q.SETTINGS.drag, t == null ? void 0 : t.drag), this.s.option.collapse = Object.assign({}, q.SETTINGS.collapse, t == null ? void 0 : t.collapse), this.s.option.dropdown = Object.assign({}, q.SETTINGS.dropdown, t == null ? void 0 : t.dropdown), this.s.option.breakpoint = Object.assign({}, q.SETTINGS.breakpoint, t == null ? void 0 : t.breakpoint), d(this, ne, is).call(this);
 }, ne = new WeakSet(), is = function() {
   this.classList.add("m4-init"), d(this, ot, Ie).call(this);
 }, ot = new WeakSet(), Ie = function() {
   const t = Object.keys(this.s.option.breakpoint);
   if (!t.length) {
-    d(this, F, vt).call(this);
+    d(this, Y, vt).call(this);
     return;
   }
   t.map((e) => Number(e)).sort((e, s) => s - e).some((e) => {
     var s, o, a, r;
-    return window.innerWidth >= e && (this.s.type = (s = this.s.option.breakpoint[e]) == null ? void 0 : s.type, this.setAttribute("m4-type", this.s.type), this.s.option.drag = Object.assign({}, this.s.option.drag, (o = this.s.option.breakpoint[e]) == null ? void 0 : o.drag), this.s.option.collapse = Object.assign({}, this.s.option.collapse, (a = this.s.option.breakpoint[e]) == null ? void 0 : a.collapse), this.s.option.dropdown = Object.assign({}, this.s.option.dropdown, (r = this.s.option.breakpoint[e]) == null ? void 0 : r.dropdown)), d(this, F, vt).call(this), window.innerWidth >= e;
+    return window.innerWidth >= e && (this.s.type = (s = this.s.option.breakpoint[e]) == null ? void 0 : s.type, this.setAttribute("m4-type", this.s.type), this.s.option.drag = Object.assign({}, this.s.option.drag, (o = this.s.option.breakpoint[e]) == null ? void 0 : o.drag), this.s.option.collapse = Object.assign({}, this.s.option.collapse, (a = this.s.option.breakpoint[e]) == null ? void 0 : a.collapse), this.s.option.dropdown = Object.assign({}, this.s.option.dropdown, (r = this.s.option.breakpoint[e]) == null ? void 0 : r.dropdown)), d(this, Y, vt).call(this), window.innerWidth >= e;
   });
-}, F = new WeakSet(), vt = function() {
+}, Y = new WeakSet(), vt = function() {
   var o;
   const { type: t } = this.s;
   this.innerHTML = "", [...sn(this)].forEach((a) => {
@@ -3047,7 +3051,7 @@ se = new WeakSet(), es = function() {
   (o = this.drag) == null || o.update();
 };
 customElements.define("multipurpose-nav", nn);
-var oe, ns, ae, os, at, qe, W, Z, re, as, le, rs, ce, ls, de, cs, ue, ds, he, us, pe, hs, me, ps, ge, ms, N, R, fe, gs, ve, fs, be, vs, ye, bs;
+var oe, ns, ae, os, at, qe, W, J, re, as, le, rs, ce, ls, de, cs, ue, ds, he, us, pe, hs, me, ps, ge, ms, N, R, fe, gs, ve, fs, be, vs, ye, bs;
 class ss extends HTMLElement {
   // 定義組件的初始狀態
   constructor(t, e) {
@@ -3107,19 +3111,19 @@ class ss extends HTMLElement {
   setActiveTab(t) {
     const { t: e } = this, s = t === "" ? e.tabPanels[0].getAttribute("t4-id") : t;
     e.activeTab = s, this.setAttribute("t4-active", s);
-    const o = d(this, W, Z).call(this, s);
+    const o = d(this, W, J).call(this, s);
     e.tabPanels.forEach((a, r) => {
       r === o ? d(this, ve, fs).call(this, r) : d(this, fe, gs).call(this, r);
     });
   }
   // 外部呼叫方法 $0.goNext()
   goNext() {
-    const t = d(this, W, Z).call(this, this.t.activeTab), e = Math.min(this.t.tabPanels.length - 1, t + 1), s = this.t.tabPanels[e].getAttribute("t4-id");
+    const t = d(this, W, J).call(this, this.t.activeTab), e = Math.min(this.t.tabPanels.length - 1, t + 1), s = this.t.tabPanels[e].getAttribute("t4-id");
     this.setActiveTab(s);
   }
   // 外部呼叫方法 $0.goPrev()
   goPrev() {
-    const t = d(this, W, Z).call(this, this.t.activeTab), e = Math.max(0, t - 1), s = this.t.tabPanels[e].getAttribute("t4-id");
+    const t = d(this, W, J).call(this, this.t.activeTab), e = Math.max(0, t - 1), s = this.t.tabPanels[e].getAttribute("t4-id");
     this.setActiveTab(s);
   }
   // 外部呼叫方法 $0.update()
@@ -3159,7 +3163,7 @@ oe = new WeakSet(), ns = function() {
   return t.type === "normal" && t.tabGroup === "true" && t.tabPanels.length !== e.length && console.warn("按鈕與內容數量不同喔", t.tabPanels.length, e.length), t.tabGroup === "true" ? t.tabPanels.forEach((s, o) => s.setAttribute("t4-id", o)) : t.tabPanels.forEach((s) => {
     s.getAttribute("t4-id") || console.warn(s, "請幫我設定id！！");
   }), e;
-}, W = new WeakSet(), Z = function(t) {
+}, W = new WeakSet(), J = function(t) {
   const { t: e } = this, s = e.tabPanels.filter((a) => a.getAttribute("t4-id") === t);
   s.length > 1 && console.warn("有兩個相同id設定", s);
   const o = s[0];
@@ -3275,7 +3279,7 @@ oe = new WeakSet(), ns = function() {
       break;
   }
 }, be = new WeakSet(), vs = function(t) {
-  const e = d(this, W, Z).call(this, t);
+  const e = d(this, W, J).call(this, t);
   d(this, N, R).call(this, "step", e), d(this, N, R).call(this, "btnState", e), d(this, N, R).call(this, "tabState", e, t), d(this, N, R).call(this, "tabUrl", t), this.emit("change");
 }, ye = new WeakSet(), bs = function() {
   const t = this;
@@ -3387,14 +3391,14 @@ function Es() {
   });
 }
 document.addEventListener("click", Es);
-var ct, Pe, Ee, Ls, Le, As, Ae, Ss;
+var ct, Pe, Ee, As, Ae, Ls, Le, Ss;
 class cn extends HTMLElement {
   constructor() {
     super();
     h(this, ct);
     h(this, Ee);
-    h(this, Le);
     h(this, Ae);
+    h(this, Le);
     this.initialize = !1;
   }
   connectedCallback() {
@@ -3420,13 +3424,13 @@ ct = new WeakSet(), Pe = function() {
     hover: this.getAttribute("r4-hover") ? e(this.getAttribute("r4-hover")) : t.hover,
     click: this.getAttribute("r4-hover-click") ? e(this.getAttribute("r4-hover-click")) : t.click
   };
-  this.s.options = s, this.s.options.hover && this.classList.add("hover-btn"), d(this, Ee, Ls).call(this);
-}, Ee = new WeakSet(), Ls = function() {
-  d(this, Le, As).call(this), d(this, Ae, Ss).call(this), this.classList.add("r4-initialize");
-}, Le = new WeakSet(), As = function() {
+  this.s.options = s, this.s.options.hover && this.classList.add("hover-btn"), d(this, Ee, As).call(this);
+}, Ee = new WeakSet(), As = function() {
+  d(this, Ae, Ls).call(this), d(this, Le, Ss).call(this), this.classList.add("r4-initialize");
+}, Ae = new WeakSet(), Ls = function() {
   const t = this, e = document.createElement("i");
   e.classList.add("hover-ball"), e.style.transitionDuration = `${t.s.options.speed}ms`, t.appendChild(e);
-}, Ae = new WeakSet(), Ss = function() {
+}, Le = new WeakSet(), Ss = function() {
   const t = this.querySelector("i.hover-ball"), e = this;
   e.addEventListener("click", function(a) {
     a.stopPropagation(), e.s.options.click && ln(a, e);
@@ -3623,31 +3627,30 @@ class vn {
 }
 export {
   oi as A,
-  Hn as B,
+  Mn as B,
   rn as C,
   Pi as D,
-  Mn as E,
-  In as F,
-  qn as G,
-  On as H,
+  In as E,
+  qn as F,
+  On as G,
+  Nn as H,
   dn as I,
-  Nn as J,
-  Pn as K,
-  jn as L,
+  Pn as J,
+  jn as K,
+  zn as L,
   V as M,
-  zn as N,
-  Bn as O,
-  Wn as P,
-  Gn as Q,
+  Bn as N,
+  Wn as O,
+  Gn as P,
+  Rn as Q,
   cn as R,
-  Rn as S,
+  Xn as S,
   ss as T,
-  Xn as U,
+  Fn as U,
   Yn as V,
-  Fn as W,
-  Un as X,
+  Un as W,
+  Jn as X,
   Zn as Y,
-  Jn as Z,
   E as a,
   ut as b,
   Ms as c,
@@ -3663,16 +3666,16 @@ export {
   vn as m,
   Rs as n,
   Qn as o,
-  kn as p,
-  Ci as q,
-  Hi as r,
+  Hi as p,
+  Mi as q,
+  kn as r,
   Cs as s,
-  Mi as t,
-  xn as u,
+  xn as t,
+  $n as u,
   _e as v,
-  $n as w,
+  Gs as w,
   _n as x,
-  Gs as y,
-  Cn as z
+  Cn as y,
+  Hn as z
 };
 //# sourceMappingURL=image-preview-bundle.js.map