@simhub2/justflipit 3.1.1 → 3.2.2

package/README.md

@@ -2,89 +2,110 @@
 [![npm version](https://img.shields.io/npm/v/@simhub2/justflipit.svg)](https://www.npmjs.com/package/@simhub2/justflipit)
 [![npm downloads](https://img.shields.io/npm/dt/@simhub2/justflipit.svg)](https://www.npmjs.com/package/@simhub2/justflipit)
 
----
-
 # justFlipIt
 
-A lightweight JavaScript library for beautiful, customizable flip animations on any DOM element.
+A lightweight JavaScript library for beautiful, customizable flip and tilt animations on any DOM element.
 
 ---
 
-## 🚀 [Live Demo & Examples](https://SimHub.github.io/justFlipIt/)
+### 🚀 [Live Demo & Examples](https://SimHub.github.io/justFlipIt/)
 
 > **Try it out!**  
-> The interactive [Live Demo](https://SimHub.github.io/justFlipIt/) shows all features and use cases, responsive and ready to play with.
+> The interactive [Live Demo](https://SimHub.github.io/justFlipIt/) shows all features and use cases.
 
 ---
 
-## Quick Start
+### ✨ Features
 
-**CDN / Local:**
+-   **Plug & Play**: Automatically adopts classes and styles for seamless integration.
+-   **3D Tilt Effect**: Adds an interactive 3D tilt effect on hover and touch.
+-   **Lightweight & Fast**: Minimal footprint, maximum performance.
+-   **Highly Customizable**: Use your own styles, templates, and animations.
+-   **Modern & Responsive**: Works on all modern browsers and devices.
+-   **Flexible**: Use via CDN, NPM, or ES modules.
+
+---
 
+### 📦 Installation
+
+**CDN / Local:**
 ```html
-<script src="justFlipIt-modern.min.js"></script>
-<script>
-  justFlipIt(".my-card");
-</script>
+<script src="https://unpkg.com/@simhub2/justflipit/dist/justFlipIt-modern.min.js"></script>
 ```
 
 **NPM:**
-
 ```bash
 npm install @simhub2/justflipit
 ```
-
 ```js
 import justFlipIt from "@simhub2/justflipit";
-justFlipIt(".my-card");
 ```
 
 ---
 
-## 🆕 Plug & Play: Automatic adoption of classes and styles
+### ▶️ Usage
 
-**This means:**
+Initialize the flip effect on your elements. The default trigger is **hover**.
 
-For example, you can simply
+**Hover to Flip (Default)**
+```html
+<div class="card">Hover me!</div>
 
-```js
-justFlipIt(".daisyui-card");
+<script>
+  justFlipIt('.card');
+</script>
 ```
 
-and all colors, shadows, spacing, etc. are retained, whether you use Tailwind, daisyUI, Bootstrap or your own styles.
-
-### **Options**
-
-| Option          | Type | Standard | Description                                                         |
-| --------------- | ---- | -------- | ------------------------------------------------------------------- |
-| preserveClasses | Bool | true     | Takes all CSS classes from the original element to the panel        |
-| preserveStyles  | Bool | true     | Takes over all inline styles from the original element to the panel |
-
-**Example:**
-
+**Click to Flip**
 ```js
-// Standard: Plug & Play
-justFlipIt(".meine-karte");
+justFlipIt('.card', { Click: true });
+```
 
-// Optional: Nur Flip, keine Klassen/Styles übernehmen
-justFlipIt(".meine-karte", { preserveClasses: false, preserveStyles: false });
+**Enable Tilt Effect**
+```js
+// Enable with default settings
+justFlipIt('.card', { tilt: true });
+
+// Customize tilt
+justFlipIt('.card', { 
+  tilt: {
+    max: 15,
+    perspective: 800
+  } 
+});
 ```
 
 ---
 
-## 🎨 Customizing (Erweitert)
+### ⚙️ Options
+
+Customize the behavior with these options.
+
+| Option          | Type    | Default  | Description                                                 |
+| --------------- | ------- | -------- | ----------------------------------------------------------- |
+| `tilt`          | Boolean / Object | `false`  | Enables a 3D tilt effect. Customize with `{ max, perspective }`. |
+| `Click`         | Boolean / String | `false`  | `true` for click trigger, or a selector for a custom trigger. |
+| `FlipX`         | Boolean | `false`  | `true` for vertical flip (around X-axis).                   |
+| `Template`      | String  | `null`   | HTML content for the back side.                             |
+| `preserveClasses` | Boolean | `true`   | Inherit all CSS classes from the original element.          |
+| `preserveStyles`| Boolean | `true`   | Inherit all inline styles from the original element.        |
+| `Duration`      | Number  | `400`    | Animation duration in ms.                                   |
+| `Easing`        | String  | `ease-in-out` | CSS easing function for the animation.                 |
+| `Style`         | Array   | `[]`     | Apply custom styles to the flip panels (see demo).          |
+
 
-You can use all options from justFlipIt as usual – e.g. your own templates, flip direction, animations, targeted styles:
+<details>
+<summary><b>Advanced Example</b></summary>
 
 ```js
-justFlipIt(".meine-karte", {
-  preserveClasses: false, // keine Klassen übernehmen
-  preserveStyles: false, // keine Inline-Styles übernehmen
-  Click: true, // Flip bei Klick
-  FlipX: true, // Flip um X-Achse (vertikal)
-  Duration: 800, // Animationsdauer in ms
-  Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)", // Animationseasing
-  Template: "<div>Meine Rückseite!</div>", // Eigener Rückseiteninhalt
+justFlipIt(".card", {
+  preserveClasses: false, // Start with a clean slate
+  Click: true,
+  FlipX: true,
+  tilt: true,
+  Duration: 800,
+  Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
+  Template: "<div>My custom back side!</div>",
   Style: [
     {
       el: "self",
@@ -99,109 +120,26 @@ justFlipIt(".meine-karte", {
   ],
 });
 ```
-
-**Tip:**
-
-- With preserveClasses: false and preserveStyles: false you have full control and can style everything specifically via option or CSS.
-- With the default values (true) everything remains like the original element – Plug & Play!
-
----
-
-## Features
-
-- ⚡ **Lightweight & Fast** – Minimal footprint, maximum performance
-- 🎨 **Highly Customizable** – Style with CSS, custom animations, and templates
-- 📱 **Modern & Responsive** – Works on all modern browsers and devices
-- 🔧 **Flexible Import** – Use via script tag, npm, or ES modules
-- 🎯 **jQuery Optional** – Works with or without jQuery
-- 🎭 **Flip Animations** – Beautiful CSS3 transform-based effects
-- ⚙️ **Simple API** – Easy configuration for duration, easing, triggers, and more
-
----
-
-## Minimal Examples
-
-**Hover to flip:**
-
-```html
-<div class="card">Hover me!</div>
-<script>
-  justFlipIt(".card");
-</script>
-```
-
-**Click to flip:**
-
-```html
-<div class="card">Click me!</div>
-<script>
-  justFlipIt(".card", { Click: true });
-</script>
-```
-
-**Button trigger:**
-
-```html
-<div class="card">
-  Card Content
-  <button class="flip-btn">Flip</button>
-</div>
-<script>
-  justFlipIt(".card", { Click: ".flip-btn" });
-</script>
-```
+</details>
 
 ---
 
-## Full API & Advanced Usage
+### Versions & Compatibility
 
-See the [Live Demo](https://SimHub.github.io/justFlipIt/) for all options, advanced examples, and interactive playground.
-
----
+-   **modern**: `justFlipIt-modern.js` (Recommended, uses Web Animations API)
+-   **vanilla**: `justFlipIt-vanilla.js` (CSS transitions only)
+-   **combined**: `justFlipIt-combined.js` (Optional jQuery support)
 
-## Library Versions
-
-- **Vanilla:** `justFlipIt-vanilla.js` – No dependencies, CSS transitions
-- **Modern:** `justFlipIt-modern.js` – No dependencies, Web Animations API + CSS fallback
-- **Combined:** `justFlipIt-combined.js` – Optional jQuery support
+**Browser Support:**
+-   ✅ Chrome 60+
+-   ✅ Firefox 55+
+-   ✅ Safari 12+
+-   ✅ Edge 79+
 
 ---
 
-## Browser Support
-
-- ✅ Chrome 60+
-- ✅ Firefox 55+
-- ✅ Safari 12+
-- ✅ Edge 79+
-- ✅ iOS Safari 12+
-- ✅ Android Chrome 60+
-
----
+### License
 
-## License
+Released under the **[MIT License](https://opensource.org/licenses/MIT)**.
 
-MIT © [SimHub](https://github.com/SimHub)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the “Software”), to deal
-in the Software without restriction, including without limitation the rights  
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
-copies of the Software, and to permit persons to whom the Software is  
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all  
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
-SOFTWARE.
-
----
-
-**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/@simhub2/justflipit)**
-
----
+You are free to use, modify, and distribute this project, even for commercial purposes. All that is required is to include the original copyright and license notice in any copy of the software/source.

package/dist/justFlipIt-modern.js

@@ -1,5 +1,5 @@
 /*!
- * justFlipIt v3.1.1
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
  * Copyright SimHub
@@ -249,6 +249,10 @@
       // Initialize flip
       this._init();
 
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
+
       // Store instance
       instanceMap.set(element, this);
     }
@@ -336,7 +340,37 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      const handleMove = (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      };
+
+      const handleEnter = () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      };
+
+      const handleLeave = () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      };
+
+      this.hoverPanel.addEventListener("mousemove", handleMove);
+      this.hoverPanel.addEventListener("touchmove", handleMove);
+      this.hoverPanel.addEventListener("mouseenter", handleEnter);
+      this.hoverPanel.addEventListener("touchstart", handleEnter);
+      this.hoverPanel.addEventListener("mouseleave", handleLeave);
+      this.hoverPanel.addEventListener("touchend", handleLeave);
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/dist/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 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});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";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)");function generateStyles(){let baseStyles="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}";let prefixedStyles="._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}";let xAxisStyles="._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}"+"._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}"+"._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}";let yAxisStyles="._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}"+"._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}"+"._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}";let transparentStyle="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";return baseStyles+prefixedStyles+xAxisStyles+yAxisStyles+transparentStyle}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt"]')){return}const styleElement=document.createElement("style");styleElement.setAttribute("data-justflipitstyle","justFlipIt");styleElement.textContent=generateStyles();document.head.appendChild(styleElement)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function applyAnimationSettings(element,duration,easing){const transitionValue=`transform ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function animateFlip(element,start,end,duration,easing="ease-in-out"){if(supportsWebAnimations){const keyframes=[{transform:start},{transform:end}];const options={duration:duration,easing:easing,fill:"forwards"};return element.animate(keyframes,options)}else{element.style.transform=end;element.style.webkitTransform=end;element.style.mozTransform=end;return null}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back";this.rotateStart="rotateX(0deg)";this.rotateFront="rotateX(180deg)";this.rotateBack="rotateX(-180deg)";this.rotateReset="rotateX(0deg)"}else{this.flipClass="_flipY_";this.backClass="backY";this.rotateStart="rotateY(0deg)";this.rotateFront="rotateY(180deg)";this.rotateBack="rotateY(-180deg)";this.rotateReset="rotateY(0deg)"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);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)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){const handleMove=e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;const y=(e.touches?e.touches[0].clientY:e.clientY)-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`};const handleEnter=()=>{this.hoverPanel.style.transition="all 0.2s ease-out"};const handleLeave=()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"};this.hoverPanel.addEventListener("mousemove",handleMove);this.hoverPanel.addEventListener("touchmove",handleMove);this.hoverPanel.addEventListener("mouseenter",handleEnter);this.hoverPanel.addEventListener("touchstart",handleEnter);this.hoverPanel.addEventListener("mouseleave",handleLeave);this.hoverPanel.addEventListener("touchend",handleLeave)}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();this._toggleFlip()})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{this._toggleFlip()})})}else{hoverPanel.addEventListener("mouseenter",()=>{this._flip(true)});hoverPanel.addEventListener("mouseleave",()=>{this._flip(false)})}}_toggleFlip(){const isFlipped=hasClass(this.hoverPanel,this.flipClass);this._flip(!isFlipped)}_flip(shouldFlip){if(shouldFlip){addClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing)}}else{removeClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)}}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>{return new JustFlipIt(el,options)})}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>{return new JustFlipIt(el,options)})}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/dist/justFlipIt-vanilla.js

@@ -1,5 +1,5 @@
 /*!
- * justFlipIt v3.1.1
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
  * Copyright SimHub
@@ -181,6 +181,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -267,7 +270,37 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      const handleMove = (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      };
+
+      const handleEnter = () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      };
+
+      const handleLeave = () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      };
+
+      this.hoverPanel.addEventListener("mousemove", handleMove);
+      this.hoverPanel.addEventListener("touchmove", handleMove);
+      this.hoverPanel.addEventListener("mouseenter", handleEnter);
+      this.hoverPanel.addEventListener("touchstart", handleEnter);
+      this.hoverPanel.addEventListener("mouseleave", handleLeave);
+      this.hoverPanel.addEventListener("touchend", handleLeave);
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

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 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});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);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)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){const handleMove=e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;const y=(e.touches?e.touches[0].clientY:e.clientY)-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`};const handleEnter=()=>{this.hoverPanel.style.transition="all 0.2s ease-out"};const handleLeave=()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"};this.hoverPanel.addEventListener("mousemove",handleMove);this.hoverPanel.addEventListener("touchmove",handleMove);this.hoverPanel.addEventListener("mouseenter",handleEnter);this.hoverPanel.addEventListener("touchstart",handleEnter);this.hoverPanel.addEventListener("mouseleave",handleLeave);this.hoverPanel.addEventListener("touchend",handleLeave)}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/dist/justFlipIt.js

@@ -1,5 +1,5 @@
-/*5
- * justFlipIt v3.1.1
+/*!
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
  * Copyright SimHub
@@ -188,6 +188,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -274,7 +277,37 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      const handleMove = (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      };
+
+      const handleEnter = () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      };
+
+      const handleLeave = () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      };
+
+      this.hoverPanel.addEventListener("mousemove", handleMove);
+      this.hoverPanel.addEventListener("touchmove", handleMove);
+      this.hoverPanel.addEventListener("mouseenter", handleEnter);
+      this.hoverPanel.addEventListener("touchstart", handleEnter);
+      this.hoverPanel.addEventListener("mouseleave", handleLeave);
+      this.hoverPanel.addEventListener("touchend", handleLeave);
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/dist/justFlipIt.min.js

@@ -1 +1 @@
-((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});
+(function(root,factory){if(typeof define==="function"&&define.amd){define(["jquery"],function(jQuery){return factory(jQuery||root.jQuery||root.$)})}else if(typeof module==="object"&&module.exports){var jQuery=typeof window!=="undefined"?window.jQuery:undefined;if(!jQuery){try{jQuery=require("jquery")}catch(e){jQuery=null}}module.exports=factory(jQuery)}else{root.justFlipIt=factory(root.jQuery||root.$)}})(typeof self!=="undefined"?self:this,function(jQuery){"use strict";function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(function(prop){if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);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)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){const handleMove=e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;const y=(e.touches?e.touches[0].clientY:e.clientY)-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`};const handleEnter=()=>{this.hoverPanel.style.transition="all 0.2s ease-out"};const handleLeave=()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"};this.hoverPanel.addEventListener("mousemove",handleMove);this.hoverPanel.addEventListener("touchmove",handleMove);this.hoverPanel.addEventListener("mouseenter",handleEnter);this.hoverPanel.addEventListener("touchstart",handleEnter);this.hoverPanel.addEventListener("mouseleave",handleLeave);this.hoverPanel.addEventListener("touchend",handleLeave)}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};if(jQuery){jQuery.fn.justFlipIt=function(options){return this.each(function(){if(!jQuery.data(this,"plugin_justFlipIt")){jQuery.data(this,"plugin_justFlipIt",new JustFlipIt(this,options))}})};jQuery.fn.destroy=function(){return this.each(function(){const instance=instanceMap.get(this);if(instance){instance.destroy();jQuery.removeData(this,"plugin_justFlipIt")}})};var api=function(selector,options){if(typeof selector==="string"){return jQuery(selector).justFlipIt(options)}else if(selector instanceof Element){return jQuery(selector).justFlipIt(options)}else if(selector instanceof jQuery){return selector.justFlipIt(options)}};api.destroy=function(selector){if(typeof selector==="string"){jQuery(selector).destroy()}else if(selector instanceof Element){jQuery(selector).destroy()}else if(selector instanceof jQuery){selector.destroy()}};return api}return justFlipIt});

package/dist/types/justFlipIt.d.ts

@@ -34,6 +34,14 @@ declare namespace justFlipIt {
      * If true, all inline styles from the original element are copied to the flip panel (default: true)
      */
     preserveStyles?: boolean;
+
+    /**
+     * Enables 3D tilt effect. 
+     * - `true`: Combines flip and tilt.
+     * - `'only'`: Enables only tilt.
+     * - `false`: Disables tilt (default).
+     */
+    Tilt?: boolean | 'only';
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simhub2/justflipit",
-  "version": "3.1.1",
+  "version": "3.2.2",
   "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

@@ -1,5 +1,5 @@
-/*5
- * justFlipIt v3.1.1
+/*!
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
  * Copyright SimHub
@@ -188,6 +188,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -274,7 +277,37 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      const handleMove = (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      };
+
+      const handleEnter = () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      };
+
+      const handleLeave = () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      };
+
+      this.hoverPanel.addEventListener("mousemove", handleMove);
+      this.hoverPanel.addEventListener("touchmove", handleMove);
+      this.hoverPanel.addEventListener("mouseenter", handleEnter);
+      this.hoverPanel.addEventListener("touchstart", handleEnter);
+      this.hoverPanel.addEventListener("mouseleave", handleLeave);
+      this.hoverPanel.addEventListener("touchend", handleLeave);
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/src/justFlipIt-combined.min.js

@@ -1 +1 @@
-((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});
+(function(root,factory){if(typeof define==="function"&&define.amd){define(["jquery"],function(jQuery){return factory(jQuery||root.jQuery||root.$)})}else if(typeof module==="object"&&module.exports){var jQuery=typeof window!=="undefined"?window.jQuery:undefined;if(!jQuery){try{jQuery=require("jquery")}catch(e){jQuery=null}}module.exports=factory(jQuery)}else{root.justFlipIt=factory(root.jQuery||root.$)}})(typeof self!=="undefined"?self:this,function(jQuery){"use strict";function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(function(prop){if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);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)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){const handleMove=e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;const y=(e.touches?e.touches[0].clientY:e.clientY)-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`};const handleEnter=()=>{this.hoverPanel.style.transition="all 0.2s ease-out"};const handleLeave=()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"};this.hoverPanel.addEventListener("mousemove",handleMove);this.hoverPanel.addEventListener("touchmove",handleMove);this.hoverPanel.addEventListener("mouseenter",handleEnter);this.hoverPanel.addEventListener("touchstart",handleEnter);this.hoverPanel.addEventListener("mouseleave",handleLeave);this.hoverPanel.addEventListener("touchend",handleLeave)}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};if(jQuery){jQuery.fn.justFlipIt=function(options){return this.each(function(){if(!jQuery.data(this,"plugin_justFlipIt")){jQuery.data(this,"plugin_justFlipIt",new JustFlipIt(this,options))}})};jQuery.fn.destroy=function(){return this.each(function(){const instance=instanceMap.get(this);if(instance){instance.destroy();jQuery.removeData(this,"plugin_justFlipIt")}})};var api=function(selector,options){if(typeof selector==="string"){return jQuery(selector).justFlipIt(options)}else if(selector instanceof Element){return jQuery(selector).justFlipIt(options)}else if(selector instanceof jQuery){return selector.justFlipIt(options)}};api.destroy=function(selector){if(typeof selector==="string"){jQuery(selector).destroy()}else if(selector instanceof Element){jQuery(selector).destroy()}else if(selector instanceof jQuery){selector.destroy()}};return api}return justFlipIt});

package/src/justFlipIt-modern.js

@@ -1,5 +1,5 @@
 /*!
- * justFlipIt v3.1.1
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
  * Copyright SimHub
@@ -249,6 +249,10 @@
       // Initialize flip
       this._init();
 
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
+
       // Store instance
       instanceMap.set(element, this);
     }
@@ -336,7 +340,37 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      const handleMove = (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      };
+
+      const handleEnter = () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      };
+
+      const handleLeave = () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      };
+
+      this.hoverPanel.addEventListener("mousemove", handleMove);
+      this.hoverPanel.addEventListener("touchmove", handleMove);
+      this.hoverPanel.addEventListener("mouseenter", handleEnter);
+      this.hoverPanel.addEventListener("touchstart", handleEnter);
+      this.hoverPanel.addEventListener("mouseleave", handleLeave);
+      this.hoverPanel.addEventListener("touchend", handleLeave);
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

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 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});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";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)");function generateStyles(){let baseStyles="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}";let prefixedStyles="._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}";let xAxisStyles="._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}"+"._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}"+"._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}";let yAxisStyles="._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}"+"._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}"+"._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}";let transparentStyle="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";return baseStyles+prefixedStyles+xAxisStyles+yAxisStyles+transparentStyle}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt"]')){return}const styleElement=document.createElement("style");styleElement.setAttribute("data-justflipitstyle","justFlipIt");styleElement.textContent=generateStyles();document.head.appendChild(styleElement)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function applyAnimationSettings(element,duration,easing){const transitionValue=`transform ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function animateFlip(element,start,end,duration,easing="ease-in-out"){if(supportsWebAnimations){const keyframes=[{transform:start},{transform:end}];const options={duration:duration,easing:easing,fill:"forwards"};return element.animate(keyframes,options)}else{element.style.transform=end;element.style.webkitTransform=end;element.style.mozTransform=end;return null}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back";this.rotateStart="rotateX(0deg)";this.rotateFront="rotateX(180deg)";this.rotateBack="rotateX(-180deg)";this.rotateReset="rotateX(0deg)"}else{this.flipClass="_flipY_";this.backClass="backY";this.rotateStart="rotateY(0deg)";this.rotateFront="rotateY(180deg)";this.rotateBack="rotateY(-180deg)";this.rotateReset="rotateY(0deg)"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);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)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){const handleMove=e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;const y=(e.touches?e.touches[0].clientY:e.clientY)-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`};const handleEnter=()=>{this.hoverPanel.style.transition="all 0.2s ease-out"};const handleLeave=()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"};this.hoverPanel.addEventListener("mousemove",handleMove);this.hoverPanel.addEventListener("touchmove",handleMove);this.hoverPanel.addEventListener("mouseenter",handleEnter);this.hoverPanel.addEventListener("touchstart",handleEnter);this.hoverPanel.addEventListener("mouseleave",handleLeave);this.hoverPanel.addEventListener("touchend",handleLeave)}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();this._toggleFlip()})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{this._toggleFlip()})})}else{hoverPanel.addEventListener("mouseenter",()=>{this._flip(true)});hoverPanel.addEventListener("mouseleave",()=>{this._flip(false)})}}_toggleFlip(){const isFlipped=hasClass(this.hoverPanel,this.flipClass);this._flip(!isFlipped)}_flip(shouldFlip){if(shouldFlip){addClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing)}}else{removeClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)}}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>{return new JustFlipIt(el,options)})}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>{return new JustFlipIt(el,options)})}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/src/justFlipIt-vanilla.js

@@ -1,5 +1,5 @@
 /*!
- * justFlipIt v3.1.1
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
  * Copyright SimHub
@@ -181,6 +181,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -267,7 +270,37 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      const handleMove = (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      };
+
+      const handleEnter = () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      };
+
+      const handleLeave = () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      };
+
+      this.hoverPanel.addEventListener("mousemove", handleMove);
+      this.hoverPanel.addEventListener("touchmove", handleMove);
+      this.hoverPanel.addEventListener("mouseenter", handleEnter);
+      this.hoverPanel.addEventListener("touchstart", handleEnter);
+      this.hoverPanel.addEventListener("mouseleave", handleLeave);
+      this.hoverPanel.addEventListener("touchend", handleLeave);
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

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 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});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);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)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){const handleMove=e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;const y=(e.touches?e.touches[0].clientY:e.clientY)-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`};const handleEnter=()=>{this.hoverPanel.style.transition="all 0.2s ease-out"};const handleLeave=()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"};this.hoverPanel.addEventListener("mousemove",handleMove);this.hoverPanel.addEventListener("touchmove",handleMove);this.hoverPanel.addEventListener("mouseenter",handleEnter);this.hoverPanel.addEventListener("touchstart",handleEnter);this.hoverPanel.addEventListener("mouseleave",handleLeave);this.hoverPanel.addEventListener("touchend",handleLeave)}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/src/justFlipIt.d.ts

@@ -34,6 +34,14 @@ declare namespace justFlipIt {
      * If true, all inline styles from the original element are copied to the flip panel (default: true)
      */
     preserveStyles?: boolean;
+
+    /**
+     * Enables 3D tilt effect. 
+     * - `true`: Combines flip and tilt.
+     * - `'only'`: Enables only tilt.
+     * - `false`: Disables tilt (default).
+     */
+    Tilt?: boolean | 'only';
   }
 
   /**