@simhub2/justflipit 3.0.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.
@@ -0,0 +1,483 @@
1
+ /*!
2
+ * Modern justFlipIt v3.0.0
3
+ * https://github.com/SimHub/justFlipIt
4
+ *
5
+ * Copyright simon Lackmann
6
+ * Released under the MIT license
7
+ *
8
+ * Date: 2023
9
+ */
10
+
11
+ (function (root, factory) {
12
+ if (typeof define === "function" && define.amd) {
13
+ define([], factory);
14
+ } else if (typeof module === "object" && module.exports) {
15
+ module.exports = factory();
16
+ } else {
17
+ root.justFlipIt = factory();
18
+ }
19
+ })(typeof self !== "undefined" ? self : this, function () {
20
+ "use strict";
21
+
22
+ // Feature detection
23
+ const supportsGrid =
24
+ typeof CSS !== "undefined" &&
25
+ CSS.supports &&
26
+ CSS.supports("display", "grid");
27
+ const supportsWebAnimations =
28
+ typeof Element !== "undefined" && "animate" in Element.prototype;
29
+ const supportsCustomProperties =
30
+ window.CSS && CSS.supports && CSS.supports("color", "var(--test)");
31
+
32
+ // Style generation based on browser support
33
+ function generateStyles() {
34
+ // Base styles that work everywhere
35
+ let baseStyles =
36
+ "._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}" +
37
+ "._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;}" +
38
+ "._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;}";
39
+
40
+ // Add prefixed versions for older browsers
41
+ let prefixedStyles =
42
+ "._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;}" +
43
+ "._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;}";
44
+
45
+ // X-axis rotations
46
+ let xAxisStyles =
47
+ "._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}" +
48
+ "._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}" +
49
+ "._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}";
50
+
51
+ // Y-axis rotations
52
+ let yAxisStyles =
53
+ "._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}" +
54
+ "._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}" +
55
+ "._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}";
56
+
57
+ // PATCH: Transparency-Style
58
+ let transparentStyle =
59
+ "._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}" +
60
+ "._justFlipIt_panel > * {box-sizing: border-box;}";
61
+
62
+ return (
63
+ baseStyles + prefixedStyles + xAxisStyles + yAxisStyles + transparentStyle
64
+ );
65
+ }
66
+
67
+ // Add styles to document head
68
+ function addStyles() {
69
+ if (document.querySelector('[data-justflipitstyle="justFlipIt"]')) {
70
+ return; // Styles already added
71
+ }
72
+
73
+ const styleElement = document.createElement("style");
74
+ styleElement.setAttribute("data-justflipitstyle", "justFlipIt");
75
+ styleElement.textContent = generateStyles();
76
+
77
+ document.head.appendChild(styleElement);
78
+ }
79
+
80
+ // Helper functions to replace jQuery
81
+ function getStyle(element, property) {
82
+ return window.getComputedStyle(element, null).getPropertyValue(property);
83
+ }
84
+
85
+ function addClass(element, className) {
86
+ if (element.classList) {
87
+ element.classList.add(className);
88
+ } else {
89
+ element.className += " " + className;
90
+ }
91
+ }
92
+
93
+ function removeClass(element, className) {
94
+ if (element.classList) {
95
+ element.classList.remove(className);
96
+ } else {
97
+ element.className = element.className.replace(
98
+ new RegExp(
99
+ "(^|\\b)" + className.split(" ").join("|") + "(\\b|$)",
100
+ "gi",
101
+ ),
102
+ " ",
103
+ );
104
+ }
105
+ }
106
+
107
+ function toggleClass(element, className) {
108
+ if (element.classList) {
109
+ element.classList.toggle(className);
110
+ } else {
111
+ var classes = element.className.split(" ");
112
+ var existingIndex = classes.indexOf(className);
113
+
114
+ if (existingIndex >= 0) {
115
+ classes.splice(existingIndex, 1);
116
+ } else {
117
+ classes.push(className);
118
+ }
119
+
120
+ element.className = classes.join(" ");
121
+ }
122
+ }
123
+
124
+ function hasClass(element, className) {
125
+ if (element.classList) {
126
+ return element.classList.contains(className);
127
+ } else {
128
+ return new RegExp("(^| )" + className + "( |$)", "gi").test(
129
+ element.className,
130
+ );
131
+ }
132
+ }
133
+
134
+ // NEU: Funktion zur Anwendung der benutzerdefinierten Animationseinstellungen
135
+ function applyAnimationSettings(element, duration, easing) {
136
+ const transitionValue = `transform ${duration / 1000}s ${easing}`;
137
+ element.style.transition = transitionValue;
138
+ element.style.WebkitTransition = transitionValue;
139
+ element.style.MozTransition = transitionValue;
140
+ }
141
+
142
+ // PATCH: Verbesserte Style-Kopierfunktion
143
+ function copyStyles(src, dest) {
144
+ const computed = window.getComputedStyle(src);
145
+ // Kopiere alle visuellen Eigenschaften
146
+ const properties = [
147
+ "background",
148
+ "backgroundColor",
149
+ "backgroundImage",
150
+ "backgroundPosition",
151
+ "backgroundRepeat",
152
+ "backgroundSize",
153
+ "borderRadius",
154
+ "borderTopLeftRadius",
155
+ "borderTopRightRadius",
156
+ "borderBottomLeftRadius",
157
+ "borderBottomRightRadius",
158
+ "border",
159
+ "borderTop",
160
+ "borderRight",
161
+ "borderBottom",
162
+ "borderLeft",
163
+ "boxShadow",
164
+ "color",
165
+ "opacity",
166
+ ];
167
+ properties.forEach((prop) => {
168
+ if (
169
+ computed[prop] &&
170
+ computed[prop] !== "none" &&
171
+ computed[prop] !== "initial" &&
172
+ computed[prop] !== ""
173
+ ) {
174
+ dest.style[prop] = computed[prop];
175
+ }
176
+ });
177
+ }
178
+
179
+ // Modern animation with fallback
180
+ function animateFlip(element, start, end, duration, easing = "ease-in-out") {
181
+ if (supportsWebAnimations) {
182
+ // Use Web Animations API
183
+ const keyframes = [{ transform: start }, { transform: end }];
184
+
185
+ const options = {
186
+ duration: duration,
187
+ easing: easing,
188
+ fill: "forwards",
189
+ };
190
+
191
+ return element.animate(keyframes, options);
192
+ } else {
193
+ // Fallback to CSS transitions (already set in the CSS)
194
+ element.style.transform = end;
195
+ element.style.webkitTransform = end;
196
+ element.style.mozTransform = end;
197
+ return null;
198
+ }
199
+ }
200
+
201
+ // Store for instances
202
+ const instanceMap = new WeakMap();
203
+
204
+ // Main justFlipIt class
205
+ class JustFlipIt {
206
+ constructor(element, options = {}) {
207
+ // Make sure styles are added
208
+ addStyles();
209
+
210
+ this.element = element;
211
+ this.settings = Object.assign(
212
+ {},
213
+ {
214
+ Template: "", // Template for back side
215
+ Click: false, // Click behavior
216
+ FlipX: false, // Flip direction
217
+ Style: [], // Custom styles
218
+ Duration: 400, // Animation duration in ms
219
+ Easing: "ease-in-out", // Animation easing function
220
+ },
221
+ options,
222
+ );
223
+
224
+ this.elementWidth = getStyle(element, "width");
225
+ this.elementHeight = getStyle(element, "height");
226
+ this.elementBackgroundColor = getStyle(element, "background-color");
227
+ this.originalClassName = element.className;
228
+ this.originalTagName = element.tagName.toLowerCase();
229
+ this.originalId = element.id || "";
230
+
231
+ // Set flip direction
232
+ if (this.settings.FlipX === true) {
233
+ this.flipClass = "_flip_";
234
+ this.backClass = "back";
235
+ this.rotateStart = "rotateX(0deg)";
236
+ this.rotateFront = "rotateX(180deg)";
237
+ this.rotateBack = "rotateX(-180deg)";
238
+ this.rotateReset = "rotateX(0deg)";
239
+ } else {
240
+ this.flipClass = "_flipY_";
241
+ this.backClass = "backY";
242
+ this.rotateStart = "rotateY(0deg)";
243
+ this.rotateFront = "rotateY(180deg)";
244
+ this.rotateBack = "rotateY(-180deg)";
245
+ this.rotateReset = "rotateY(0deg)";
246
+ }
247
+
248
+ // Initialize flip
249
+ this._init();
250
+
251
+ // Store instance
252
+ instanceMap.set(element, this);
253
+ }
254
+
255
+ _init() {
256
+ const originalElement = this.element;
257
+ const originalClassName = this.originalClassName;
258
+
259
+ // Create panel structure
260
+ const hoverPanel = document.createElement(this.originalTagName);
261
+ addClass(hoverPanel, "hover");
262
+ addClass(hoverPanel, "_justFlipIt_panel");
263
+
264
+ // Create front wrapper
265
+ const frontWrapper = document.createElement("div");
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
+ const backWrapper = document.createElement("div");
274
+ addClass(backWrapper, this.backClass);
275
+ if (originalClassName) {
276
+ originalClassName.split(" ").forEach((cls) => {
277
+ if (cls) addClass(backWrapper, cls);
278
+ });
279
+ }
280
+
281
+ // PATCH: Styles übernehmen und Original komplett transparent machen
282
+ copyStyles(originalElement, frontWrapper);
283
+ copyStyles(originalElement, backWrapper);
284
+
285
+ // NEU: Wende benutzerdefinierte Animationseinstellungen an
286
+ applyAnimationSettings(
287
+ frontWrapper,
288
+ this.settings.Duration,
289
+ this.settings.Easing,
290
+ );
291
+ applyAnimationSettings(
292
+ backWrapper,
293
+ this.settings.Duration,
294
+ this.settings.Easing,
295
+ );
296
+
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
+ if (this.settings.Template) {
309
+ backWrapper.innerHTML = this.settings.Template;
310
+ } else {
311
+ backWrapper.appendChild(clone);
312
+ }
313
+
314
+ // Restructure DOM
315
+ originalElement.parentNode.insertBefore(hoverPanel, originalElement);
316
+ frontWrapper.appendChild(originalElement);
317
+ hoverPanel.appendChild(frontWrapper);
318
+ hoverPanel.appendChild(backWrapper);
319
+
320
+ // Copy original classes to hover panel
321
+ if (originalClassName) {
322
+ originalClassName.split(" ").forEach((cls) => {
323
+ if (cls) addClass(hoverPanel, cls);
324
+ });
325
+ }
326
+
327
+ // Apply styles
328
+ hoverPanel.style.width = this.elementWidth;
329
+ hoverPanel.style.height = this.elementHeight;
330
+
331
+ // Apply custom styles
332
+ if (this.settings.Style && this.settings.Style.length) {
333
+ this.settings.Style.forEach((styleObj) => {
334
+ if (styleObj.el) {
335
+ if (styleObj.el.toLowerCase() === "self") {
336
+ Object.assign(hoverPanel.style, styleObj.style);
337
+ } else {
338
+ const targetElements = hoverPanel.querySelectorAll(styleObj.el);
339
+ targetElements.forEach((el) => {
340
+ Object.assign(el.style, styleObj.style);
341
+ });
342
+ }
343
+ }
344
+ });
345
+ }
346
+
347
+ // Set up event handlers
348
+ this._setupEvents(hoverPanel);
349
+
350
+ // Store reference to original element
351
+ this.hoverPanel = hoverPanel;
352
+ this.frontWrapper = frontWrapper;
353
+ this.backWrapper = backWrapper;
354
+ }
355
+
356
+ _setupEvents(hoverPanel) {
357
+ if (this.settings.Click === true) {
358
+ hoverPanel.addEventListener("click", (e) => {
359
+ e.preventDefault();
360
+ this._toggleFlip();
361
+ });
362
+ } else if (typeof this.settings.Click === "string") {
363
+ const clickElements = hoverPanel.querySelectorAll(this.settings.Click);
364
+ clickElements.forEach((el) => {
365
+ el.addEventListener("click", () => {
366
+ this._toggleFlip();
367
+ });
368
+ });
369
+ } else {
370
+ // Default hover behavior
371
+ hoverPanel.addEventListener("mouseenter", () => {
372
+ this._flip(true);
373
+ });
374
+ hoverPanel.addEventListener("mouseleave", () => {
375
+ this._flip(false);
376
+ });
377
+ }
378
+ }
379
+
380
+ _toggleFlip() {
381
+ const isFlipped = hasClass(this.hoverPanel, this.flipClass);
382
+ this._flip(!isFlipped);
383
+ }
384
+
385
+ _flip(shouldFlip) {
386
+ if (shouldFlip) {
387
+ addClass(this.hoverPanel, this.flipClass);
388
+ if (supportsWebAnimations) {
389
+ animateFlip(
390
+ this.frontWrapper,
391
+ this.rotateStart,
392
+ this.rotateFront,
393
+ this.settings.Duration,
394
+ this.settings.Easing,
395
+ );
396
+ animateFlip(
397
+ this.backWrapper,
398
+ this.rotateBack,
399
+ this.rotateReset,
400
+ this.settings.Duration,
401
+ this.settings.Easing,
402
+ );
403
+ }
404
+ } else {
405
+ removeClass(this.hoverPanel, this.flipClass);
406
+ if (supportsWebAnimations) {
407
+ animateFlip(
408
+ this.frontWrapper,
409
+ this.rotateFront,
410
+ this.rotateStart,
411
+ this.settings.Duration,
412
+ this.settings.Easing,
413
+ );
414
+ animateFlip(
415
+ this.backWrapper,
416
+ this.rotateReset,
417
+ this.rotateBack,
418
+ this.settings.Duration,
419
+ this.settings.Easing,
420
+ );
421
+ }
422
+ }
423
+ }
424
+
425
+ destroy() {
426
+ const hoverPanel = this.hoverPanel;
427
+ const originalElement = hoverPanel.querySelector(".front > *");
428
+
429
+ // Restore original classes
430
+ originalElement.className = this.originalClassName;
431
+
432
+ // Put the original element back in its place
433
+ hoverPanel.parentNode.insertBefore(originalElement, hoverPanel);
434
+ hoverPanel.parentNode.removeChild(hoverPanel);
435
+
436
+ // Remove from instance map
437
+ instanceMap.delete(this.element);
438
+ }
439
+ }
440
+
441
+ // Main function to initialize justFlipIt
442
+ function justFlipIt(selector, options = {}) {
443
+ if (typeof selector === "string") {
444
+ // If selector is a string, find all matching elements
445
+ const elements = document.querySelectorAll(selector);
446
+ return Array.from(elements).map((el) => {
447
+ return new JustFlipIt(el, options);
448
+ });
449
+ } else if (selector instanceof Element) {
450
+ // If selector is a DOM element
451
+ return new JustFlipIt(selector, options);
452
+ } else if (selector.length) {
453
+ // If selector is array-like (NodeList, HTMLCollection, etc.)
454
+ return Array.from(selector).map((el) => {
455
+ return new JustFlipIt(el, options);
456
+ });
457
+ }
458
+ }
459
+
460
+ // Destroy method
461
+ justFlipIt.destroy = function (selector) {
462
+ if (typeof selector === "string") {
463
+ // If selector is a string, find all matching elements
464
+ const elements = document.querySelectorAll(selector);
465
+ Array.from(elements).forEach((el) => {
466
+ const instance = instanceMap.get(el);
467
+ if (instance) instance.destroy();
468
+ });
469
+ } else if (selector instanceof Element) {
470
+ // If selector is a DOM element
471
+ const instance = instanceMap.get(selector);
472
+ if (instance) instance.destroy();
473
+ } else if (selector.length) {
474
+ // If selector is array-like (NodeList, HTMLCollection, etc.)
475
+ Array.from(selector).forEach((el) => {
476
+ const instance = instanceMap.get(el);
477
+ if (instance) instance.destroy();
478
+ });
479
+ }
480
+ };
481
+
482
+ return justFlipIt;
483
+ });
@@ -0,0 +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 o(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function n(t,e,s){e=`transform ${e/1e3}s `+s;t.style.transition=e,t.style.WebkitTransition=e,t.style.MozTransition=e}function l(t,e){let s=window.getComputedStyle(t);["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"].forEach(t=>{s[t]&&"none"!==s[t]&&"initial"!==s[t]&&""!==s[t]&&(e.style[t]=s[t])})}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 r=new WeakMap;class p{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"},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(),r.set(t,this)}_init(){var t=this.element,e=this.originalClassName;let s=document.createElement(this.originalTagName);o(s,"hover"),o(s,"_justFlipIt_panel");var i=document.createElement("div"),r=(o(i,"front"),t.cloneNode(!0));r.className="";let a=document.createElement("div");o(a,this.backClass),e&&e.split(" ").forEach(t=>{t&&o(a,t)}),l(t,i),l(t,a),n(i,this.settings.Duration,this.settings.Easing),n(a,this.settings.Duration,this.settings.Easing),t.style.all="inherit",t.style.background="transparent",t.style.backgroundColor="transparent",t.style.backgroundImage="none",t.style.border="none",t.style.borderRadius="0",t.style.boxShadow="none",t.style.outline="none",this.settings.Template?a.innerHTML=this.settings.Template:a.appendChild(r),t.parentNode.insertBefore(s,t),i.appendChild(t),s.appendChild(i),s.appendChild(a),e&&e.split(" ").forEach(t=>{t&&o(s,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=i,this.backWrapper=a}_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?(o(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),r.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new p(t,e))):t instanceof Element?new p(t,e):t.length?Array.from(t).map(t=>new p(t,e)):void 0}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()})},t});