@simhub2/justflipit 3.2.2 → 4.0.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/CHANGELOG.md +21 -0
- package/LICENSE +21 -0
- package/README.md +258 -91
- package/dist/agent.cjs +63 -0
- package/dist/agent.cjs.map +7 -0
- package/dist/agent.d.cts +4 -0
- package/dist/agent.d.mts +4 -0
- package/dist/agent.d.ts +4 -0
- package/dist/agent.mjs +43 -0
- package/dist/agent.mjs.map +7 -0
- package/dist/justFlipIt-combined.js +295 -0
- package/dist/justFlipIt-combined.min.js +23 -0
- package/dist/justFlipIt-modern.js +271 -476
- package/dist/justFlipIt-modern.min.js +23 -1
- package/dist/justFlipIt-vanilla.js +272 -343
- package/dist/justFlipIt-vanilla.min.js +23 -1
- package/dist/justFlipIt.cjs +293 -0
- package/dist/justFlipIt.cjs.map +7 -0
- package/dist/justFlipIt.d.cts +4 -0
- package/dist/justFlipIt.d.mts +38 -0
- package/dist/justFlipIt.d.ts +38 -0
- package/dist/justFlipIt.js +269 -391
- package/dist/justFlipIt.js.map +7 -0
- package/dist/justFlipIt.min.js +23 -1
- package/dist/justFlipIt.min.js.map +7 -0
- package/dist/justFlipIt.mjs +272 -0
- package/dist/justFlipIt.mjs.map +7 -0
- package/dist/react.cjs +55 -0
- package/dist/react.cjs.map +7 -0
- package/dist/react.d.cts +3 -0
- package/dist/react.d.mts +3 -0
- package/dist/react.d.ts +3 -0
- package/dist/react.mjs +25 -0
- package/dist/react.mjs.map +7 -0
- package/dist/svelte.cjs +45 -0
- package/dist/svelte.cjs.map +7 -0
- package/dist/svelte.d.cts +3 -0
- package/dist/svelte.d.mts +3 -0
- package/dist/svelte.d.ts +3 -0
- package/dist/svelte.mjs +15 -0
- package/dist/svelte.mjs.map +7 -0
- package/dist/types/justFlipIt.d.ts +36 -59
- package/dist/vue.cjs +49 -0
- package/dist/vue.cjs.map +7 -0
- package/dist/vue.d.cts +3 -0
- package/dist/vue.d.mts +3 -0
- package/dist/vue.d.ts +3 -0
- package/dist/vue.mjs +19 -0
- package/dist/vue.mjs.map +7 -0
- package/package.json +117 -50
- package/src/justFlipIt-combined.js +0 -417
- package/src/justFlipIt-combined.min.js +0 -1
- package/src/justFlipIt-modern.js +0 -500
- package/src/justFlipIt-modern.min.js +0 -1
- package/src/justFlipIt-vanilla.js +0 -366
- package/src/justFlipIt-vanilla.min.js +0 -1
- package/src/justFlipIt.d.ts +0 -61
|
@@ -1 +1,23 @@
|
|
|
1
|
-
(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";const supportsGrid=typeof CSS!=="undefined"&&CSS.supports&&CSS.supports("display","grid");const supportsWebAnimations=typeof Element!=="undefined"&&"animate"in Element.prototype;const supportsCustomProperties=window.CSS&&CSS.supports&&CSS.supports("color","var(--test)");function generateStyles(){let baseStyles="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}";let prefixedStyles="._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}";let xAxisStyles="._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}"+"._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}"+"._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}";let yAxisStyles="._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}"+"._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}"+"._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}";let transparentStyle="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";return baseStyles+prefixedStyles+xAxisStyles+yAxisStyles+transparentStyle}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt"]')){return}const styleElement=document.createElement("style");styleElement.setAttribute("data-justflipitstyle","justFlipIt");styleElement.textContent=generateStyles();document.head.appendChild(styleElement)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function applyAnimationSettings(element,duration,easing){const transitionValue=`transform ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function animateFlip(element,start,end,duration,easing="ease-in-out"){if(supportsWebAnimations){const keyframes=[{transform:start},{transform:end}];const options={duration:duration,easing:easing,fill:"forwards"};return element.animate(keyframes,options)}else{element.style.transform=end;element.style.webkitTransform=end;element.style.mozTransform=end;return null}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back";this.rotateStart="rotateX(0deg)";this.rotateFront="rotateX(180deg)";this.rotateBack="rotateX(-180deg)";this.rotateReset="rotateX(0deg)"}else{this.flipClass="_flipY_";this.backClass="backY";this.rotateStart="rotateY(0deg)";this.rotateFront="rotateY(180deg)";this.rotateBack="rotateY(-180deg)";this.rotateReset="rotateY(0deg)"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);if(this.settings.preserveClasses&&originalElement.classList.length){originalElement.classList.forEach(cls=>{if(!hoverPanel.classList.contains(cls)){hoverPanel.classList.add(cls)}if(frontWrapper&&!frontWrapper.classList.contains(cls)){frontWrapper.classList.add(cls)}if(backWrapper&&!backWrapper.classList.contains(cls)){backWrapper.classList.add(cls)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){const handleMove=e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;const y=(e.touches?e.touches[0].clientY:e.clientY)-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`};const handleEnter=()=>{this.hoverPanel.style.transition="all 0.2s ease-out"};const handleLeave=()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"};this.hoverPanel.addEventListener("mousemove",handleMove);this.hoverPanel.addEventListener("touchmove",handleMove);this.hoverPanel.addEventListener("mouseenter",handleEnter);this.hoverPanel.addEventListener("touchstart",handleEnter);this.hoverPanel.addEventListener("mouseleave",handleLeave);this.hoverPanel.addEventListener("touchend",handleLeave)}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();this._toggleFlip()})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{this._toggleFlip()})})}else{hoverPanel.addEventListener("mouseenter",()=>{this._flip(true)});hoverPanel.addEventListener("mouseleave",()=>{this._flip(false)})}}_toggleFlip(){const isFlipped=hasClass(this.hoverPanel,this.flipClass);this._flip(!isFlipped)}_flip(shouldFlip){if(shouldFlip){addClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing)}}else{removeClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)}}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>{return new JustFlipIt(el,options)})}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>{return new JustFlipIt(el,options)})}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});
|
|
1
|
+
var JustFlipItModule=(()=>{var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(i,t)=>{for(var e in t)d(i,e,{get:t[e],enumerable:!0})},_=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of T(t))!v.call(i,s)&&s!==e&&d(i,s,{get:()=>t[s],enumerable:!(a=g(t,s))||a.enumerable});return i};var w=i=>_(d({},"__esModule",{value:!0}),i);var I={};b(I,{FlipController:()=>c,default:()=>h});var n=new WeakMap,k={Click:!1,FlipX:!1,Duration:400,Easing:"cubic-bezier(.22,.61,.36,1)",Tilt:!1,Effect:"flip",ReducedMotion:!0,preserveClasses:!0,preserveStyles:!0,Style:[]},F=`
|
|
2
|
+
._justFlipIt_panel{position:relative;display:grid;perspective:var(--jfi-perspective,1000px);isolation:isolate}
|
|
3
|
+
._justFlipIt_panel>[data-jfi-face]{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--jfi-duration) var(--jfi-easing),opacity var(--jfi-duration) var(--jfi-easing);transform-origin:center}
|
|
4
|
+
._justFlipIt_panel>[data-jfi-face=back],._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=front]{pointer-events:none}
|
|
5
|
+
._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=back]{pointer-events:auto}
|
|
6
|
+
._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=front]{transform:rotateY(0deg)}
|
|
7
|
+
._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=back]{transform:rotateY(-180deg)}
|
|
8
|
+
._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateY(180deg)}
|
|
9
|
+
._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateY(0deg)}
|
|
10
|
+
._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=front]{transform:rotateX(0deg)}
|
|
11
|
+
._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=back]{transform:rotateX(-180deg)}
|
|
12
|
+
._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateX(180deg)}
|
|
13
|
+
._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateX(0deg)}
|
|
14
|
+
._justFlipIt_panel[data-jfi-effect=fade]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back]{opacity:0}
|
|
15
|
+
._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=front],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{opacity:0}
|
|
16
|
+
._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{opacity:1}
|
|
17
|
+
._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{transform:scale(.94)}
|
|
18
|
+
._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{transform:scale(1)}
|
|
19
|
+
._justFlipIt_panel[data-jfi-reduced=true]>[data-jfi-face]{transition:none!important}
|
|
20
|
+
@media(prefers-reduced-motion:reduce){._justFlipIt_panel:not([data-jfi-motion=allow])>[data-jfi-face]{transition:none!important}}
|
|
21
|
+
`;function E(i){if(i.querySelector('style[data-justflipitstyle="v4"]'))return;let t=i.createElement("style");t.dataset.justflipitstyle="v4",t.textContent=F,i.head.append(t)}function j(i){if(i.Duration!==void 0&&(!Number.isFinite(i.Duration)||i.Duration<0))throw new TypeError("Duration must be a non-negative finite number");if(i.Effect!==void 0&&!["flip","fade","scale"].includes(i.Effect))throw new TypeError("Unknown Effect");if(i.Tilt&&typeof i.Tilt=="object"){for(let t of["max","perspective","scale"])if(i.Tilt[t]!==void 0&&(!Number.isFinite(i.Tilt[t])||i.Tilt[t]<0))throw new TypeError(`Invalid Tilt.${t}`)}}var c=class{constructor(t,e={}){if(j(e),!t||t.nodeType!==1)throw new TypeError("Expected an HTML element");this.element=t,this.settings={...k,...e},this.flipped=!1,this.destroyed=!1,this.cleanups=[],this.restores=[],this.win=t.ownerDocument.defaultView;let a=t.ownerDocument;if(E(a),this.managed=!!e.Faces,this.managed){if(this.hoverPanel=t,this.frontWrapper=t.querySelector(e.Faces.front),this.backWrapper=t.querySelector(e.Faces.back),!this.frontWrapper||!this.backWrapper||this.frontWrapper===this.backWrapper||this.frontWrapper.parentNode!==t||this.backWrapper.parentNode!==t)throw new TypeError("Faces must select two distinct direct children")}else{if(!t.parentNode)throw new TypeError("Element must have a parent");if(this.hoverPanel=a.createElement("div"),this.frontWrapper=a.createElement("div"),this.backWrapper=a.createElement("div"),this.settings.preserveClasses&&(this.hoverPanel.className=t.className),this.settings.preserveStyles&&(this.hoverPanel.style.cssText=t.style.cssText),t.before(this.hoverPanel),this.hoverPanel.append(this.frontWrapper,this.backWrapper),this.frontWrapper.append(t),e.Template!==void 0)this.backWrapper.innerHTML=e.Template;else{let r=t.cloneNode(!0);r.removeAttribute("id"),r.querySelectorAll("[id]").forEach(l=>l.removeAttribute("id")),this.backWrapper.append(r)}}let s=this.hoverPanel;for(let r of[s,this.frontWrapper,this.backWrapper]){let p=(r===s?["class","style","tabindex","data-jfi-axis","data-jfi-effect","data-jfi-motion","data-jfi-flipped","data-jfi-reduced"]:["style","data-jfi-face","aria-hidden","inert"]).map(o=>[o,r.getAttribute(o)]),y=r.inert||!1;this.restores.push(()=>{r.inert=y;for(let[o,u]of p)u===null?r.removeAttribute(o):r.setAttribute(o,u)})}s.classList.add("_justFlipIt_panel"),this.frontWrapper.dataset.jfiFace="front",this.backWrapper.dataset.jfiFace="back",this.motion=this.win.matchMedia?.("(prefers-reduced-motion: reduce)");let f=()=>{this.resetTilt(),this.render()};this.motion?.addEventListener("change",f),this.cleanups.push(()=>this.motion?.removeEventListener("change",f)),this.configure(),this.events(),this.render(),n.set(t,this),n.set(s,this)}listen(t,e,a){this.hoverPanel.addEventListener(t,e,a),this.cleanups.push(()=>this.hoverPanel.removeEventListener(t,e,a))}get reduced(){return this.settings.ReducedMotion!==!1&&!!this.motion?.matches}configure(){let t=this.settings,e=this.hoverPanel;e.style.setProperty("--jfi-duration",`${t.Duration}ms`),e.style.setProperty("--jfi-easing",t.Easing),e.dataset.jfiAxis=t.FlipX?"x":"y",e.dataset.jfiEffect=t.Effect,e.dataset.jfiMotion=t.ReducedMotion===!1?"allow":"respect";for(let a of t.Style||[])(a.el==="self"?[e]:e.querySelectorAll(a.el)).forEach(f=>Object.assign(f.style,a.style));t.Tilt!=="only"&&!e.hasAttribute("tabindex")&&(e.tabIndex=0)}events(){this.listen("click",t=>{if(this.settings.Tilt==="only")return;let e=this.settings.Click;(e===!0||e&&[].concat(e).some(a=>t.target.closest?.(a)&&this.hoverPanel.contains(t.target.closest(a))))&&this.toggle()}),this.listen("keydown",t=>{t.target!==this.hoverPanel||this.settings.Tilt==="only"||((t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.toggle()),t.key==="Escape"&&this.flip(!1))}),this.listen("pointerenter",t=>{!this.settings.Click&&this.settings.Tilt!=="only"&&t.pointerType!=="touch"&&this.flip(!0)}),this.listen("pointerleave",t=>{t.pointerType!=="touch"&&(this.resetTilt(),!this.settings.Click&&this.settings.Tilt!=="only"&&this.flip(!1))}),this.listen("pointerdown",t=>{t.pointerType!=="touch"||t.isPrimary===!1||this.touch||(this.resetTilt(),this.touch={id:t.pointerId,x:t.clientX,y:t.clientY,moved:!1},this.queueTilt(t,this.touch))},{passive:!0}),this.listen("pointermove",t=>{if(t.pointerType!=="touch"){this.touch||this.queueTilt(t);return}let e=this.touch;!e||e.id!==t.pointerId||(e.moved||(e.moved=this.touchMoved(t,e)),this.queueTilt(t,e))},{passive:!0}),this.listen("pointerup",t=>{let e=this.finishTouch(t);!e||e.moved||this.touchMoved(t,e)||!this.settings.Click&&this.settings.Tilt!=="only"&&this.toggle()}),this.listen("pointercancel",t=>{t.pointerType==="touch"?this.finishTouch(t):this.resetTilt()}),this.listen("lostpointercapture",t=>this.finishTouch(t)),this.baseTransform=this.hoverPanel.style.transform}touchMoved(t,e){return Math.hypot(t.clientX-e.x,t.clientY-e.y)>10}finishTouch(t){let e=this.touch;if(!(t.pointerType!=="touch"||!e||e.id!==t.pointerId))return this.touch=null,this.resetTilt(),e}queueTilt(t,e){!this.settings.Tilt||this.reduced||(this.point=[t.clientX,t.clientY],!this.frame&&(this.frame=this.win.requestAnimationFrame(()=>{this.frame=0;let a=e?e.rect??(e.rect=this.hoverPanel.getBoundingClientRect()):this.hoverPanel.getBoundingClientRect();if(!a.width||!a.height)return;let{max:s=10,perspective:f=1e3,scale:r=1.03}=this.settings.Tilt,l=Math.max(-1,Math.min(1,(this.point[0]-a.left)/a.width*2-1)),p=Math.max(-1,Math.min(1,(this.point[1]-a.top)/a.height*2-1));this.hoverPanel.style.transform=`perspective(${f}px) rotateX(${-p*s}deg) rotateY(${l*s}deg) scale(${r})`})))}resetTilt(){this.frame&&this.win.cancelAnimationFrame(this.frame),this.frame=0,this.hoverPanel.style.transform=this.baseTransform||""}render(){this.hoverPanel.dataset.jfiFlipped=String(this.flipped),this.hoverPanel.dataset.jfiReduced=String(this.reduced);for(let[t,e]of[[this.frontWrapper,this.flipped],[this.backWrapper,!this.flipped]])t.setAttribute("aria-hidden",String(e)),t.inert=e}flip(t=!0){if(this.destroyed||this.flipped===!!t)return this;let e=this.element.ownerDocument.activeElement;return(t?this.frontWrapper:this.backWrapper).contains(e)&&this.hoverPanel.focus({preventScroll:!0}),this.flipped=!!t,this.render(),this.hoverPanel.dispatchEvent(new this.win.CustomEvent("justflipit:change",{bubbles:!0,detail:this.getState()})),this}toggle(){return this.flip(!this.flipped)}update(t={}){if(this.destroyed)return this;if("Faces"in t)throw new TypeError("Faces cannot change after initialization");if(j(t),this.managed&&"Template"in t)throw new TypeError("Render framework face content with the framework");if(this.settings={...this.settings,...t},"Template"in t){if(this.managed)throw new TypeError("Render framework face content with the framework");this.backWrapper.innerHTML=t.Template}return this.resetTilt(),this.configure(),this.render(),this}getState(){return{flipped:this.flipped,destroyed:this.destroyed,effect:this.settings.Effect}}destroy(){this.destroyed||(this.resetTilt(),this.cleanups.forEach(t=>t()),this.restores.forEach(t=>t()),this.managed||this.hoverPanel.replaceWith(this.element),n.delete(this.element),n.delete(this.hoverPanel),this.destroyed=!0)}};function m(i){return typeof i=="string"?typeof document>"u"?[]:Array.from(document.querySelectorAll(i)):i?.nodeType===1?[i]:i?Array.from(i):[]}function h(i,t){let e=m(i).map(a=>n.get(a)||new c(a,t));return i?.nodeType===1?e[0]:e}h.destroy=i=>m(i).forEach(t=>n.get(t)?.destroy());h.get=i=>n.get(i);return w(I);})();
|
|
22
|
+
globalThis.justFlipIt = JustFlipItModule.default;
|
|
23
|
+
//# sourceMappingURL=justFlipIt.min.js.map
|