@simhub2/justflipit 3.0.1 → 3.1.1
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 +121 -236
- package/dist/justFlipIt-modern.js +43 -60
- package/dist/justFlipIt-modern.min.js +1 -1
- package/dist/justFlipIt-vanilla.js +44 -40
- package/dist/justFlipIt-vanilla.min.js +1 -1
- package/dist/justFlipIt.js +45 -38
- 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 +45 -38
- package/src/justFlipIt-combined.min.js +1 -1
- package/src/justFlipIt-modern.js +43 -60
- package/src/justFlipIt-modern.min.js +1 -1
- package/src/justFlipIt-vanilla.js +44 -40
- package/src/justFlipIt-vanilla.min.js +1 -1
- package/src/justFlipIt.d.ts +10 -0
package/README.md
CHANGED
|
@@ -1,290 +1,171 @@
|
|
|
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 flip animations on any DOM element.
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
[](https://www.npmjs.com/package/@simhub2/justflipit)
|
|
11
|
-
[](https://www.npmjs.com/package/@simhub2/justflipit)
|
|
11
|
+
---
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
> Die alte Version (`justflipit`) ist veraltet und wird nicht mehr aktualisiert.
|
|
13
|
+
## 🚀 [Live Demo & Examples](https://SimHub.github.io/justFlipIt/)
|
|
15
14
|
|
|
16
|
-
|
|
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.
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
- 🎨 **Highly Customizable** - Easy to style with CSS and customize animations
|
|
20
|
-
- 📱 **Modern Browser Support** - Works with all modern browsers and graceful fallbacks
|
|
21
|
-
- 🔧 **Multiple Import Methods** - Script tag, npm, ES modules - use however you prefer
|
|
22
|
-
- 🎯 **Works with or without jQuery** - Choose your preferred approach
|
|
23
|
-
- 🎭 **3D Flip Animations** - Beautiful CSS3 transform-based animations
|
|
24
|
-
- ⚙️ **Easy Configuration** - Simple options for duration, easing, triggers, and more
|
|
18
|
+
---
|
|
25
19
|
|
|
26
20
|
## Quick Start
|
|
27
21
|
|
|
28
|
-
|
|
22
|
+
**CDN / Local:**
|
|
29
23
|
|
|
30
24
|
```html
|
|
31
|
-
<script src="
|
|
25
|
+
<script src="justFlipIt-modern.min.js"></script>
|
|
32
26
|
<script>
|
|
33
27
|
justFlipIt(".my-card");
|
|
34
28
|
</script>
|
|
35
29
|
```
|
|
36
30
|
|
|
37
|
-
NPM
|
|
31
|
+
**NPM:**
|
|
38
32
|
|
|
39
33
|
```bash
|
|
40
34
|
npm install @simhub2/justflipit
|
|
41
35
|
```
|
|
42
36
|
|
|
43
|
-
```
|
|
37
|
+
```js
|
|
44
38
|
import justFlipIt from "@simhub2/justflipit";
|
|
45
39
|
justFlipIt(".my-card");
|
|
46
40
|
```
|
|
47
41
|
|
|
48
|
-
|
|
42
|
+
---
|
|
49
43
|
|
|
50
|
-
|
|
51
|
-
<div class="card">
|
|
52
|
-
<h3>Front Side</h3>
|
|
53
|
-
<p>Hover over me!</p>
|
|
54
|
-
</div>
|
|
44
|
+
## 🆕 Plug & Play: Automatic adoption of classes and styles
|
|
55
45
|
|
|
56
|
-
|
|
57
|
-
// Simple hover flip
|
|
58
|
-
justFlipIt(".card");
|
|
46
|
+
**This means:**
|
|
59
47
|
|
|
60
|
-
|
|
61
|
-
justFlipIt(".card", {
|
|
62
|
-
Click: true,
|
|
63
|
-
Duration: 800,
|
|
64
|
-
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
|
|
65
|
-
});
|
|
66
|
-
</script>
|
|
67
|
-
```
|
|
48
|
+
For example, you can simply
|
|
68
49
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
| Option | Type | Description | Default |
|
|
72
|
-
| -------- | ----------------- | --------------------------------------------------------------------------------- | ------------- |
|
|
73
|
-
| Template | String | HTML content for the back side. If empty, the original element will be cloned. | - |
|
|
74
|
-
| Click | Boolean or String | `true` for click on panel, or CSS selector for click on specific elements. | false (hover) |
|
|
75
|
-
| FlipX | Boolean | `true` for flip around X-axis (vertical), `false` for Y-axis (horizontal). | false |
|
|
76
|
-
| Style | Array | Array of style objects to apply to panel or specific elements within it. | [] |
|
|
77
|
-
| Duration | Number | Duration of flip animation in milliseconds. | 400 |
|
|
78
|
-
| Easing | String | CSS easing function for animation, e.g. "linear", "ease-in", "cubic-bezier(...)". | "ease-in-out" |
|
|
79
|
-
|
|
80
|
-
### Style Object Format
|
|
81
|
-
|
|
82
|
-
```javascript
|
|
83
|
-
{
|
|
84
|
-
el: "self", // "self" or CSS selector (e.g. ".front", ".back")
|
|
85
|
-
style: {
|
|
86
|
-
borderRadius: "10px",
|
|
87
|
-
boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
|
|
88
|
-
}
|
|
89
|
-
}
|
|
50
|
+
```js
|
|
51
|
+
justFlipIt(".daisyui-card");
|
|
90
52
|
```
|
|
91
53
|
|
|
92
|
-
|
|
54
|
+
and all colors, shadows, spacing, etc. are retained, whether you use Tailwind, daisyUI, Bootstrap or your own styles.
|
|
93
55
|
|
|
94
|
-
###
|
|
56
|
+
### **Options**
|
|
95
57
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
Duration: 500,
|
|
101
|
-
Easing: "ease-out",
|
|
102
|
-
});
|
|
103
|
-
</script>
|
|
104
|
-
```
|
|
58
|
+
| Option | Type | Standard | Description |
|
|
59
|
+
| --------------- | ---- | -------- | ------------------------------------------------------------------- |
|
|
60
|
+
| preserveClasses | Bool | true | Takes all CSS classes from the original element to the panel |
|
|
61
|
+
| preserveStyles | Bool | true | Takes over all inline styles from the original element to the panel |
|
|
105
62
|
|
|
106
|
-
|
|
63
|
+
**Example:**
|
|
107
64
|
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
Easing: "ease-in-out",
|
|
115
|
-
});
|
|
116
|
-
</script>
|
|
65
|
+
```js
|
|
66
|
+
// Standard: Plug & Play
|
|
67
|
+
justFlipIt(".meine-karte");
|
|
68
|
+
|
|
69
|
+
// Optional: Nur Flip, keine Klassen/Styles übernehmen
|
|
70
|
+
justFlipIt(".meine-karte", { preserveClasses: false, preserveStyles: false });
|
|
117
71
|
```
|
|
118
72
|
|
|
119
|
-
|
|
73
|
+
---
|
|
120
74
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
75
|
+
## 🎨 Customizing (Erweitert)
|
|
76
|
+
|
|
77
|
+
You can use all options from justFlipIt as usual – e.g. your own templates, flip direction, animations, targeted styles:
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
justFlipIt(".meine-karte", {
|
|
81
|
+
preserveClasses: false, // keine Klassen übernehmen
|
|
82
|
+
preserveStyles: false, // keine Inline-Styles übernehmen
|
|
83
|
+
Click: true, // Flip bei Klick
|
|
84
|
+
FlipX: true, // Flip um X-Achse (vertikal)
|
|
85
|
+
Duration: 800, // Animationsdauer in ms
|
|
86
|
+
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)", // Animationseasing
|
|
87
|
+
Template: "<div>Meine Rückseite!</div>", // Eigener Rückseiteninhalt
|
|
88
|
+
Style: [
|
|
89
|
+
{
|
|
90
|
+
el: "self",
|
|
91
|
+
style: {
|
|
92
|
+
background: "#fff",
|
|
93
|
+
borderRadius: "1rem",
|
|
94
|
+
boxShadow: "0 2px 8px #0002",
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
{ el: ".front", style: { background: "#f5c939", color: "#222" } },
|
|
98
|
+
{ el: ".backY", style: { background: "#ca9dfe", color: "#fff" } },
|
|
99
|
+
],
|
|
100
|
+
});
|
|
130
101
|
```
|
|
131
102
|
|
|
132
|
-
|
|
103
|
+
**Tip:**
|
|
104
|
+
|
|
105
|
+
- With preserveClasses: false and preserveStyles: false you have full control and can style everything specifically via option or CSS.
|
|
106
|
+
- With the default values (true) everything remains like the original element – Plug & Play!
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Features
|
|
111
|
+
|
|
112
|
+
- ⚡ **Lightweight & Fast** – Minimal footprint, maximum performance
|
|
113
|
+
- 🎨 **Highly Customizable** – Style with CSS, custom animations, and templates
|
|
114
|
+
- 📱 **Modern & Responsive** – Works on all modern browsers and devices
|
|
115
|
+
- 🔧 **Flexible Import** – Use via script tag, npm, or ES modules
|
|
116
|
+
- 🎯 **jQuery Optional** – Works with or without jQuery
|
|
117
|
+
- 🎭 **Flip Animations** – Beautiful CSS3 transform-based effects
|
|
118
|
+
- ⚙️ **Simple API** – Easy configuration for duration, easing, triggers, and more
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## Minimal Examples
|
|
123
|
+
|
|
124
|
+
**Hover to flip:**
|
|
133
125
|
|
|
134
126
|
```html
|
|
135
|
-
<div class="
|
|
136
|
-
Card Content
|
|
137
|
-
<button class="flip-btn">Flip</button>
|
|
138
|
-
</div>
|
|
127
|
+
<div class="card">Hover me!</div>
|
|
139
128
|
<script>
|
|
140
|
-
justFlipIt(".
|
|
141
|
-
Click: ".flip-btn",
|
|
142
|
-
Duration: 500,
|
|
143
|
-
});
|
|
129
|
+
justFlipIt(".card");
|
|
144
130
|
</script>
|
|
145
131
|
```
|
|
146
132
|
|
|
147
|
-
|
|
133
|
+
**Click to flip:**
|
|
148
134
|
|
|
149
135
|
```html
|
|
150
|
-
<div class="
|
|
136
|
+
<div class="card">Click me!</div>
|
|
151
137
|
<script>
|
|
152
|
-
justFlipIt(".
|
|
153
|
-
Click: true,
|
|
154
|
-
Duration: 800,
|
|
155
|
-
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
|
|
156
|
-
});
|
|
138
|
+
justFlipIt(".card", { Click: true });
|
|
157
139
|
</script>
|
|
158
140
|
```
|
|
159
141
|
|
|
160
|
-
|
|
142
|
+
**Button trigger:**
|
|
161
143
|
|
|
162
144
|
```html
|
|
163
|
-
<div class="
|
|
145
|
+
<div class="card">
|
|
146
|
+
Card Content
|
|
147
|
+
<button class="flip-btn">Flip</button>
|
|
148
|
+
</div>
|
|
164
149
|
<script>
|
|
165
|
-
justFlipIt(".
|
|
166
|
-
Style: [
|
|
167
|
-
{
|
|
168
|
-
el: "self",
|
|
169
|
-
style: {
|
|
170
|
-
borderRadius: "15px",
|
|
171
|
-
boxShadow: "0 10px 30px rgba(0,0,0,0.2)",
|
|
172
|
-
},
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
el: ".front",
|
|
176
|
-
style: {
|
|
177
|
-
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
178
|
-
},
|
|
179
|
-
},
|
|
180
|
-
{
|
|
181
|
-
el: ".backY",
|
|
182
|
-
style: {
|
|
183
|
-
background: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
|
|
184
|
-
},
|
|
185
|
-
},
|
|
186
|
-
],
|
|
187
|
-
});
|
|
150
|
+
justFlipIt(".card", { Click: ".flip-btn" });
|
|
188
151
|
</script>
|
|
189
152
|
```
|
|
190
153
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
justFlipIt offers three different versions to suit your needs:
|
|
194
|
-
|
|
195
|
-
### Vanilla Version
|
|
196
|
-
|
|
197
|
-
- **File**: `justFlipIt-vanilla.js` / `.min.js`
|
|
198
|
-
- **Dependencies**: None
|
|
199
|
-
- **Animation**: CSS Transitions
|
|
200
|
-
- **Use case**: Lightweight, no dependencies
|
|
201
|
-
|
|
202
|
-
### Modern Version
|
|
203
|
-
|
|
204
|
-
- **File**: `justFlipIt-modern.js` / `.min.js`
|
|
205
|
-
- **Dependencies**: None
|
|
206
|
-
- **Animation**: Web Animations API with CSS fallback
|
|
207
|
-
- **Use case**: Modern browsers, best performance
|
|
208
|
-
|
|
209
|
-
### Combined Version
|
|
210
|
-
|
|
211
|
-
- **File**: `justFlipIt-combined.js` / `.min.js`
|
|
212
|
-
- **Dependencies**: Optional jQuery support
|
|
213
|
-
- **Animation**: CSS Transitions
|
|
214
|
-
- **Use case**: jQuery and Vanilla JS compatibility
|
|
154
|
+
---
|
|
215
155
|
|
|
216
|
-
|
|
217
|
-
<!-- Vanilla -->
|
|
218
|
-
<script src="justFlipIt-vanilla.min.js"></script>
|
|
156
|
+
## Full API & Advanced Usage
|
|
219
157
|
|
|
220
|
-
|
|
221
|
-
<script src="justFlipIt-modern.min.js"></script>
|
|
158
|
+
See the [Live Demo](https://SimHub.github.io/justFlipIt/) for all options, advanced examples, and interactive playground.
|
|
222
159
|
|
|
223
|
-
|
|
224
|
-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
225
|
-
<script src="justFlipIt-combined.min.js"></script>
|
|
226
|
-
<script>
|
|
227
|
-
// Both work:
|
|
228
|
-
$(".card").justFlipIt();
|
|
229
|
-
justFlipIt(".card");
|
|
230
|
-
</script>
|
|
231
|
-
```
|
|
160
|
+
---
|
|
232
161
|
|
|
233
|
-
##
|
|
162
|
+
## Library Versions
|
|
234
163
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
<h3>Product Name</h3>
|
|
239
|
-
<p>Short description</p>
|
|
240
|
-
<button class="details-btn">Show Details</button>
|
|
241
|
-
</div>
|
|
164
|
+
- **Vanilla:** `justFlipIt-vanilla.js` – No dependencies, CSS transitions
|
|
165
|
+
- **Modern:** `justFlipIt-modern.js` – No dependencies, Web Animations API + CSS fallback
|
|
166
|
+
- **Combined:** `justFlipIt-combined.js` – Optional jQuery support
|
|
242
167
|
|
|
243
|
-
|
|
244
|
-
justFlipIt(".product-card", {
|
|
245
|
-
Template: `
|
|
246
|
-
<div class="product-details">
|
|
247
|
-
<h3>Product Details</h3>
|
|
248
|
-
<ul>
|
|
249
|
-
<li>Feature 1: Value</li>
|
|
250
|
-
<li>Feature 2: Value</li>
|
|
251
|
-
<li>Feature 3: Value</li>
|
|
252
|
-
</ul>
|
|
253
|
-
<p class="price">$39.99</p>
|
|
254
|
-
<button class="buy-btn">Buy Now</button>
|
|
255
|
-
<button class="back-btn">Back</button>
|
|
256
|
-
</div>
|
|
257
|
-
`,
|
|
258
|
-
Click: ".details-btn",
|
|
259
|
-
Duration: 800,
|
|
260
|
-
Easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
|
|
261
|
-
Style: [
|
|
262
|
-
{
|
|
263
|
-
el: "self",
|
|
264
|
-
style: {
|
|
265
|
-
borderRadius: "12px",
|
|
266
|
-
boxShadow: "0 10px 25px rgba(0,0,0,0.15)",
|
|
267
|
-
},
|
|
268
|
-
},
|
|
269
|
-
{
|
|
270
|
-
el: ".backY",
|
|
271
|
-
style: {
|
|
272
|
-
background: "#f8f9fa",
|
|
273
|
-
padding: "20px",
|
|
274
|
-
},
|
|
275
|
-
},
|
|
276
|
-
],
|
|
277
|
-
});
|
|
278
|
-
|
|
279
|
-
// Handle back button
|
|
280
|
-
document.addEventListener("click", function (e) {
|
|
281
|
-
if (e.target.classList.contains("back-btn")) {
|
|
282
|
-
const panel = e.target.closest("._justFlipIt_panel");
|
|
283
|
-
if (panel) panel.classList.toggle("_flipY_");
|
|
284
|
-
}
|
|
285
|
-
});
|
|
286
|
-
</script>
|
|
287
|
-
```
|
|
168
|
+
---
|
|
288
169
|
|
|
289
170
|
## Browser Support
|
|
290
171
|
|
|
@@ -295,28 +176,32 @@ justFlipIt offers three different versions to suit your needs:
|
|
|
295
176
|
- ✅ iOS Safari 12+
|
|
296
177
|
- ✅ Android Chrome 60+
|
|
297
178
|
|
|
298
|
-
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## License
|
|
299
182
|
|
|
300
|
-
|
|
183
|
+
MIT © [SimHub](https://github.com/SimHub)
|
|
301
184
|
|
|
302
185
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
303
|
-
of this software and associated documentation files (the
|
|
304
|
-
in the Software without restriction, including without limitation the rights
|
|
305
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
306
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
186
|
+
of this software and associated documentation files (the “Software”), to deal
|
|
187
|
+
in the Software without restriction, including without limitation the rights
|
|
188
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
189
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
307
190
|
furnished to do so, subject to the following conditions:
|
|
308
191
|
|
|
309
|
-
The above copyright notice and this permission notice shall be included in all
|
|
192
|
+
The above copyright notice and this permission notice shall be included in all
|
|
310
193
|
copies or substantial portions of the Software.
|
|
311
194
|
|
|
312
|
-
THE SOFTWARE IS PROVIDED
|
|
313
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
314
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
315
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
316
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
317
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
195
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
196
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
197
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
198
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
199
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
200
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
318
201
|
SOFTWARE.
|
|
319
202
|
|
|
320
203
|
---
|
|
321
204
|
|
|
322
|
-
**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/@simhub2/justflipit)**
|
|
205
|
+
**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/@simhub2/justflipit)**
|
|
206
|
+
|
|
207
|
+
---
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
*
|
|
2
|
+
* justFlipIt v3.1.1
|
|
3
3
|
* https://github.com/SimHub/justFlipIt
|
|
4
4
|
*
|
|
5
|
-
* Copyright
|
|
5
|
+
* Copyright SimHub
|
|
6
6
|
* Released under the MIT license
|
|
7
7
|
*
|
|
8
|
-
* Date:
|
|
8
|
+
* Date: 2025
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
(function (root, factory) {
|
|
@@ -20,14 +20,13 @@
|
|
|
20
20
|
"use strict";
|
|
21
21
|
|
|
22
22
|
// Feature detection
|
|
23
|
-
const supportsGrid =
|
|
24
|
-
typeof CSS !== "undefined" &&
|
|
23
|
+
const supportsGrid = typeof CSS !== "undefined" &&
|
|
25
24
|
CSS.supports &&
|
|
26
25
|
CSS.supports("display", "grid");
|
|
27
|
-
const supportsWebAnimations =
|
|
28
|
-
|
|
29
|
-
const supportsCustomProperties =
|
|
30
|
-
|
|
26
|
+
const supportsWebAnimations = typeof Element !== "undefined" &&
|
|
27
|
+
"animate" in Element.prototype;
|
|
28
|
+
const supportsCustomProperties = window.CSS && CSS.supports &&
|
|
29
|
+
CSS.supports("color", "var(--test)");
|
|
31
30
|
|
|
32
31
|
// Style generation based on browser support
|
|
33
32
|
function generateStyles() {
|
|
@@ -217,6 +216,8 @@
|
|
|
217
216
|
Style: [], // Custom styles
|
|
218
217
|
Duration: 400, // Animation duration in ms
|
|
219
218
|
Easing: "ease-in-out", // Animation easing function
|
|
219
|
+
preserveClasses: true, // NEU
|
|
220
|
+
preserveStyles: true, // NEU
|
|
220
221
|
},
|
|
221
222
|
options,
|
|
222
223
|
);
|
|
@@ -256,79 +257,61 @@
|
|
|
256
257
|
const originalElement = this.element;
|
|
257
258
|
const originalClassName = this.originalClassName;
|
|
258
259
|
|
|
259
|
-
//
|
|
260
|
+
// Panel-Struktur erzeugen
|
|
260
261
|
const hoverPanel = document.createElement(this.originalTagName);
|
|
261
262
|
addClass(hoverPanel, "hover");
|
|
262
263
|
addClass(hoverPanel, "_justFlipIt_panel");
|
|
263
|
-
|
|
264
|
-
// Create front wrapper
|
|
265
264
|
const frontWrapper = document.createElement("div");
|
|
266
265
|
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
266
|
const backWrapper = document.createElement("div");
|
|
274
267
|
addClass(backWrapper, this.backClass);
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
268
|
+
|
|
269
|
+
// NEU: Klassen übernehmen (Panel, .front, .backY)
|
|
270
|
+
if (this.settings.preserveClasses && originalElement.classList.length) {
|
|
271
|
+
originalElement.classList.forEach((cls) => {
|
|
272
|
+
if (!hoverPanel.classList.contains(cls)) {
|
|
273
|
+
hoverPanel.classList.add(cls);
|
|
274
|
+
}
|
|
275
|
+
if (frontWrapper && !frontWrapper.classList.contains(cls)) {
|
|
276
|
+
frontWrapper.classList.add(cls);
|
|
277
|
+
}
|
|
278
|
+
if (backWrapper && !backWrapper.classList.contains(cls)) {
|
|
279
|
+
backWrapper.classList.add(cls);
|
|
280
|
+
}
|
|
278
281
|
});
|
|
279
282
|
}
|
|
280
283
|
|
|
281
|
-
//
|
|
282
|
-
|
|
283
|
-
|
|
284
|
+
// NEU: Inline-Styles übernehmen (nur auf Panel)
|
|
285
|
+
if (
|
|
286
|
+
this.settings.preserveStyles && originalElement.getAttribute("style")
|
|
287
|
+
) {
|
|
288
|
+
hoverPanel.setAttribute(
|
|
289
|
+
"style",
|
|
290
|
+
(hoverPanel.getAttribute("style") || "") +
|
|
291
|
+
";" + originalElement.getAttribute("style"),
|
|
292
|
+
);
|
|
293
|
+
}
|
|
284
294
|
|
|
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
|
-
);
|
|
295
|
+
// Nur den INHALT übernehmen!
|
|
296
|
+
frontWrapper.innerHTML = originalElement.innerHTML;
|
|
296
297
|
|
|
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
298
|
if (this.settings.Template) {
|
|
309
299
|
backWrapper.innerHTML = this.settings.Template;
|
|
310
300
|
} else {
|
|
311
|
-
backWrapper.
|
|
301
|
+
backWrapper.innerHTML = originalElement.innerHTML;
|
|
312
302
|
}
|
|
313
303
|
|
|
314
|
-
//
|
|
304
|
+
// Panel einfügen und Original entfernen
|
|
315
305
|
originalElement.parentNode.insertBefore(hoverPanel, originalElement);
|
|
316
|
-
frontWrapper.appendChild(originalElement);
|
|
317
306
|
hoverPanel.appendChild(frontWrapper);
|
|
318
307
|
hoverPanel.appendChild(backWrapper);
|
|
308
|
+
originalElement.parentNode.removeChild(originalElement);
|
|
319
309
|
|
|
320
|
-
//
|
|
321
|
-
if (originalClassName) {
|
|
322
|
-
originalClassName.split(" ").forEach((cls) => {
|
|
323
|
-
if (cls) addClass(hoverPanel, cls);
|
|
324
|
-
});
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
// Apply styles
|
|
310
|
+
// Panel-Größe und Styles übernehmen
|
|
328
311
|
hoverPanel.style.width = this.elementWidth;
|
|
329
312
|
hoverPanel.style.height = this.elementHeight;
|
|
330
313
|
|
|
331
|
-
//
|
|
314
|
+
// Custom Styles aus Option anwenden
|
|
332
315
|
if (this.settings.Style && this.settings.Style.length) {
|
|
333
316
|
this.settings.Style.forEach((styleObj) => {
|
|
334
317
|
if (styleObj.el) {
|
|
@@ -344,10 +327,10 @@
|
|
|
344
327
|
});
|
|
345
328
|
}
|
|
346
329
|
|
|
347
|
-
//
|
|
330
|
+
// Events setzen
|
|
348
331
|
this._setupEvents(hoverPanel);
|
|
349
332
|
|
|
350
|
-
//
|
|
333
|
+
// Referenzen speichern
|
|
351
334
|
this.hoverPanel = hoverPanel;
|
|
352
335
|
this.frontWrapper = frontWrapper;
|
|
353
336
|
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});
|