@pixodesk/svg-animator-web 1.0.45 → 1.0.46
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/chunk-2AFALI5O.min.js +1 -0
- package/dist/{chunk-QE7KJWAN.js → chunk-ZBGGXE5W.js} +143 -83
- package/dist/chunk-ZBGGXE5W.js.map +1 -0
- package/dist/index.cjs +144 -85
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +6 -5
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.prerendered-waapi.umd.js +107 -72
- package/dist/index.prerendered-waapi.umd.js.map +1 -1
- package/dist/index.prerendered-waapi.umd.min.js +1 -1
- package/dist/index.prerendered.umd.js +111 -77
- package/dist/index.prerendered.umd.js.map +1 -1
- package/dist/index.prerendered.umd.min.js +1 -1
- package/dist/internal.cjs +104 -69
- package/dist/internal.cjs.map +1 -1
- package/dist/internal.js +1 -1
- package/dist/internal.min.cjs +1 -1
- package/dist/internal.min.js +1 -1
- package/dist/pixodesk-svg-animator.umd.js +143 -84
- package/dist/pixodesk-svg-animator.umd.js.map +1 -1
- package/dist/pixodesk-svg-animator.umd.min.js +1 -1
- package/mangle-reserved.json +2 -0
- package/package.json +2 -2
- package/dist/chunk-QE7KJWAN.js.map +0 -1
- package/dist/chunk-RQ5KZXDT.min.js +0 -1
package/dist/index.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{PX_ANIM_ATTR_NAME as e,PX_ANIM_SRC_ATTR_NAME as n,PX_COLOR_ATTR_NAMES as t,PX_CSS_ONLY_STYLE_PROPS as r,PX_DEFAULT_DURATION_MS as o,PX_DISALLOWED_SVG_TAGS_LOWER as l,PX_PCT_BASED_ATTR_NAMES as i,PX_STYLE_ATTR_NAMES as s,PX_TEXT_CONTENT_ATTR as a,PX_TRANSFORM_FN_NAMES as c,PxAnimatorConfigSchema as u,PxDefinitionsSchema as d,PxDiagnosticCode as f,PxDiagnosticKind as m,PxMouseOutAction as v,PxNodeBaseSchema as h,PxScrollSchema as g,PxSvgNodeRootSchema as y,PxTimelineEngine as p,PxTimelineEngineSetting as b,PxTriggerSchema as w,PxTriggerStart as E,__objRest as A,__spreadProps as S,__spreadValues as x,applyAnimatorConfig as P,bezierToSvgPath as C,camelCaseToKebabWordIfNeeded as R,clamp as T,clampSeekMs as k,composeTransformParts as j,createAdapterAnimator as F,createDiagnostics as q,createVisibilityGate as L,cubicBezier as O,foldTimelineOverride as M,generateNewIds as N,getAnimatorConfig as z,interpolateValue as W,isNativeForced as B,isPxDocument as D,isValidPlaybackRate as H,kebabToCamelCaseWord as I,keyframeEasing as G,keyframeValue as K,materializeAllInTree as U,mayUseNativeScrollTimeline as X,normalizeBindings as _,progressToTimeMs as Q,px as V,reportDocumentDiagnostics as Y,resolveTimelineEngine as Z,resolveTrigger as $,sanitizeAttributeValue as J,seekCeilingMs as ee,splitEasing as ne,timeToProgress as te,toDomProps as re,toRGBA as oe,validateDocument as le,validateNodeEffects as ie}from"./chunk-RQ5KZXDT.min.js";var se="domType";function ae(e,n,t){return e?ce(e,n,t,!0,0):null}function ce(e,n,t,o,i){const s=e,{type:c,children:u,style:d}=s,f=A(s,["type","children","style"]),v=c||"g";if(l.has(v.toLowerCase()))return(null!=t?t:q(void 0,"[PxAnimator]")).warn(m.document,1103,v),null;const h=f[se];void 0!==h&&delete f[se];const g={};let y;const p=re(f);for(const e of Object.keys(p)){const n=J(e,p[e]);void 0!==n&&(r.has(e)?(null!=y?y:y={})[e]=String(n):g["className"===e?"class":R(e)]=n)}if(void 0!==h&&(g.type=String(h)),d)for(const e of Object.keys(d))(null!=y?y:y={})[e]=String(d[e]);const b=[];u&&u.forEach((e,r)=>{const o=ce(e,n,t,!1,r);null!==o&&b.push(o)});const w=f[a],E=!b.length&&"string"==typeof w&&w?w:void 0;return n({tag:v,attrs:g,style:y,children:b,text:E,node:e,isRoot:o,index:i})}function ue(e){return"scroll"===(null==e?void 0:e.timelineSource)}function de(e,n,t,r){var o;const[l,i]=function(e,n,t){const r=n,o=t;switch(e){case"cover":return[0,r+o];case"entry":return[0,Math.min(r,o)];case"contain":return[Math.min(r,o),Math.max(r,o)];case"exit":return[Math.max(r,o),r+o];case"entry-crossing":return[0,r];case"exit-crossing":return[o,r+o]}}(null!=(o=null==e?void 0:e.phase)?o:"cover",t,r);return l+("number"==typeof(null==e?void 0:e.fraction)?e.fraction:n)*(i-l)}var fe=Symbol.for("@pixodesk/svg-animator-web:animators"),me="__pixodeskAnimators";function ve(){const e=globalThis;let n=e[fe];if(!n){const t=new Set,r=new Set;n={animators:t,listeners:r,getAll:()=>Array.from(t),subscribe:e=>(r.add(e),()=>{r.delete(e)})},e[fe]=n,void 0===e[me]&&(e[me]=n)}return n}function he(){return ve().getAll()}function ge(e){return ve().subscribe(e)}function ye(e,n){for(const t of ve().listeners)try{t(e,n)}catch(e){setTimeout(()=>{throw e},0)}}function pe(e,n,t){const r=null!=t?t:q(void 0,"[PxAnimator]"),o=[],l=()=>{for(const e of o.splice(0))e()},i=$(n),s=e.getRootElement();if(!s)return r.warn(m.host,f.triggersNoRoot),l;let a=!1;const c=L(s,i,{isPlaying:()=>e.isPlaying(),play:()=>{a&&(a=!1,e.setPlaybackRate(1)),e.play()},pause:()=>e.pause(),cancel:()=>e.cancel()});switch(o.push(()=>c.dispose()),i.start){case E.load:{const e=()=>c.requestStart(!1);"complete"===document.readyState?e():(window.addEventListener("load",e,{once:!0}),o.push(()=>window.removeEventListener("load",e)));break}case E.mouseOver:{let n=!1;const t=()=>{n=!0,c.requestStart(!0)},r=()=>{n&&(()=>{switch(i.mouseOut){case v.pause:e.pause();break;case v.reset:e.cancel();break;case v.reverse:a=!0,e.setPlaybackRate(-1),e.play();case v.continue:}})()};s.addEventListener("mouseenter",t),s.addEventListener("mouseleave",r),o.push(()=>{s.removeEventListener("mouseenter",t),s.removeEventListener("mouseleave",r)});break}case E.click:{const n=()=>{e.isPlaying()?e.pause():c.requestStart(!0)};s.addEventListener("click",n),o.push(()=>s.removeEventListener("click",n));break}case E.none:}return l}function be(e){return"#"+function(e){const n=globalThis.CSS;return"function"==typeof(null==n?void 0:n.escape)?n.escape(e):e.replace(/^([0-9])/,(e,n)=>"\\3"+n+" ").replace(/([^\w\-\\ ])/g,"\\$1")}(e)}function we(e,n,t,r){var o;const l=z(e)||{},i=q(t,"[PxAnimator]");if(!r)if(e.id){const n=be(e.id);(r=document.querySelector(n))||i.warn(m.host,f.noRootForSelector,n)}else i.warn(m.host,f.noRootElement);const a=F(e,n||function(e,n){const t=new Set,r=null!=n?n:q(void 0,"[PxAnimator]");return{isConnected:()=>!e||e.isConnected,setAttribute:(n,o,l)=>{o=R(o);const i=be(n),a=(null==e?void 0:e.querySelectorAll(i))||document.querySelectorAll(i);0!==a.length||t.has(i)||(t.add(i),r.warn(m.host,f.setAttributeNoElement,i));for(let e=0;e<a.length;e++){const n=a[e],t="transform"===o&&"pattern"===n.tagName?"patternTransform":o;n.setAttribute(t,l),s.has(o)&&(n.style[o]=l)}}}}(r,i),t),c=S(x({},a),{getRootElement:()=>r||null});if(ue(l))l.trigger&&i.warn(m.usage,f.scrollTriggerIgnored);else{const e=pe(c,null!=(o=l.trigger)?o:{},i),n=c.destroy.bind(c);c.destroy=()=>{e(),n()}}return c}function Ee(e,n,r,o){let l=K(e);const s=G(e),a={offset:n,easing:s&&Array.isArray(s)?"cubic-bezier("+s.join(",")+")":void 0};let u,d=r;return t.has(r)&&Array.isArray(l)?u=oe(l):"transform"!==r||null===l||"object"!=typeof l||Array.isArray(l)?c.has(r)?(Array.isArray(l)&&("translate"===r&&(l=l.map(e=>e+"px")),l=l.join(",")),"rotate"===r&&(l+="deg"),u=r+"("+l+")",d="transform"):u="d"===r?'path("'+(l&&"object"==typeof l&&Array.isArray(l.paths)?l.paths:[]).map(e=>C(e,!0)).join("")+'")':i.has(r)&&"number"==typeof l?100*l+"%":""+l:(u=j(l,{withUnits:!0}),d="transform"),CSS.supports(R(d),u)||o.add(d),d=I(d),a[d]=u,a}function Ae(e,n,t){var r,o,l,i,s;const a=[];for(let c=0;c<n.length;c++){const u=n[c],d=null!=(r=u.t)?r:0;if(d<0){const t=n[c+1];if(t&&(null!=(o=t.t)?o:0)>=0){const n=(0-d)/((null!=(l=t.t)?l:0)-d),r=u.e?O(u.e)(n):n,{right:o}=ne(u.e,n);a.push({t:0,v:W(e,u.v,t.v,r),e:o})}continue}if(d>t){const r=n[c-1];if(r&&(null!=(i=r.t)?i:0)<=t){const n=null!=(s=r.t)?s:0,o=(t-n)/(d-n),l=r.e?O(r.e)(o):o,{left:i}=ne(r.e,o);a.length>0&&(a[a.length-1]=S(x({},a[a.length-1]),{e:i})),a.push({t:t,v:W(e,r.v,u.v,l),e:void 0})}break}a.push(u)}return a}function Se(e,n,t){var r;const o=new Map;for(const[l,i]of Object.entries(e)){const e=t.duration||1,s=Ae(l,i.keyframes||[],e),a=[];for(let t=0;t<s.length;t++){const o=s[t],i=Ee(o,T((null!=(r=o.t)?r:0)/e,0,1),l,n);0===t&&(i.offset||0)>0&&a.push(S(x({},i),{offset:0})),a.push(i)}a.length>0&&(a[a.length-1].offset||0)<1&&a.push(S(x({},a[a.length-1]),{offset:1})),a.length>0&&o.set(l,a)}return o}function xe(e,n,t,r,o){var l,i;const s=z(e)||{},a=q(n,"[PxAnimator]");if(!t)if(e.id){const n=be(e.id);(t=document.querySelector(n))||a.warn(m.host,f.noRootForSelector,n)}else a.warn(m.host,f.noRootElement);const c=_(e,p.native),u=[],d=s.iterations;let v;"number"==typeof d&&(v=d),"infinite"===d&&(v=1/0);const h=new Set;let g=!1,y=!1;(null==c?void 0:c.length)||a.warn(m.document,f.noBindings);for(const e of c||[]){const r=e.animate;if(!r||"object"!=typeof r||Array.isArray(r)){a.warn(m.document,f.unresolvedBinding,e);continue}const i=be(e.id),c=(null==t?void 0:t.querySelectorAll(i))||document.querySelectorAll(i);0===c.length&&a.warn(m.host,f.noElementsForSelector,i);const d=Se(r,h,s),p=s.delay&&s.delay>0?s.delay:void 0;let b;if(s.delay&&s.delay<0&&s.duration){const e=-s.delay;b=v===1/0?e%s.duration:Math.min(e,s.duration*(null!=v?v:1))}const w={duration:s.duration,delay:p,fill:null!=(l=s.fill)?l:"forwards",direction:s.direction,iterations:v};for(let e=0;e<c.length;e++){const t=c[e];for(const[,e]of d)if(e.length>0)try{const r=new KeyframeEffect(t,e,w),l=new Animation(r,o?o.timeline:document.timeline);if(o){const e=l;o.rangeStart&&(e.rangeStart=o.rangeStart),o.rangeEnd&&(e.rangeEnd=o.rangeEnd)}(null==n?void 0:n.onFinish)&&(l.onfinish=()=>{var e;g||(g=!0,null==(e=n.onFinish)||e.call(n))}),(null==n?void 0:n.onRemove)&&(l.onremove=()=>{var e;y||(y=!0,null==(e=n.onRemove)||e.call(n))}),void 0!==b&&(l.currentTime=b),u.push(l)}catch(e){a.warn(m.internal,f.animationBuildFailed,e)}}}if(!r&&h.size)return a.warn(m.platform,f.unsupportedAnimatedAttrs,[...h].join(", ")),null;const b={isReady:()=>!0,getRootElement:()=>t||null,isPlaying:()=>{var e;return"running"===(null==(e=u[0])?void 0:e.playState)},play:()=>{var e;g=!1,u.forEach(e=>e.play()),null==(e=null==n?void 0:n.onPlay)||e.call(n)},pause:()=>{var e;u.forEach(e=>e.pause()),null==(e=null==n?void 0:n.onPause)||e.call(n)},cancel:()=>{var e;g=!1,u.forEach(e=>e.cancel()),null==(e=null==n?void 0:n.onCancel)||e.call(n)},finish:()=>{var e;for(const n of u)try{(null==(e=n.effect)?void 0:e.getTiming().iterations)===1/0?(n.effect.updateTiming({iterations:1}),n.finish(),n.effect.updateTiming({iterations:1/0})):n.finish()}catch(e){n.cancel()}},setPlaybackRate:e=>H(e)?(u.forEach(n=>n.playbackRate=e),b):(a.warn(m.usage,f.rateRejected),b),getCurrentTime:()=>{var e,n;const t=null!=(n=null==(e=u[0])?void 0:e.currentTime)?n:null;return null!==t?+t:null},setCurrentTime:e=>{var n;const t=ee(null!=(n=s.duration)?n:0,null!=v?v:1),r=t>0?k(e,t):Math.max(0,e);g=!1,u.forEach(e=>{e.currentTime=r})},getCurrentProgress:()=>{var e;const n=b.getCurrentTime();return null===n?null:te(n,null!=(e=s.duration)?e:0,null!=v?v:1)},setCurrentProgress:e=>{var n;b.setCurrentTime(Q(e,null!=(n=s.duration)?n:0,null!=v?v:1))},destroy:()=>{var e;b.cancel(),u.splice(0,u.length),y||(y=!0,null==(e=null==n?void 0:n.onRemove)||e.call(n))}};if("scroll"===s.timelineSource)s.trigger&&a.warn(m.usage,f.scrollTriggerIgnored);else{const e=pe(b,null!=(i=s.trigger)?i:{},a),n=b.destroy.bind(b);b.destroy=()=>{e(),n()}}return o&&u.forEach(e=>e.play()),b}function Pe(e,n,t){var r,o,l;const i="number"==typeof(null==e?void 0:e.fraction)?e.fraction:n,s=null==(o=null==(r=globalThis.CSS)?void 0:r.percent)?void 0:o.call(r,100*i);if(void 0!==s)return t?{rangeName:null!=(l=null==e?void 0:e.phase)?l:"cover",offset:s}:{offset:s}}function Ce(e,n){const t=document.body,r=document.documentElement;for(let o=e.parentElement;o;o=o.parentElement){if(o===t||o===r)return null;const e=getComputedStyle(o),l="y"===n?e.overflowY:e.overflowX;if("auto"===l||"scroll"===l||"hidden"===l||"overlay"===l)return o}return null}function Re(){return document.scrollingElement||document.documentElement}function Te(e,n,t){var r,o;const l=null!=t?t:q(void 0,"[PxAnimator]"),i=null==n?void 0:n.trim();if(!i)return e;if("parent"===i){let n=null;for(let t=e.parentElement;t&&t!==document.body;t=t.parentElement){const e=getComputedStyle(t).position;"sticky"!==e&&"fixed"!==e||(n=t)}return null!=(o=null!=(r=null==n?void 0:n.parentElement)?r:e.parentElement)?o:e}if("scroller"===i)return Ce(e,"y")||Ce(e,"x")||Re();let s=null;try{s=document.querySelector(i)}catch(n){return l.warn(m.document,f.scrollSubjectInvalid,i),e}return s||(l.warn(m.host,f.scrollSubjectNoMatch,i),e)}function ke(e,n){const t=e;if(!(null==n?void 0:n.pin)||!t.style)return()=>{};const r=t.style,o=r.position,l=r.top;r.position="sticky";const i="center"===n.pinAlign?.5:"bottom"===n.pinAlign?1:0,s=()=>{var t;const o=null!=(t=n.pinOffset)?t:0;if(!i)return void(r.top=o+"px");const l=function(e){const n=Ce(e,"y");return n?n.clientHeight:document.documentElement.clientHeight}(e),s=e.getBoundingClientRect().height;r.top=Math.round((l-s)*i+o)+"px"};s();let a=null;const c=i?s:null;i&&(c&&window.addEventListener("resize",c),"undefined"!=typeof ResizeObserver&&(a=new ResizeObserver(s),a.observe(e)));let u=null;const d=e.parentElement;return n.pinDistance&&n.pinDistance>0&&d&&(u=document.createElement("div"),u.setAttribute("data-px-pin",""),u.style.height=100*n.pinDistance+"vh",d.insertBefore(u,e),u.appendChild(e)),()=>{c&&window.removeEventListener("resize",c),null==a||a.disconnect(),r.position=o,r.top=l,(null==u?void 0:u.parentElement)&&(u.parentElement.insertBefore(e,u),u.remove())}}function je(e,n,t){let r,o=n;e.resetOnFinish&&(o=S(x({},n),{onFinish:()=>{var e;null==(e=null==n?void 0:n.onFinish)||e.call(n),null==r||r.cancel()}}));const l=t(o);return r=l,e.debugGlobalName&&(window[e.debugGlobalName]=l),l}var Fe=({tag:e,attrs:n,style:t,children:r,text:o})=>{const l=document.createElementNS("http://www.w3.org/2000/svg",e);for(const e of Object.keys(n))l.setAttribute(e,n[e]);if(t){const e=l.style;for(const n of Object.keys(t))e[n]=t[n]}for(const e of r)l.appendChild(e);return void 0!==o&&(l.textContent=o),l};function qe(e,n,t){return ae(e,Fe,t)}function Le(e){return"adapter"in e||"rootElement"in e}function Oe(e){const{src:n,doc:t,container:r,resetTimeline:l}=e,i=Le(e)?e.adapter:void 0,s=Le(e)?e.rootElement:void 0,a=function(e){const{timeline:n,duration:t,delay:r,iterations:o,start:l}=e;return M(n,{duration:t,delay:r,iterations:o,start:l})}(e);let c;const u=function(e){const n=e=>{c&&ye(e,c)};return S(x({},e),{onPlay:()=>{var t;null==(t=null==e?void 0:e.onPlay)||t.call(e),n("play")},onPause:()=>{var t;null==(t=null==e?void 0:e.onPause)||t.call(e),n("pause")},onCancel:()=>{var t;null==(t=null==e?void 0:e.onCancel)||t.call(e),n("cancel")},onFinish:()=>{var t;null==(t=null==e?void 0:e.onFinish)||t.call(e),n("finish")}})}(function(e){const{onPlay:n,onPause:t,onCancel:r,onFinish:o,onRemove:l,onStop:i,onWarn:s,onError:a,muteWarn:c,muteError:u}=null!=e?e:{},d=e=>e||i?()=>{null==e||e(),null==i||i()}:void 0;return{onPlay:n,onPause:d(t),onCancel:d(r),onFinish:d(o),onRemove:d(l),onWarn:s,onError:a,muteWarn:c,muteError:u}}(e));if(void 0!==t&&void 0!==n)throw new Error("createAnimator: provide either `src` or `doc`, not both");if(void 0===t&&void 0===n)throw new Error("createAnimator: either `src` or `doc` is required");let d=null,v=[],h=!1;const g=e=>{d?e(d):v&&v.push(e)},y=q(u,"[PxAnimator]"),p=(e,n,...t)=>{v=null,y.error(e,n,...t)},w=e=>{try{(e=>{d=e;const n=v;v=null,null==n||n.forEach(n=>n(e))})(function(e,n,t,r,l,i,s){const a=q(t,"[PxAnimator]"),c=ie(e);for(const e of c)a.warn(m.document,f.effectsShape,e);if(Y(e,"[PxAnimator] createAnimator"),void 0!==l||i){const n=P(e,null!=l?l:{},{resetTimeline:!!i});for(const e of n.warnings)a.warn(m.usage,f.timelineOverrideIgnored,e);e=n.doc}const u=z(e)||{},d=Z(u.engine);e=U(e,d);let v=null;if(r){e=N(e);const n="string"==typeof r?document.querySelector(r):r;n&&(v=qe(e,0,a),v&&n.replaceChildren(v))}!v&&s&&(v=s);const h=function(e,n,t,r){return function(e,n,t,r){const l=z(e)||{},i=q(t,"[PxAnimator]");return ue(l)?je(l,t,t=>{var s;let a=()=>{};if(X(l.engine)&&r){a=ke(r,l.scroll);const n=function(e,n,t){var r,o,l,i;const s=null!=t?t:q(void 0,"[PxAnimator]");if(!n||!ue(n))return null;const a=n.scroll||{},c=null!=(r=a.kind)?r:"view";if(a.smoothing)return s.warn(m.platform,f.scrollSmoothingNeedsOwnDriver),null;const u=globalThis,d="view"===c,v=d?u.ViewTimeline:u.ScrollTimeline;if("function"!=typeof v)return null;const h=null!=(o=a.axis)?o:"block";let g;try{g=new v(d?{subject:Te(e,a.subject,s),axis:h}:{source:"root"===a.source?Re():Ce(e,"y")||Ce(e,"x")||Re(),axis:h})}catch(e){return s.warn(m.platform,f.scrollNativeUnavailable,e),null}return{timeline:g,rangeStart:Pe(null==(l=a.range)?void 0:l.start,0,d),rangeEnd:Pe(null==(i=a.range)?void 0:i.end,1,d)}}(r,l,i);if(n){const o=xe(e,t,r,B(l.engine),n);if(o){const e=o.destroy.bind(o);return o.destroy=()=>{a(),e()},o}}a(),a=()=>{}}const c=(l.engine!==b.js?xe(e,t,r,B(l.engine)):null)||we(e,n,t,r),u=(null==(s=c.getRootElement)?void 0:s.call(c))||r;if(u){a=ke(u,l.scroll);const e=("number"==typeof(null==(d=l)?void 0:d.duration)&&d.duration>0?d.duration:o)*("number"==typeof(null==d?void 0:d.iterations)&&d.iterations>0?d.iterations:1),n=function(e,n,t,r){var o,l;if(!n||!ue(n))return null;const i=null!=r?r:q(void 0,"[PxAnimator]"),s=n.scroll||{},a=null!=(o=s.kind)?o:"view",c=Te(e,s.subject,i),u=Ce(e,"y")||Ce(e,"x"),d="scroll"===a&&"root"===s.source?Re():u||Re(),f=d===Re(),m=function(e,n){const t=null!=e?e:"block";if("x"===t||"y"===t)return t;const r=!!n&&n.startsWith("vertical");return"inline"===t?r?"y":"x":r?"x":"y"}(s.axis,getComputedStyle(d).writingMode),v=()=>{if("scroll"===a)return function(e,n,t){var r,o;const l=n>0?T(e/n,0,1):1,i="number"==typeof(null==(r=null==t?void 0:t.start)?void 0:r.fraction)?t.start.fraction:0,s="number"==typeof(null==(o=null==t?void 0:t.end)?void 0:o.fraction)?t.end.fraction:1;return s<=i?l>=s?1:0:T((l-i)/(s-i),0,1)}("y"===m?d.scrollTop:d.scrollLeft,"y"===m?d.scrollHeight-d.clientHeight:d.scrollWidth-d.clientWidth,s.range);const e=c.getBoundingClientRect();let n,t;if(f)n=0,t="y"===m?document.documentElement.clientHeight:document.documentElement.clientWidth;else{const e=d.getBoundingClientRect();n="y"===m?e.top:e.left,t="y"===m?d.clientHeight:d.clientWidth}return function(e,n,t,r){const o=t-e,l=de(null==r?void 0:r.start,0,n,t),i=de(null==r?void 0:r.end,1,n,t);return i<=l?o>=i?1:0:T((o-l)/(i-l),0,1)}(("y"===m?e.top:e.left)-n,"y"===m?e.height:e.width,t,s.range)},h=Math.max(0,null!=(l=s.smoothing)?l:0)/1e3;let g=!1,y=null,p=null,b=0,w=null;const E=()=>{w=null,g||(e=>{if(!h)return void t(e);if(null===y)return y=e,void t(e);if(null!==p)return;b=0;const n=e=>{if(p=null,g)return;const r=b?Math.min(.1,(e-b)/1e3):1/60;b=e;const o=v(),l=1-Math.exp(-r/h);y+=(o-y)*l,Math.abs(o-y)<.001&&(y=o),t(y),y!==o&&(p=requestAnimationFrame(n))};p=requestAnimationFrame(n)})(v())},A=()=>{g||null!==w||(w=requestAnimationFrame(E))},S=f?window:d;let x;S.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A,{passive:!0}),"undefined"!=typeof ResizeObserver&&(x=new ResizeObserver(A),x.observe(c),c!==e&&x.observe(e),f||x.observe(d));const P={destroy:()=>{g||(g=!0,S.removeEventListener("scroll",A),window.removeEventListener("resize",A),null==x||x.disconnect(),null!==w&&(cancelAnimationFrame(w),w=null),null!==p&&(cancelAnimationFrame(p),p=null))},refresh:()=>{g||(y=v(),t(y))}};return P.refresh(),P}(u,l,n=>c.setCurrentTime(n*e),i);if(n){const e=c.destroy.bind(c);c.destroy=()=>{n.destroy(),a(),e()}}}else i.warn(m.host,f.scrollNoRootToObserve);var d;return c}):je(l,t,t=>l.engine===b.js?we(e,n,t,r):xe(e,t,r,B(l.engine))||we(e,n,t,r))}(e,n,t,r)}(e,n,t,v);if(r&&v){const e=v,n=h.destroy.bind(h);h.destroy=()=>{n(),e.remove()}}return h}(e,i,u,r,a,l,s))}catch(e){const n=function(e){return e instanceof Error?e:new Error(String(e))}(e);p(m.internal,f.buildFailed,n)}};return c={isReady:()=>!!d,getRootElement:()=>d?d.getRootElement():null,isPlaying:()=>(null==d?void 0:d.isPlaying())||!1,play:()=>{g(e=>e.play())},pause:()=>{g(e=>e.pause())},cancel:()=>{g(e=>e.cancel())},finish:()=>{g(e=>e.finish())},setPlaybackRate:e=>{g(n=>n.setPlaybackRate(e))},getCurrentTime:()=>d?d.getCurrentTime():null,setCurrentTime:e=>{g(n=>n.setCurrentTime(e))},getCurrentProgress:()=>d?d.getCurrentProgress():null,setCurrentProgress:e=>{g(n=>n.setCurrentProgress(e))},destroy:()=>{h=!0,v=null,null==d||d.destroy()}},function(e){const n=ve();if(n.animators.has(e))return;n.animators.add(e),ye("add",e);const t=e.destroy.bind(e);e.destroy=()=>{t(),n.animators.delete(e)&&ye("remove",e)}}(c),void 0!==t?w(t):fetch(n).then(e=>e.json()).then(e=>{h||(D(e)?w(e):p(m.document,f.invalidDocumentAtSrc,n))}).catch(e=>{var t;p(m.host,f.loadFailed,n,null!=(t=null==e?void 0:e.message)?t:String(e))}),c}function Me(t){const r=document.querySelectorAll("["+n+"]");for(let o=0;o<r.length;o++){const l=r[o];if(!l[e]){const r=l.getAttribute(n);r&&(l[e]=Oe(S(x({},t),{src:r,container:l})))}}}export{u as PxAnimatorConfigSchema,d as PxDefinitionsSchema,m as PxDiagnosticKind,h as PxNodeBaseSchema,g as PxScrollSchema,y as PxSvgNodeRootSchema,b as PxTimelineEngineSetting,w as PxTriggerSchema,F as createAdapterAnimator,Oe as createAnimator,N as generateNewIds,he as getAllAnimators,Me as loadTagAnimators,ge as onAnimatorsChange,V as px,qe as renderNode,pe as setupAnimationTriggers,re as toDomProps,le as validateDocument};
|
|
1
|
+
import{PX_ANIM_ATTR_NAME as e,PX_ANIM_SRC_ATTR_NAME as n,PX_COLOR_ATTR_NAMES as t,PX_CSS_ONLY_STYLE_PROPS as r,PX_DEFAULT_DURATION_MS as o,PX_DEFAULT_ITERATIONS as l,PX_DISALLOWED_SVG_TAGS_LOWER as i,PX_PCT_BASED_ATTR_NAMES as s,PX_STYLE_ATTR_NAMES as a,PX_TEXT_CONTENT_ATTR as c,PX_TRANSFORM_FN_NAMES as u,PxAnimatorConfigSchema as d,PxDefinitionsSchema as f,PxDiagnosticCode as m,PxDiagnosticKind as v,PxMouseOutAction as h,PxNodeBaseSchema as g,PxScrollSchema as y,PxSvgNodeRootSchema as p,PxTimelineEngine as b,PxTimelineEngineSetting as w,PxTriggerSchema as E,PxTriggerStart as A,__objRest as S,__spreadProps as x,__spreadValues as P,applyAnimatorConfig as C,bezierToSvgPath as R,camelCaseToKebabWordIfNeeded as T,clamp as k,clampSeekMs as j,composeTransformParts as F,createAdapterAnimator as L,createDiagnostics as O,createVisibilityGate as q,cubicBezier as M,foldTimelineOverride as N,generateNewIds as z,getAnimatorConfig as W,interpolateValue as B,isNativeForced as H,isPxDocument as D,isValidPlaybackRate as I,kebabToCamelCaseWord as G,keyframeEasing as U,keyframeValue as _,materializeAllInTree as K,mayUseNativeScrollTimeline as V,normalizeBindings as X,progressToTimeMs as Y,px as $,reportDocumentDiagnostics as J,resolveTimelineEngine as Q,resolveTrigger as Z,sanitizeAttributeValue as ee,seekCeilingMs as ne,splitEasing as te,timeToProgress as re,toDomProps as oe,toRGBA as le,validateDocument as ie,validateNodeEffects as se}from"./chunk-2AFALI5O.min.js";var ae="domType";function ce(e,n,t){return e?ue(e,n,t,!0,0):null}function ue(e,n,t,o,l){const s=e,{type:a,children:u,style:d}=s,f=S(s,["type","children","style"]),m=a||"g";if(i.has(m.toLowerCase()))return(null!=t?t:O(void 0,"[PxAnimator]")).warn(v.document,1103,m),null;const h=f[ae];void 0!==h&&delete f[ae];const g={};let y;const p=oe(f);for(const e of Object.keys(p)){const n=ee(e,p[e]);void 0!==n&&(r.has(e)?(null!=y?y:y={})[e]=String(n):g["className"===e?"class":T(e)]=n)}if(void 0!==h&&(g.type=String(h)),d)for(const e of Object.keys(d))(null!=y?y:y={})[e]=String(d[e]);const b=[];u&&u.forEach((e,r)=>{const o=ue(e,n,t,!1,r);null!==o&&b.push(o)});const w=f[c],E=!b.length&&"string"==typeof w&&w?w:void 0;return n({tag:m,attrs:g,style:y,children:b,text:E,node:e,isRoot:o,index:l})}function de(e){return"scroll"===(null==e?void 0:e.timelineSource)}function fe(e,n,t,r){var o;const[l,i]=function(e,n,t){const r=n,o=t;switch(e){case"cover":return[0,r+o];case"entry":return[0,Math.min(r,o)];case"contain":return[Math.min(r,o),Math.max(r,o)];case"exit":return[Math.max(r,o),r+o];case"entry-crossing":return[0,r];case"exit-crossing":return[o,r+o]}}(null!=(o=null==e?void 0:e.phase)?o:"cover",t,r);return l+("number"==typeof(null==e?void 0:e.fraction)?e.fraction:n)*(i-l)}var me=Symbol.for("@pixodesk/svg-animator-web:animators"),ve="__pixodeskAnimators";function he(){const e=globalThis;let n=e[me];if(!n){const t=new Set,r=new Set;n={animators:t,listeners:r,getAll:()=>Array.from(t),subscribe:e=>(r.add(e),()=>{r.delete(e)})},e[me]=n,void 0===e[ve]&&(e[ve]=n)}return n}function ge(){return he().getAll()}function ye(e){return he().subscribe(e)}function pe(e,n){for(const t of he().listeners)try{t(e,n)}catch(e){setTimeout(()=>{throw e},0)}}function be(e,n,t){const r=null!=t?t:O(void 0,"[PxAnimator]"),o=[],l=()=>{for(const e of o.splice(0))e()},i=Z(n),s=e.getRootElement();if(!s)return r.warn(v.host,m.triggersNoRoot),l;let a=!1;const c=q(s,i,{isPlaying:()=>e.isPlaying(),play:()=>{a&&(a=!1,e.setPlaybackRate(1)),e.play()},pause:()=>e.pause(),cancel:()=>e.cancel()});switch(o.push(()=>c.dispose()),i.start){case A.load:{const e=()=>c.requestStart(!1);"complete"===document.readyState?e():(window.addEventListener("load",e,{once:!0}),o.push(()=>window.removeEventListener("load",e)));break}case A.mouseOver:{let n=!1;const t=()=>{n=!0,c.requestStart(!0)},r=()=>{n&&(()=>{switch(i.mouseOut){case h.pause:e.pause();break;case h.reset:e.cancel();break;case h.reverse:a=!0,e.setPlaybackRate(-1),e.play();case h.continue:}})()};s.addEventListener("mouseenter",t),s.addEventListener("mouseleave",r),o.push(()=>{s.removeEventListener("mouseenter",t),s.removeEventListener("mouseleave",r)});break}case A.click:{const n=()=>{e.isPlaying()?e.pause():c.requestStart(!0)};s.addEventListener("click",n),o.push(()=>s.removeEventListener("click",n));break}case A.none:}return l}function we(e){return"#"+function(e){const n=globalThis.CSS;return"function"==typeof(null==n?void 0:n.escape)?n.escape(e):e.replace(/^([0-9])/,(e,n)=>"\\3"+n+" ").replace(/([^\w\-\\ ])/g,"\\$1")}(e)}function Ee(e,n,t,r){var o;const l=W(e)||{},i=O(t,"[PxAnimator]");if(!r)if(e.id){const n=we(e.id);(r=document.querySelector(n))||i.warn(v.host,m.noRootForSelector,n)}else i.warn(v.host,m.noRootElement);const s=L(e,n||function(e,n){const t=new Set,r=null!=n?n:O(void 0,"[PxAnimator]");return{isConnected:()=>!e||e.isConnected,setAttribute:(n,o,l)=>{o=T(o);const i=we(n),s=(null==e?void 0:e.querySelectorAll(i))||document.querySelectorAll(i);0!==s.length||t.has(i)||(t.add(i),r.warn(v.host,m.setAttributeNoElement,i));for(let e=0;e<s.length;e++){const n=s[e],t="transform"===o&&"pattern"===n.tagName?"patternTransform":o;n.setAttribute(t,l),a.has(o)&&(n.style[o]=l)}}}}(r,i),t),c=x(P({},s),{getRootElement:()=>r||null});if(de(l))l.trigger&&i.warn(v.usage,m.scrollTriggerIgnored);else{const e=be(c,null!=(o=l.trigger)?o:{},i),n=c.destroy.bind(c);c.destroy=()=>{e(),n()}}return c}function Ae(e,n,r,o){let l=_(e);const i=U(e),a={offset:n,easing:i&&Array.isArray(i)?"cubic-bezier("+i.join(",")+")":void 0};let c,d=r;return t.has(r)&&Array.isArray(l)?c=le(l):"transform"!==r||null===l||"object"!=typeof l||Array.isArray(l)?u.has(r)?(Array.isArray(l)&&("translate"===r&&(l=l.map(e=>e+"px")),l=l.join(",")),"rotate"===r&&(l+="deg"),c=r+"("+l+")",d="transform"):c="d"===r?'path("'+(l&&"object"==typeof l&&Array.isArray(l.paths)?l.paths:[]).map(e=>R(e,!0)).join("")+'")':s.has(r)&&"number"==typeof l?100*l+"%":""+l:(c=F(l,{withUnits:!0}),d="transform"),CSS.supports(T(d),c)||o.add(d),d=G(d),a[d]=c,a}function Se(e,n,t){var r,o,l,i,s;const a=[];for(let c=0;c<n.length;c++){const u=n[c],d=null!=(r=u.t)?r:0;if(d<0){const t=n[c+1];if(t&&(null!=(o=t.t)?o:0)>=0){const n=(0-d)/((null!=(l=t.t)?l:0)-d),r=u.e?M(u.e)(n):n,{right:o}=te(u.e,n);a.push({t:0,v:B(e,u.v,t.v,r),e:o})}continue}if(d>t){const r=n[c-1];if(r&&(null!=(i=r.t)?i:0)<=t){const n=null!=(s=r.t)?s:0,o=(t-n)/(d-n),l=r.e?M(r.e)(o):o,{left:i}=te(r.e,o);a.length>0&&(a[a.length-1]=x(P({},a[a.length-1]),{e:i})),a.push({t:t,v:B(e,r.v,u.v,l),e:void 0})}break}a.push(u)}return a}function xe(e,n,t){var r;const o=new Map;for(const[l,i]of Object.entries(e)){const e=t.duration||1,s=Se(l,i.keyframes||[],e),a=[];for(let t=0;t<s.length;t++){const o=s[t],i=Ae(o,k((null!=(r=o.t)?r:0)/e,0,1),l,n);0===t&&(i.offset||0)>0&&a.push(x(P({},i),{offset:0})),a.push(i)}a.length>0&&(a[a.length-1].offset||0)<1&&a.push(x(P({},a[a.length-1]),{offset:1})),a.length>0&&o.set(l,a)}return o}function Pe(e,n,t,r,o){var i,s;const a=W(e)||{},c=O(n,"[PxAnimator]");if(!t)if(e.id){const n=we(e.id);(t=document.querySelector(n))||c.warn(v.host,m.noRootForSelector,n)}else c.warn(v.host,m.noRootElement);const u=X(e,b.native),d=[],f=a.iterations;let h;"number"==typeof f&&(h=f),"infinite"===f&&(h=1/0);const g=new Set;let y=!1,p=!1;(null==u?void 0:u.length)||c.warn(v.document,m.noBindings);for(const e of u||[]){const r=e.animate;if(!r||"object"!=typeof r||Array.isArray(r)){c.warn(v.document,m.unresolvedBinding,e);continue}const s=we(e.id),u=(null==t?void 0:t.querySelectorAll(s))||document.querySelectorAll(s);0===u.length&&c.warn(v.host,m.noElementsForSelector,s);const f=xe(r,g,a),b=a.delay&&a.delay>0?a.delay:void 0;let w;if(a.delay&&a.delay<0&&a.duration){const e=-a.delay;w=h===1/0?e%a.duration:Math.min(e,a.duration*(null!=h?h:l))}const E={duration:a.duration,delay:b,fill:null!=(i=a.fill)?i:"forwards",direction:a.direction,iterations:h};for(let e=0;e<u.length;e++){const t=u[e];for(const[,e]of f)if(e.length>0)try{const r=new KeyframeEffect(t,e,E),l=new Animation(r,o?o.timeline:document.timeline);if(o){const e=l;o.rangeStart&&(e.rangeStart=o.rangeStart),o.rangeEnd&&(e.rangeEnd=o.rangeEnd)}(null==n?void 0:n.onFinish)&&(l.onfinish=()=>{var e;y||(y=!0,null==(e=n.onFinish)||e.call(n))}),(null==n?void 0:n.onRemove)&&(l.onremove=()=>{var e;p||(p=!0,null==(e=n.onRemove)||e.call(n))}),void 0!==w&&(l.currentTime=w),d.push(l)}catch(e){c.warn(v.internal,m.animationBuildFailed,e)}}}if(!r&&g.size)return c.warn(v.platform,m.unsupportedAnimatedAttrs,[...g].join(", ")),null;const w={isReady:()=>!0,getRootElement:()=>t||null,isPlaying:()=>{var e;return"running"===(null==(e=d[0])?void 0:e.playState)},play:()=>{var e;y=!1,d.forEach(e=>e.play()),null==(e=null==n?void 0:n.onPlay)||e.call(n)},pause:()=>{var e;d.forEach(e=>e.pause()),null==(e=null==n?void 0:n.onPause)||e.call(n)},cancel:()=>{var e;y=!1,d.forEach(e=>e.cancel()),null==(e=null==n?void 0:n.onCancel)||e.call(n)},finish:()=>{var e;for(const n of d)try{(null==(e=n.effect)?void 0:e.getTiming().iterations)===1/0?(n.effect.updateTiming({iterations:1}),n.finish(),n.effect.updateTiming({iterations:1/0})):n.finish()}catch(e){n.cancel()}},setPlaybackRate:e=>I(e)?(d.forEach(n=>n.playbackRate=e),w):(c.warn(v.usage,m.rateRejected),w),getCurrentTime:()=>{var e,n;const t=null!=(n=null==(e=d[0])?void 0:e.currentTime)?n:null;return null!==t?+t:null},setCurrentTime:e=>{var n;const t=ne(null!=(n=a.duration)?n:0,null!=h?h:l),r=t>0?j(e,t):Math.max(0,e);y=!1,d.forEach(e=>{e.currentTime=r})},getCurrentProgress:()=>{var e;const n=w.getCurrentTime();return null===n?null:re(n,null!=(e=a.duration)?e:0,null!=h?h:l)},setCurrentProgress:e=>{var n;w.setCurrentTime(Y(e,null!=(n=a.duration)?n:0,null!=h?h:l))},destroy:()=>{var e;w.cancel(),d.splice(0,d.length),p||(p=!0,null==(e=null==n?void 0:n.onRemove)||e.call(n))}};if("scroll"===a.timelineSource)a.trigger&&c.warn(v.usage,m.scrollTriggerIgnored);else{const e=be(w,null!=(s=a.trigger)?s:{},c),n=w.destroy.bind(w);w.destroy=()=>{e(),n()}}return o&&d.forEach(e=>e.play()),w}function Ce(e,n,t){var r,o,l;const i="number"==typeof(null==e?void 0:e.fraction)?e.fraction:n,s=null==(o=null==(r=globalThis.CSS)?void 0:r.percent)?void 0:o.call(r,100*i);if(void 0!==s)return t?{rangeName:null!=(l=null==e?void 0:e.phase)?l:"cover",offset:s}:{offset:s}}function Re(e,n){const t=document.body,r=document.documentElement;for(let o=e.parentElement;o;o=o.parentElement){if(o===t||o===r)return null;const e=getComputedStyle(o),l="y"===n?e.overflowY:e.overflowX;if("auto"===l||"scroll"===l||"hidden"===l||"overlay"===l)return o}return null}function Te(){return document.scrollingElement||document.documentElement}function ke(e,n,t){var r,o;const l=null!=t?t:O(void 0,"[PxAnimator]"),i=null==n?void 0:n.trim();if(!i)return e;if("parent"===i){let n=null;for(let t=e.parentElement;t&&t!==document.body;t=t.parentElement){const e=getComputedStyle(t).position;"sticky"!==e&&"fixed"!==e||(n=t)}return null!=(o=null!=(r=null==n?void 0:n.parentElement)?r:e.parentElement)?o:e}if("scroller"===i)return Re(e,"y")||Re(e,"x")||Te();let s=null;try{s=document.querySelector(i)}catch(n){return l.warn(v.document,m.scrollSubjectInvalid,i),e}return s||(l.warn(v.host,m.scrollSubjectNoMatch,i),e)}function je(e,n){const t=e;if(!(null==n?void 0:n.pin)||!t.style)return()=>{};const r=t.style,o=r.position,l=r.top;r.position="sticky";const i="center"===n.pinAlign?.5:"bottom"===n.pinAlign?1:0,s=()=>{var t;const o=null!=(t=n.pinOffset)?t:0;if(!i)return void(r.top=o+"px");const l=function(e){const n=Re(e,"y");return n?n.clientHeight:document.documentElement.clientHeight}(e),s=e.getBoundingClientRect().height;r.top=Math.round((l-s)*i+o)+"px"};s();let a=null;const c=i?s:null;i&&(c&&window.addEventListener("resize",c),"undefined"!=typeof ResizeObserver&&(a=new ResizeObserver(s),a.observe(e)));let u=null;const d=e.parentElement;return n.pinDistance&&n.pinDistance>0&&d&&(u=document.createElement("div"),u.setAttribute("data-px-pin",""),u.style.height=100*n.pinDistance+"vh",d.insertBefore(u,e),u.appendChild(e)),()=>{c&&window.removeEventListener("resize",c),null==a||a.disconnect(),r.position=o,r.top=l,(null==u?void 0:u.parentElement)&&(u.parentElement.insertBefore(e,u),u.remove())}}function Fe(e,n,t){let r,o=n;e.resetOnFinish&&(o=x(P({},n),{onFinish:()=>{var e;null==(e=null==n?void 0:n.onFinish)||e.call(n),null==r||r.cancel()}}));const l=t(o);return r=l,e.debugGlobalName&&(window[e.debugGlobalName]=l),l}var Le=({tag:e,attrs:n,style:t,children:r,text:o})=>{const l=document.createElementNS("http://www.w3.org/2000/svg",e);for(const e of Object.keys(n))l.setAttribute(e,n[e]);if(t){const e=l.style;for(const n of Object.keys(t))e[n]=t[n]}for(const e of r)l.appendChild(e);return void 0!==o&&(l.textContent=o),l};function Oe(e,n,t){return ce(e,Le,t)}function qe(e){return"adapter"in e||"rootElement"in e}function Me(e){const{src:n,doc:t,container:r,resetTimeline:l}=e,i=qe(e)?e.adapter:void 0,s=qe(e)?e.rootElement:void 0,a=function(e){const{timeline:n,duration:t,delay:r,iterations:o,start:l}=e;return N(n,{duration:t,delay:r,iterations:o,start:l})}(e);let c;const u=function(e){const n=e=>{c&&pe(e,c)};return x(P({},e),{onPlay:()=>{var t;null==(t=null==e?void 0:e.onPlay)||t.call(e),n("play")},onPause:()=>{var t;null==(t=null==e?void 0:e.onPause)||t.call(e),n("pause")},onCancel:()=>{var t;null==(t=null==e?void 0:e.onCancel)||t.call(e),n("cancel")},onFinish:()=>{var t;null==(t=null==e?void 0:e.onFinish)||t.call(e),n("finish")}})}(function(e){const{onPlay:n,onPause:t,onCancel:r,onFinish:o,onRemove:l,onStop:i,onWarn:s,onError:a,muteWarn:c,muteError:u}=null!=e?e:{},d=e=>e||i?()=>{null==e||e(),null==i||i()}:void 0;return{onPlay:n,onPause:d(t),onCancel:d(r),onFinish:d(o),onRemove:d(l),onWarn:s,onError:a,muteWarn:c,muteError:u}}(e));if(void 0!==t&&void 0!==n)throw new Error("createAnimator: provide either `src` or `doc`, not both");if(void 0===t&&void 0===n)throw new Error("createAnimator: either `src` or `doc` is required");let d=null,f=[],h=!1;const g=e=>{d?e(d):f&&f.push(e)},y=O(u,"[PxAnimator]"),p=(e,n,...t)=>{f=null,y.error(e,n,...t)},b=e=>{try{(e=>{d=e;const n=f;f=null,null==n||n.forEach(n=>n(e))})(function(e,n,t,r,l,i,s){const a=O(t,"[PxAnimator]"),c=se(e);for(const e of c)a.warn(v.document,m.effectsShape,e);if(J(e,"[PxAnimator] createAnimator"),void 0!==l||i){const n=C(e,null!=l?l:{},{resetTimeline:!!i});for(const e of n.warnings)a.warn(v.usage,m.timelineOverrideIgnored,e);e=n.doc}const u=W(e)||{},d=Q(u.engine);e=K(e,d);let f=null;if(r){e=z(e);const n="string"==typeof r?document.querySelector(r):r;n&&(f=Oe(e,0,a),f&&n.replaceChildren(f))}!f&&s&&(f=s);const h=function(e,n,t,r){return function(e,n,t,r){const l=W(e)||{},i=O(t,"[PxAnimator]");return de(l)?Fe(l,t,t=>{var s;let a=()=>{};if(V(l.engine)&&r){a=je(r,l.scroll);const n=function(e,n,t){var r,o,l,i;const s=null!=t?t:O(void 0,"[PxAnimator]");if(!n||!de(n))return null;const a=n.scroll||{},c=null!=(r=a.kind)?r:"view";if(a.smoothing)return s.warn(v.platform,m.scrollSmoothingNeedsOwnDriver),null;const u=globalThis,d="view"===c,f=d?u.ViewTimeline:u.ScrollTimeline;if("function"!=typeof f)return null;const h=null!=(o=a.axis)?o:"block";let g;try{g=new f(d?{subject:ke(e,a.subject,s),axis:h}:{source:"root"===a.source?Te():Re(e,"y")||Re(e,"x")||Te(),axis:h})}catch(e){return s.warn(v.platform,m.scrollNativeUnavailable,e),null}return{timeline:g,rangeStart:Ce(null==(l=a.range)?void 0:l.start,0,d),rangeEnd:Ce(null==(i=a.range)?void 0:i.end,1,d)}}(r,l,i);if(n){const o=Pe(e,t,r,H(l.engine),n);if(o){const e=o.destroy.bind(o);return o.destroy=()=>{a(),e()},o}}a(),a=()=>{}}const c=(l.engine!==w.js?Pe(e,t,r,H(l.engine)):null)||Ee(e,n,t,r),u=(null==(s=c.getRootElement)?void 0:s.call(c))||r;if(u){a=je(u,l.scroll);const e=("number"==typeof(null==(d=l)?void 0:d.duration)&&d.duration>0?d.duration:o)*("number"==typeof(null==d?void 0:d.iterations)&&d.iterations>0?d.iterations:1),n=function(e,n,t,r){var o,l;if(!n||!de(n))return null;const i=null!=r?r:O(void 0,"[PxAnimator]"),s=n.scroll||{},a=null!=(o=s.kind)?o:"view",c=ke(e,s.subject,i),u=Re(e,"y")||Re(e,"x"),d="scroll"===a&&"root"===s.source?Te():u||Te(),f=d===Te(),m=function(e,n){const t=null!=e?e:"block";if("x"===t||"y"===t)return t;const r=!!n&&n.startsWith("vertical");return"inline"===t?r?"y":"x":r?"x":"y"}(s.axis,getComputedStyle(d).writingMode),v=()=>{if("scroll"===a)return function(e,n,t){var r,o;const l=n>0?k(e/n,0,1):1,i="number"==typeof(null==(r=null==t?void 0:t.start)?void 0:r.fraction)?t.start.fraction:0,s="number"==typeof(null==(o=null==t?void 0:t.end)?void 0:o.fraction)?t.end.fraction:1;return s<=i?l>=s?1:0:k((l-i)/(s-i),0,1)}("y"===m?d.scrollTop:d.scrollLeft,"y"===m?d.scrollHeight-d.clientHeight:d.scrollWidth-d.clientWidth,s.range);const e=c.getBoundingClientRect();let n,t;if(f)n=0,t="y"===m?document.documentElement.clientHeight:document.documentElement.clientWidth;else{const e=d.getBoundingClientRect();n="y"===m?e.top:e.left,t="y"===m?d.clientHeight:d.clientWidth}return function(e,n,t,r){const o=t-e,l=fe(null==r?void 0:r.start,0,n,t),i=fe(null==r?void 0:r.end,1,n,t);return i<=l?o>=i?1:0:k((o-l)/(i-l),0,1)}(("y"===m?e.top:e.left)-n,"y"===m?e.height:e.width,t,s.range)},h=Math.max(0,null!=(l=s.smoothing)?l:0)/1e3;let g=!1,y=null,p=null,b=0,w=null;const E=()=>{w=null,g||(e=>{if(!h)return void t(e);if(null===y)return y=e,void t(e);if(null!==p)return;b=0;const n=e=>{if(p=null,g)return;const r=b?Math.min(.1,(e-b)/1e3):1/60;b=e;const o=v(),l=1-Math.exp(-r/h);y+=(o-y)*l,Math.abs(o-y)<.001&&(y=o),t(y),y!==o&&(p=requestAnimationFrame(n))};p=requestAnimationFrame(n)})(v())},A=()=>{g||null!==w||(w=requestAnimationFrame(E))},S=f?window:d;let x;S.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A,{passive:!0}),"undefined"!=typeof ResizeObserver&&(x=new ResizeObserver(A),x.observe(c),c!==e&&x.observe(e),f||x.observe(d));const P={destroy:()=>{g||(g=!0,S.removeEventListener("scroll",A),window.removeEventListener("resize",A),null==x||x.disconnect(),null!==w&&(cancelAnimationFrame(w),w=null),null!==p&&(cancelAnimationFrame(p),p=null))},refresh:()=>{g||(y=v(),t(y))}};return P.refresh(),P}(u,l,n=>c.setCurrentTime(n*e),i);if(n){const e=c.destroy.bind(c);c.destroy=()=>{n.destroy(),a(),e()}}}else i.warn(v.host,m.scrollNoRootToObserve);var d;return c}):Fe(l,t,t=>l.engine===w.js?Ee(e,n,t,r):Pe(e,t,r,H(l.engine))||Ee(e,n,t,r))}(e,n,t,r)}(e,n,t,f);if(r&&f){const e=f,n=h.destroy.bind(h);h.destroy=()=>{n(),e.remove()}}return h}(e,i,u,r,a,l,s))}catch(e){const n=function(e){return e instanceof Error?e:new Error(String(e))}(e);p(v.internal,m.buildFailed,n)}};return c={isReady:()=>!!d,getRootElement:()=>d?d.getRootElement():null,isPlaying:()=>(null==d?void 0:d.isPlaying())||!1,play:()=>{g(e=>e.play())},pause:()=>{g(e=>e.pause())},cancel:()=>{g(e=>e.cancel())},finish:()=>{g(e=>e.finish())},setPlaybackRate:e=>{g(n=>n.setPlaybackRate(e))},getCurrentTime:()=>d?d.getCurrentTime():null,setCurrentTime:e=>{g(n=>n.setCurrentTime(e))},getCurrentProgress:()=>d?d.getCurrentProgress():null,setCurrentProgress:e=>{g(n=>n.setCurrentProgress(e))},destroy:()=>{h=!0,f=null,null==d||d.destroy()}},function(e){const n=he();if(n.animators.has(e))return;n.animators.add(e),pe("add",e);const t=e.destroy.bind(e);e.destroy=()=>{t(),n.animators.delete(e)&&pe("remove",e)}}(c),void 0!==t?b(t):fetch(n).then(e=>e.json()).then(e=>{h||(D(e)?b(e):p(v.document,m.invalidDocumentAtSrc,n))}).catch(e=>{var t;p(v.host,m.loadFailed,n,null!=(t=null==e?void 0:e.message)?t:String(e))}),c}function Ne(t){const r=document.querySelectorAll("["+n+"]");for(let o=0;o<r.length;o++){const l=r[o];if(!l[e]){const r=l.getAttribute(n);r&&(l[e]=Me(x(P({},t),{src:r,container:l})))}}}export{d as PxAnimatorConfigSchema,f as PxDefinitionsSchema,v as PxDiagnosticKind,g as PxNodeBaseSchema,y as PxScrollSchema,p as PxSvgNodeRootSchema,w as PxTimelineEngineSetting,E as PxTriggerSchema,L as createAdapterAnimator,Me as createAnimator,z as generateNewIds,ge as getAllAnimators,Ne as loadTagAnimators,ye as onAnimatorsChange,$ as px,Oe as renderNode,be as setupAnimationTriggers,oe as toDomProps,ie as validateDocument};
|
|
@@ -67,19 +67,31 @@ var PixodeskAnimator = (() => {
|
|
|
67
67
|
return result;
|
|
68
68
|
}
|
|
69
69
|
var Base = class {
|
|
70
|
+
/** Structural schemas (objects, arrays, unions of objects…) pass `false`: they state no scalar default. */
|
|
71
|
+
constructor(_statesDefault) {
|
|
72
|
+
this._statesDefault = _statesDefault;
|
|
73
|
+
}
|
|
70
74
|
_canSanitize(raw) {
|
|
71
75
|
return this.isValid(raw);
|
|
72
76
|
}
|
|
77
|
+
/** A REQUIRED field is never absent; its default is the repair value. */
|
|
78
|
+
absentDefault() {
|
|
79
|
+
return this._default;
|
|
80
|
+
}
|
|
73
81
|
optional() {
|
|
74
82
|
return new Optional(this);
|
|
75
83
|
}
|
|
76
84
|
};
|
|
77
85
|
var Optional = class extends Base {
|
|
78
86
|
constructor(inner) {
|
|
79
|
-
super();
|
|
87
|
+
super(inner._statesDefault);
|
|
80
88
|
this.inner = inner;
|
|
81
89
|
this._default = void 0;
|
|
82
90
|
}
|
|
91
|
+
/** Absent means the inner schema's STATED default — or nothing at all when it states none. */
|
|
92
|
+
absentDefault() {
|
|
93
|
+
return this.inner._statesDefault ? this.inner._default : void 0;
|
|
94
|
+
}
|
|
83
95
|
sanitize(raw) {
|
|
84
96
|
if (raw === void 0 || raw === null) return void 0;
|
|
85
97
|
return this.inner._canSanitize(raw) ? this.inner.sanitize(raw) : void 0;
|
|
@@ -93,8 +105,8 @@ var PixodeskAnimator = (() => {
|
|
|
93
105
|
}
|
|
94
106
|
};
|
|
95
107
|
var Str = class extends Base {
|
|
96
|
-
constructor(_default
|
|
97
|
-
super();
|
|
108
|
+
constructor(_default, statesDefault) {
|
|
109
|
+
super(statesDefault);
|
|
98
110
|
this._default = _default;
|
|
99
111
|
}
|
|
100
112
|
sanitize(raw) {
|
|
@@ -107,8 +119,8 @@ var PixodeskAnimator = (() => {
|
|
|
107
119
|
}
|
|
108
120
|
};
|
|
109
121
|
var Num = class extends Base {
|
|
110
|
-
constructor(_default
|
|
111
|
-
super();
|
|
122
|
+
constructor(_default, statesDefault) {
|
|
123
|
+
super(statesDefault);
|
|
112
124
|
this._default = _default;
|
|
113
125
|
}
|
|
114
126
|
sanitize(raw) {
|
|
@@ -121,8 +133,8 @@ var PixodeskAnimator = (() => {
|
|
|
121
133
|
}
|
|
122
134
|
};
|
|
123
135
|
var Bool = class extends Base {
|
|
124
|
-
constructor(_default
|
|
125
|
-
super();
|
|
136
|
+
constructor(_default, statesDefault) {
|
|
137
|
+
super(statesDefault);
|
|
126
138
|
this._default = _default;
|
|
127
139
|
}
|
|
128
140
|
sanitize(raw) {
|
|
@@ -135,8 +147,9 @@ var PixodeskAnimator = (() => {
|
|
|
135
147
|
}
|
|
136
148
|
};
|
|
137
149
|
var Literal = class extends Base {
|
|
150
|
+
/** A literal IS its own value: absent means it. */
|
|
138
151
|
constructor(value) {
|
|
139
|
-
super();
|
|
152
|
+
super(true);
|
|
140
153
|
this.value = value;
|
|
141
154
|
this._default = value;
|
|
142
155
|
}
|
|
@@ -150,8 +163,8 @@ var PixodeskAnimator = (() => {
|
|
|
150
163
|
}
|
|
151
164
|
};
|
|
152
165
|
var Enum = class extends Base {
|
|
153
|
-
constructor(values, defaultVal) {
|
|
154
|
-
super();
|
|
166
|
+
constructor(values, defaultVal, statesDefault) {
|
|
167
|
+
super(statesDefault);
|
|
155
168
|
this.values = values;
|
|
156
169
|
this._default = defaultVal != null ? defaultVal : values[0];
|
|
157
170
|
}
|
|
@@ -166,8 +179,8 @@ var PixodeskAnimator = (() => {
|
|
|
166
179
|
};
|
|
167
180
|
var UNION_MEMBER_ERROR_LIMIT = 4;
|
|
168
181
|
var Union = class extends Base {
|
|
169
|
-
constructor(schemas, defaultVal) {
|
|
170
|
-
super();
|
|
182
|
+
constructor(schemas, defaultVal, statesDefault) {
|
|
183
|
+
super(statesDefault);
|
|
171
184
|
this.schemas = schemas;
|
|
172
185
|
/** Structural tag read by {@link describeSchema} — `schemas` alone cannot tell Union from Tuple. */
|
|
173
186
|
this._kind = "union";
|
|
@@ -221,7 +234,7 @@ var PixodeskAnimator = (() => {
|
|
|
221
234
|
var DiscriminatedUnion = class extends Base {
|
|
222
235
|
constructor(_key, _schemas, defaultVal) {
|
|
223
236
|
var _a;
|
|
224
|
-
super();
|
|
237
|
+
super(false);
|
|
225
238
|
this._key = _key;
|
|
226
239
|
this._schemas = _schemas;
|
|
227
240
|
/** Structural tag read by {@link describeSchema}. */
|
|
@@ -261,13 +274,19 @@ var PixodeskAnimator = (() => {
|
|
|
261
274
|
return schema ? schema._canSanitize(raw) : this._schemas[0]._canSanitize(raw);
|
|
262
275
|
}
|
|
263
276
|
};
|
|
277
|
+
function statedDefaults(shape) {
|
|
278
|
+
const out = {};
|
|
279
|
+
for (const key of Object.keys(shape)) if (shape[key]._statesDefault) out[key] = shape[key].absentDefault();
|
|
280
|
+
return Object.freeze(out);
|
|
281
|
+
}
|
|
264
282
|
var Obj = class extends Base {
|
|
265
283
|
constructor(_shape) {
|
|
266
|
-
super();
|
|
284
|
+
super(false);
|
|
267
285
|
this._shape = _shape;
|
|
268
286
|
const d = {};
|
|
269
287
|
for (const key of Object.keys(_shape)) d[key] = _shape[key]._default;
|
|
270
288
|
this._default = d;
|
|
289
|
+
this.defaults = statedDefaults(_shape);
|
|
271
290
|
}
|
|
272
291
|
sanitize(raw) {
|
|
273
292
|
const src = raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
|
|
@@ -309,12 +328,13 @@ var PixodeskAnimator = (() => {
|
|
|
309
328
|
};
|
|
310
329
|
var OpenObj = class extends Base {
|
|
311
330
|
constructor(_shape, _openSchema) {
|
|
312
|
-
super();
|
|
331
|
+
super(false);
|
|
313
332
|
this._shape = _shape;
|
|
314
333
|
this._openSchema = _openSchema;
|
|
315
334
|
const d = {};
|
|
316
335
|
for (const key of Object.keys(_shape)) d[key] = _shape[key]._default;
|
|
317
336
|
this._default = d;
|
|
337
|
+
this.defaults = statedDefaults(_shape);
|
|
318
338
|
}
|
|
319
339
|
sanitize(raw) {
|
|
320
340
|
const src = raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
|
|
@@ -359,7 +379,7 @@ var PixodeskAnimator = (() => {
|
|
|
359
379
|
};
|
|
360
380
|
var Arr = class extends Base {
|
|
361
381
|
constructor(item) {
|
|
362
|
-
super();
|
|
382
|
+
super(false);
|
|
363
383
|
this.item = item;
|
|
364
384
|
this._default = [];
|
|
365
385
|
}
|
|
@@ -391,7 +411,7 @@ var PixodeskAnimator = (() => {
|
|
|
391
411
|
};
|
|
392
412
|
var Rec = class extends Base {
|
|
393
413
|
constructor(value) {
|
|
394
|
-
super();
|
|
414
|
+
super(false);
|
|
395
415
|
this.value = value;
|
|
396
416
|
/** Structural tag read by {@link describeSchema}. */
|
|
397
417
|
this._kind = "record";
|
|
@@ -425,7 +445,7 @@ var PixodeskAnimator = (() => {
|
|
|
425
445
|
};
|
|
426
446
|
var Any = class extends Base {
|
|
427
447
|
constructor() {
|
|
428
|
-
super(
|
|
448
|
+
super(false);
|
|
429
449
|
this._default = void 0;
|
|
430
450
|
}
|
|
431
451
|
sanitize(raw) {
|
|
@@ -440,7 +460,7 @@ var PixodeskAnimator = (() => {
|
|
|
440
460
|
};
|
|
441
461
|
var Defined = class extends Base {
|
|
442
462
|
constructor() {
|
|
443
|
-
super(
|
|
463
|
+
super(false);
|
|
444
464
|
this._default = void 0;
|
|
445
465
|
}
|
|
446
466
|
sanitize(raw) {
|
|
@@ -457,7 +477,7 @@ var PixodeskAnimator = (() => {
|
|
|
457
477
|
};
|
|
458
478
|
var Lazy = class extends Base {
|
|
459
479
|
constructor(fn, _default) {
|
|
460
|
-
super();
|
|
480
|
+
super(false);
|
|
461
481
|
this.fn = fn;
|
|
462
482
|
this._default = _default;
|
|
463
483
|
this.resolved = null;
|
|
@@ -478,7 +498,7 @@ var PixodeskAnimator = (() => {
|
|
|
478
498
|
};
|
|
479
499
|
var Tuple = class extends Base {
|
|
480
500
|
constructor(schemas) {
|
|
481
|
-
super();
|
|
501
|
+
super(false);
|
|
482
502
|
this.schemas = schemas;
|
|
483
503
|
/** Structural tag read by {@link describeSchema} — `schemas` alone cannot tell Tuple from Union. */
|
|
484
504
|
this._kind = "tuple";
|
|
@@ -510,22 +530,29 @@ var PixodeskAnimator = (() => {
|
|
|
510
530
|
function implementsInterface() {
|
|
511
531
|
return (schema) => schema;
|
|
512
532
|
}
|
|
533
|
+
function string(defaultVal) {
|
|
534
|
+
return defaultVal === void 0 ? new Str("", false) : new Str(defaultVal, true);
|
|
535
|
+
}
|
|
536
|
+
function number(defaultVal) {
|
|
537
|
+
return defaultVal === void 0 ? new Num(0, false) : new Num(defaultVal, true);
|
|
538
|
+
}
|
|
539
|
+
function boolean(defaultVal) {
|
|
540
|
+
return defaultVal === void 0 ? new Bool(false, false) : new Bool(defaultVal, true);
|
|
541
|
+
}
|
|
542
|
+
function oneOf(values, defaultVal) {
|
|
543
|
+
return defaultVal === void 0 ? new Enum(values, void 0, false) : new Enum(values, defaultVal, true);
|
|
544
|
+
}
|
|
545
|
+
function unionOf(schemas, defaultVal) {
|
|
546
|
+
return defaultVal === void 0 ? new Union(schemas, void 0, false) : new Union(schemas, defaultVal, true);
|
|
547
|
+
}
|
|
513
548
|
var px = {
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
/** Matches a boolean. Default: false or provided value. */
|
|
519
|
-
boolean: (defaultVal = false) => new Bool(defaultVal),
|
|
520
|
-
/** Matches one exact primitive value; its default is the value itself. */
|
|
549
|
+
string,
|
|
550
|
+
number,
|
|
551
|
+
boolean,
|
|
552
|
+
/** Matches one exact primitive value; absent means the value itself. */
|
|
521
553
|
literal: (value) => new Literal(value),
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
/**
|
|
525
|
-
* Returns the first schema whose isValid passes.
|
|
526
|
-
* TypeScript infers the union of all member types automatically.
|
|
527
|
-
*/
|
|
528
|
-
union: (schemas, defaultVal) => new Union(schemas, defaultVal),
|
|
554
|
+
enum: oneOf,
|
|
555
|
+
union: unionOf,
|
|
529
556
|
/**
|
|
530
557
|
* Discriminated union — reads `raw[key]`, finds the member schema whose
|
|
531
558
|
* literal at `key` matches, then delegates sanitize/isValid to that member.
|
|
@@ -533,7 +560,8 @@ var PixodeskAnimator = (() => {
|
|
|
533
560
|
* TypeScript infers the union of all member types automatically.
|
|
534
561
|
*/
|
|
535
562
|
discriminatedUnion: (key, schemas) => new DiscriminatedUnion(key, schemas),
|
|
536
|
-
/** Typed object — unknown keys are stripped. Required fields fall back to their default.
|
|
563
|
+
/** Typed object — unknown keys are stripped. Required fields fall back to their default.
|
|
564
|
+
* Its `defaults` say what each stated field means when a document leaves it out. */
|
|
537
565
|
object: (shape) => new Obj(shape),
|
|
538
566
|
/**
|
|
539
567
|
* Open object — validates known keys; passes unknown keys through as-is,
|
|
@@ -649,8 +677,11 @@ var PixodeskAnimator = (() => {
|
|
|
649
677
|
offScreen: "pause",
|
|
650
678
|
mouseOut: "continue",
|
|
651
679
|
visibilityThreshold: 0.5,
|
|
652
|
-
visibilityDebounce: 150
|
|
680
|
+
visibilityDebounce: 150,
|
|
681
|
+
finish: "hold"
|
|
653
682
|
};
|
|
683
|
+
var PX_DEFAULT_DURATION_MS = 1e3;
|
|
684
|
+
var PX_DEFAULT_ITERATIONS = 1;
|
|
654
685
|
function resolveTrigger(trigger) {
|
|
655
686
|
var _a, _b, _c, _d, _e;
|
|
656
687
|
return {
|
|
@@ -847,15 +878,15 @@ var PixodeskAnimator = (() => {
|
|
|
847
878
|
var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
|
|
848
879
|
var PxLoopSchema = implementsInterface()(px.object({
|
|
849
880
|
segmentCount: px.number().optional(),
|
|
850
|
-
repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
|
|
851
|
-
direction: px.enum([PxLoopDirection.normal, PxLoopDirection.alternate]).optional()
|
|
881
|
+
repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end], PxLoopRepeatAt.end).optional(),
|
|
882
|
+
direction: px.enum([PxLoopDirection.normal, PxLoopDirection.alternate], PxLoopDirection.normal).optional()
|
|
852
883
|
}));
|
|
853
884
|
var PxPropertyAnimationSchema = implementsInterface()(px.object({
|
|
854
885
|
value: PxKeyframeValueSchema.optional(),
|
|
855
886
|
keyframes: px.array(PxKeyframeSchema).optional(),
|
|
856
887
|
loop: px.union([PxLoopSchema, px.boolean()]).optional(),
|
|
857
888
|
autoOrient: px.boolean().optional(),
|
|
858
|
-
alongPathMode: px.enum([PxAlongPathMode.sampled, PxAlongPathMode.offsetPath]).optional()
|
|
889
|
+
alongPathMode: px.enum([PxAlongPathMode.sampled, PxAlongPathMode.offsetPath], PxAlongPathMode.sampled).optional()
|
|
859
890
|
}));
|
|
860
891
|
var PxTransformPartsSchema = implementsInterface()(px.object({
|
|
861
892
|
translate: px.tuple([px.number(), px.number()]).optional(),
|
|
@@ -885,9 +916,9 @@ var PixodeskAnimator = (() => {
|
|
|
885
916
|
// What happens after a NATURAL finish — `'hold'` (default: keep the end state per
|
|
886
917
|
// `fill`) or `'reset'` (snap back to the start state). One of four occasion keys
|
|
887
918
|
// (`start`, `offScreen`, `mouseOut`, `finish`), all named the same way.
|
|
888
|
-
finish: px.enum([PxFinishAction.hold, PxFinishAction.reset]).optional(),
|
|
889
|
-
visibilityThreshold: px.number().optional(),
|
|
890
|
-
visibilityDebounce: px.number().optional()
|
|
919
|
+
finish: px.enum([PxFinishAction.hold, PxFinishAction.reset], PX_TRIGGER_DEFAULTS.finish).optional(),
|
|
920
|
+
visibilityThreshold: px.number(PX_TRIGGER_DEFAULTS.visibilityThreshold).optional(),
|
|
921
|
+
visibilityDebounce: px.number(PX_TRIGGER_DEFAULTS.visibilityDebounce).optional()
|
|
891
922
|
}));
|
|
892
923
|
var PxGlyphSchema = implementsInterface()(px.object({
|
|
893
924
|
width: px.number(),
|
|
@@ -913,7 +944,7 @@ var PixodeskAnimator = (() => {
|
|
|
913
944
|
PxScrollPhase.exit,
|
|
914
945
|
PxScrollPhase.entryCrossing,
|
|
915
946
|
PxScrollPhase.exitCrossing
|
|
916
|
-
]).optional(),
|
|
947
|
+
], PxScrollPhase.cover).optional(),
|
|
917
948
|
fraction: px.number().optional()
|
|
918
949
|
}));
|
|
919
950
|
var PxScrollRangeSchema = px.object({
|
|
@@ -921,37 +952,37 @@ var PixodeskAnimator = (() => {
|
|
|
921
952
|
end: PxScrollRangePointSchema.optional()
|
|
922
953
|
});
|
|
923
954
|
var PxScrollSchema = implementsInterface()(px.object({
|
|
924
|
-
kind: px.enum([PxScrollKind.view, PxScrollKind.scroll]).optional(),
|
|
925
|
-
axis: px.enum([PxScrollAxis.block, PxScrollAxis.inline, PxScrollAxis.x, PxScrollAxis.y]).optional(),
|
|
926
|
-
source: px.enum([PxScrollSource.nearest, PxScrollSource.root]).optional(),
|
|
955
|
+
kind: px.enum([PxScrollKind.view, PxScrollKind.scroll], PxScrollKind.view).optional(),
|
|
956
|
+
axis: px.enum([PxScrollAxis.block, PxScrollAxis.inline, PxScrollAxis.x, PxScrollAxis.y], PxScrollAxis.block).optional(),
|
|
957
|
+
source: px.enum([PxScrollSource.nearest, PxScrollSource.root], PxScrollSource.nearest).optional(),
|
|
927
958
|
// Free-form: the two keywords `parent`/`scroller` plus any CSS selector.
|
|
928
959
|
subject: px.string().optional(),
|
|
929
960
|
smoothing: px.number().optional(),
|
|
930
|
-
pin: px.boolean().optional(),
|
|
931
|
-
pinAlign: px.enum([PxPinAlign.top, PxPinAlign.center, PxPinAlign.bottom]).optional(),
|
|
961
|
+
pin: px.boolean(false).optional(),
|
|
962
|
+
pinAlign: px.enum([PxPinAlign.top, PxPinAlign.center, PxPinAlign.bottom], PxPinAlign.top).optional(),
|
|
932
963
|
pinOffset: px.number().optional(),
|
|
933
964
|
pinDistance: px.number().optional(),
|
|
934
965
|
range: PxScrollRangeSchema.optional()
|
|
935
966
|
}));
|
|
936
967
|
var PxTimelinePinSchema = implementsInterface()(px.object({
|
|
937
|
-
align: px.enum([PxPinAlign.top, PxPinAlign.center, PxPinAlign.bottom]).optional(),
|
|
968
|
+
align: px.enum([PxPinAlign.top, PxPinAlign.center, PxPinAlign.bottom], PxPinAlign.top).optional(),
|
|
938
969
|
offset: px.number().optional(),
|
|
939
970
|
distance: px.number().optional()
|
|
940
971
|
}));
|
|
941
|
-
var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
|
|
972
|
+
var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js], PxTimelineEngineSetting.auto).optional();
|
|
942
973
|
var PxTimeTimelineSchema = implementsInterface()(px.object({
|
|
943
974
|
type: px.literal("time").optional(),
|
|
944
975
|
engine: PxTimelineEngineSchema,
|
|
945
976
|
frameRate: px.number().optional(),
|
|
946
977
|
// §2.8: duration is a property of the TIMELINE — how long one pass takes.
|
|
947
|
-
duration: px.number().optional(),
|
|
978
|
+
duration: px.number(PX_DEFAULT_DURATION_MS).optional(),
|
|
948
979
|
trigger: PxTriggerSchema.optional(),
|
|
949
|
-
delay: px.number().optional(),
|
|
950
|
-
iterations: px.union([px.number(), px.literal("infinite")]).optional(),
|
|
980
|
+
delay: px.number(0).optional(),
|
|
981
|
+
iterations: px.union([px.number(PX_DEFAULT_ITERATIONS), px.literal("infinite")], PX_DEFAULT_ITERATIONS).optional(),
|
|
951
982
|
// `fillMode` on the wire (CSS `animation-fill-mode`; the runtime view calls it `fill`)
|
|
952
983
|
// — never `fill`, which is paint everywhere else in the format.
|
|
953
|
-
fillMode: px.enum([PxFillMode.forwards, PxFillMode.backwards, PxFillMode.both, PxFillMode.none]).optional(),
|
|
954
|
-
direction: px.enum([PxPlaybackDirection.normal, PxPlaybackDirection.reverse, PxPlaybackDirection.alternate, PxPlaybackDirection.alternateReverse]).optional()
|
|
984
|
+
fillMode: px.enum([PxFillMode.forwards, PxFillMode.backwards, PxFillMode.both, PxFillMode.none], PxFillMode.forwards).optional(),
|
|
985
|
+
direction: px.enum([PxPlaybackDirection.normal, PxPlaybackDirection.reverse, PxPlaybackDirection.alternate, PxPlaybackDirection.alternateReverse], PxPlaybackDirection.normal).optional()
|
|
955
986
|
}));
|
|
956
987
|
var scrollishTimelineShape = {
|
|
957
988
|
// §2.8: duration is a property of the TIMELINE — under scrubbing it is the keyframe
|
|
@@ -962,8 +993,8 @@ var PixodeskAnimator = (() => {
|
|
|
962
993
|
iterations: px.number().optional(),
|
|
963
994
|
engine: PxTimelineEngineSchema,
|
|
964
995
|
frameRate: px.number().optional(),
|
|
965
|
-
axis: px.enum([PxScrollAxis.block, PxScrollAxis.inline, PxScrollAxis.x, PxScrollAxis.y]).optional(),
|
|
966
|
-
source: px.enum([PxScrollSource.nearest, PxScrollSource.root]).optional(),
|
|
996
|
+
axis: px.enum([PxScrollAxis.block, PxScrollAxis.inline, PxScrollAxis.x, PxScrollAxis.y], PxScrollAxis.block).optional(),
|
|
997
|
+
source: px.enum([PxScrollSource.nearest, PxScrollSource.root], PxScrollSource.nearest).optional(),
|
|
967
998
|
subject: px.string().optional(),
|
|
968
999
|
// 'parent' | 'scroller' | any CSS selector
|
|
969
1000
|
smoothing: px.number().optional(),
|
|
@@ -1043,9 +1074,10 @@ var PixodeskAnimator = (() => {
|
|
|
1043
1074
|
}));
|
|
1044
1075
|
var PxMaskedByEffectSchema = implementsInterface()(px.object({
|
|
1045
1076
|
source: px.string().optional(),
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1077
|
+
// SVG's own initial values — what a <mask> does when the attribute is not there.
|
|
1078
|
+
maskType: px.enum([PxMaskType.luminance, PxMaskType.alpha], PxMaskType.luminance).optional(),
|
|
1079
|
+
maskUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox], PxUnits.objectBoundingBox).optional(),
|
|
1080
|
+
maskContentUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox], PxUnits.userSpaceOnUse).optional(),
|
|
1049
1081
|
x: px.number().optional(),
|
|
1050
1082
|
y: px.number().optional(),
|
|
1051
1083
|
width: px.number().optional(),
|
|
@@ -1057,7 +1089,7 @@ var PixodeskAnimator = (() => {
|
|
|
1057
1089
|
var PxStrokeTrimEffectSchema = implementsInterface()(px.object({
|
|
1058
1090
|
offset: PxAnimatableNumberSchema.optional(),
|
|
1059
1091
|
range: PxAnimatableVec2Schema.optional(),
|
|
1060
|
-
subPaths: px.enum([PxStrokeTrimSubPaths.separate, PxStrokeTrimSubPaths.combined]).optional()
|
|
1092
|
+
subPaths: px.enum([PxStrokeTrimSubPaths.separate, PxStrokeTrimSubPaths.combined], PxStrokeTrimSubPaths.separate).optional()
|
|
1061
1093
|
}));
|
|
1062
1094
|
var PxRetimeEffectSchema = implementsInterface()(px.object({
|
|
1063
1095
|
start: px.number().optional(),
|
|
@@ -1089,17 +1121,20 @@ var PixodeskAnimator = (() => {
|
|
|
1089
1121
|
radius: PxAnimatableNumberSchema.optional(),
|
|
1090
1122
|
focal: PxAnimatableVec2Schema.optional(),
|
|
1091
1123
|
stops: PxAnimatableGradientStopsSchema.optional(),
|
|
1092
|
-
|
|
1093
|
-
|
|
1124
|
+
// SVG's own initial values — what a gradient does when the attribute is not there.
|
|
1125
|
+
gradientUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox], PxUnits.objectBoundingBox).optional(),
|
|
1126
|
+
spreadMethod: px.enum([PxGradientSpreadMethod.pad, PxGradientSpreadMethod.reflect, PxGradientSpreadMethod.repeat], PxGradientSpreadMethod.pad).optional(),
|
|
1094
1127
|
gradientTransform: px.string().optional()
|
|
1095
1128
|
}));
|
|
1096
1129
|
var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
|
|
1097
1130
|
var PxTextPathEffectSchema = implementsInterface()(px.object({
|
|
1098
1131
|
pathData: px.string(),
|
|
1099
|
-
pathOverflow
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1132
|
+
// `extend` is what an omitted pathOverflow means (glyphs continue along the tangent); the
|
|
1133
|
+
// other three are SVG's own initial values for the native <textPath> attributes.
|
|
1134
|
+
pathOverflow: px.enum([PxPathOverflow.clip, PxPathOverflow.extend], PxPathOverflow.extend).optional(),
|
|
1135
|
+
lengthAdjust: px.enum([PxLengthAdjust.spacing, PxLengthAdjust.spacingAndGlyphs], PxLengthAdjust.spacing).optional(),
|
|
1136
|
+
method: px.enum([PxTextPathMethod.align, PxTextPathMethod.stretch], PxTextPathMethod.align).optional(),
|
|
1137
|
+
spacing: px.enum([PxTextPathSpacing.auto, PxTextPathSpacing.exact], PxTextPathSpacing.exact).optional(),
|
|
1103
1138
|
startOffset: PxAnimatableNumberSchema.optional(),
|
|
1104
1139
|
textLength: PxAnimatableNumberSchema.optional()
|
|
1105
1140
|
}));
|
|
@@ -3003,7 +3038,7 @@ var PixodeskAnimator = (() => {
|
|
|
3003
3038
|
let seekPosition;
|
|
3004
3039
|
if (config.delay && config.delay < 0 && config.duration) {
|
|
3005
3040
|
const rawSeek = -config.delay;
|
|
3006
|
-
seekPosition = iterations === Infinity ? rawSeek % config.duration : Math.min(rawSeek, config.duration * (iterations != null ? iterations :
|
|
3041
|
+
seekPosition = iterations === Infinity ? rawSeek % config.duration : Math.min(rawSeek, config.duration * (iterations != null ? iterations : PX_DEFAULT_ITERATIONS));
|
|
3007
3042
|
}
|
|
3008
3043
|
const effectOptions = {
|
|
3009
3044
|
duration: config.duration,
|
|
@@ -3110,7 +3145,7 @@ var PixodeskAnimator = (() => {
|
|
|
3110
3145
|
},
|
|
3111
3146
|
"setCurrentTime": (time) => {
|
|
3112
3147
|
var _a2;
|
|
3113
|
-
const ceiling = seekCeilingMs((_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations :
|
|
3148
|
+
const ceiling = seekCeilingMs((_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : PX_DEFAULT_ITERATIONS);
|
|
3114
3149
|
const seek = ceiling > 0 ? clampSeekMs(time, ceiling) : Math.max(0, time);
|
|
3115
3150
|
finishNotified = false;
|
|
3116
3151
|
animations.forEach((a) => {
|
|
@@ -3120,11 +3155,11 @@ var PixodeskAnimator = (() => {
|
|
|
3120
3155
|
"getCurrentProgress": () => {
|
|
3121
3156
|
var _a2;
|
|
3122
3157
|
const t = api.getCurrentTime();
|
|
3123
|
-
return t === null ? null : timeToProgress(t, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations :
|
|
3158
|
+
return t === null ? null : timeToProgress(t, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : PX_DEFAULT_ITERATIONS);
|
|
3124
3159
|
},
|
|
3125
3160
|
"setCurrentProgress": (progress) => {
|
|
3126
3161
|
var _a2;
|
|
3127
|
-
api.setCurrentTime(progressToTimeMs(progress, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations :
|
|
3162
|
+
api.setCurrentTime(progressToTimeMs(progress, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : PX_DEFAULT_ITERATIONS));
|
|
3128
3163
|
},
|
|
3129
3164
|
"destroy": () => {
|
|
3130
3165
|
var _a2;
|