@simhub2/justflipit 3.2.2 → 4.0.1

package/dist/justFlipIt-vanilla.js

@@ -1,366 +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";
-
-  function addStyles() {
-    if (document.querySelector('[data-justflipitstyle="justFlipIt_One"]')) {
-      return;
+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 });
     }
-    const styleX = document.createElement("style");
-    styleX.setAttribute("data-justflipitstyle", "justFlipIt_One");
-    styleX.textContent =
-      "._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}" +
-      "._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}" +
-      "._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}" +
-      "._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}" +
-      "._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";
-    const styleY = document.createElement("style");
-    styleY.setAttribute("data-justflipitstyle", "justFlipIt_Two");
-    styleY.textContent =
-      "._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}" +
-      "._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}" +
-      "._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";
-
-    // PATCH: Füge Transparency-Style hinzu
-    const styleTransparent = document.createElement("style");
-    styleTransparent.setAttribute(
-      "data-justflipitstyle",
-      "justFlipIt_Transparent",
-    );
-    styleTransparent.textContent =
-      "._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}" +
-      "._justFlipIt_panel > * {box-sizing: border-box;}";
-
-    document.head.appendChild(styleX);
-    document.head.appendChild(styleY);
-    document.head.appendChild(styleTransparent);
-  }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-  function getStyle(element, property) {
-    return window.getComputedStyle(element, null).getPropertyValue(property);
+  // 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 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);
+  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}`);
       }
-      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,
-      );
-    }
-  }
-
-  // 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];
-      }
-    });
-  }
-
-  // NEU: Funktion zur Anwendung der benutzerdefinierten Animationseinstellungen
-  function applyAnimationSettings(element, duration, easing) {
-    const transitionValue = `all ${duration / 1000}s ${easing}`;
-    element.style.transition = transitionValue;
-    element.style.WebkitTransition = transitionValue;
-    element.style.MozTransition = transitionValue;
-    element.style.msTransition = transitionValue;
-    element.style.OTransition = transitionValue;
-  }
-
-  const instanceMap = new WeakMap();
-
-  class JustFlipIt {
+  var FlipController = class {
     constructor(element, options = {}) {
-      addStyles();
+      validate(options);
+      if (!element || element.nodeType !== 1) throw new TypeError("Expected an HTML element");
       this.element = element;
-      this.settings = Object.assign(
-        {},
-        {
-          Template: "",
-          Click: false,
-          FlipX: false,
-          Style: [],
-          Duration: 400,
-          Easing: "ease-in-out",
-          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 || "";
-      if (this.settings.FlipX === true) {
-        this.flipClass = "_flip_";
-        this.backClass = "back";
+      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._init();
-      if (this.settings.Tilt) {
-        this._setupTilt();
+        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);
+        }
       }
-      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);
+      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);
           }
         });
       }
-
-      // 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;
+      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));
       }
-
-      // 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);
-              });
-            }
-          }
-        });
+      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;
       }
-
-      // 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";
-      };
-
-      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);
+    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;
     }
-
-    _setupEvents(hoverPanel) {
-      if (this.settings.Tilt === 'only') return;
-      if (this.settings.Click === true) {
-        hoverPanel.addEventListener("click", (e) => {
-          e.preventDefault();
-          toggleClass(hoverPanel, this.flipClass);
-        });
-      } else if (typeof this.settings.Click === "string") {
-        const clickElements = hoverPanel.querySelectorAll(this.settings.Click);
-        clickElements.forEach((el) => {
-          el.addEventListener("click", () => {
-            toggleClass(hoverPanel, this.flipClass);
-          });
-        });
-      } else {
-        hoverPanel.addEventListener("mouseenter", () => {
-          addClass(hoverPanel, this.flipClass);
-        });
-        hoverPanel.addEventListener("mouseleave", () => {
-          removeClass(hoverPanel, this.flipClass);
-        });
+    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() {
-      const hoverPanel = this.hoverPanel;
-      const originalElement = hoverPanel.querySelector(".front > *");
-      originalElement.className = this.originalClassName;
-      hoverPanel.parentNode.insertBefore(originalElement, hoverPanel);
-      hoverPanel.parentNode.removeChild(hoverPanel);
-      instanceMap.delete(this.element);
+      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(selector, options = {}) {
-    if (typeof selector === "string") {
-      const elements = document.querySelectorAll(selector);
-      return Array.from(elements).map((el) => new JustFlipIt(el, options));
-    } else if (selector instanceof Element) {
-      return new JustFlipIt(selector, options);
-    } else if (selector.length) {
-      return Array.from(selector).map((el) => new JustFlipIt(el, options));
-    }
+  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 = function (selector) {
-    if (typeof selector === "string") {
-      const elements = document.querySelectorAll(selector);
-      Array.from(elements).forEach((el) => {
-        const instance = instanceMap.get(el);
-        if (instance) instance.destroy();
-      });
-    } else if (selector instanceof Element) {
-      const instance = instanceMap.get(selector);
-      if (instance) instance.destroy();
-    } else if (selector.length) {
-      Array.from(selector).forEach((el) => {
-        const instance = instanceMap.get(el);
-        if (instance) instance.destroy();
-      });
-    }
-  };
-
-  return justFlipIt;
-});
+  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