@ssgoi/core 6.5.0-beta.0 → 6.5.0-beta.2
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/dist/animation/web-animation.d.ts +8 -0
- package/dist/animation/web-animation.d.ts.map +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.js +470 -454
- package/dist/internal.cjs +1 -1
- package/dist/internal.js +2 -2
- package/dist/{multi-animation-CnxqLEka.js → multi-animation-Ch5rI3rB.js} +10 -0
- package/dist/multi-animation-uzEnQnrG.cjs +1 -0
- package/dist/transitions/zoom/transition.d.ts.map +1 -1
- package/dist/utils/get-client-rect.d.ts +27 -0
- package/dist/utils/get-client-rect.d.ts.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/multi-animation-Dw2JTJI2.cjs +0 -1
package/dist/internal.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var Mt=Object.defineProperty;var xt=(t,s,e)=>s in t?Mt(t,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[s]=e;var B=(t,s,e)=>xt(t,typeof s!="symbol"?s+"":s,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("./multi-animation-Dw2JTJI2.cjs");class Et extends Z.Animation{constructor(){super(...arguments);B(this,"child",null);B(this,"_state","idle");B(this,"_settled",!1);B(this,"listeners",new Set)}attach(e){const n=this.child;if(this.child=e,this._settled=!1,n){const c=n.getPose();n.complete(),e.matchInto(c)}e.playbackRate=this.playbackRate;const l=e.onComplete;e.onComplete=()=>{l==null||l(),this.child===e&&(this.child=null,this._state="idle",this._settled=!0),this.notify()};const f=e.onUpdate;e.onUpdate=c=>{var y;f==null||f(c),(y=this.onUpdate)==null||y.call(this,c),this.notify()},this._state==="paused"?e.pause():this._state==="reversing"?e.reverse():(this._state="playing",e.play()),this.notify()}play(){var e;this._state="playing",this._settled=!1,(e=this.child)==null||e.play(),this.notify()}reverse(){var e;this._state="reversing",this._settled=!1,(e=this.child)==null||e.reverse(),this.notify()}pause(){var e;this._state="paused",(e=this.child)==null||e.pause(),this.notify()}complete(){var e;(e=this.child)==null||e.complete(),this.notify()}get isAnimating(){var e;return((e=this.child)==null?void 0:e.isAnimating)??!1}get isPaused(){return this._state==="paused"}get isComplete(){return this._settled&&!this.child}get isReversing(){var e;return((e=this.child)==null?void 0:e.isReversing)??this._state==="reversing"}get progress(){var e;return((e=this.child)==null?void 0:e.progress)??0}findTimeForProgress(e){var n;return((n=this.child)==null?void 0:n.findTimeForProgress(e))??null}get playbackRate(){return super.playbackRate}set playbackRate(e){super.playbackRate=e,this.child&&(this.child.playbackRate=e),this.notify()}getPose(){var e;return((e=this.child)==null?void 0:e.getPose())??[]}getTimeline(){var e;return((e=this.child)==null?void 0:e.getTimeline())??[]}matchInto(e){var n;(n=this.child)==null||n.matchInto(e)}get activeChild(){return this.child}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}}const Lt=(t,s)=>{var e;t.style.position="absolute",t.style.width="100%",t.style.top=`${-1*(((e=s==null?void 0:s.scrollOffset)==null?void 0:e.y)??0)}px`,t.style.left="0"},ht=new Set(["auto","scroll","overlay"]),Ot=t=>{let s=t.parentElement;for(;s&&s!==document.body;){const e=window.getComputedStyle(s);if(ht.has(e.overflowY)||ht.has(e.overflowX))return s;s=s.parentElement}return document.documentElement},_t=t=>{let s=t.parentElement;for(;s&&s!==document.body;){const e=window.getComputedStyle(s).position;if(e==="relative"||e==="absolute"||e==="fixed"||e==="sticky")return s;s=s.parentElement}return document.body};function kt(t){const s=Object.keys(t);return Promise.all(s.map(e=>t[e])).then(e=>{const n={};return s.forEach((l,f)=>{n[l]=e[f]}),n})}function Dt(t){const s=t.filter(e=>e.symmetric).map(e=>({from:e.to,to:e.from,transition:e.transition}));return[...t,...s]}function X(t,s){if(s==="*")return!0;if(s.endsWith("/*")){const e=s.slice(0,-1);return t.startsWith(e)&&t.length>e.length}return t===s}function Ht(t,s,e){for(const n of e)if(X(t,n.from)&&X(s,n.to))return n.transition;for(const n of e)if((n.from==="*"||X(t,n.from))&&(n.to==="*"||X(s,n.to)))return n.transition;return null}const Nt=768,It=10,Wt=10;function Ft(t={}){const{preserveScroll:s=a=>a}=t,e=typeof s=="function"?s:()=>s;let n=null,l=!1,f=!1;const c=()=>{const a=(n==null?void 0:n.clientWidth)??0,u=a>0?a:typeof window<"u"?window.innerWidth:0;return u>0&&u<Nt},y=()=>(f||(l=c(),f=!0),l),b=a=>{var S;const u=e(y());if(u===!1)return{preserves:!1,shared:!1,storageKey:`path:${a}`};if(u===!0)return{preserves:!0,shared:!1,storageKey:`path:${a}`};const v=((S=u.exclude)==null?void 0:S.some(A=>X(a,A)))??!1,w=!v&&!!u.key;return{preserves:!v,shared:w,storageKey:w?`shared:${u.key}`:`path:${a}`}},O=a=>b(a).preserves;let _=null;const E=new Map;let x=null,k=!1,I=0;const W=()=>{n&&x&&!k&&E.set(b(x).storageKey,{x:n.scrollLeft,y:n.scrollTop})},T=a=>{if(!n)return;const u=b(a);if(u.preserves&&u.shared&&!E.has(u.storageKey))return;const v=u.preserves&&E.has(u.storageKey)?E.get(u.storageKey):{x:0,y:0};let w=0;const S=()=>{if(!n)return;n.scrollTo({top:v.y,left:v.x}),!(Math.abs(n.scrollTop-v.y)<1&&Math.abs(n.scrollLeft-v.x)<1)&&w<It&&(w++,requestAnimationFrame(S))};requestAnimationFrame(S)};return{initializeContext:(a,u)=>{k=!0;const v=++I;_=a,n||(n=Ot(a),l=c(),f=!0,typeof ResizeObserver<"u"&&new ResizeObserver(()=>{l=c()}).observe(n),(n===document.documentElement?window:n).addEventListener("scroll",W,{passive:!0})),x=u,T(u);let w=0;const S=()=>{v===I&&(w++,w>=Wt?k=!1:requestAnimationFrame(S))};requestAnimationFrame(S)},calculateScrollOffset:(a,u)=>{const v=a?b(a).storageKey:null,w=v&&E.has(v)?E.get(v):{x:0,y:0},S=u?b(u):null,A=S!=null&&S.preserves?S.storageKey:null,F=A&&E.has(A)?E.get(A):{x:0,y:0};return{x:-F.x+w.x,y:-F.y+w.y}},evictScrollPosition:a=>{E.delete(b(a).storageKey)},shouldPreserve:O,getScrollContainer:()=>n,getPositionedParentElement:()=>_?_t(_):document.body,getScrollPosition:a=>{const u=a?b(a).storageKey:null;return u&&E.has(u)?E.get(u):{x:0,y:0}}}}const yt=30,mt=8,pt=1.2,gt=30,Kt=600;function Bt(){let t=null,s=!1,e=!1,n=null,l=null,f=!1;const c=(d,g)=>{for(let m=0;m<d.length;m++){const p=d.item(m);if(p&&p.identifier===g)return p}return null},y=()=>{n!==null&&(clearTimeout(n),n=null)},b=()=>{l!==null&&(clearTimeout(l),l=null)},O=()=>{s=!0,e=!0,y(),b(),n=setTimeout(()=>{s=!1,e=!1,n=null},Kt)},_=d=>{if(d.touches.length!==1){t=null;return}const g=d.touches.item(0);if(!g){t=null;return}const m=window.innerWidth,p=g.clientX<=yt,R=g.clientX>=m-yt;if(!p&&!R){t=null;return}t={identifier:g.identifier,startX:g.clientX,startY:g.clientY,fromLeftEdge:p,moved:!1}},E=d=>{if(!t)return;if(d.touches.length!==1){t=null;return}const g=c(d.touches,t.identifier);if(!g){t=null;return}const m=g.clientX-t.startX,p=g.clientY-t.startY,R=Math.abs(m),a=Math.abs(p);if(a>mt&&a>R*pt){t=null;return}const u=t.fromLeftEdge?m>0:m<0;R>mt&&R>a*pt&&u&&(t.moved=!0)},x=d=>{if(!t)return;const g=c(d.changedTouches,t.identifier);if(!g){t=null;return}const m=g.clientX-t.startX,p=t.fromLeftEdge?m>0:m<0;if(t.moved&&p&&Math.abs(m)>=gt){O(),t=null;return}t.moved&&Math.abs(m)>=gt&&O(),t=null},k=()=>{t&&(t.moved&&O(),t=null)};return{initialize:()=>{if(typeof window>"u"||f)return;f=!0;const d={passive:!0,capture:!0};window.addEventListener("touchstart",_,d),window.addEventListener("touchmove",E,d),window.addEventListener("touchend",x,d),window.addEventListener("touchcancel",k,d)},destroy:()=>{if(typeof window>"u"||!f)return;f=!1;const d={capture:!0};window.removeEventListener("touchstart",_,d),window.removeEventListener("touchmove",E,d),window.removeEventListener("touchend",x,d),window.removeEventListener("touchcancel",k,d),y(),b(),t=null,s=!1,e=!1},isSwipeBack:()=>{const d=s||e;return d&&y(),d},onPageEnter:()=>{s=!1,y(),b(),l=setTimeout(()=>{e=!1,l=null},0)}}}function Xt(){let t=null;function s(){var n,l;t&&((n=t.outResolve)==null||n.call(t,null),(l=t.inResolve)==null||l.call(t,null),t=null)}function e(){if(t!=null&&t.from&&(t!=null&&t.to)&&(t!=null&&t.outResolve)&&(t!=null&&t.inResolve)){if(t.from===t.to){s();return}const n={from:t.from,to:t.to};t.outResolve(n),t.inResolve(n),t=null}}return{trigger(n,l){var c;l==="out"&&(t==null?void 0:t.to)===n&&!t.from&&((c=t.inResolve)==null||c.call(t,null),t={}),t&&(l==="out"&&t.from&&t.from!==n||l==="in"&&t.to&&t.to!==n)&&s(),t||(t={}),l==="out"?t.from=n:t.to=n},get(n){return new Promise(l=>{t||(t={}),n==="out"?t.outResolve=l:t.inResolve=l,e()})}}}const $=new Map;let Y=null,vt=!1;function St(t){if(t instanceof HTMLElement&&$.has(t)&&!t.isConnected){const s=$.get(t);$.delete(t),queueMicrotask(s)}for(const s of Array.from(t.childNodes))St(s)}function zt(){if(vt||typeof document>"u")return;vt=!0,Y=new MutationObserver(s=>{for(const e of s)for(const n of Array.from(e.removedNodes))St(n)});const t=()=>{Y==null||Y.observe(document.body,{childList:!0,subtree:!0})};document.body?t():document.addEventListener("DOMContentLoaded",t,{once:!0})}function $t(t,s){return zt(),$.set(t,s),()=>{$.delete(t)}}const it=new WeakMap;let G=null;const j="none !important";function z(t){const s=t.style.getPropertyValue("display");return t.style.getPropertyPriority("display")?`${s} !important`:s}function qt(){return G||(G=new MutationObserver(t=>{for(const s of t){const e=s.target,n=it.get(e);if(!n)continue;const l=z(e);l!==n.accounted&&(n.accounted=l,l===j?(n.reactHidden=!0,n.onHide()):l!=="none"&&n.reactHidden&&(n.reactHidden=!1,n.onShow()))}}),G)}function Vt(t,s){const e=z(t),n={accounted:e,reactHidden:e===j,onHide:s.onHide,onShow:s.onShow};return it.set(t,n),qt().observe(t,{attributes:!0,attributeFilter:["style"]}),{get isHidden(){return z(t)===j},setDisplay(l,f=!1){l===null?t.style.removeProperty("display"):t.style.setProperty("display",l,f?"important":""),n.accounted=z(t)},sync(){n.accounted=z(t),n.reactHidden=n.accounted===j},stop(){it.delete(t)}}}function Ut(t){return Array.isArray(t)}function wt(t){const s=[];for(const e of t)Ut(e)?s.push(...wt(e)):s.push(e);return s}function Yt(t,s={}){const{transitions:e=[],middleware:n=(o,i)=>({from:o,to:i}),preserveScroll:l=o=>o}=t,f=s.host??new Et,c=Xt(),y=Dt(wt(e)),b=Bt();b.initialize();const{initializeContext:O,calculateScrollOffset:_,evictScrollPosition:E,shouldPreserve:x,getScrollContainer:k,getPositionedParentElement:I,getScrollPosition:W}=Ft({preserveScroll:l});let T=null,P=null;const d=new WeakMap,g=o=>{d.set(o,{parent:o.parentElement,nextSibling:o.nextElementSibling})},m=o=>{const i=d.get(o);return i||{parent:o.parentElement,nextSibling:o.nextElementSibling}},p=new WeakMap,R=new WeakMap;let a=0;const u=o=>{const i=typeof getComputedStyle<"u"?getComputedStyle(o).display:"";return i&&i!=="none"?i:"block"},v=(o,i)=>{i.visibleDisplay=o.style.getPropertyValue("display"),i.computedDisplay=u(o)},w=(o,i)=>{if(R.get(o)!==i)return;R.delete(o);const r=p.get(o);r&&(r.savedCss!==null&&(o.style.cssText=r.savedCss,r.savedCss=null),r.intent==="hidden"?r.vis.setDisplay("none",!0):r.visibleDisplay?(r.vis.setDisplay(r.visibleDisplay,!1),v(o,r)):(r.vis.setDisplay(null),v(o,r)))},S=(o,i,r,h,L)=>{const M=h.element,D=L.element,H=(h.mode??"unmount")==="hidden",{parent:q,nextSibling:Q}=h.parent?{parent:h.parent,nextSibling:h.nextSibling}:m(M),V=_(i,r),tt={scrollOffset:V,from:{scroll:W(i)},to:{scroll:W(r)},get scrollingElement(){return k()||document.documentElement},get positionedParent(){return I()}};let C;if(H){C=M,C.style.top=`${-1*((V==null?void 0:V.y)??0)}px`;const N=p.get(D);N&&N.savedCss===null&&(N.savedCss=D.style.cssText)}else C=M.cloneNode(!0),C.setAttribute("data-ssgoi-clone",""),Lt(C,tt);x(i)||E(i);const U=H?++a:0;H&&(R.set(D,U),R.set(M,U));const ut=Promise.resolve(C),dt=Promise.resolve(D),ft=[],Pt={from:ut,to:dt,context:tt,createElement:((N,et="div")=>{const K=document.createElement(et);return K.setAttribute("data-ssgoi-id",N),ft.push(K),K})},Ct=Promise.resolve(o.prepare?o.prepare(Pt):{});kt({from:ut,to:dt,extras:Ct}).then(({from:N,to:et,extras:K})=>{!H&&q&&(Q&&q.contains(Q)?q.insertBefore(C,Q):q.appendChild(C));const nt=o.animation({from:N,to:et,context:tt,...K}),st=nt.onComplete;nt.onComplete=()=>{st==null||st(),H?(w(M,U),w(D,U)):C.parentElement&&C.parentElement.removeChild(C);for(const ot of ft)ot.parentElement&&ot.parentElement.removeChild(ot)},f.attach(nt)})},A=(o,i)=>{const r=b.isSwipeBack();c.trigger(o,i),c.get(i).then(h=>{if(i==="in"&&b.onPageEnter(),!h)return;if(r){i==="out"&&h.from&&!x(h.from)&&E(h.from),T=null,P=null;return}if(i!=="in")return;const{from:L,to:M}=n(h.from,h.to),D=Ht(L,M,y),J=T,H=P;T=null,P=null,!(!D||!J||!H)&&S(D,L,M,J,H)})},F=(o,i)=>{const r=p.get(o);if(!r)return;const h=r.intent==="hidden";if(r.intent="hidden",r.savedCss===null&&(r.savedCss=o.style.cssText),r.vis.setDisplay(r.computedDisplay||"block",!0),o.style.position="absolute",o.style.width="100%",o.style.left="0",h)return;const L=m(o);T={element:o,parent:L.parent,nextSibling:L.nextSibling,mode:"hidden"};const M=o.getAttribute("data-ssgoi-transition")??i;A(M,"out")},Rt=(o,i)=>{const r=p.get(o);if(!r||r.intent==="visible")return;r.intent="visible",v(o,r),r.savedCss!==null&&(o.style.cssText=r.savedCss,r.visibleDisplay?r.vis.setDisplay(r.visibleDisplay,!1):r.vis.setDisplay(null)),O(o,i),P={element:o,parent:o.parentElement,nextSibling:o.nextElementSibling};const h=o.getAttribute("data-ssgoi-transition")??i;A(h,"in")},At=(o,i)=>{const r=p.get(o);if(r&&(r.vis.stop(),p.delete(o),R.delete(o),r.intent==="hidden")){(T==null?void 0:T.element)===o&&(T=null),(P==null?void 0:P.element)===o&&(P=null);return}const h=m(o);T={element:o,parent:h.parent,nextSibling:h.nextSibling,mode:"unmount"};const L=o.getAttribute("data-ssgoi-transition")??i;A(L,"out")},lt=new WeakSet,ct=(o,i)=>{if(lt.has(i))return;lt.add(i),g(i);const r=Vt(i,{onHide:()=>F(i,o),onShow:()=>Rt(i,o)}),h={vis:r,savedCss:null,intent:r.isHidden?"hidden":"visible",visibleDisplay:"",computedDisplay:"block"};p.set(i,h),r.isHidden||(v(i,h),O(i,o),P={element:i,parent:i.parentElement,nextSibling:i.nextElementSibling},A(o,"in")),$t(i,()=>At(i,o))},at=new Map;return{register:ct,refFor:o=>{let i=at.get(o);return i||(i=r=>{r&&ct(o,r)},at.set(o,i)),i}}}const Tt="data-ssgoi-root",Gt=`[${Tt}]`,rt="data-ssgoi-transition",bt=`[${rt}]`,jt="[data-ssgoi-clone]";function Zt(){return typeof MutationObserver<"u"&&typeof HTMLElement<"u"&&typeof Node<"u"}function Jt(t){return t.nodeType===Node.ELEMENT_NODE}function Qt(t){return t instanceof HTMLElement}function te(t,s){if(!Zt())return()=>{};t.setAttribute(Tt,"");const e=c=>c.closest(Gt)===t,n=c=>{if(!Qt(c)||!e(c)||c.closest(jt))return;const y=c.getAttribute(rt);y!==null&&s.register(y,c)},l=c=>{if(Jt(c)){c.matches(bt)&&n(c);for(const y of c.querySelectorAll(bt))n(y)}},f=new MutationObserver(c=>{for(const y of c){if(y.type==="attributes"){n(y.target);continue}for(const b of y.addedNodes)l(b)}});return f.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[rt]}),l(t),()=>f.disconnect()}exports.Animation=Z.Animation;exports.MultiAnimation=Z.MultiAnimation;exports.WebAnimation=Z.WebAnimation;exports.HostAnimation=Et;exports.createSggoiTransitionContext=Yt;exports.observeSsgoiTransitions=te;
|
|
1
|
+
"use strict";var Mt=Object.defineProperty;var xt=(t,s,e)=>s in t?Mt(t,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[s]=e;var B=(t,s,e)=>xt(t,typeof s!="symbol"?s+"":s,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("./multi-animation-uzEnQnrG.cjs");class Et extends Z.Animation{constructor(){super(...arguments);B(this,"child",null);B(this,"_state","idle");B(this,"_settled",!1);B(this,"listeners",new Set)}attach(e){const n=this.child;if(this.child=e,this._settled=!1,n){const c=n.getPose();n.complete(),e.matchInto(c)}e.playbackRate=this.playbackRate;const l=e.onComplete;e.onComplete=()=>{l==null||l(),this.child===e&&(this.child=null,this._state="idle",this._settled=!0),this.notify()};const f=e.onUpdate;e.onUpdate=c=>{var y;f==null||f(c),(y=this.onUpdate)==null||y.call(this,c),this.notify()},this._state==="paused"?e.pause():this._state==="reversing"?e.reverse():(this._state="playing",e.play()),this.notify()}play(){var e;this._state="playing",this._settled=!1,(e=this.child)==null||e.play(),this.notify()}reverse(){var e;this._state="reversing",this._settled=!1,(e=this.child)==null||e.reverse(),this.notify()}pause(){var e;this._state="paused",(e=this.child)==null||e.pause(),this.notify()}complete(){var e;(e=this.child)==null||e.complete(),this.notify()}get isAnimating(){var e;return((e=this.child)==null?void 0:e.isAnimating)??!1}get isPaused(){return this._state==="paused"}get isComplete(){return this._settled&&!this.child}get isReversing(){var e;return((e=this.child)==null?void 0:e.isReversing)??this._state==="reversing"}get progress(){var e;return((e=this.child)==null?void 0:e.progress)??0}findTimeForProgress(e){var n;return((n=this.child)==null?void 0:n.findTimeForProgress(e))??null}get playbackRate(){return super.playbackRate}set playbackRate(e){super.playbackRate=e,this.child&&(this.child.playbackRate=e),this.notify()}getPose(){var e;return((e=this.child)==null?void 0:e.getPose())??[]}getTimeline(){var e;return((e=this.child)==null?void 0:e.getTimeline())??[]}matchInto(e){var n;(n=this.child)==null||n.matchInto(e)}get activeChild(){return this.child}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}}const Lt=(t,s)=>{var e;t.style.position="absolute",t.style.width="100%",t.style.top=`${-1*(((e=s==null?void 0:s.scrollOffset)==null?void 0:e.y)??0)}px`,t.style.left="0"},ht=new Set(["auto","scroll","overlay"]),Ot=t=>{let s=t.parentElement;for(;s&&s!==document.body;){const e=window.getComputedStyle(s);if(ht.has(e.overflowY)||ht.has(e.overflowX))return s;s=s.parentElement}return document.documentElement},_t=t=>{let s=t.parentElement;for(;s&&s!==document.body;){const e=window.getComputedStyle(s).position;if(e==="relative"||e==="absolute"||e==="fixed"||e==="sticky")return s;s=s.parentElement}return document.body};function kt(t){const s=Object.keys(t);return Promise.all(s.map(e=>t[e])).then(e=>{const n={};return s.forEach((l,f)=>{n[l]=e[f]}),n})}function Dt(t){const s=t.filter(e=>e.symmetric).map(e=>({from:e.to,to:e.from,transition:e.transition}));return[...t,...s]}function X(t,s){if(s==="*")return!0;if(s.endsWith("/*")){const e=s.slice(0,-1);return t.startsWith(e)&&t.length>e.length}return t===s}function Ht(t,s,e){for(const n of e)if(X(t,n.from)&&X(s,n.to))return n.transition;for(const n of e)if((n.from==="*"||X(t,n.from))&&(n.to==="*"||X(s,n.to)))return n.transition;return null}const Nt=768,It=10,Wt=10;function Ft(t={}){const{preserveScroll:s=a=>a}=t,e=typeof s=="function"?s:()=>s;let n=null,l=!1,f=!1;const c=()=>{const a=(n==null?void 0:n.clientWidth)??0,u=a>0?a:typeof window<"u"?window.innerWidth:0;return u>0&&u<Nt},y=()=>(f||(l=c(),f=!0),l),b=a=>{var S;const u=e(y());if(u===!1)return{preserves:!1,shared:!1,storageKey:`path:${a}`};if(u===!0)return{preserves:!0,shared:!1,storageKey:`path:${a}`};const v=((S=u.exclude)==null?void 0:S.some(A=>X(a,A)))??!1,w=!v&&!!u.key;return{preserves:!v,shared:w,storageKey:w?`shared:${u.key}`:`path:${a}`}},O=a=>b(a).preserves;let _=null;const E=new Map;let x=null,k=!1,I=0;const W=()=>{n&&x&&!k&&E.set(b(x).storageKey,{x:n.scrollLeft,y:n.scrollTop})},T=a=>{if(!n)return;const u=b(a);if(u.preserves&&u.shared&&!E.has(u.storageKey))return;const v=u.preserves&&E.has(u.storageKey)?E.get(u.storageKey):{x:0,y:0};let w=0;const S=()=>{if(!n)return;n.scrollTo({top:v.y,left:v.x}),!(Math.abs(n.scrollTop-v.y)<1&&Math.abs(n.scrollLeft-v.x)<1)&&w<It&&(w++,requestAnimationFrame(S))};requestAnimationFrame(S)};return{initializeContext:(a,u)=>{k=!0;const v=++I;_=a,n||(n=Ot(a),l=c(),f=!0,typeof ResizeObserver<"u"&&new ResizeObserver(()=>{l=c()}).observe(n),(n===document.documentElement?window:n).addEventListener("scroll",W,{passive:!0})),x=u,T(u);let w=0;const S=()=>{v===I&&(w++,w>=Wt?k=!1:requestAnimationFrame(S))};requestAnimationFrame(S)},calculateScrollOffset:(a,u)=>{const v=a?b(a).storageKey:null,w=v&&E.has(v)?E.get(v):{x:0,y:0},S=u?b(u):null,A=S!=null&&S.preserves?S.storageKey:null,F=A&&E.has(A)?E.get(A):{x:0,y:0};return{x:-F.x+w.x,y:-F.y+w.y}},evictScrollPosition:a=>{E.delete(b(a).storageKey)},shouldPreserve:O,getScrollContainer:()=>n,getPositionedParentElement:()=>_?_t(_):document.body,getScrollPosition:a=>{const u=a?b(a).storageKey:null;return u&&E.has(u)?E.get(u):{x:0,y:0}}}}const yt=30,mt=8,pt=1.2,gt=30,Kt=600;function Bt(){let t=null,s=!1,e=!1,n=null,l=null,f=!1;const c=(d,g)=>{for(let m=0;m<d.length;m++){const p=d.item(m);if(p&&p.identifier===g)return p}return null},y=()=>{n!==null&&(clearTimeout(n),n=null)},b=()=>{l!==null&&(clearTimeout(l),l=null)},O=()=>{s=!0,e=!0,y(),b(),n=setTimeout(()=>{s=!1,e=!1,n=null},Kt)},_=d=>{if(d.touches.length!==1){t=null;return}const g=d.touches.item(0);if(!g){t=null;return}const m=window.innerWidth,p=g.clientX<=yt,R=g.clientX>=m-yt;if(!p&&!R){t=null;return}t={identifier:g.identifier,startX:g.clientX,startY:g.clientY,fromLeftEdge:p,moved:!1}},E=d=>{if(!t)return;if(d.touches.length!==1){t=null;return}const g=c(d.touches,t.identifier);if(!g){t=null;return}const m=g.clientX-t.startX,p=g.clientY-t.startY,R=Math.abs(m),a=Math.abs(p);if(a>mt&&a>R*pt){t=null;return}const u=t.fromLeftEdge?m>0:m<0;R>mt&&R>a*pt&&u&&(t.moved=!0)},x=d=>{if(!t)return;const g=c(d.changedTouches,t.identifier);if(!g){t=null;return}const m=g.clientX-t.startX,p=t.fromLeftEdge?m>0:m<0;if(t.moved&&p&&Math.abs(m)>=gt){O(),t=null;return}t.moved&&Math.abs(m)>=gt&&O(),t=null},k=()=>{t&&(t.moved&&O(),t=null)};return{initialize:()=>{if(typeof window>"u"||f)return;f=!0;const d={passive:!0,capture:!0};window.addEventListener("touchstart",_,d),window.addEventListener("touchmove",E,d),window.addEventListener("touchend",x,d),window.addEventListener("touchcancel",k,d)},destroy:()=>{if(typeof window>"u"||!f)return;f=!1;const d={capture:!0};window.removeEventListener("touchstart",_,d),window.removeEventListener("touchmove",E,d),window.removeEventListener("touchend",x,d),window.removeEventListener("touchcancel",k,d),y(),b(),t=null,s=!1,e=!1},isSwipeBack:()=>{const d=s||e;return d&&y(),d},onPageEnter:()=>{s=!1,y(),b(),l=setTimeout(()=>{e=!1,l=null},0)}}}function Xt(){let t=null;function s(){var n,l;t&&((n=t.outResolve)==null||n.call(t,null),(l=t.inResolve)==null||l.call(t,null),t=null)}function e(){if(t!=null&&t.from&&(t!=null&&t.to)&&(t!=null&&t.outResolve)&&(t!=null&&t.inResolve)){if(t.from===t.to){s();return}const n={from:t.from,to:t.to};t.outResolve(n),t.inResolve(n),t=null}}return{trigger(n,l){var c;l==="out"&&(t==null?void 0:t.to)===n&&!t.from&&((c=t.inResolve)==null||c.call(t,null),t={}),t&&(l==="out"&&t.from&&t.from!==n||l==="in"&&t.to&&t.to!==n)&&s(),t||(t={}),l==="out"?t.from=n:t.to=n},get(n){return new Promise(l=>{t||(t={}),n==="out"?t.outResolve=l:t.inResolve=l,e()})}}}const $=new Map;let Y=null,vt=!1;function St(t){if(t instanceof HTMLElement&&$.has(t)&&!t.isConnected){const s=$.get(t);$.delete(t),queueMicrotask(s)}for(const s of Array.from(t.childNodes))St(s)}function zt(){if(vt||typeof document>"u")return;vt=!0,Y=new MutationObserver(s=>{for(const e of s)for(const n of Array.from(e.removedNodes))St(n)});const t=()=>{Y==null||Y.observe(document.body,{childList:!0,subtree:!0})};document.body?t():document.addEventListener("DOMContentLoaded",t,{once:!0})}function $t(t,s){return zt(),$.set(t,s),()=>{$.delete(t)}}const it=new WeakMap;let G=null;const j="none !important";function z(t){const s=t.style.getPropertyValue("display");return t.style.getPropertyPriority("display")?`${s} !important`:s}function qt(){return G||(G=new MutationObserver(t=>{for(const s of t){const e=s.target,n=it.get(e);if(!n)continue;const l=z(e);l!==n.accounted&&(n.accounted=l,l===j?(n.reactHidden=!0,n.onHide()):l!=="none"&&n.reactHidden&&(n.reactHidden=!1,n.onShow()))}}),G)}function Vt(t,s){const e=z(t),n={accounted:e,reactHidden:e===j,onHide:s.onHide,onShow:s.onShow};return it.set(t,n),qt().observe(t,{attributes:!0,attributeFilter:["style"]}),{get isHidden(){return z(t)===j},setDisplay(l,f=!1){l===null?t.style.removeProperty("display"):t.style.setProperty("display",l,f?"important":""),n.accounted=z(t)},sync(){n.accounted=z(t),n.reactHidden=n.accounted===j},stop(){it.delete(t)}}}function Ut(t){return Array.isArray(t)}function wt(t){const s=[];for(const e of t)Ut(e)?s.push(...wt(e)):s.push(e);return s}function Yt(t,s={}){const{transitions:e=[],middleware:n=(o,i)=>({from:o,to:i}),preserveScroll:l=o=>o}=t,f=s.host??new Et,c=Xt(),y=Dt(wt(e)),b=Bt();b.initialize();const{initializeContext:O,calculateScrollOffset:_,evictScrollPosition:E,shouldPreserve:x,getScrollContainer:k,getPositionedParentElement:I,getScrollPosition:W}=Ft({preserveScroll:l});let T=null,P=null;const d=new WeakMap,g=o=>{d.set(o,{parent:o.parentElement,nextSibling:o.nextElementSibling})},m=o=>{const i=d.get(o);return i||{parent:o.parentElement,nextSibling:o.nextElementSibling}},p=new WeakMap,R=new WeakMap;let a=0;const u=o=>{const i=typeof getComputedStyle<"u"?getComputedStyle(o).display:"";return i&&i!=="none"?i:"block"},v=(o,i)=>{i.visibleDisplay=o.style.getPropertyValue("display"),i.computedDisplay=u(o)},w=(o,i)=>{if(R.get(o)!==i)return;R.delete(o);const r=p.get(o);r&&(r.savedCss!==null&&(o.style.cssText=r.savedCss,r.savedCss=null),r.intent==="hidden"?r.vis.setDisplay("none",!0):r.visibleDisplay?(r.vis.setDisplay(r.visibleDisplay,!1),v(o,r)):(r.vis.setDisplay(null),v(o,r)))},S=(o,i,r,h,L)=>{const M=h.element,D=L.element,H=(h.mode??"unmount")==="hidden",{parent:q,nextSibling:Q}=h.parent?{parent:h.parent,nextSibling:h.nextSibling}:m(M),V=_(i,r),tt={scrollOffset:V,from:{scroll:W(i)},to:{scroll:W(r)},get scrollingElement(){return k()||document.documentElement},get positionedParent(){return I()}};let C;if(H){C=M,C.style.top=`${-1*((V==null?void 0:V.y)??0)}px`;const N=p.get(D);N&&N.savedCss===null&&(N.savedCss=D.style.cssText)}else C=M.cloneNode(!0),C.setAttribute("data-ssgoi-clone",""),Lt(C,tt);x(i)||E(i);const U=H?++a:0;H&&(R.set(D,U),R.set(M,U));const ut=Promise.resolve(C),dt=Promise.resolve(D),ft=[],Pt={from:ut,to:dt,context:tt,createElement:((N,et="div")=>{const K=document.createElement(et);return K.setAttribute("data-ssgoi-id",N),ft.push(K),K})},Ct=Promise.resolve(o.prepare?o.prepare(Pt):{});kt({from:ut,to:dt,extras:Ct}).then(({from:N,to:et,extras:K})=>{!H&&q&&(Q&&q.contains(Q)?q.insertBefore(C,Q):q.appendChild(C));const nt=o.animation({from:N,to:et,context:tt,...K}),st=nt.onComplete;nt.onComplete=()=>{st==null||st(),H?(w(M,U),w(D,U)):C.parentElement&&C.parentElement.removeChild(C);for(const ot of ft)ot.parentElement&&ot.parentElement.removeChild(ot)},f.attach(nt)})},A=(o,i)=>{const r=b.isSwipeBack();c.trigger(o,i),c.get(i).then(h=>{if(i==="in"&&b.onPageEnter(),!h)return;if(r){i==="out"&&h.from&&!x(h.from)&&E(h.from),T=null,P=null;return}if(i!=="in")return;const{from:L,to:M}=n(h.from,h.to),D=Ht(L,M,y),J=T,H=P;T=null,P=null,!(!D||!J||!H)&&S(D,L,M,J,H)})},F=(o,i)=>{const r=p.get(o);if(!r)return;const h=r.intent==="hidden";if(r.intent="hidden",r.savedCss===null&&(r.savedCss=o.style.cssText),r.vis.setDisplay(r.computedDisplay||"block",!0),o.style.position="absolute",o.style.width="100%",o.style.left="0",h)return;const L=m(o);T={element:o,parent:L.parent,nextSibling:L.nextSibling,mode:"hidden"};const M=o.getAttribute("data-ssgoi-transition")??i;A(M,"out")},Rt=(o,i)=>{const r=p.get(o);if(!r||r.intent==="visible")return;r.intent="visible",v(o,r),r.savedCss!==null&&(o.style.cssText=r.savedCss,r.visibleDisplay?r.vis.setDisplay(r.visibleDisplay,!1):r.vis.setDisplay(null)),O(o,i),P={element:o,parent:o.parentElement,nextSibling:o.nextElementSibling};const h=o.getAttribute("data-ssgoi-transition")??i;A(h,"in")},At=(o,i)=>{const r=p.get(o);if(r&&(r.vis.stop(),p.delete(o),R.delete(o),r.intent==="hidden")){(T==null?void 0:T.element)===o&&(T=null),(P==null?void 0:P.element)===o&&(P=null);return}const h=m(o);T={element:o,parent:h.parent,nextSibling:h.nextSibling,mode:"unmount"};const L=o.getAttribute("data-ssgoi-transition")??i;A(L,"out")},lt=new WeakSet,ct=(o,i)=>{if(lt.has(i))return;lt.add(i),g(i);const r=Vt(i,{onHide:()=>F(i,o),onShow:()=>Rt(i,o)}),h={vis:r,savedCss:null,intent:r.isHidden?"hidden":"visible",visibleDisplay:"",computedDisplay:"block"};p.set(i,h),r.isHidden||(v(i,h),O(i,o),P={element:i,parent:i.parentElement,nextSibling:i.nextElementSibling},A(o,"in")),$t(i,()=>At(i,o))},at=new Map;return{register:ct,refFor:o=>{let i=at.get(o);return i||(i=r=>{r&&ct(o,r)},at.set(o,i)),i}}}const Tt="data-ssgoi-root",Gt=`[${Tt}]`,rt="data-ssgoi-transition",bt=`[${rt}]`,jt="[data-ssgoi-clone]";function Zt(){return typeof MutationObserver<"u"&&typeof HTMLElement<"u"&&typeof Node<"u"}function Jt(t){return t.nodeType===Node.ELEMENT_NODE}function Qt(t){return t instanceof HTMLElement}function te(t,s){if(!Zt())return()=>{};t.setAttribute(Tt,"");const e=c=>c.closest(Gt)===t,n=c=>{if(!Qt(c)||!e(c)||c.closest(jt))return;const y=c.getAttribute(rt);y!==null&&s.register(y,c)},l=c=>{if(Jt(c)){c.matches(bt)&&n(c);for(const y of c.querySelectorAll(bt))n(y)}},f=new MutationObserver(c=>{for(const y of c){if(y.type==="attributes"){n(y.target);continue}for(const b of y.addedNodes)l(b)}});return f.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[rt]}),l(t),()=>f.disconnect()}exports.Animation=Z.Animation;exports.MultiAnimation=Z.MultiAnimation;exports.WebAnimation=Z.WebAnimation;exports.HostAnimation=Et;exports.createSggoiTransitionContext=Yt;exports.observeSsgoiTransitions=te;
|
package/dist/internal.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var At = Object.defineProperty;
|
|
2
2
|
var Ct = (t, s, e) => s in t ? At(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
|
|
3
3
|
var B = (t, s, e) => Ct(t, typeof s != "symbol" ? s + "" : s, e);
|
|
4
|
-
import { A as xt } from "./multi-animation-
|
|
5
|
-
import { M as le, W as ce } from "./multi-animation-
|
|
4
|
+
import { A as xt } from "./multi-animation-Ch5rI3rB.js";
|
|
5
|
+
import { M as le, W as ce } from "./multi-animation-Ch5rI3rB.js";
|
|
6
6
|
class Mt extends xt {
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
@@ -55,6 +55,16 @@ class R extends d {
|
|
|
55
55
|
var t;
|
|
56
56
|
this.clearWaapi(), this.running = !1, this.paused = !1, this.currentValue = this.upperBound, this.currentVelocity = 0, this.applyStyleAt(this.currentValue), this.settled = !0, (t = this.onComplete) == null || t.call(this);
|
|
57
57
|
}
|
|
58
|
+
/**
|
|
59
|
+
* Drop the WAAPI forwards-fill after the run has settled, letting inline
|
|
60
|
+
* styles govern the resting visual. Call only from `onComplete` (the run is
|
|
61
|
+
* already finished) — otherwise it cancels mid-flight. Unlike `complete()`,
|
|
62
|
+
* it writes no final frame, so a caller can reset the element to its natural
|
|
63
|
+
* state without the lingering fill clobbering it.
|
|
64
|
+
*/
|
|
65
|
+
releaseFill() {
|
|
66
|
+
this.clearWaapi();
|
|
67
|
+
}
|
|
58
68
|
get isAnimating() {
|
|
59
69
|
return this.running;
|
|
60
70
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var f=Object.defineProperty;var g=(r,a,t)=>a in r?f(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t;var n=(r,a,t)=>g(r,typeof a!="symbol"?a+"":a,t);class d{constructor(){n(this,"_playbackRate",1);n(this,"onUpdate");n(this,"onComplete")}get playbackRate(){return this._playbackRate}set playbackRate(a){this._playbackRate=a}}const y=.01,T=.01,m=.05,c=1e3/60;class v extends d{constructor(t){super();n(this,"element");n(this,"integrator");n(this,"styleFn");n(this,"lowerBound");n(this,"upperBound");n(this,"currentValue");n(this,"currentVelocity",0);n(this,"frames",[]);n(this,"waapi",null);n(this,"startTime",0);n(this,"running",!1);n(this,"paused",!1);n(this,"settled",!1);n(this,"reversing",!1);this.element=t.element,this.integrator=t.integrator,this.styleFn=t.style,this.lowerBound=t.lowerBound??0,this.upperBound=t.upperBound??1,this.currentValue=this.lowerBound,this.onUpdate=t.onUpdate,this.onComplete=t.onComplete}play(){if(this.reversing=!1,this.paused&&this.waapi){this.paused=!1,this.running=!0,this.waapi.play();return}this.runToward(this.upperBound)}reverse(){this.reversing=!0,this.runToward(this.lowerBound)}pause(){var t;this.running&&(this.captureLiveState(),(t=this.waapi)==null||t.pause(),this.running=!1,this.paused=!0)}complete(){var t;this.clearWaapi(),this.running=!1,this.paused=!1,this.currentValue=this.upperBound,this.currentVelocity=0,this.applyStyleAt(this.currentValue),this.settled=!0,(t=this.onComplete)==null||t.call(this)}releaseFill(){this.clearWaapi()}get isAnimating(){return this.running}get isPaused(){return this.paused}get isComplete(){return this.settled}get isReversing(){return this.reversing}get progress(){this.running&&this.captureLiveState();const t=this.upperBound-this.lowerBound;if(t===0)return 0;const e=(this.currentValue-this.lowerBound)/t;return e<0?0:e>1?1:e}findTimeForProgress(t){if(this.frames.length<2)return null;const e=this.upperBound-this.lowerBound;if(e===0)return 0;for(const i of this.frames)if((i.position-this.lowerBound)/e>=t)return i.time;return this.frames[this.frames.length-1].time}get playbackRate(){return super.playbackRate}set playbackRate(t){super.playbackRate=t,this.waapi&&(this.waapi.playbackRate=t)}getPose(){return this.running&&this.captureLiveState(),[{element:this.element,value:this.currentValue,velocity:this.currentVelocity}]}getTimeline(){const t=this.frames.map(e=>{const i=e.position,s=this.lowerBound+this.upperBound-i;return{time:e.time,value:e.position,velocity:e.velocity,style:this.styleFn(i,s)}});return[{element:this.element,frames:t}]}matchInto(t){const e=t.find(i=>i.element===this.element);e&&(this.currentValue=e.value,this.currentVelocity=e.velocity)}runToward(t){var h;if(this.running&&this.captureLiveState(),this.clearWaapi(),this.running=!1,this.paused=!1,this.settled=!1,this.frames=S(this.integrator,this.currentValue,t,this.currentVelocity),this.frames.length===0){this.currentValue=t,this.currentVelocity=0,this.applyStyleAt(t),this.settled=!0,(h=this.onComplete)==null||h.call(this);return}const e=this.frames.map(o=>{const u=o.position,p=this.lowerBound+this.upperBound-u;return this.styleFn(u,p)}),i=e[0];if(i)for(const o of Object.keys(i))this.element.style[o]="";const s=this.frames[this.frames.length-1],l=s.time;this.waapi=this.element.animate(e,{duration:l,fill:"forwards",easing:"linear",composite:"replace"}),this.waapi.playbackRate=this.playbackRate,this.startTime=performance.now(),this.running=!0,this.waapi.onfinish=()=>{var o;this.running&&(this.running=!1,this.settled=!0,this.currentValue=s.position,this.currentVelocity=0,(o=this.onComplete)==null||o.call(this))}}clearWaapi(){var t;(t=this.waapi)==null||t.cancel(),this.waapi=null}captureLiveState(){if(this.frames.length===0)return;const t=performance.now()-this.startTime,{position:e,velocity:i}=R(this.frames,t);this.currentValue=e,this.currentVelocity=i}applyStyleAt(t){const e=this.lowerBound+this.upperBound-t,i=this.styleFn(t,e);for(const[s,l]of Object.entries(i))this.element.style[s]=typeof l=="number"?String(l):l}}function S(r,a,t,e){if(a===t&&e===0)return[];const i=600;let s={position:a,velocity:e},l=0;const h=[];for(let o=0;o<i;o++){const u=o*c;if(h.push({time:u,position:s.position,velocity:s.velocity}),s=r.step(s,t,c/1e3),r.isSettled(s,t)){if(l+=c/1e3,l>=m){h.push({time:(o+1)*c,position:t,velocity:0});break}}else l=0}return h}function R(r,a){if(r.length===0)return{position:0,velocity:0};const t=r[0],e=r[r.length-1];if(a<=0)return{position:t.position,velocity:t.velocity};if(a>=e.time)return{position:e.position,velocity:e.velocity};let i=0,s=r.length-1;for(;i<s-1;){const u=i+s>>1;r[u].time<=a?i=u:s=u}const l=r[i],h=r[s],o=(a-l.time)/(h.time-l.time);return{position:l.position+(h.position-l.position)*o,velocity:l.velocity+(h.velocity-l.velocity)*o}}class w extends d{constructor(t,e={}){super();n(this,"children");n(this,"startAt");n(this,"pendingComplete",0);n(this,"running",!1);n(this,"pendingStartTimers",[]);this.children=t,(e.mode??"parallel")==="sequence"?this.startAt=t.map((i,s)=>s===0?0:1):this.startAt=e.startAt??[]}play(){this.startRun("play")}reverse(){this.startRun("reverse")}pause(){this.running=!1,this.clearPendingStartTimers();for(const t of this.children)t.pause()}complete(){var t;this.running=!1,this.clearPendingStartTimers();for(const e of this.children)e.complete();(t=this.onComplete)==null||t.call(this)}get progress(){if(this.children.length===0)return 0;let t=0;for(const e of this.children)t+=e.progress;return t/this.children.length}getPose(){return this.children.flatMap(t=>t.getPose())}getTimeline(){return this.children.flatMap(t=>t.getTimeline())}matchInto(t){}get isAnimating(){return this.children.some(t=>t.isAnimating)}get isPaused(){return this.children.some(t=>t.isPaused)&&this.children.every(t=>t.isPaused||t.isComplete)}get isComplete(){return this.children.every(t=>t.isComplete)}get isReversing(){return this.children.some(t=>t.isReversing)}get playbackRate(){return super.playbackRate}set playbackRate(t){super.playbackRate=t;for(const e of this.children)e.playbackRate=t}startRun(t){if(this.running&&this.pause(),this.running=!0,this.pendingComplete=this.children.length,this.pendingComplete===0){this.handleFinished();return}for(const e of this.children){const i=e.onComplete;e.onComplete=()=>{i==null||i(),this.handleChildComplete()}}this.scheduleStart(0,t)}scheduleStart(t,e){if(!this.running||t>=this.children.length)return;this.children[t][e]();const i=t+1;if(i>=this.children.length)return;const s=this.startAt[i];if(s===void 0||s<=0){this.scheduleStart(i,e);return}const l=this.children[t].findTimeForProgress(s);if(l===null||l<=0){this.scheduleStart(i,e);return}const h=Math.abs(this.playbackRate)||1,o=l/h,u=setTimeout(()=>{this.pendingStartTimers=this.pendingStartTimers.filter(p=>p!==u),this.running&&this.scheduleStart(i,e)},o);this.pendingStartTimers.push(u)}clearPendingStartTimers(){for(const t of this.pendingStartTimers)clearTimeout(t);this.pendingStartTimers=[]}handleChildComplete(){this.pendingComplete--,this.pendingComplete<=0&&this.handleFinished()}handleFinished(){var t;this.running=!1,this.clearPendingStartTimers(),(t=this.onComplete)==null||t.call(this)}findTimeForProgress(t){return null}}exports.Animation=d;exports.MultiAnimation=w;exports.POSITION_THRESHOLD=y;exports.SETTLE_THRESHOLD=m;exports.VELOCITY_THRESHOLD=T;exports.WebAnimation=v;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/lib/transitions/zoom/transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAU/D,OAAO,KAAK,EACV,qBAAqB,EAGrB,UAAU,EAKX,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAuS5E,eAAO,MAAM,IAAI,GACf,SAAS,qBAAqB,KAC7B,gBAAgB,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/lib/transitions/zoom/transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAU/D,OAAO,KAAK,EACV,qBAAqB,EAGrB,UAAU,EAKX,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAuS5E,eAAO,MAAM,IAAI,GACf,SAAS,qBAAqB,KAC7B,gBAAgB,CAAC,UAAU,CAqG7B,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Viewport-accurate counterpart to {@link getRect}: `el`'s position relative to
|
|
3
|
+
* `root`, measured with getBoundingClientRect. Same `(root, el)` shape and
|
|
4
|
+
* meaning as `getRect`, but because gBCR is the on-screen box it REFLECTS any
|
|
5
|
+
* transform / nested-scroll BETWEEN `root` and `el` — e.g. a translate-based
|
|
6
|
+
* horizontal scroller — which is the position the zoom tile must animate from.
|
|
7
|
+
* `getRect` walks the offsetParent chain and ignores transforms, so the
|
|
8
|
+
* page-edge transitions (film, and sheet/jaemin/axis via getViewportRect) keep
|
|
9
|
+
* using it.
|
|
10
|
+
*
|
|
11
|
+
* Safety net: it also normalizes out any scale on `root` itself. The completion
|
|
12
|
+
* cleanup releases each animation's WAAPI fill, so a SETTLED page is back at its
|
|
13
|
+
* natural transform before the next transition measures it — but a page can
|
|
14
|
+
* still be mid-scale when measured by an INTERRUPTED transition (a back-tap
|
|
15
|
+
* before the previous one settles): `buildInput` runs before the orchestrator
|
|
16
|
+
* completes the prior transition, so the zoom background tween may still be
|
|
17
|
+
* scaling the page. gBCR is post-transform while `offsetWidth/Height` is the
|
|
18
|
+
* untransformed layout size, so their ratio is the live scale; dividing returns
|
|
19
|
+
* the rect in `root`'s layout space — the space the zoom translate operates in.
|
|
20
|
+
* An in-page translate (a scrolled row) is scaled by the same factor and so
|
|
21
|
+
* survives the division. (No-op when `root` is at scale 1.)
|
|
22
|
+
*
|
|
23
|
+
* Page-level scroll OUTSIDE `root` cancels in the `el − root` subtraction; the
|
|
24
|
+
* per-page scroll delta is reintroduced separately via context.scrollOffset.
|
|
25
|
+
*/
|
|
26
|
+
export declare function getClientRect(root: HTMLElement, el: HTMLElement): DOMRect;
|
|
27
|
+
//# sourceMappingURL=get-client-rect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-client-rect.d.ts","sourceRoot":"","sources":["../../src/lib/utils/get-client-rect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAWzE"}
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { getScrollingElement } from './get-scrolling-element';
|
|
|
3
3
|
export { getPositionedParent } from './get-positioned-parent';
|
|
4
4
|
export { sleep } from './sleep';
|
|
5
5
|
export { getRect } from './get-rect';
|
|
6
|
+
export { getClientRect } from './get-client-rect';
|
|
6
7
|
export { getViewportRect } from './get-viewport-rect';
|
|
7
8
|
export { round, floor, ceil, toFixed } from './number';
|
|
8
9
|
export { withResolvers } from './with-resolvers';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var f=Object.defineProperty;var g=(r,a,t)=>a in r?f(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t;var n=(r,a,t)=>g(r,typeof a!="symbol"?a+"":a,t);class d{constructor(){n(this,"_playbackRate",1);n(this,"onUpdate");n(this,"onComplete")}get playbackRate(){return this._playbackRate}set playbackRate(a){this._playbackRate=a}}const y=.01,T=.01,m=.05,c=1e3/60;class v extends d{constructor(t){super();n(this,"element");n(this,"integrator");n(this,"styleFn");n(this,"lowerBound");n(this,"upperBound");n(this,"currentValue");n(this,"currentVelocity",0);n(this,"frames",[]);n(this,"waapi",null);n(this,"startTime",0);n(this,"running",!1);n(this,"paused",!1);n(this,"settled",!1);n(this,"reversing",!1);this.element=t.element,this.integrator=t.integrator,this.styleFn=t.style,this.lowerBound=t.lowerBound??0,this.upperBound=t.upperBound??1,this.currentValue=this.lowerBound,this.onUpdate=t.onUpdate,this.onComplete=t.onComplete}play(){if(this.reversing=!1,this.paused&&this.waapi){this.paused=!1,this.running=!0,this.waapi.play();return}this.runToward(this.upperBound)}reverse(){this.reversing=!0,this.runToward(this.lowerBound)}pause(){var t;this.running&&(this.captureLiveState(),(t=this.waapi)==null||t.pause(),this.running=!1,this.paused=!0)}complete(){var t;this.clearWaapi(),this.running=!1,this.paused=!1,this.currentValue=this.upperBound,this.currentVelocity=0,this.applyStyleAt(this.currentValue),this.settled=!0,(t=this.onComplete)==null||t.call(this)}get isAnimating(){return this.running}get isPaused(){return this.paused}get isComplete(){return this.settled}get isReversing(){return this.reversing}get progress(){this.running&&this.captureLiveState();const t=this.upperBound-this.lowerBound;if(t===0)return 0;const e=(this.currentValue-this.lowerBound)/t;return e<0?0:e>1?1:e}findTimeForProgress(t){if(this.frames.length<2)return null;const e=this.upperBound-this.lowerBound;if(e===0)return 0;for(const i of this.frames)if((i.position-this.lowerBound)/e>=t)return i.time;return this.frames[this.frames.length-1].time}get playbackRate(){return super.playbackRate}set playbackRate(t){super.playbackRate=t,this.waapi&&(this.waapi.playbackRate=t)}getPose(){return this.running&&this.captureLiveState(),[{element:this.element,value:this.currentValue,velocity:this.currentVelocity}]}getTimeline(){const t=this.frames.map(e=>{const i=e.position,s=this.lowerBound+this.upperBound-i;return{time:e.time,value:e.position,velocity:e.velocity,style:this.styleFn(i,s)}});return[{element:this.element,frames:t}]}matchInto(t){const e=t.find(i=>i.element===this.element);e&&(this.currentValue=e.value,this.currentVelocity=e.velocity)}runToward(t){var h;if(this.running&&this.captureLiveState(),this.clearWaapi(),this.running=!1,this.paused=!1,this.settled=!1,this.frames=S(this.integrator,this.currentValue,t,this.currentVelocity),this.frames.length===0){this.currentValue=t,this.currentVelocity=0,this.applyStyleAt(t),this.settled=!0,(h=this.onComplete)==null||h.call(this);return}const e=this.frames.map(o=>{const u=o.position,p=this.lowerBound+this.upperBound-u;return this.styleFn(u,p)}),i=e[0];if(i)for(const o of Object.keys(i))this.element.style[o]="";const s=this.frames[this.frames.length-1],l=s.time;this.waapi=this.element.animate(e,{duration:l,fill:"forwards",easing:"linear",composite:"replace"}),this.waapi.playbackRate=this.playbackRate,this.startTime=performance.now(),this.running=!0,this.waapi.onfinish=()=>{var o;this.running&&(this.running=!1,this.settled=!0,this.currentValue=s.position,this.currentVelocity=0,(o=this.onComplete)==null||o.call(this))}}clearWaapi(){var t;(t=this.waapi)==null||t.cancel(),this.waapi=null}captureLiveState(){if(this.frames.length===0)return;const t=performance.now()-this.startTime,{position:e,velocity:i}=R(this.frames,t);this.currentValue=e,this.currentVelocity=i}applyStyleAt(t){const e=this.lowerBound+this.upperBound-t,i=this.styleFn(t,e);for(const[s,l]of Object.entries(i))this.element.style[s]=typeof l=="number"?String(l):l}}function S(r,a,t,e){if(a===t&&e===0)return[];const i=600;let s={position:a,velocity:e},l=0;const h=[];for(let o=0;o<i;o++){const u=o*c;if(h.push({time:u,position:s.position,velocity:s.velocity}),s=r.step(s,t,c/1e3),r.isSettled(s,t)){if(l+=c/1e3,l>=m){h.push({time:(o+1)*c,position:t,velocity:0});break}}else l=0}return h}function R(r,a){if(r.length===0)return{position:0,velocity:0};const t=r[0],e=r[r.length-1];if(a<=0)return{position:t.position,velocity:t.velocity};if(a>=e.time)return{position:e.position,velocity:e.velocity};let i=0,s=r.length-1;for(;i<s-1;){const u=i+s>>1;r[u].time<=a?i=u:s=u}const l=r[i],h=r[s],o=(a-l.time)/(h.time-l.time);return{position:l.position+(h.position-l.position)*o,velocity:l.velocity+(h.velocity-l.velocity)*o}}class w extends d{constructor(t,e={}){super();n(this,"children");n(this,"startAt");n(this,"pendingComplete",0);n(this,"running",!1);n(this,"pendingStartTimers",[]);this.children=t,(e.mode??"parallel")==="sequence"?this.startAt=t.map((i,s)=>s===0?0:1):this.startAt=e.startAt??[]}play(){this.startRun("play")}reverse(){this.startRun("reverse")}pause(){this.running=!1,this.clearPendingStartTimers();for(const t of this.children)t.pause()}complete(){var t;this.running=!1,this.clearPendingStartTimers();for(const e of this.children)e.complete();(t=this.onComplete)==null||t.call(this)}get progress(){if(this.children.length===0)return 0;let t=0;for(const e of this.children)t+=e.progress;return t/this.children.length}getPose(){return this.children.flatMap(t=>t.getPose())}getTimeline(){return this.children.flatMap(t=>t.getTimeline())}matchInto(t){}get isAnimating(){return this.children.some(t=>t.isAnimating)}get isPaused(){return this.children.some(t=>t.isPaused)&&this.children.every(t=>t.isPaused||t.isComplete)}get isComplete(){return this.children.every(t=>t.isComplete)}get isReversing(){return this.children.some(t=>t.isReversing)}get playbackRate(){return super.playbackRate}set playbackRate(t){super.playbackRate=t;for(const e of this.children)e.playbackRate=t}startRun(t){if(this.running&&this.pause(),this.running=!0,this.pendingComplete=this.children.length,this.pendingComplete===0){this.handleFinished();return}for(const e of this.children){const i=e.onComplete;e.onComplete=()=>{i==null||i(),this.handleChildComplete()}}this.scheduleStart(0,t)}scheduleStart(t,e){if(!this.running||t>=this.children.length)return;this.children[t][e]();const i=t+1;if(i>=this.children.length)return;const s=this.startAt[i];if(s===void 0||s<=0){this.scheduleStart(i,e);return}const l=this.children[t].findTimeForProgress(s);if(l===null||l<=0){this.scheduleStart(i,e);return}const h=Math.abs(this.playbackRate)||1,o=l/h,u=setTimeout(()=>{this.pendingStartTimers=this.pendingStartTimers.filter(p=>p!==u),this.running&&this.scheduleStart(i,e)},o);this.pendingStartTimers.push(u)}clearPendingStartTimers(){for(const t of this.pendingStartTimers)clearTimeout(t);this.pendingStartTimers=[]}handleChildComplete(){this.pendingComplete--,this.pendingComplete<=0&&this.handleFinished()}handleFinished(){var t;this.running=!1,this.clearPendingStartTimers(),(t=this.onComplete)==null||t.call(this)}findTimeForProgress(t){return null}}exports.Animation=d;exports.MultiAnimation=w;exports.POSITION_THRESHOLD=y;exports.SETTLE_THRESHOLD=m;exports.VELOCITY_THRESHOLD=T;exports.WebAnimation=v;
|