@simhub2/justflipit 3.0.1 → 3.1.1

package/src/justFlipIt-modern.js

@@ -1,11 +1,11 @@
 /*!
- * Modern justFlipIt v3.0.0
+ * justFlipIt v3.1.1
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -20,14 +20,13 @@
   "use strict";
 
   // Feature detection
-  const supportsGrid =
-    typeof CSS !== "undefined" &&
+  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)");
+  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() {
@@ -217,6 +216,8 @@
           Style: [], // Custom styles
           Duration: 400, // Animation duration in ms
           Easing: "ease-in-out", // Animation easing function
+          preserveClasses: true, // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -256,79 +257,61 @@
       const originalElement = this.element;
       const originalClassName = this.originalClassName;
 
-      // Create panel structure
+      // Panel-Struktur erzeugen
       const hoverPanel = document.createElement(this.originalTagName);
       addClass(hoverPanel, "hover");
       addClass(hoverPanel, "_justFlipIt_panel");
-
-      // Create front wrapper
       const frontWrapper = document.createElement("div");
       addClass(frontWrapper, "front");
-
-      // Clone element for back side if no template provided
-      const clone = originalElement.cloneNode(true);
-      clone.className = ""; // Remove classes
-
-      // Create back wrapper
       const backWrapper = document.createElement("div");
       addClass(backWrapper, this.backClass);
-      if (originalClassName) {
-        originalClassName.split(" ").forEach((cls) => {
-          if (cls) addClass(backWrapper, cls);
+
+      // 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);
+          }
         });
       }
 
-      // PATCH: Styles übernehmen und Original komplett transparent machen
-      copyStyles(originalElement, frontWrapper);
-      copyStyles(originalElement, backWrapper);
+      // NEU: Inline-Styles übernehmen (nur auf Panel)
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
+      }
 
-      // NEU: Wende benutzerdefinierte Animationseinstellungen an
-      applyAnimationSettings(
-        frontWrapper,
-        this.settings.Duration,
-        this.settings.Easing,
-      );
-      applyAnimationSettings(
-        backWrapper,
-        this.settings.Duration,
-        this.settings.Easing,
-      );
+      // Nur den INHALT übernehmen!
+      frontWrapper.innerHTML = originalElement.innerHTML;
 
-      // Mache das Original komplett transparent und ohne Border/Shadow/usw.
-      originalElement.style.all = "inherit"; // Reset alles zur Sicherheit
-      originalElement.style.background = "transparent";
-      originalElement.style.backgroundColor = "transparent";
-      originalElement.style.backgroundImage = "none";
-      originalElement.style.border = "none";
-      originalElement.style.borderRadius = "0";
-      originalElement.style.boxShadow = "none";
-      originalElement.style.outline = "none";
-
-      // If template provided, use that instead of clone
       if (this.settings.Template) {
         backWrapper.innerHTML = this.settings.Template;
       } else {
-        backWrapper.appendChild(clone);
+        backWrapper.innerHTML = originalElement.innerHTML;
       }
 
-      // Restructure DOM
+      // Panel einfügen und Original entfernen
       originalElement.parentNode.insertBefore(hoverPanel, originalElement);
-      frontWrapper.appendChild(originalElement);
       hoverPanel.appendChild(frontWrapper);
       hoverPanel.appendChild(backWrapper);
+      originalElement.parentNode.removeChild(originalElement);
 
-      // Copy original classes to hover panel
-      if (originalClassName) {
-        originalClassName.split(" ").forEach((cls) => {
-          if (cls) addClass(hoverPanel, cls);
-        });
-      }
-
-      // Apply styles
+      // Panel-Größe und Styles übernehmen
       hoverPanel.style.width = this.elementWidth;
       hoverPanel.style.height = this.elementHeight;
 
-      // Apply custom styles
+      // Custom Styles aus Option anwenden
       if (this.settings.Style && this.settings.Style.length) {
         this.settings.Style.forEach((styleObj) => {
           if (styleObj.el) {
@@ -344,10 +327,10 @@
         });
       }
 
-      // Set up event handlers
+      // Events setzen
       this._setupEvents(hoverPanel);
 
-      // Store reference to original element
+      // Referenzen speichern
       this.hoverPanel = hoverPanel;
       this.frontWrapper = frontWrapper;
       this.backWrapper = backWrapper;

package/src/justFlipIt-modern.min.js

@@ -1 +1 @@
-((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){"undefined"!=typeof CSS&&CSS.supports&&CSS.supports("display","grid");let a="undefined"!=typeof Element&&"animate"in Element.prototype;window.CSS&&CSS.supports&&CSS.supports("color","var(--test)");function i(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function o(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function n(t,e,s){e=`transform ${e/1e3}s `+s;t.style.transition=e,t.style.WebkitTransition=e,t.style.MozTransition=e}function l(t,e){let s=window.getComputedStyle(t);["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"].forEach(t=>{s[t]&&"none"!==s[t]&&"initial"!==s[t]&&""!==s[t]&&(e.style[t]=s[t])})}function s(t,e,s,i,r="ease-in-out"){a?t.animate([{transform:e},{transform:s}],{duration:i,easing:r,fill:"forwards"}):(t.style.transform=s,t.style.webkitTransform=s,t.style.mozTransform=s)}let r=new WeakMap;class p{constructor(t,e={}){var s;document.querySelector('[data-justflipitstyle="justFlipIt"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt"),s.textContent="._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;}._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;}._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);}._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);}._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out"},e),this.elementWidth=i(t,"width"),this.elementHeight=i(t,"height"),this.elementBackgroundColor=i(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back",this.rotateStart="rotateX(0deg)",this.rotateFront="rotateX(180deg)",this.rotateBack="rotateX(-180deg)",this.rotateReset="rotateX(0deg)"):(this.flipClass="_flipY_",this.backClass="backY",this.rotateStart="rotateY(0deg)",this.rotateFront="rotateY(180deg)",this.rotateBack="rotateY(-180deg)",this.rotateReset="rotateY(0deg)"),this._init(),r.set(t,this)}_init(){var t=this.element,e=this.originalClassName;let s=document.createElement(this.originalTagName);o(s,"hover"),o(s,"_justFlipIt_panel");var i=document.createElement("div"),r=(o(i,"front"),t.cloneNode(!0));r.className="";let a=document.createElement("div");o(a,this.backClass),e&&e.split(" ").forEach(t=>{t&&o(a,t)}),l(t,i),l(t,a),n(i,this.settings.Duration,this.settings.Easing),n(a,this.settings.Duration,this.settings.Easing),t.style.all="inherit",t.style.background="transparent",t.style.backgroundColor="transparent",t.style.backgroundImage="none",t.style.border="none",t.style.borderRadius="0",t.style.boxShadow="none",t.style.outline="none",this.settings.Template?a.innerHTML=this.settings.Template:a.appendChild(r),t.parentNode.insertBefore(s,t),i.appendChild(t),s.appendChild(i),s.appendChild(a),e&&e.split(" ").forEach(t=>{t&&o(s,t)}),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=i,this.backWrapper=a}_setupEvents(t){!0===this.settings.Click?t.addEventListener("click",t=>{t.preventDefault(),this._toggleFlip()}):"string"==typeof this.settings.Click?t.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{this._toggleFlip()})}):(t.addEventListener("mouseenter",()=>{this._flip(!0)}),t.addEventListener("mouseleave",()=>{this._flip(!1)}))}_toggleFlip(){t=this.hoverPanel,e=this.flipClass;var t,e=t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className);this._flip(!e)}_flip(t){var e;t?(o(this.hoverPanel,this.flipClass),a&&(s(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing))):(t=this.hoverPanel,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," "),a&&(s(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),r.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new p(t,e))):t instanceof Element?new p(t,e):t.length?Array.from(t).map(t=>new p(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=r.get(t);t&&t.destroy()})):t instanceof Element?(e=r.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=r.get(t);t&&t.destroy()})},t});
+((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){"undefined"!=typeof CSS&&CSS.supports&&CSS.supports("display","grid");let a="undefined"!=typeof Element&&"animate"in Element.prototype;window.CSS&&CSS.supports&&CSS.supports("color","var(--test)");function i(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function r(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function s(t,e,s,i,r="ease-in-out"){a?t.animate([{transform:e},{transform:s}],{duration:i,easing:r,fill:"forwards"}):(t.style.transform=s,t.style.webkitTransform=s,t.style.mozTransform=s)}let n=new WeakMap;class o{constructor(t,e={}){var s;document.querySelector('[data-justflipitstyle="justFlipIt"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt"),s.textContent="._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;}._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;}._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);}._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);}._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=i(t,"width"),this.elementHeight=i(t,"height"),this.elementBackgroundColor=i(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back",this.rotateStart="rotateX(0deg)",this.rotateFront="rotateX(180deg)",this.rotateBack="rotateX(-180deg)",this.rotateReset="rotateX(0deg)"):(this.flipClass="_flipY_",this.backClass="backY",this.rotateStart="rotateY(0deg)",this.rotateFront="rotateY(180deg)",this.rotateBack="rotateY(-180deg)",this.rotateReset="rotateY(0deg)"),this._init(),n.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(r(s,"hover"),r(s,"_justFlipIt_panel"),document.createElement("div")),i=(r(e,"front"),document.createElement("div"));r(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(t){!0===this.settings.Click?t.addEventListener("click",t=>{t.preventDefault(),this._toggleFlip()}):"string"==typeof this.settings.Click?t.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{this._toggleFlip()})}):(t.addEventListener("mouseenter",()=>{this._flip(!0)}),t.addEventListener("mouseleave",()=>{this._flip(!1)}))}_toggleFlip(){t=this.hoverPanel,e=this.flipClass;var t,e=t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className);this._flip(!e)}_flip(t){var e;t?(r(this.hoverPanel,this.flipClass),a&&(s(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing))):(t=this.hoverPanel,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," "),a&&(s(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),n.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new o(t,e))):t instanceof Element?new o(t,e):t.length?Array.from(t).map(t=>new o(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=n.get(t);t&&t.destroy()})):t instanceof Element?(e=n.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=n.get(t);t&&t.destroy()})},t});

package/src/justFlipIt-vanilla.js

@@ -1,11 +1,11 @@
 /*!
- * Vanilla JS justFlipIt v3.0.0
+ * justFlipIt v3.1.1
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -160,9 +160,10 @@
           Click: false,
           FlipX: false,
           Style: [],
-          // NEU: Standard-Animationsoptionen
           Duration: 400,
           Easing: "ease-in-out",
+          preserveClasses: true, // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -186,63 +187,62 @@
     _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 clone = originalElement.cloneNode(true);
-      clone.className = "";
       const backWrapper = document.createElement("div");
       addClass(backWrapper, this.backClass);
-      if (originalClassName) {
-        originalClassName.split(" ").forEach((cls) => {
-          if (cls) addClass(backWrapper, cls);
+
+      // 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);
+          }
         });
       }
 
-      // PATCH: Styles übernehmen und Original komplett transparent machen
-      copyStyles(originalElement, frontWrapper);
-      copyStyles(originalElement, backWrapper);
-
-      // Mache das Original komplett transparent und ohne Border/Shadow/usw.
-      originalElement.style.all = "inherit"; // Reset alles zur Sicherheit
-      originalElement.style.background = "transparent";
-      originalElement.style.backgroundColor = "transparent";
-      originalElement.style.backgroundImage = "none";
-      originalElement.style.border = "none";
-      originalElement.style.borderRadius = "0";
-      originalElement.style.boxShadow = "none";
-      originalElement.style.outline = "none";
+      // NEU: Inline-Styles übernehmen (nur auf Panel)
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
+      }
 
-      // NEU: Wende benutzerdefinierte Animationseinstellungen an
-      applyAnimationSettings(
-        frontWrapper,
-        this.settings.Duration,
-        this.settings.Easing,
-      );
-      applyAnimationSettings(
-        backWrapper,
-        this.settings.Duration,
-        this.settings.Easing,
-      );
+      // Nur den INHALT übernehmen!
+      frontWrapper.innerHTML = originalElement.innerHTML;
 
       if (this.settings.Template) {
         backWrapper.innerHTML = this.settings.Template;
       } else {
-        backWrapper.appendChild(clone);
+        backWrapper.innerHTML = originalElement.innerHTML;
       }
+
+      // Panel einfügen und Original entfernen
       originalElement.parentNode.insertBefore(hoverPanel, originalElement);
-      frontWrapper.appendChild(originalElement);
       hoverPanel.appendChild(frontWrapper);
       hoverPanel.appendChild(backWrapper);
-      if (originalClassName) {
-        originalClassName.split(" ").forEach((cls) => {
-          if (cls) addClass(hoverPanel, cls);
-        });
-      }
+      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) {
@@ -257,7 +257,11 @@
           }
         });
       }
+
+      // Events setzen
       this._setupEvents(hoverPanel);
+
+      // Referenzen speichern
       this.hoverPanel = hoverPanel;
       this.frontWrapper = frontWrapper;
       this.backWrapper = backWrapper;

package/src/justFlipIt-vanilla.min.js

@@ -1 +1 @@
-((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){function a(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function o(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function e(t,e){var i,s;t.classList?t.classList.toggle(e):(0<=(s=(i=t.className.split(" ")).indexOf(e))?i.splice(s,1):i.push(e),t.className=i.join(" "))}function r(t,e){let i=window.getComputedStyle(t);["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"].forEach(t=>{i[t]&&"none"!==i[t]&&"initial"!==i[t]&&""!==i[t]&&(e.style[t]=i[t])})}function l(t,e,i){e=`all ${e/1e3}s `+i;t.style.transition=e,t.style.WebkitTransition=e,t.style.MozTransition=e,t.style.msTransition=e,t.style.OTransition=e}let d=new WeakMap;class s{constructor(t,e={}){var i,s,n;document.querySelector('[data-justflipitstyle="justFlipIt_One"]')||((i=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_One"),i.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)}",(s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Two"),s.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)}",(n=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Transparent"),n.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(i),document.head.appendChild(s),document.head.appendChild(n)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out"},e),this.elementWidth=a(t,"width"),this.elementHeight=a(t,"height"),this.elementBackgroundColor=a(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back"):(this.flipClass="_flipY_",this.backClass="backY"),this._init(),d.set(t,this)}_init(){var t=this.element,e=this.originalClassName;let i=document.createElement(this.originalTagName);o(i,"hover"),o(i,"_justFlipIt_panel");var s=document.createElement("div"),n=(o(s,"front"),t.cloneNode(!0));n.className="";let a=document.createElement("div");o(a,this.backClass),e&&e.split(" ").forEach(t=>{t&&o(a,t)}),r(t,s),r(t,a),t.style.all="inherit",t.style.background="transparent",t.style.backgroundColor="transparent",t.style.backgroundImage="none",t.style.border="none",t.style.borderRadius="0",t.style.boxShadow="none",t.style.outline="none",l(s,this.settings.Duration,this.settings.Easing),l(a,this.settings.Duration,this.settings.Easing),this.settings.Template?a.innerHTML=this.settings.Template:a.appendChild(n),t.parentNode.insertBefore(i,t),s.appendChild(t),i.appendChild(s),i.appendChild(a),e&&e.split(" ").forEach(t=>{t&&o(i,t)}),i.style.width=this.elementWidth,i.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(i.style,e.style):i.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(i),this.hoverPanel=i,this.frontWrapper=s,this.backWrapper=a}_setupEvents(i){!0===this.settings.Click?i.addEventListener("click",t=>{t.preventDefault(),e(i,this.flipClass)}):"string"==typeof this.settings.Click?i.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{e(i,this.flipClass)})}):(i.addEventListener("mouseenter",()=>{o(i,this.flipClass)}),i.addEventListener("mouseleave",()=>{var t,e;t=i,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")}))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),d.delete(this.element)}}function t(t,e={}){var i;return"string"==typeof t?(i=document.querySelectorAll(t),Array.from(i).map(t=>new s(t,e))):t instanceof Element?new s(t,e):t.length?Array.from(t).map(t=>new s(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=d.get(t);t&&t.destroy()})):t instanceof Element?(e=d.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=d.get(t);t&&t.destroy()})},t});
+((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){function n(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function a(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function e(t,e){var s,i;t.classList?t.classList.toggle(e):(0<=(i=(s=t.className.split(" ")).indexOf(e))?s.splice(i,1):s.push(e),t.className=s.join(" "))}let l=new WeakMap;class i{constructor(t,e={}){var s,i,a;document.querySelector('[data-justflipitstyle="justFlipIt_One"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_One"),s.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)}",(i=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Two"),i.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)}",(a=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Transparent"),a.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s),document.head.appendChild(i),document.head.appendChild(a)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=n(t,"width"),this.elementHeight=n(t,"height"),this.elementBackgroundColor=n(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back"):(this.flipClass="_flipY_",this.backClass="backY"),this._init(),l.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(a(s,"hover"),a(s,"_justFlipIt_panel"),document.createElement("div")),i=(a(e,"front"),document.createElement("div"));a(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(s){!0===this.settings.Click?s.addEventListener("click",t=>{t.preventDefault(),e(s,this.flipClass)}):"string"==typeof this.settings.Click?s.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{e(s,this.flipClass)})}):(s.addEventListener("mouseenter",()=>{a(s,this.flipClass)}),s.addEventListener("mouseleave",()=>{var t,e;t=s,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")}))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),l.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new i(t,e))):t instanceof Element?new i(t,e):t.length?Array.from(t).map(t=>new i(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=l.get(t);t&&t.destroy()})):t instanceof Element?(e=l.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=l.get(t);t&&t.destroy()})},t});

package/src/justFlipIt.d.ts

@@ -24,6 +24,16 @@ declare namespace justFlipIt {
      * Custom styles to apply to elements
      */
     Style?: StyleOption[];
+
+    /**
+     * If true, all CSS classes from the original element are copied to the flip panel (default: true)
+     */
+    preserveClasses?: boolean;
+
+    /**
+     * If true, all inline styles from the original element are copied to the flip panel (default: true)
+     */
+    preserveStyles?: boolean;
   }
 
   /**