@simhub2/justflipit 3.2.2 → 4.0.1

package/dist/justFlipIt-modern.js

@@ -1,500 +1,295 @@
-/*!
- * justFlipIt v3.1.0
- * https://github.com/SimHub/justFlipIt
- *
- * Copyright SimHub
- * Released under the MIT license
- *
- * Date: 2025
- */
-
-(function (root, factory) {
-  if (typeof define === "function" && define.amd) {
-    define([], factory);
-  } else if (typeof module === "object" && module.exports) {
-    module.exports = factory();
-  } else {
-    root.justFlipIt = factory();
-  }
-})(typeof self !== "undefined" ? self : this, function () {
-  "use strict";
-
-  // Feature detection
-  const supportsGrid = typeof CSS !== "undefined" &&
-    CSS.supports &&
-    CSS.supports("display", "grid");
-  const supportsWebAnimations = typeof Element !== "undefined" &&
-    "animate" in Element.prototype;
-  const supportsCustomProperties = window.CSS && CSS.supports &&
-    CSS.supports("color", "var(--test)");
-
-  // Style generation based on browser support
-  function generateStyles() {
-    // Base styles that work everywhere
-    let baseStyles =
-      "._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}" +
-      "._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}" +
-      "._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}";
-
-    // Add prefixed versions for older browsers
-    let prefixedStyles =
-      "._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}" +
-      "._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}";
-
-    // X-axis rotations
-    let xAxisStyles =
-      "._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}" +
-      "._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}" +
-      "._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}";
-
-    // Y-axis rotations
-    let yAxisStyles =
-      "._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}" +
-      "._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}" +
-      "._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}";
-
-    // PATCH: Transparency-Style
-    let transparentStyle =
-      "._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}" +
-      "._justFlipIt_panel > * {box-sizing: border-box;}";
-
-    return (
-      baseStyles + prefixedStyles + xAxisStyles + yAxisStyles + transparentStyle
-    );
-  }
-
-  // Add styles to document head
-  function addStyles() {
-    if (document.querySelector('[data-justflipitstyle="justFlipIt"]')) {
-      return; // Styles already added
-    }
-
-    const styleElement = document.createElement("style");
-    styleElement.setAttribute("data-justflipitstyle", "justFlipIt");
-    styleElement.textContent = generateStyles();
-
-    document.head.appendChild(styleElement);
-  }
-
-  // Helper functions to replace jQuery
-  function getStyle(element, property) {
-    return window.getComputedStyle(element, null).getPropertyValue(property);
-  }
-
-  function addClass(element, className) {
-    if (element.classList) {
-      element.classList.add(className);
-    } else {
-      element.className += " " + className;
-    }
-  }
-
-  function removeClass(element, className) {
-    if (element.classList) {
-      element.classList.remove(className);
-    } else {
-      element.className = element.className.replace(
-        new RegExp(
-          "(^|\\b)" + className.split(" ").join("|") + "(\\b|$)",
-          "gi",
-        ),
-        " ",
-      );
-    }
-  }
-
-  function toggleClass(element, className) {
-    if (element.classList) {
-      element.classList.toggle(className);
-    } else {
-      var classes = element.className.split(" ");
-      var existingIndex = classes.indexOf(className);
-
-      if (existingIndex >= 0) {
-        classes.splice(existingIndex, 1);
-      } else {
-        classes.push(className);
-      }
-
-      element.className = classes.join(" ");
-    }
-  }
-
-  function hasClass(element, className) {
-    if (element.classList) {
-      return element.classList.contains(className);
-    } else {
-      return new RegExp("(^| )" + className + "( |$)", "gi").test(
-        element.className,
-      );
+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);
   }
-
-  // NEU: Funktion zur Anwendung der benutzerdefinierten Animationseinstellungen
-  function applyAnimationSettings(element, duration, easing) {
-    const transitionValue = `transform ${duration / 1000}s ${easing}`;
-    element.style.transition = transitionValue;
-    element.style.WebkitTransition = transitionValue;
-    element.style.MozTransition = transitionValue;
-  }
-
-  // PATCH: Verbesserte Style-Kopierfunktion
-  function copyStyles(src, dest) {
-    const computed = window.getComputedStyle(src);
-    // Kopiere alle visuellen Eigenschaften
-    const properties = [
-      "background",
-      "backgroundColor",
-      "backgroundImage",
-      "backgroundPosition",
-      "backgroundRepeat",
-      "backgroundSize",
-      "borderRadius",
-      "borderTopLeftRadius",
-      "borderTopRightRadius",
-      "borderBottomLeftRadius",
-      "borderBottomRightRadius",
-      "border",
-      "borderTop",
-      "borderRight",
-      "borderBottom",
-      "borderLeft",
-      "boxShadow",
-      "color",
-      "opacity",
-    ];
-    properties.forEach((prop) => {
-      if (
-        computed[prop] &&
-        computed[prop] !== "none" &&
-        computed[prop] !== "initial" &&
-        computed[prop] !== ""
-      ) {
-        dest.style[prop] = computed[prop];
+  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}`);
       }
-    });
-  }
-
-  // Modern animation with fallback
-  function animateFlip(element, start, end, duration, easing = "ease-in-out") {
-    if (supportsWebAnimations) {
-      // Use Web Animations API
-      const keyframes = [{ transform: start }, { transform: end }];
-
-      const options = {
-        duration: duration,
-        easing: easing,
-        fill: "forwards",
-      };
-
-      return element.animate(keyframes, options);
-    } else {
-      // Fallback to CSS transitions (already set in the CSS)
-      element.style.transform = end;
-      element.style.webkitTransform = end;
-      element.style.mozTransform = end;
-      return null;
     }
   }
-
-  // Store for instances
-  const instanceMap = new WeakMap();
-
-  // Main justFlipIt class
-  class JustFlipIt {
+  var FlipController = class {
     constructor(element, options = {}) {
-      // Make sure styles are added
-      addStyles();
-
+      validate(options);
+      if (!element || element.nodeType !== 1) throw new TypeError("Expected an HTML element");
       this.element = element;
-      this.settings = Object.assign(
-        {},
-        {
-          Template: "", // Template for back side
-          Click: false, // Click behavior
-          FlipX: false, // Flip direction
-          Style: [], // Custom styles
-          Duration: 400, // Animation duration in ms
-          Easing: "ease-in-out", // Animation easing function
-          preserveClasses: true, // NEU
-          preserveStyles: true, // NEU
-        },
-        options,
-      );
-
-      this.elementWidth = getStyle(element, "width");
-      this.elementHeight = getStyle(element, "height");
-      this.elementBackgroundColor = getStyle(element, "background-color");
-      this.originalClassName = element.className;
-      this.originalTagName = element.tagName.toLowerCase();
-      this.originalId = element.id || "";
-
-      // Set flip direction
-      if (this.settings.FlipX === true) {
-        this.flipClass = "_flip_";
-        this.backClass = "back";
-        this.rotateStart = "rotateX(0deg)";
-        this.rotateFront = "rotateX(180deg)";
-        this.rotateBack = "rotateX(-180deg)";
-        this.rotateReset = "rotateX(0deg)";
+      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 {
-        this.flipClass = "_flipY_";
-        this.backClass = "backY";
-        this.rotateStart = "rotateY(0deg)";
-        this.rotateFront = "rotateY(180deg)";
-        this.rotateBack = "rotateY(-180deg)";
-        this.rotateReset = "rotateY(0deg)";
-      }
-
-      // Initialize flip
-      this._init();
-
-      if (this.settings.Tilt) {
-        this._setupTilt();
-      }
-
-      // Store instance
-      instanceMap.set(element, this);
-    }
-
-    _init() {
-      const originalElement = this.element;
-      const originalClassName = this.originalClassName;
-
-      // Panel-Struktur erzeugen
-      const hoverPanel = document.createElement(this.originalTagName);
-      addClass(hoverPanel, "hover");
-      addClass(hoverPanel, "_justFlipIt_panel");
-      const frontWrapper = document.createElement("div");
-      addClass(frontWrapper, "front");
-      const backWrapper = document.createElement("div");
-      addClass(backWrapper, this.backClass);
-
-      // NEU: Klassen übernehmen (Panel, .front, .backY)
-      if (this.settings.preserveClasses && originalElement.classList.length) {
-        originalElement.classList.forEach((cls) => {
-          if (!hoverPanel.classList.contains(cls)) {
-            hoverPanel.classList.add(cls);
-          }
-          if (frontWrapper && !frontWrapper.classList.contains(cls)) {
-            frontWrapper.classList.add(cls);
-          }
-          if (backWrapper && !backWrapper.classList.contains(cls)) {
-            backWrapper.classList.add(cls);
-          }
-        });
-      }
-
-      // NEU: Inline-Styles übernehmen (nur auf Panel)
-      if (
-        this.settings.preserveStyles && originalElement.getAttribute("style")
-      ) {
-        hoverPanel.setAttribute(
-          "style",
-          (hoverPanel.getAttribute("style") || "") +
-          ";" + originalElement.getAttribute("style"),
-        );
-      }
-
-      // Nur den INHALT übernehmen!
-      frontWrapper.innerHTML = originalElement.innerHTML;
-
-      if (this.settings.Template) {
-        backWrapper.innerHTML = this.settings.Template;
-      } else {
-        backWrapper.innerHTML = originalElement.innerHTML;
+        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);
+        }
       }
-
-      // Panel einfügen und Original entfernen
-      originalElement.parentNode.insertBefore(hoverPanel, originalElement);
-      hoverPanel.appendChild(frontWrapper);
-      hoverPanel.appendChild(backWrapper);
-      originalElement.parentNode.removeChild(originalElement);
-
-      // Panel-Größe und Styles übernehmen
-      hoverPanel.style.width = this.elementWidth;
-      hoverPanel.style.height = this.elementHeight;
-
-      // Custom Styles aus Option anwenden
-      if (this.settings.Style && this.settings.Style.length) {
-        this.settings.Style.forEach((styleObj) => {
-          if (styleObj.el) {
-            if (styleObj.el.toLowerCase() === "self") {
-              Object.assign(hoverPanel.style, styleObj.style);
-            } else {
-              const targetElements = hoverPanel.querySelectorAll(styleObj.el);
-              targetElements.forEach((el) => {
-                Object.assign(el.style, styleObj.style);
-              });
-            }
+      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);
           }
         });
       }
-
-      // Events setzen
-      this._setupEvents(hoverPanel);
-
-      // Referenzen speichern
-      this.hoverPanel = hoverPanel;
-      this.frontWrapper = frontWrapper;
-      this.backWrapper = backWrapper;
-    }
-
-    _setupTilt() {
-      const handleMove = (e) => {
-        const rect = this.hoverPanel.getBoundingClientRect();
-        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
-        const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
-        const centerX = rect.width / 2;
-        const centerY = rect.height / 2;
-        const rotateX = ((y - centerY) / centerY) * 10;
-        const rotateY = (-(x - centerX) / centerX) * 10;
-        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
-      };
-
-      const handleEnter = () => {
-        this.hoverPanel.style.transition = "all 0.2s ease-out";
-      };
-
-      const handleLeave = () => {
-        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
-        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      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.hoverPanel.addEventListener("mousemove", handleMove);
-      this.hoverPanel.addEventListener("touchmove", handleMove);
-      this.hoverPanel.addEventListener("mouseenter", handleEnter);
-      this.hoverPanel.addEventListener("touchstart", handleEnter);
-      this.hoverPanel.addEventListener("mouseleave", handleLeave);
-      this.hoverPanel.addEventListener("touchend", handleLeave);
+      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);
     }
-
-    _setupEvents(hoverPanel) {
-      if (this.settings.Tilt === 'only') return;
-      if (this.settings.Click === true) {
-        hoverPanel.addEventListener("click", (e) => {
-          e.preventDefault();
-          this._toggleFlip();
-        });
-      } else if (typeof this.settings.Click === "string") {
-        const clickElements = hoverPanel.querySelectorAll(this.settings.Click);
-        clickElements.forEach((el) => {
-          el.addEventListener("click", () => {
-            this._toggleFlip();
-          });
-        });
-      } else {
-        // Default hover behavior
-        hoverPanel.addEventListener("mouseenter", () => {
-          this._flip(true);
-        });
-        hoverPanel.addEventListener("mouseleave", () => {
-          this._flip(false);
-        });
-      }
+    listen(type, handler, options) {
+      this.hoverPanel.addEventListener(type, handler, options);
+      this.cleanups.push(() => this.hoverPanel.removeEventListener(type, handler, options));
     }
-
-    _toggleFlip() {
-      const isFlipped = hasClass(this.hoverPanel, this.flipClass);
-      this._flip(!isFlipped);
+    get reduced() {
+      return this.settings.ReducedMotion !== false && !!this.motion?.matches;
     }
-
-    _flip(shouldFlip) {
-      if (shouldFlip) {
-        addClass(this.hoverPanel, this.flipClass);
-        if (supportsWebAnimations) {
-          animateFlip(
-            this.frontWrapper,
-            this.rotateStart,
-            this.rotateFront,
-            this.settings.Duration,
-            this.settings.Easing,
-          );
-          animateFlip(
-            this.backWrapper,
-            this.rotateBack,
-            this.rotateReset,
-            this.settings.Duration,
-            this.settings.Easing,
-          );
-        }
-      } else {
-        removeClass(this.hoverPanel, this.flipClass);
-        if (supportsWebAnimations) {
-          animateFlip(
-            this.frontWrapper,
-            this.rotateFront,
-            this.rotateStart,
-            this.settings.Duration,
-            this.settings.Easing,
-          );
-          animateFlip(
-            this.backWrapper,
-            this.rotateReset,
-            this.rotateBack,
-            this.settings.Duration,
-            this.settings.Easing,
-          );
-        }
+    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;
     }
-
-    destroy() {
-      const hoverPanel = this.hoverPanel;
-      const originalElement = hoverPanel.querySelector(".front > *");
-
-      // Restore original classes
-      originalElement.className = this.originalClassName;
-
-      // Put the original element back in its place
-      hoverPanel.parentNode.insertBefore(originalElement, hoverPanel);
-      hoverPanel.parentNode.removeChild(hoverPanel);
-
-      // Remove from instance map
-      instanceMap.delete(this.element);
-    }
-  }
-
-  // Main function to initialize justFlipIt
-  function justFlipIt(selector, options = {}) {
-    if (typeof selector === "string") {
-      // If selector is a string, find all matching elements
-      const elements = document.querySelectorAll(selector);
-      return Array.from(elements).map((el) => {
-        return new JustFlipIt(el, options);
+    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();
       });
-    } else if (selector instanceof Element) {
-      // If selector is a DOM element
-      return new JustFlipIt(selector, options);
-    } else if (selector.length) {
-      // If selector is array-like (NodeList, HTMLCollection, etc.)
-      return Array.from(selector).map((el) => {
-        return new JustFlipIt(el, options);
+      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);
       });
-    }
-  }
-
-  // Destroy method
-  justFlipIt.destroy = function (selector) {
-    if (typeof selector === "string") {
-      // If selector is a string, find all matching elements
-      const elements = document.querySelectorAll(selector);
-      Array.from(elements).forEach((el) => {
-        const instance = instanceMap.get(el);
-        if (instance) instance.destroy();
+      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();
       });
-    } else if (selector instanceof Element) {
-      // If selector is a DOM element
-      const instance = instanceMap.get(selector);
-      if (instance) instance.destroy();
-    } else if (selector.length) {
-      // If selector is array-like (NodeList, HTMLCollection, etc.)
-      Array.from(selector).forEach((el) => {
-        const instance = instanceMap.get(el);
-        if (instance) instance.destroy();
+      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;
+    }
   };
-
-  return justFlipIt;
-});
+  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