@simhub2/justflipit 3.0.1 → 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 +114 -240
- 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,290 +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/@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: Automatisches Übernehmen von Klassen und Styles
|
|
55
45
|
|
|
56
|
-
|
|
57
|
-
// Simple hover flip
|
|
58
|
-
justFlipIt(".card");
|
|
46
|
+
Ab Version X übernimmt justFlipIt **automatisch alle CSS-Klassen und Inline-Styles** deines Elements auf das Flip-Panel.
|
|
59
47
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
Click: true,
|
|
63
|
-
Duration: 800,
|
|
64
|
-
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
|
|
65
|
-
});
|
|
66
|
-
</script>
|
|
67
|
-
```
|
|
48
|
+
**Das bedeutet:**
|
|
49
|
+
Du kannst z.B. einfach
|
|
68
50
|
|
|
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
|
-
}
|
|
51
|
+
```js
|
|
52
|
+
justFlipIt(".daisyui-card");
|
|
90
53
|
```
|
|
91
54
|
|
|
92
|
-
|
|
55
|
+
aufrufen – und alle Farben, Schatten, Abstände usw. bleiben erhalten, egal ob du Tailwind, daisyUI, Bootstrap oder eigene Styles verwendest.
|
|
93
56
|
|
|
94
|
-
###
|
|
57
|
+
### **Optionen**
|
|
95
58
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
Duration: 500,
|
|
101
|
-
Easing: "ease-out",
|
|
102
|
-
});
|
|
103
|
-
</script>
|
|
104
|
-
```
|
|
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 |
|
|
105
63
|
|
|
106
|
-
|
|
64
|
+
**Beispiel:**
|
|
107
65
|
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
Easing: "ease-in-out",
|
|
115
|
-
});
|
|
116
|
-
</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 });
|
|
117
72
|
```
|
|
118
73
|
|
|
119
|
-
|
|
74
|
+
---
|
|
120
75
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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
|
+
});
|
|
130
102
|
```
|
|
131
103
|
|
|
132
|
-
|
|
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:**
|
|
133
126
|
|
|
134
127
|
```html
|
|
135
|
-
<div class="
|
|
136
|
-
Card Content
|
|
137
|
-
<button class="flip-btn">Flip</button>
|
|
138
|
-
</div>
|
|
128
|
+
<div class="card">Hover me!</div>
|
|
139
129
|
<script>
|
|
140
|
-
justFlipIt(".
|
|
141
|
-
Click: ".flip-btn",
|
|
142
|
-
Duration: 500,
|
|
143
|
-
});
|
|
130
|
+
justFlipIt(".card");
|
|
144
131
|
</script>
|
|
145
132
|
```
|
|
146
133
|
|
|
147
|
-
|
|
134
|
+
**Click to flip:**
|
|
148
135
|
|
|
149
136
|
```html
|
|
150
|
-
<div class="
|
|
137
|
+
<div class="card">Click me!</div>
|
|
151
138
|
<script>
|
|
152
|
-
justFlipIt(".
|
|
153
|
-
Click: true,
|
|
154
|
-
Duration: 800,
|
|
155
|
-
Easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
|
|
156
|
-
});
|
|
139
|
+
justFlipIt(".card", { Click: true });
|
|
157
140
|
</script>
|
|
158
141
|
```
|
|
159
142
|
|
|
160
|
-
|
|
143
|
+
**Button trigger:**
|
|
161
144
|
|
|
162
145
|
```html
|
|
163
|
-
<div class="
|
|
146
|
+
<div class="card">
|
|
147
|
+
Card Content
|
|
148
|
+
<button class="flip-btn">Flip</button>
|
|
149
|
+
</div>
|
|
164
150
|
<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
|
-
});
|
|
151
|
+
justFlipIt(".card", { Click: ".flip-btn" });
|
|
188
152
|
</script>
|
|
189
153
|
```
|
|
190
154
|
|
|
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
|
|
155
|
+
---
|
|
215
156
|
|
|
216
|
-
|
|
217
|
-
<!-- Vanilla -->
|
|
218
|
-
<script src="justFlipIt-vanilla.min.js"></script>
|
|
157
|
+
## Full API & Advanced Usage
|
|
219
158
|
|
|
220
|
-
|
|
221
|
-
<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.
|
|
222
160
|
|
|
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
|
-
```
|
|
161
|
+
---
|
|
232
162
|
|
|
233
|
-
##
|
|
163
|
+
## Library Versions
|
|
234
164
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
<h3>Product Name</h3>
|
|
239
|
-
<p>Short description</p>
|
|
240
|
-
<button class="details-btn">Show Details</button>
|
|
241
|
-
</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
|
|
242
168
|
|
|
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
|
-
```
|
|
169
|
+
---
|
|
288
170
|
|
|
289
171
|
## Browser Support
|
|
290
172
|
|
|
@@ -295,28 +177,20 @@ justFlipIt offers three different versions to suit your needs:
|
|
|
295
177
|
- ✅ iOS Safari 12+
|
|
296
178
|
- ✅ Android Chrome 60+
|
|
297
179
|
|
|
298
|
-
|
|
180
|
+
---
|
|
299
181
|
|
|
300
|
-
|
|
182
|
+
## License
|
|
301
183
|
|
|
302
|
-
|
|
303
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
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
|
|
307
|
-
furnished to do so, subject to the following conditions:
|
|
184
|
+
MIT License – see LICENSE
|
|
308
185
|
|
|
309
|
-
|
|
310
|
-
copies or substantial portions of the Software.
|
|
186
|
+
---
|
|
311
187
|
|
|
312
|
-
|
|
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
|
|
318
|
-
SOFTWARE.
|
|
188
|
+
**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/@simhub2/justflipit)**
|
|
319
189
|
|
|
320
190
|
---
|
|
321
191
|
|
|
322
|
-
|
|
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});
|