@simhub2/justflipit 3.0.0 → 3.1.0

package/dist/justFlipIt-vanilla.js

@@ -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,51 @@
     _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);
+      // NEU: Inline-Styles übernehmen (nur auf Panel)
+      if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
+        hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"));
+      }
 
-      // 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: 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 +246,11 @@
           }
         });
       }
+
+      // Events setzen
       this._setupEvents(hoverPanel);
+
+      // Referenzen speichern
       this.hoverPanel = hoverPanel;
       this.frontWrapper = frontWrapper;
       this.backWrapper = backWrapper;

package/dist/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/dist/justFlipIt.js

@@ -169,6 +169,8 @@
           // NEU: Standard-Animationsoptionen
           Duration: 400,
           Easing: "ease-in-out",
+          preserveClasses: true, // NEU
+          preserveStyles: true   // NEU
         },
         options,
       );
@@ -192,61 +194,51 @@
     _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);
-      originalElement.style.all = "inherit";
-      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) {
@@ -261,7 +253,11 @@
           }
         });
       }
+
+      // Events setzen
       this._setupEvents(hoverPanel);
+
+      // Referenzen speichern
       this.hoverPanel = hoverPanel;
       this.frontWrapper = frontWrapper;
       this.backWrapper = backWrapper;

package/dist/justFlipIt.min.js

@@ -1 +1 @@
-((e,i)=>{if("function"==typeof define&&define.amd)define(["jquery"],function(t){return i(t||e.jQuery||e.$)});else if("object"==typeof module&&module.exports){var s="undefined"!=typeof window?window.jQuery:void 0;if(!s)try{s=require("jquery")}catch(t){s=null}module.exports=i(s)}else e.justFlipIt=i(e.jQuery||e.$)})("undefined"!=typeof self?self:this,function(i){function o(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(function(t){i[t]&&"none"!==i[t]&&"initial"!==i[t]&&""!==i[t]&&(e.style[t]=i[t])})}function r(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}function a(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function l(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(" "))}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);l(i,"hover"),l(i,"_justFlipIt_panel");var s=document.createElement("div"),n=(l(s,"front"),t.cloneNode(!0));n.className="";let a=document.createElement("div");l(a,this.backClass),e&&e.split(" ").forEach(t=>{t&&l(a,t)}),o(t,s),o(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",r(s,this.settings.Duration,this.settings.Easing),r(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&&l(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",()=>{l(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}var n;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()})},i?(i.fn.justFlipIt=function(t){return this.each(function(){i.data(this,"plugin_justFlipIt")||i.data(this,"plugin_justFlipIt",new s(this,t))})},i.fn.destroy=function(){return this.each(function(){var t=d.get(this);t&&(t.destroy(),i.removeData(this,"plugin_justFlipIt"))})},(n=function(t,e){return"string"==typeof t||t instanceof Element?i(t).justFlipIt(e):t instanceof i?t.justFlipIt(e):void 0}).destroy=function(t){"string"==typeof t||t instanceof Element?i(t).destroy():t instanceof i&&t.destroy()},n):t});
+((e,s)=>{if("function"==typeof define&&define.amd)define(["jquery"],function(t){return s(t||e.jQuery||e.$)});else if("object"==typeof module&&module.exports){var i="undefined"!=typeof window?window.jQuery:void 0;if(!i)try{i=require("jquery")}catch(t){i=null}module.exports=s(i)}else e.justFlipIt=s(e.jQuery||e.$)})("undefined"!=typeof self?self:this,function(s){function a(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function n(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 r=new WeakMap;class i{constructor(t,e={}){var s,i,n;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)}",(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(s),document.head.appendChild(i),document.head.appendChild(n)),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=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(),r.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(n(s,"hover"),n(s,"_justFlipIt_panel"),document.createElement("div")),i=(n(e,"front"),document.createElement("div"));n(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",()=>{n(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),r.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}var l;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()})},s?(s.fn.justFlipIt=function(t){return this.each(function(){s.data(this,"plugin_justFlipIt")||s.data(this,"plugin_justFlipIt",new i(this,t))})},s.fn.destroy=function(){return this.each(function(){var t=r.get(this);t&&(t.destroy(),s.removeData(this,"plugin_justFlipIt"))})},(l=function(t,e){return"string"==typeof t||t instanceof Element?s(t).justFlipIt(e):t instanceof s?t.justFlipIt(e):void 0}).destroy=function(t){"string"==typeof t||t instanceof Element?s(t).destroy():t instanceof s&&t.destroy()},l):t});

package/dist/types/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;
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simhub2/justflipit",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A lightweight JavaScript library that allows you to implement CSS3 based flip animations on any DOM elements",
   "main": "dist/justFlipIt.js",
   "module": "dist/justFlipIt.js",

package/src/justFlipIt-combined.js

@@ -169,6 +169,8 @@
           // NEU: Standard-Animationsoptionen
           Duration: 400,
           Easing: "ease-in-out",
+          preserveClasses: true, // NEU
+          preserveStyles: true   // NEU
         },
         options,
       );
@@ -192,61 +194,51 @@
     _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);
-      originalElement.style.all = "inherit";
-      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) {
@@ -261,7 +253,11 @@
           }
         });
       }
+
+      // Events setzen
       this._setupEvents(hoverPanel);
+
+      // Referenzen speichern
       this.hoverPanel = hoverPanel;
       this.frontWrapper = frontWrapper;
       this.backWrapper = backWrapper;

package/src/justFlipIt-combined.min.js

@@ -1 +1 @@
-((e,i)=>{if("function"==typeof define&&define.amd)define(["jquery"],function(t){return i(t||e.jQuery||e.$)});else if("object"==typeof module&&module.exports){var s="undefined"!=typeof window?window.jQuery:void 0;if(!s)try{s=require("jquery")}catch(t){s=null}module.exports=i(s)}else e.justFlipIt=i(e.jQuery||e.$)})("undefined"!=typeof self?self:this,function(i){function o(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(function(t){i[t]&&"none"!==i[t]&&"initial"!==i[t]&&""!==i[t]&&(e.style[t]=i[t])})}function r(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}function a(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function l(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(" "))}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);l(i,"hover"),l(i,"_justFlipIt_panel");var s=document.createElement("div"),n=(l(s,"front"),t.cloneNode(!0));n.className="";let a=document.createElement("div");l(a,this.backClass),e&&e.split(" ").forEach(t=>{t&&l(a,t)}),o(t,s),o(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",r(s,this.settings.Duration,this.settings.Easing),r(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&&l(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",()=>{l(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}var n;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()})},i?(i.fn.justFlipIt=function(t){return this.each(function(){i.data(this,"plugin_justFlipIt")||i.data(this,"plugin_justFlipIt",new s(this,t))})},i.fn.destroy=function(){return this.each(function(){var t=d.get(this);t&&(t.destroy(),i.removeData(this,"plugin_justFlipIt"))})},(n=function(t,e){return"string"==typeof t||t instanceof Element?i(t).justFlipIt(e):t instanceof i?t.justFlipIt(e):void 0}).destroy=function(t){"string"==typeof t||t instanceof Element?i(t).destroy():t instanceof i&&t.destroy()},n):t});
+((e,s)=>{if("function"==typeof define&&define.amd)define(["jquery"],function(t){return s(t||e.jQuery||e.$)});else if("object"==typeof module&&module.exports){var i="undefined"!=typeof window?window.jQuery:void 0;if(!i)try{i=require("jquery")}catch(t){i=null}module.exports=s(i)}else e.justFlipIt=s(e.jQuery||e.$)})("undefined"!=typeof self?self:this,function(s){function a(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function n(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 r=new WeakMap;class i{constructor(t,e={}){var s,i,n;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)}",(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(s),document.head.appendChild(i),document.head.appendChild(n)),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=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(),r.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(n(s,"hover"),n(s,"_justFlipIt_panel"),document.createElement("div")),i=(n(e,"front"),document.createElement("div"));n(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",()=>{n(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),r.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}var l;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()})},s?(s.fn.justFlipIt=function(t){return this.each(function(){s.data(this,"plugin_justFlipIt")||s.data(this,"plugin_justFlipIt",new i(this,t))})},s.fn.destroy=function(){return this.each(function(){var t=r.get(this);t&&(t.destroy(),s.removeData(this,"plugin_justFlipIt"))})},(l=function(t,e){return"string"==typeof t||t instanceof Element?s(t).justFlipIt(e):t instanceof s?t.justFlipIt(e):void 0}).destroy=function(t){"string"==typeof t||t instanceof Element?s(t).destroy():t instanceof s&&t.destroy()},l):t});

package/src/justFlipIt-modern.js

@@ -217,6 +217,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 +258,50 @@
       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 +317,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;