@simhub2/justflipit 3.2.2 → 4.0.1

package/dist/justFlipIt-combined.js

@@ -0,0 +1,295 @@
+var JustFlipItModule = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/core.js
+  var core_exports = {};
+  __export(core_exports, {
+    FlipController: () => FlipController,
+    default: () => justFlipIt
+  });
+  var instances = /* @__PURE__ */ new WeakMap();
+  var defaults = { Click: false, FlipX: false, Duration: 400, Easing: "cubic-bezier(.22,.61,.36,1)", Tilt: false, Effect: "flip", ReducedMotion: true, preserveClasses: true, preserveStyles: true, Style: [] };
+  var css = `
+._justFlipIt_panel{position:relative;display:grid;perspective:var(--jfi-perspective,1000px);isolation:isolate}
+._justFlipIt_panel>[data-jfi-face]{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--jfi-duration) var(--jfi-easing),opacity var(--jfi-duration) var(--jfi-easing);transform-origin:center}
+._justFlipIt_panel>[data-jfi-face=back],._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=front]{pointer-events:none}
+._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=back]{pointer-events:auto}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=front]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=back]{transform:rotateY(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateY(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=front]{transform:rotateX(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=back]{transform:rotateX(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateX(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateX(0deg)}
+._justFlipIt_panel[data-jfi-effect=fade]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back]{opacity:0}
+._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=front],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{opacity:0}
+._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{opacity:1}
+._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{transform:scale(.94)}
+._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{transform:scale(1)}
+._justFlipIt_panel[data-jfi-reduced=true]>[data-jfi-face]{transition:none!important}
+@media(prefers-reduced-motion:reduce){._justFlipIt_panel:not([data-jfi-motion=allow])>[data-jfi-face]{transition:none!important}}
+`;
+  function styles(doc) {
+    if (doc.querySelector('style[data-justflipitstyle="v4"]')) return;
+    const style = doc.createElement("style");
+    style.dataset.justflipitstyle = "v4";
+    style.textContent = css;
+    doc.head.append(style);
+  }
+  function validate(options) {
+    if (options.Duration !== void 0 && (!Number.isFinite(options.Duration) || options.Duration < 0)) throw new TypeError("Duration must be a non-negative finite number");
+    if (options.Effect !== void 0 && !["flip", "fade", "scale"].includes(options.Effect)) throw new TypeError("Unknown Effect");
+    if (options.Tilt && typeof options.Tilt === "object") {
+      for (const key of ["max", "perspective", "scale"]) {
+        if (options.Tilt[key] !== void 0 && (!Number.isFinite(options.Tilt[key]) || options.Tilt[key] < 0)) throw new TypeError(`Invalid Tilt.${key}`);
+      }
+    }
+  }
+  var FlipController = class {
+    constructor(element, options = {}) {
+      validate(options);
+      if (!element || element.nodeType !== 1) throw new TypeError("Expected an HTML element");
+      this.element = element;
+      this.settings = { ...defaults, ...options };
+      this.flipped = false;
+      this.destroyed = false;
+      this.cleanups = [];
+      this.restores = [];
+      this.win = element.ownerDocument.defaultView;
+      const doc = element.ownerDocument;
+      styles(doc);
+      this.managed = !!options.Faces;
+      if (this.managed) {
+        this.hoverPanel = element;
+        this.frontWrapper = element.querySelector(options.Faces.front);
+        this.backWrapper = element.querySelector(options.Faces.back);
+        if (!this.frontWrapper || !this.backWrapper || this.frontWrapper === this.backWrapper || this.frontWrapper.parentNode !== element || this.backWrapper.parentNode !== element) throw new TypeError("Faces must select two distinct direct children");
+      } else {
+        if (!element.parentNode) throw new TypeError("Element must have a parent");
+        this.hoverPanel = doc.createElement("div");
+        this.frontWrapper = doc.createElement("div");
+        this.backWrapper = doc.createElement("div");
+        if (this.settings.preserveClasses) this.hoverPanel.className = element.className;
+        if (this.settings.preserveStyles) this.hoverPanel.style.cssText = element.style.cssText;
+        element.before(this.hoverPanel);
+        this.hoverPanel.append(this.frontWrapper, this.backWrapper);
+        this.frontWrapper.append(element);
+        if (options.Template !== void 0) this.backWrapper.innerHTML = options.Template;
+        else {
+          const clone = element.cloneNode(true);
+          clone.removeAttribute("id");
+          clone.querySelectorAll("[id]").forEach((node) => node.removeAttribute("id"));
+          this.backWrapper.append(clone);
+        }
+      }
+      const panel = this.hoverPanel;
+      for (const node of [panel, this.frontWrapper, this.backWrapper]) {
+        const owned = node === panel ? ["class", "style", "tabindex", "data-jfi-axis", "data-jfi-effect", "data-jfi-motion", "data-jfi-flipped", "data-jfi-reduced"] : ["style", "data-jfi-face", "aria-hidden", "inert"];
+        const attrs = owned.map((name) => [name, node.getAttribute(name)]);
+        const inert = node.inert || false;
+        this.restores.push(() => {
+          node.inert = inert;
+          for (const [name, value] of attrs) {
+            if (value === null) node.removeAttribute(name);
+            else node.setAttribute(name, value);
+          }
+        });
+      }
+      panel.classList.add("_justFlipIt_panel");
+      this.frontWrapper.dataset.jfiFace = "front";
+      this.backWrapper.dataset.jfiFace = "back";
+      this.motion = this.win.matchMedia?.("(prefers-reduced-motion: reduce)");
+      const motionChange = () => {
+        this.resetTilt();
+        this.render();
+      };
+      this.motion?.addEventListener("change", motionChange);
+      this.cleanups.push(() => this.motion?.removeEventListener("change", motionChange));
+      this.configure();
+      this.events();
+      this.render();
+      instances.set(element, this);
+      instances.set(panel, this);
+    }
+    listen(type, handler, options) {
+      this.hoverPanel.addEventListener(type, handler, options);
+      this.cleanups.push(() => this.hoverPanel.removeEventListener(type, handler, options));
+    }
+    get reduced() {
+      return this.settings.ReducedMotion !== false && !!this.motion?.matches;
+    }
+    configure() {
+      const s = this.settings, p = this.hoverPanel;
+      p.style.setProperty("--jfi-duration", `${s.Duration}ms`);
+      p.style.setProperty("--jfi-easing", s.Easing);
+      p.dataset.jfiAxis = s.FlipX ? "x" : "y";
+      p.dataset.jfiEffect = s.Effect;
+      p.dataset.jfiMotion = s.ReducedMotion === false ? "allow" : "respect";
+      for (const item of s.Style || []) {
+        const targets = item.el === "self" ? [p] : p.querySelectorAll(item.el);
+        targets.forEach((node) => Object.assign(node.style, item.style));
+      }
+      if (s.Tilt !== "only" && !p.hasAttribute("tabindex")) p.tabIndex = 0;
+    }
+    events() {
+      this.listen("click", (event) => {
+        if (this.settings.Tilt === "only") return;
+        const trigger = this.settings.Click;
+        if (trigger === true || trigger && [].concat(trigger).some((selector) => event.target.closest?.(selector) && this.hoverPanel.contains(event.target.closest(selector)))) this.toggle();
+      });
+      this.listen("keydown", (event) => {
+        if (event.target !== this.hoverPanel || this.settings.Tilt === "only") return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          this.toggle();
+        }
+        if (event.key === "Escape") this.flip(false);
+      });
+      this.listen("pointerenter", (event) => {
+        if (!this.settings.Click && this.settings.Tilt !== "only" && event.pointerType !== "touch") this.flip(true);
+      });
+      this.listen("pointerleave", (event) => {
+        if (event.pointerType === "touch") return;
+        this.resetTilt();
+        if (!this.settings.Click && this.settings.Tilt !== "only") this.flip(false);
+      });
+      this.listen("pointerdown", (event) => {
+        if (event.pointerType !== "touch" || event.isPrimary === false || this.touch) return;
+        this.resetTilt();
+        this.touch = { id: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
+        this.queueTilt(event, this.touch);
+      }, { passive: true });
+      this.listen("pointermove", (event) => {
+        if (event.pointerType !== "touch") {
+          if (!this.touch) this.queueTilt(event);
+          return;
+        }
+        const touch = this.touch;
+        if (!touch || touch.id !== event.pointerId) return;
+        touch.moved || (touch.moved = this.touchMoved(event, touch));
+        this.queueTilt(event, touch);
+      }, { passive: true });
+      this.listen("pointerup", (event) => {
+        const touch = this.finishTouch(event);
+        if (!touch || touch.moved || this.touchMoved(event, touch)) return;
+        if (!this.settings.Click && this.settings.Tilt !== "only") this.toggle();
+      });
+      this.listen("pointercancel", (event) => {
+        if (event.pointerType === "touch") this.finishTouch(event);
+        else this.resetTilt();
+      });
+      this.listen("lostpointercapture", (event) => this.finishTouch(event));
+      this.baseTransform = this.hoverPanel.style.transform;
+    }
+    touchMoved(event, touch) {
+      return Math.hypot(event.clientX - touch.x, event.clientY - touch.y) > 10;
+    }
+    finishTouch(event) {
+      const touch = this.touch;
+      if (event.pointerType !== "touch" || !touch || touch.id !== event.pointerId) return;
+      this.touch = null;
+      this.resetTilt();
+      return touch;
+    }
+    queueTilt(event, touch) {
+      if (!this.settings.Tilt || this.reduced) return;
+      this.point = [event.clientX, event.clientY];
+      if (this.frame) return;
+      this.frame = this.win.requestAnimationFrame(() => {
+        this.frame = 0;
+        const rect = touch ? touch.rect ?? (touch.rect = this.hoverPanel.getBoundingClientRect()) : this.hoverPanel.getBoundingClientRect();
+        if (!rect.width || !rect.height) return;
+        const { max = 10, perspective = 1e3, scale = 1.03 } = this.settings.Tilt;
+        const x = Math.max(-1, Math.min(1, (this.point[0] - rect.left) / rect.width * 2 - 1));
+        const y = Math.max(-1, Math.min(1, (this.point[1] - rect.top) / rect.height * 2 - 1));
+        this.hoverPanel.style.transform = `perspective(${perspective}px) rotateX(${-y * max}deg) rotateY(${x * max}deg) scale(${scale})`;
+      });
+    }
+    resetTilt() {
+      if (this.frame) this.win.cancelAnimationFrame(this.frame);
+      this.frame = 0;
+      this.hoverPanel.style.transform = this.baseTransform || "";
+    }
+    render() {
+      this.hoverPanel.dataset.jfiFlipped = String(this.flipped);
+      this.hoverPanel.dataset.jfiReduced = String(this.reduced);
+      for (const [node, hidden] of [[this.frontWrapper, this.flipped], [this.backWrapper, !this.flipped]]) {
+        node.setAttribute("aria-hidden", String(hidden));
+        node.inert = hidden;
+      }
+    }
+    flip(value = true) {
+      if (this.destroyed || this.flipped === !!value) return this;
+      const active = this.element.ownerDocument.activeElement;
+      if ((value ? this.frontWrapper : this.backWrapper).contains(active)) this.hoverPanel.focus({ preventScroll: true });
+      this.flipped = !!value;
+      this.render();
+      this.hoverPanel.dispatchEvent(new this.win.CustomEvent("justflipit:change", { bubbles: true, detail: this.getState() }));
+      return this;
+    }
+    toggle() {
+      return this.flip(!this.flipped);
+    }
+    update(options = {}) {
+      if (this.destroyed) return this;
+      if ("Faces" in options) throw new TypeError("Faces cannot change after initialization");
+      validate(options);
+      if (this.managed && "Template" in options) throw new TypeError("Render framework face content with the framework");
+      this.settings = { ...this.settings, ...options };
+      if ("Template" in options) {
+        if (this.managed) throw new TypeError("Render framework face content with the framework");
+        this.backWrapper.innerHTML = options.Template;
+      }
+      this.resetTilt();
+      this.configure();
+      this.render();
+      return this;
+    }
+    getState() {
+      return { flipped: this.flipped, destroyed: this.destroyed, effect: this.settings.Effect };
+    }
+    destroy() {
+      if (this.destroyed) return;
+      this.resetTilt();
+      this.cleanups.forEach((fn) => fn());
+      this.restores.forEach((fn) => fn());
+      if (!this.managed) {
+        this.hoverPanel.replaceWith(this.element);
+      }
+      instances.delete(this.element);
+      instances.delete(this.hoverPanel);
+      this.destroyed = true;
+    }
+  };
+  function elements(target) {
+    if (typeof target === "string") return typeof document === "undefined" ? [] : Array.from(document.querySelectorAll(target));
+    if (target?.nodeType === 1) return [target];
+    return target ? Array.from(target) : [];
+  }
+  function justFlipIt(target, options) {
+    const result = elements(target).map((element) => instances.get(element) || new FlipController(element, options));
+    return target?.nodeType === 1 ? result[0] : result;
+  }
+  justFlipIt.destroy = (target) => elements(target).forEach((element) => instances.get(element)?.destroy());
+  justFlipIt.get = (element) => instances.get(element);
+  return __toCommonJS(core_exports);
+})();
+globalThis.justFlipIt = JustFlipItModule.default;
+//# sourceMappingURL=justFlipIt.js.map

package/dist/justFlipIt-combined.min.js

@@ -0,0 +1,23 @@
+var JustFlipItModule=(()=>{var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(i,t)=>{for(var e in t)d(i,e,{get:t[e],enumerable:!0})},_=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of T(t))!v.call(i,s)&&s!==e&&d(i,s,{get:()=>t[s],enumerable:!(a=g(t,s))||a.enumerable});return i};var w=i=>_(d({},"__esModule",{value:!0}),i);var I={};b(I,{FlipController:()=>c,default:()=>h});var n=new WeakMap,k={Click:!1,FlipX:!1,Duration:400,Easing:"cubic-bezier(.22,.61,.36,1)",Tilt:!1,Effect:"flip",ReducedMotion:!0,preserveClasses:!0,preserveStyles:!0,Style:[]},F=`
+._justFlipIt_panel{position:relative;display:grid;perspective:var(--jfi-perspective,1000px);isolation:isolate}
+._justFlipIt_panel>[data-jfi-face]{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--jfi-duration) var(--jfi-easing),opacity var(--jfi-duration) var(--jfi-easing);transform-origin:center}
+._justFlipIt_panel>[data-jfi-face=back],._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=front]{pointer-events:none}
+._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=back]{pointer-events:auto}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=front]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=back]{transform:rotateY(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateY(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=front]{transform:rotateX(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=back]{transform:rotateX(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateX(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateX(0deg)}
+._justFlipIt_panel[data-jfi-effect=fade]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back]{opacity:0}
+._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=front],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{opacity:0}
+._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{opacity:1}
+._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{transform:scale(.94)}
+._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{transform:scale(1)}
+._justFlipIt_panel[data-jfi-reduced=true]>[data-jfi-face]{transition:none!important}
+@media(prefers-reduced-motion:reduce){._justFlipIt_panel:not([data-jfi-motion=allow])>[data-jfi-face]{transition:none!important}}
+`;function E(i){if(i.querySelector('style[data-justflipitstyle="v4"]'))return;let t=i.createElement("style");t.dataset.justflipitstyle="v4",t.textContent=F,i.head.append(t)}function j(i){if(i.Duration!==void 0&&(!Number.isFinite(i.Duration)||i.Duration<0))throw new TypeError("Duration must be a non-negative finite number");if(i.Effect!==void 0&&!["flip","fade","scale"].includes(i.Effect))throw new TypeError("Unknown Effect");if(i.Tilt&&typeof i.Tilt=="object"){for(let t of["max","perspective","scale"])if(i.Tilt[t]!==void 0&&(!Number.isFinite(i.Tilt[t])||i.Tilt[t]<0))throw new TypeError(`Invalid Tilt.${t}`)}}var c=class{constructor(t,e={}){if(j(e),!t||t.nodeType!==1)throw new TypeError("Expected an HTML element");this.element=t,this.settings={...k,...e},this.flipped=!1,this.destroyed=!1,this.cleanups=[],this.restores=[],this.win=t.ownerDocument.defaultView;let a=t.ownerDocument;if(E(a),this.managed=!!e.Faces,this.managed){if(this.hoverPanel=t,this.frontWrapper=t.querySelector(e.Faces.front),this.backWrapper=t.querySelector(e.Faces.back),!this.frontWrapper||!this.backWrapper||this.frontWrapper===this.backWrapper||this.frontWrapper.parentNode!==t||this.backWrapper.parentNode!==t)throw new TypeError("Faces must select two distinct direct children")}else{if(!t.parentNode)throw new TypeError("Element must have a parent");if(this.hoverPanel=a.createElement("div"),this.frontWrapper=a.createElement("div"),this.backWrapper=a.createElement("div"),this.settings.preserveClasses&&(this.hoverPanel.className=t.className),this.settings.preserveStyles&&(this.hoverPanel.style.cssText=t.style.cssText),t.before(this.hoverPanel),this.hoverPanel.append(this.frontWrapper,this.backWrapper),this.frontWrapper.append(t),e.Template!==void 0)this.backWrapper.innerHTML=e.Template;else{let r=t.cloneNode(!0);r.removeAttribute("id"),r.querySelectorAll("[id]").forEach(l=>l.removeAttribute("id")),this.backWrapper.append(r)}}let s=this.hoverPanel;for(let r of[s,this.frontWrapper,this.backWrapper]){let p=(r===s?["class","style","tabindex","data-jfi-axis","data-jfi-effect","data-jfi-motion","data-jfi-flipped","data-jfi-reduced"]:["style","data-jfi-face","aria-hidden","inert"]).map(o=>[o,r.getAttribute(o)]),y=r.inert||!1;this.restores.push(()=>{r.inert=y;for(let[o,u]of p)u===null?r.removeAttribute(o):r.setAttribute(o,u)})}s.classList.add("_justFlipIt_panel"),this.frontWrapper.dataset.jfiFace="front",this.backWrapper.dataset.jfiFace="back",this.motion=this.win.matchMedia?.("(prefers-reduced-motion: reduce)");let f=()=>{this.resetTilt(),this.render()};this.motion?.addEventListener("change",f),this.cleanups.push(()=>this.motion?.removeEventListener("change",f)),this.configure(),this.events(),this.render(),n.set(t,this),n.set(s,this)}listen(t,e,a){this.hoverPanel.addEventListener(t,e,a),this.cleanups.push(()=>this.hoverPanel.removeEventListener(t,e,a))}get reduced(){return this.settings.ReducedMotion!==!1&&!!this.motion?.matches}configure(){let t=this.settings,e=this.hoverPanel;e.style.setProperty("--jfi-duration",`${t.Duration}ms`),e.style.setProperty("--jfi-easing",t.Easing),e.dataset.jfiAxis=t.FlipX?"x":"y",e.dataset.jfiEffect=t.Effect,e.dataset.jfiMotion=t.ReducedMotion===!1?"allow":"respect";for(let a of t.Style||[])(a.el==="self"?[e]:e.querySelectorAll(a.el)).forEach(f=>Object.assign(f.style,a.style));t.Tilt!=="only"&&!e.hasAttribute("tabindex")&&(e.tabIndex=0)}events(){this.listen("click",t=>{if(this.settings.Tilt==="only")return;let e=this.settings.Click;(e===!0||e&&[].concat(e).some(a=>t.target.closest?.(a)&&this.hoverPanel.contains(t.target.closest(a))))&&this.toggle()}),this.listen("keydown",t=>{t.target!==this.hoverPanel||this.settings.Tilt==="only"||((t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.toggle()),t.key==="Escape"&&this.flip(!1))}),this.listen("pointerenter",t=>{!this.settings.Click&&this.settings.Tilt!=="only"&&t.pointerType!=="touch"&&this.flip(!0)}),this.listen("pointerleave",t=>{t.pointerType!=="touch"&&(this.resetTilt(),!this.settings.Click&&this.settings.Tilt!=="only"&&this.flip(!1))}),this.listen("pointerdown",t=>{t.pointerType!=="touch"||t.isPrimary===!1||this.touch||(this.resetTilt(),this.touch={id:t.pointerId,x:t.clientX,y:t.clientY,moved:!1},this.queueTilt(t,this.touch))},{passive:!0}),this.listen("pointermove",t=>{if(t.pointerType!=="touch"){this.touch||this.queueTilt(t);return}let e=this.touch;!e||e.id!==t.pointerId||(e.moved||(e.moved=this.touchMoved(t,e)),this.queueTilt(t,e))},{passive:!0}),this.listen("pointerup",t=>{let e=this.finishTouch(t);!e||e.moved||this.touchMoved(t,e)||!this.settings.Click&&this.settings.Tilt!=="only"&&this.toggle()}),this.listen("pointercancel",t=>{t.pointerType==="touch"?this.finishTouch(t):this.resetTilt()}),this.listen("lostpointercapture",t=>this.finishTouch(t)),this.baseTransform=this.hoverPanel.style.transform}touchMoved(t,e){return Math.hypot(t.clientX-e.x,t.clientY-e.y)>10}finishTouch(t){let e=this.touch;if(!(t.pointerType!=="touch"||!e||e.id!==t.pointerId))return this.touch=null,this.resetTilt(),e}queueTilt(t,e){!this.settings.Tilt||this.reduced||(this.point=[t.clientX,t.clientY],!this.frame&&(this.frame=this.win.requestAnimationFrame(()=>{this.frame=0;let a=e?e.rect??(e.rect=this.hoverPanel.getBoundingClientRect()):this.hoverPanel.getBoundingClientRect();if(!a.width||!a.height)return;let{max:s=10,perspective:f=1e3,scale:r=1.03}=this.settings.Tilt,l=Math.max(-1,Math.min(1,(this.point[0]-a.left)/a.width*2-1)),p=Math.max(-1,Math.min(1,(this.point[1]-a.top)/a.height*2-1));this.hoverPanel.style.transform=`perspective(${f}px) rotateX(${-p*s}deg) rotateY(${l*s}deg) scale(${r})`})))}resetTilt(){this.frame&&this.win.cancelAnimationFrame(this.frame),this.frame=0,this.hoverPanel.style.transform=this.baseTransform||""}render(){this.hoverPanel.dataset.jfiFlipped=String(this.flipped),this.hoverPanel.dataset.jfiReduced=String(this.reduced);for(let[t,e]of[[this.frontWrapper,this.flipped],[this.backWrapper,!this.flipped]])t.setAttribute("aria-hidden",String(e)),t.inert=e}flip(t=!0){if(this.destroyed||this.flipped===!!t)return this;let e=this.element.ownerDocument.activeElement;return(t?this.frontWrapper:this.backWrapper).contains(e)&&this.hoverPanel.focus({preventScroll:!0}),this.flipped=!!t,this.render(),this.hoverPanel.dispatchEvent(new this.win.CustomEvent("justflipit:change",{bubbles:!0,detail:this.getState()})),this}toggle(){return this.flip(!this.flipped)}update(t={}){if(this.destroyed)return this;if("Faces"in t)throw new TypeError("Faces cannot change after initialization");if(j(t),this.managed&&"Template"in t)throw new TypeError("Render framework face content with the framework");if(this.settings={...this.settings,...t},"Template"in t){if(this.managed)throw new TypeError("Render framework face content with the framework");this.backWrapper.innerHTML=t.Template}return this.resetTilt(),this.configure(),this.render(),this}getState(){return{flipped:this.flipped,destroyed:this.destroyed,effect:this.settings.Effect}}destroy(){this.destroyed||(this.resetTilt(),this.cleanups.forEach(t=>t()),this.restores.forEach(t=>t()),this.managed||this.hoverPanel.replaceWith(this.element),n.delete(this.element),n.delete(this.hoverPanel),this.destroyed=!0)}};function m(i){return typeof i=="string"?typeof document>"u"?[]:Array.from(document.querySelectorAll(i)):i?.nodeType===1?[i]:i?Array.from(i):[]}function h(i,t){let e=m(i).map(a=>n.get(a)||new c(a,t));return i?.nodeType===1?e[0]:e}h.destroy=i=>m(i).forEach(t=>n.get(t)?.destroy());h.get=i=>n.get(i);return w(I);})();
+globalThis.justFlipIt = JustFlipItModule.default;
+//# sourceMappingURL=justFlipIt.min.js.map