@simhub2/justflipit 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -227
- package/dist/justFlipIt-modern.js +24 -51
- package/dist/justFlipIt-modern.min.js +1 -1
- package/dist/justFlipIt-vanilla.js +30 -37
- package/dist/justFlipIt-vanilla.min.js +1 -1
- package/dist/justFlipIt.js +30 -34
- package/dist/justFlipIt.min.js +1 -1
- package/dist/types/justFlipIt.d.ts +10 -0
- package/package.json +1 -1
- package/src/justFlipIt-combined.js +30 -34
- package/src/justFlipIt-combined.min.js +1 -1
- package/src/justFlipIt-modern.js +24 -51
- package/src/justFlipIt-modern.min.js +1 -1
- package/src/justFlipIt-vanilla.js +30 -37
- package/src/justFlipIt-vanilla.min.js +1 -1
- package/src/justFlipIt.d.ts +10 -0
package/README.md
CHANGED
|
@@ -1,287 +1,172 @@
|
|
|
1
|
-
|
|
1
|
+
[](https://github.com/SimHub/justFlipIt)
|
|
2
|
+
[](https://www.npmjs.com/package/@simhub2/justflipit)
|
|
3
|
+
[](https://www.npmjs.com/package/@simhub2/justflipit)
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
---
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
# justFlipIt
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
A lightweight JavaScript library for beautiful, customizable 3D flip animations on any DOM element.
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
[](https://www.npmjs.com/package/justflipit)
|
|
11
|
-
[](https://github.com/SimHub/justFlipIt)
|
|
11
|
+
---
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## 🚀 [Live Demo & Examples](https://SimHub.github.io/justFlipIt/)
|
|
14
|
+
|
|
15
|
+
> **Try it out!**
|
|
16
|
+
> The interactive [Live Demo](https://SimHub.github.io/justFlipIt/) shows all features and use cases, responsive and ready to play with.
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
- 🎨 **Highly Customizable** - Easy to style with CSS and customize animations
|
|
17
|
-
- 📱 **Modern Browser Support** - Works with all modern browsers and graceful fallbacks
|
|
18
|
-
- 🔧 **Multiple Import Methods** - Script tag, npm, ES modules - use however you prefer
|
|
19
|
-
- 🎯 **Works with or without jQuery** - Choose your preferred approach
|
|
20
|
-
- 🎭 **3D Flip Animations** - Beautiful CSS3 transform-based animations
|
|
21
|
-
- ⚙️ **Easy Configuration** - Simple options for duration, easing, triggers, and more
|
|
18
|
+
---
|
|
22
19
|
|
|
23
20
|
## Quick Start
|
|
24
21
|
|
|
25
|
-
|
|
22
|
+
**CDN / Local:**
|
|
26
23
|
|
|
27
24
|
```html
|
|
28
|
-
<script src="
|
|
25
|
+
<script src="justFlipIt-modern.min.js"></script>
|
|
29
26
|
<script>
|
|
30
27
|
justFlipIt(".my-card");
|
|
31
28
|
</script>
|
|
32
29
|
```
|
|
33
30
|
|
|
34
|
-
NPM
|
|
31
|
+
**NPM:**
|
|
35
32
|
|
|
36
33
|
```bash
|
|
37
|
-
npm install justflipit
|
|
34
|
+
npm install @simhub2/justflipit
|
|
38
35
|
```
|
|
39
36
|
|
|
40
|
-
```
|
|
41
|
-
import justFlipIt from "justflipit";
|
|
37
|
+
```js
|
|
38
|
+
import justFlipIt from "@simhub2/justflipit";
|
|
42
39
|
justFlipIt(".my-card");
|
|
43
40
|
```
|
|
44
41
|
|
|
45
|
-
|
|
42
|
+
---
|
|
46
43
|
|
|
47
|
-
|
|
48
|
-
<div class="card">
|
|
49
|
-
<h3>Front Side</h3>
|
|
50
|
-
<p>Hover over me!</p>
|
|
51
|
-
</div>
|
|
44
|
+
## 🆕 Plug & Play: Automatisches Übernehmen von Klassen und Styles
|
|
52
45
|
|
|
53
|
-
|
|
54
|
-
// Simple hover flip
|
|
55
|
-
justFlipIt(".card");
|
|
46
|
+
Ab Version X übernimmt justFlipIt **automatisch alle CSS-Klassen und Inline-Styles** deines Elements auf das Flip-Panel.
|
|
56
47
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
Click: true,
|
|
60
|
-
Duration: 800,
|
|
61
|
-
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
|
|
62
|
-
});
|
|
63
|
-
</script>
|
|
64
|
-
```
|
|
48
|
+
**Das bedeutet:**
|
|
49
|
+
Du kannst z.B. einfach
|
|
65
50
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
| Option | Type | Description | Default |
|
|
69
|
-
| -------- | ----------------- | --------------------------------------------------------------------------------- | ------------- |
|
|
70
|
-
| Template | String | HTML content for the back side. If empty, the original element will be cloned. | - |
|
|
71
|
-
| Click | Boolean or String | `true` for click on panel, or CSS selector for click on specific elements. | false (hover) |
|
|
72
|
-
| FlipX | Boolean | `true` for flip around X-axis (vertical), `false` for Y-axis (horizontal). | false |
|
|
73
|
-
| Style | Array | Array of style objects to apply to panel or specific elements within it. | [] |
|
|
74
|
-
| Duration | Number | Duration of flip animation in milliseconds. | 400 |
|
|
75
|
-
| Easing | String | CSS easing function for animation, e.g. "linear", "ease-in", "cubic-bezier(...)". | "ease-in-out" |
|
|
76
|
-
|
|
77
|
-
### Style Object Format
|
|
78
|
-
|
|
79
|
-
```javascript
|
|
80
|
-
{
|
|
81
|
-
el: "self", // "self" or CSS selector (e.g. ".front", ".back")
|
|
82
|
-
style: {
|
|
83
|
-
borderRadius: "10px",
|
|
84
|
-
boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
|
|
85
|
-
}
|
|
86
|
-
}
|
|
51
|
+
```js
|
|
52
|
+
justFlipIt(".daisyui-card");
|
|
87
53
|
```
|
|
88
54
|
|
|
89
|
-
|
|
55
|
+
aufrufen – und alle Farben, Schatten, Abstände usw. bleiben erhalten, egal ob du Tailwind, daisyUI, Bootstrap oder eigene Styles verwendest.
|
|
90
56
|
|
|
91
|
-
###
|
|
57
|
+
### **Optionen**
|
|
92
58
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
Duration: 500,
|
|
98
|
-
Easing: "ease-out",
|
|
99
|
-
});
|
|
100
|
-
</script>
|
|
101
|
-
```
|
|
59
|
+
| Option | Typ | Standard | Beschreibung |
|
|
60
|
+
| --------------- | ---- | -------- | -------------------------------------------------------------- |
|
|
61
|
+
| preserveClasses | Bool | true | Übernimmt alle CSS-Klassen vom Originalelement auf das Panel |
|
|
62
|
+
| preserveStyles | Bool | true | Übernimmt alle Inline-Styles vom Originalelement auf das Panel |
|
|
102
63
|
|
|
103
|
-
|
|
64
|
+
**Beispiel:**
|
|
104
65
|
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
Easing: "ease-in-out",
|
|
112
|
-
});
|
|
113
|
-
</script>
|
|
66
|
+
```js
|
|
67
|
+
// Standard: Plug & Play
|
|
68
|
+
justFlipIt(".meine-karte");
|
|
69
|
+
|
|
70
|
+
// Optional: Nur Flip, keine Klassen/Styles übernehmen
|
|
71
|
+
justFlipIt(".meine-karte", { preserveClasses: false, preserveStyles: false });
|
|
114
72
|
```
|
|
115
73
|
|
|
116
|
-
|
|
74
|
+
---
|
|
117
75
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
76
|
+
## 🎨 Customizing (Erweitert)
|
|
77
|
+
|
|
78
|
+
Du kannst alle Optionen von justFlipIt wie gewohnt nutzen – z.B. eigene Templates, Flip-Richtung, Animationen, gezielte Styles:
|
|
79
|
+
|
|
80
|
+
```js
|
|
81
|
+
justFlipIt(".meine-karte", {
|
|
82
|
+
preserveClasses: false, // keine Klassen übernehmen
|
|
83
|
+
preserveStyles: false, // keine Inline-Styles übernehmen
|
|
84
|
+
Click: true, // Flip bei Klick
|
|
85
|
+
FlipX: true, // Flip um X-Achse (vertikal)
|
|
86
|
+
Duration: 800, // Animationsdauer in ms
|
|
87
|
+
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)", // Animationseasing
|
|
88
|
+
Template: "<div>Meine Rückseite!</div>", // Eigener Rückseiteninhalt
|
|
89
|
+
Style: [
|
|
90
|
+
{
|
|
91
|
+
el: "self",
|
|
92
|
+
style: {
|
|
93
|
+
background: "#fff",
|
|
94
|
+
borderRadius: "1rem",
|
|
95
|
+
boxShadow: "0 2px 8px #0002",
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
{ el: ".front", style: { background: "#f5c939", color: "#222" } },
|
|
99
|
+
{ el: ".backY", style: { background: "#ca9dfe", color: "#fff" } },
|
|
100
|
+
],
|
|
101
|
+
});
|
|
127
102
|
```
|
|
128
103
|
|
|
129
|
-
|
|
104
|
+
**Tipp:**
|
|
105
|
+
|
|
106
|
+
- Mit `preserveClasses: false` und `preserveStyles: false` hast du die volle Kontrolle und kannst alles gezielt per Option oder CSS stylen.
|
|
107
|
+
- Mit den Standardwerten (`true`) bleibt alles wie beim Originalelement – Plug & Play!
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Features
|
|
112
|
+
|
|
113
|
+
- ⚡ **Lightweight & Fast** – Minimal footprint, maximum performance
|
|
114
|
+
- 🎨 **Highly Customizable** – Style with CSS, custom animations, and templates
|
|
115
|
+
- 📱 **Modern & Responsive** – Works on all modern browsers and devices
|
|
116
|
+
- 🔧 **Flexible Import** – Use via script tag, npm, or ES modules
|
|
117
|
+
- 🎯 **jQuery Optional** – Works with or without jQuery
|
|
118
|
+
- 🎭 **3D Flip Animations** – Beautiful CSS3 transform-based effects
|
|
119
|
+
- ⚙️ **Simple API** – Easy configuration for duration, easing, triggers, and more
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Minimal Examples
|
|
124
|
+
|
|
125
|
+
**Hover to flip:**
|
|
130
126
|
|
|
131
127
|
```html
|
|
132
|
-
<div class="
|
|
133
|
-
Card Content
|
|
134
|
-
<button class="flip-btn">Flip</button>
|
|
135
|
-
</div>
|
|
128
|
+
<div class="card">Hover me!</div>
|
|
136
129
|
<script>
|
|
137
|
-
justFlipIt(".
|
|
138
|
-
Click: ".flip-btn",
|
|
139
|
-
Duration: 500,
|
|
140
|
-
});
|
|
130
|
+
justFlipIt(".card");
|
|
141
131
|
</script>
|
|
142
132
|
```
|
|
143
133
|
|
|
144
|
-
|
|
134
|
+
**Click to flip:**
|
|
145
135
|
|
|
146
136
|
```html
|
|
147
|
-
<div class="
|
|
137
|
+
<div class="card">Click me!</div>
|
|
148
138
|
<script>
|
|
149
|
-
justFlipIt(".
|
|
150
|
-
Click: true,
|
|
151
|
-
Duration: 800,
|
|
152
|
-
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
|
|
153
|
-
});
|
|
139
|
+
justFlipIt(".card", { Click: true });
|
|
154
140
|
</script>
|
|
155
141
|
```
|
|
156
142
|
|
|
157
|
-
|
|
143
|
+
**Button trigger:**
|
|
158
144
|
|
|
159
145
|
```html
|
|
160
|
-
<div class="
|
|
146
|
+
<div class="card">
|
|
147
|
+
Card Content
|
|
148
|
+
<button class="flip-btn">Flip</button>
|
|
149
|
+
</div>
|
|
161
150
|
<script>
|
|
162
|
-
justFlipIt(".
|
|
163
|
-
Style: [
|
|
164
|
-
{
|
|
165
|
-
el: "self",
|
|
166
|
-
style: {
|
|
167
|
-
borderRadius: "15px",
|
|
168
|
-
boxShadow: "0 10px 30px rgba(0,0,0,0.2)",
|
|
169
|
-
},
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
el: ".front",
|
|
173
|
-
style: {
|
|
174
|
-
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
175
|
-
},
|
|
176
|
-
},
|
|
177
|
-
{
|
|
178
|
-
el: ".backY",
|
|
179
|
-
style: {
|
|
180
|
-
background: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
|
|
181
|
-
},
|
|
182
|
-
},
|
|
183
|
-
],
|
|
184
|
-
});
|
|
151
|
+
justFlipIt(".card", { Click: ".flip-btn" });
|
|
185
152
|
</script>
|
|
186
153
|
```
|
|
187
154
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
justFlipIt offers three different versions to suit your needs:
|
|
191
|
-
|
|
192
|
-
### Vanilla Version
|
|
193
|
-
|
|
194
|
-
- **File**: `justFlipIt-vanilla.js` / `.min.js`
|
|
195
|
-
- **Dependencies**: None
|
|
196
|
-
- **Animation**: CSS Transitions
|
|
197
|
-
- **Use case**: Lightweight, no dependencies
|
|
198
|
-
|
|
199
|
-
### Modern Version
|
|
200
|
-
|
|
201
|
-
- **File**: `justFlipIt-modern.js` / `.min.js`
|
|
202
|
-
- **Dependencies**: None
|
|
203
|
-
- **Animation**: Web Animations API with CSS fallback
|
|
204
|
-
- **Use case**: Modern browsers, best performance
|
|
205
|
-
|
|
206
|
-
### Combined Version
|
|
155
|
+
---
|
|
207
156
|
|
|
208
|
-
|
|
209
|
-
- **Dependencies**: Optional jQuery support
|
|
210
|
-
- **Animation**: CSS Transitions
|
|
211
|
-
- **Use case**: jQuery and Vanilla JS compatibility
|
|
157
|
+
## Full API & Advanced Usage
|
|
212
158
|
|
|
213
|
-
|
|
214
|
-
<!-- Vanilla -->
|
|
215
|
-
<script src="justFlipIt-vanilla.min.js"></script>
|
|
216
|
-
|
|
217
|
-
<!-- Modern -->
|
|
218
|
-
<script src="justFlipIt-modern.min.js"></script>
|
|
159
|
+
See the [Live Demo](https://SimHub.github.io/justFlipIt/) for all options, advanced examples, and interactive playground.
|
|
219
160
|
|
|
220
|
-
|
|
221
|
-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
222
|
-
<script src="justFlipIt-combined.min.js"></script>
|
|
223
|
-
<script>
|
|
224
|
-
// Both work:
|
|
225
|
-
$(".card").justFlipIt();
|
|
226
|
-
justFlipIt(".card");
|
|
227
|
-
</script>
|
|
228
|
-
```
|
|
161
|
+
---
|
|
229
162
|
|
|
230
|
-
##
|
|
163
|
+
## Library Versions
|
|
231
164
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
<h3>Product Name</h3>
|
|
236
|
-
<p>Short description</p>
|
|
237
|
-
<button class="details-btn">Show Details</button>
|
|
238
|
-
</div>
|
|
165
|
+
- **Vanilla:** `justFlipIt-vanilla.js` – No dependencies, CSS transitions
|
|
166
|
+
- **Modern:** `justFlipIt-modern.js` – No dependencies, Web Animations API + CSS fallback
|
|
167
|
+
- **Combined:** `justFlipIt-combined.js` – Optional jQuery support
|
|
239
168
|
|
|
240
|
-
|
|
241
|
-
justFlipIt(".product-card", {
|
|
242
|
-
Template: `
|
|
243
|
-
<div class="product-details">
|
|
244
|
-
<h3>Product Details</h3>
|
|
245
|
-
<ul>
|
|
246
|
-
<li>Feature 1: Value</li>
|
|
247
|
-
<li>Feature 2: Value</li>
|
|
248
|
-
<li>Feature 3: Value</li>
|
|
249
|
-
</ul>
|
|
250
|
-
<p class="price">$39.99</p>
|
|
251
|
-
<button class="buy-btn">Buy Now</button>
|
|
252
|
-
<button class="back-btn">Back</button>
|
|
253
|
-
</div>
|
|
254
|
-
`,
|
|
255
|
-
Click: ".details-btn",
|
|
256
|
-
Duration: 800,
|
|
257
|
-
Easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
|
|
258
|
-
Style: [
|
|
259
|
-
{
|
|
260
|
-
el: "self",
|
|
261
|
-
style: {
|
|
262
|
-
borderRadius: "12px",
|
|
263
|
-
boxShadow: "0 10px 25px rgba(0,0,0,0.15)",
|
|
264
|
-
},
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
el: ".backY",
|
|
268
|
-
style: {
|
|
269
|
-
background: "#f8f9fa",
|
|
270
|
-
padding: "20px",
|
|
271
|
-
},
|
|
272
|
-
},
|
|
273
|
-
],
|
|
274
|
-
});
|
|
275
|
-
|
|
276
|
-
// Handle back button
|
|
277
|
-
document.addEventListener("click", function (e) {
|
|
278
|
-
if (e.target.classList.contains("back-btn")) {
|
|
279
|
-
const panel = e.target.closest("._justFlipIt_panel");
|
|
280
|
-
if (panel) panel.classList.toggle("_flipY_");
|
|
281
|
-
}
|
|
282
|
-
});
|
|
283
|
-
</script>
|
|
284
|
-
```
|
|
169
|
+
---
|
|
285
170
|
|
|
286
171
|
## Browser Support
|
|
287
172
|
|
|
@@ -292,14 +177,20 @@ justFlipIt offers three different versions to suit your needs:
|
|
|
292
177
|
- ✅ iOS Safari 12+
|
|
293
178
|
- ✅ Android Chrome 60+
|
|
294
179
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
180
|
+
---
|
|
298
181
|
|
|
299
182
|
## License
|
|
300
183
|
|
|
301
|
-
MIT License
|
|
184
|
+
MIT License – see LICENSE
|
|
302
185
|
|
|
303
186
|
---
|
|
304
187
|
|
|
305
|
-
**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/justflipit)**
|
|
188
|
+
**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/@simhub2/justflipit)**
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
### Notes
|
|
193
|
+
|
|
194
|
+
- For more practical examples (hover, click, button, custom back, styling, vertical/horizontal, product card, etc.), see the [Live Demo](https://SimHub.github.io/justFlipIt/).
|
|
195
|
+
- The recommended CSS block above ensures robust, flicker-free, and responsive flip animations for all use cases.
|
|
196
|
+
- For questions or suggestions, feel free to open an issue or contribute!
|
|
@@ -217,6 +217,8 @@
|
|
|
217
217
|
Style: [], // Custom styles
|
|
218
218
|
Duration: 400, // Animation duration in ms
|
|
219
219
|
Easing: "ease-in-out", // Animation easing function
|
|
220
|
+
preserveClasses: true, // NEU
|
|
221
|
+
preserveStyles: true // NEU
|
|
220
222
|
},
|
|
221
223
|
options,
|
|
222
224
|
);
|
|
@@ -256,79 +258,50 @@
|
|
|
256
258
|
const originalElement = this.element;
|
|
257
259
|
const originalClassName = this.originalClassName;
|
|
258
260
|
|
|
259
|
-
//
|
|
261
|
+
// Panel-Struktur erzeugen
|
|
260
262
|
const hoverPanel = document.createElement(this.originalTagName);
|
|
261
263
|
addClass(hoverPanel, "hover");
|
|
262
264
|
addClass(hoverPanel, "_justFlipIt_panel");
|
|
263
|
-
|
|
264
|
-
// Create front wrapper
|
|
265
265
|
const frontWrapper = document.createElement("div");
|
|
266
266
|
addClass(frontWrapper, "front");
|
|
267
|
-
|
|
268
|
-
// Clone element for back side if no template provided
|
|
269
|
-
const clone = originalElement.cloneNode(true);
|
|
270
|
-
clone.className = ""; // Remove classes
|
|
271
|
-
|
|
272
|
-
// Create back wrapper
|
|
273
267
|
const backWrapper = document.createElement("div");
|
|
274
268
|
addClass(backWrapper, this.backClass);
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
269
|
+
|
|
270
|
+
// NEU: Klassen übernehmen (Panel, .front, .backY)
|
|
271
|
+
if (this.settings.preserveClasses && originalElement.classList.length) {
|
|
272
|
+
originalElement.classList.forEach(cls => {
|
|
273
|
+
if (!hoverPanel.classList.contains(cls)) hoverPanel.classList.add(cls);
|
|
274
|
+
if (frontWrapper && !frontWrapper.classList.contains(cls)) frontWrapper.classList.add(cls);
|
|
275
|
+
if (backWrapper && !backWrapper.classList.contains(cls)) backWrapper.classList.add(cls);
|
|
278
276
|
});
|
|
279
277
|
}
|
|
280
278
|
|
|
281
|
-
//
|
|
282
|
-
|
|
283
|
-
|
|
279
|
+
// NEU: Inline-Styles übernehmen (nur auf Panel)
|
|
280
|
+
if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
|
|
281
|
+
hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
|
|
282
|
+
";" + originalElement.getAttribute("style"));
|
|
283
|
+
}
|
|
284
284
|
|
|
285
|
-
//
|
|
286
|
-
|
|
287
|
-
frontWrapper,
|
|
288
|
-
this.settings.Duration,
|
|
289
|
-
this.settings.Easing,
|
|
290
|
-
);
|
|
291
|
-
applyAnimationSettings(
|
|
292
|
-
backWrapper,
|
|
293
|
-
this.settings.Duration,
|
|
294
|
-
this.settings.Easing,
|
|
295
|
-
);
|
|
285
|
+
// Nur den INHALT übernehmen!
|
|
286
|
+
frontWrapper.innerHTML = originalElement.innerHTML;
|
|
296
287
|
|
|
297
|
-
// Mache das Original komplett transparent und ohne Border/Shadow/usw.
|
|
298
|
-
originalElement.style.all = "inherit"; // Reset alles zur Sicherheit
|
|
299
|
-
originalElement.style.background = "transparent";
|
|
300
|
-
originalElement.style.backgroundColor = "transparent";
|
|
301
|
-
originalElement.style.backgroundImage = "none";
|
|
302
|
-
originalElement.style.border = "none";
|
|
303
|
-
originalElement.style.borderRadius = "0";
|
|
304
|
-
originalElement.style.boxShadow = "none";
|
|
305
|
-
originalElement.style.outline = "none";
|
|
306
|
-
|
|
307
|
-
// If template provided, use that instead of clone
|
|
308
288
|
if (this.settings.Template) {
|
|
309
289
|
backWrapper.innerHTML = this.settings.Template;
|
|
310
290
|
} else {
|
|
311
|
-
backWrapper.
|
|
291
|
+
backWrapper.innerHTML = originalElement.innerHTML;
|
|
312
292
|
}
|
|
313
293
|
|
|
314
|
-
//
|
|
294
|
+
// Panel einfügen und Original entfernen
|
|
315
295
|
originalElement.parentNode.insertBefore(hoverPanel, originalElement);
|
|
316
|
-
frontWrapper.appendChild(originalElement);
|
|
317
296
|
hoverPanel.appendChild(frontWrapper);
|
|
318
297
|
hoverPanel.appendChild(backWrapper);
|
|
298
|
+
originalElement.parentNode.removeChild(originalElement);
|
|
319
299
|
|
|
320
|
-
//
|
|
321
|
-
if (originalClassName) {
|
|
322
|
-
originalClassName.split(" ").forEach((cls) => {
|
|
323
|
-
if (cls) addClass(hoverPanel, cls);
|
|
324
|
-
});
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
// Apply styles
|
|
300
|
+
// Panel-Größe und Styles übernehmen
|
|
328
301
|
hoverPanel.style.width = this.elementWidth;
|
|
329
302
|
hoverPanel.style.height = this.elementHeight;
|
|
330
303
|
|
|
331
|
-
//
|
|
304
|
+
// Custom Styles aus Option anwenden
|
|
332
305
|
if (this.settings.Style && this.settings.Style.length) {
|
|
333
306
|
this.settings.Style.forEach((styleObj) => {
|
|
334
307
|
if (styleObj.el) {
|
|
@@ -344,10 +317,10 @@
|
|
|
344
317
|
});
|
|
345
318
|
}
|
|
346
319
|
|
|
347
|
-
//
|
|
320
|
+
// Events setzen
|
|
348
321
|
this._setupEvents(hoverPanel);
|
|
349
322
|
|
|
350
|
-
//
|
|
323
|
+
// Referenzen speichern
|
|
351
324
|
this.hoverPanel = hoverPanel;
|
|
352
325
|
this.frontWrapper = frontWrapper;
|
|
353
326
|
this.backWrapper = backWrapper;
|
|
@@ -1 +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
|
|
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});
|