@ionic/core
Version:
Base components for Ionic
1 lines • 10.3 kB
JavaScript
const s=/(^-?\d*\.?\d*)(.*)/,t=32,i=400,e={translateX:1,translateY:1,translateZ:1,scale:1,scaleX:1,scaleY:1,scaleZ:1,rotate:1,rotateX:1,rotateY:1,rotateZ:1,skewX:1,skewY:1,perspective:1},n=window.requestAnimationFrame?window.requestAnimationFrame.bind(window):s=>s(Date.now());class r{constructor(){this._hasDur=!1,this._hasTweenEffect=!1,this._isAsync=!1,this._isReverse=!1,this._destroyed=!1,this.hasChildren=!1,this.isPlaying=!1,this.hasCompleted=!1}addElement(s){if(null!=s)if(s.length>0)for(let t=0;t<s.length;t++)this._addEl(s[t]);else this._addEl(s);return this}_addEl(s){1===s.nodeType&&(this._elements=this._elements||[]).push(s)}add(s){return s.parent=this,this.hasChildren=!0,(this._childAnimations=this._childAnimations||[]).push(s),this}getDuration(s){return s&&void 0!==s.duration?s.duration:void 0!==this._duration?this._duration:this.parent?this.parent.getDuration():0}isRoot(){return!this.parent}duration(s){return this._duration=s,this}getEasing(){return this._isReverse&&void 0!==this._reversedEasingName?this._reversedEasingName:void 0!==this._easingName?this._easingName:this.parent&&this.parent.getEasing()||null}easing(s){return this._easingName=s,this}easingReverse(s){return this._reversedEasingName=s,this}from(s,t){return this._addProp("from",s,t),this}to(s,t,i=!1){const e=this._addProp("to",s,t);return i&&this.afterClearStyles([e.trans?"transform":s]),this}fromTo(s,t,i,e){return this.from(s,t).to(s,i,e)}_getProp(s){if(this._fxProperties)return this._fxProperties.find(t=>t.effectName===s)}_addProp(t,i,n){let r=this._getProp(i);if(!r){const s=1===e[i];r={effectName:i,trans:s,wc:s?"transform":i},(this._fxProperties=this._fxProperties||[]).push(r)}const o={val:n,num:0,effectUnit:""};if(r[t]=o,"string"==typeof n&&n.indexOf(" ")<0){const t=n.match(s);if(t){const s=parseFloat(t[1]);isNaN(s)||(o.num=s),o.effectUnit=t[0]!==t[2]?t[2]:""}}else"number"==typeof n&&(o.num=n);return r}beforeAddClass(s){return(this._beforeAddClasses=this._beforeAddClasses||[]).push(s),this}beforeRemoveClass(s){return(this._beforeRemoveClasses=this._beforeRemoveClasses||[]).push(s),this}beforeStyles(s){return this._beforeStyles=s,this}beforeClearStyles(s){this._beforeStyles=this._beforeStyles||{};for(const t of s)this._beforeStyles[t]="";return this}beforeAddRead(s){return(this._readCallbacks=this._readCallbacks||[]).push(s),this}beforeAddWrite(s){return(this._writeCallbacks=this._writeCallbacks||[]).push(s),this}afterAddClass(s){return(this._afterAddClasses=this._afterAddClasses||[]).push(s),this}afterRemoveClass(s){return(this._afterRemoveClasses=this._afterRemoveClasses||[]).push(s),this}afterStyles(s){return this._afterStyles=s,this}afterClearStyles(s){this._afterStyles=this._afterStyles||{};for(const t of s)this._afterStyles[t]="";return this}play(s){this._destroyed||(this._isAsync=this._hasDuration(s),this._clearAsync(),this._playInit(s),n(()=>{n(()=>{this._playDomInspect(s)})}))}playAsync(s){return new Promise(t=>(this.onFinish(t,{oneTimeCallback:!0,clearExistingCallbacks:!0}),this.play(s),this))}playSync(){if(!this._destroyed){const s={duration:0};this._isAsync=!1,this._clearAsync(),this._playInit(s),this._playDomInspect(s)}}_playInit(s){this._hasTweenEffect=!1,this.isPlaying=!0,this.hasCompleted=!1,this._hasDur=this.getDuration(s)>t;const i=this._childAnimations;if(i)for(const t of i)t._playInit(s);this._hasDur&&(this._progress(0),this._willChange(!0))}_playDomInspect(s){this._beforeAnimation();const t=this.getDuration(s);this._isAsync&&this._asyncEnd(t,!0),this._playProgress(s),this._isAsync&&!this._destroyed&&n(()=>{this._playToStep(1)})}_playProgress(s){const t=this._childAnimations;if(t)for(const i of t)i._playProgress(s);this._hasDur?this._setTrans(this.getDuration(s),!1):(this._progress(1),this._setAfterStyles(),this._didFinish(!0))}_playToStep(s){if(!this._destroyed){const t=this._childAnimations;if(t)for(const i of t)i._playToStep(s);this._hasDur&&this._progress(s)}}_asyncEnd(s,t){const e=this;e._unregisterTrnsEnd=function(s,t){let i;const e={passive:!0};function n(){i&&i()}function r(i){s===i.target&&(n(),t(i))}return s&&(s.addEventListener("webkitTransitionEnd",r,e),s.addEventListener("transitionend",r,e),i=(()=>{s.removeEventListener("webkitTransitionEnd",r,e),s.removeEventListener("transitionend",r,e)})),n}(e._transEl(),function(){e._clearAsync(),e._playEnd(),e._didFinishAll(t,!0,!1)}),e._timerId=setTimeout(function(){e._timerId=void 0,e._clearAsync(),e._playEnd(t?1:0),e._didFinishAll(t,!0,!1)},s+i)}_playEnd(s){const t=this._childAnimations;if(t)for(const i of t)i._playEnd(s);this._hasDur&&(void 0!==s&&(this._setTrans(0,!0),this._progress(s)),this._setAfterStyles(),this._willChange(!1))}_hasDuration(s){if(this.getDuration(s)>t)return!0;const i=this._childAnimations;if(i)for(const t of i)if(t._hasDuration(s))return!0;return!1}_hasDomReads(){if(this._readCallbacks&&this._readCallbacks.length>0)return!0;const s=this._childAnimations;if(s)for(const t of s)if(t._hasDomReads())return!0;return!1}stop(s=1){this._clearAsync(),this._hasDur=!0,this._playEnd(s)}_clearAsync(){this._unregisterTrnsEnd&&this._unregisterTrnsEnd(),this._timerId&&clearTimeout(this._timerId),this._timerId=this._unregisterTrnsEnd=void 0}_progress(s){let t;const i=this._elements,e=this._fxProperties;if(!i||0===i.length||!e||this._destroyed)return;this._isReverse&&(s=1-s);let n,r=0,o=0,h="";for(r=0;r<e.length;r++)if((n=e[r]).from&&n.to){const e=n.from.num,r=n.to.num,a=e!==r;if(a&&(this._hasTweenEffect=!0),0===s?t=n.from.val:1===s?t=n.to.val:a&&(t=(r-e)*s+e+n.to.effectUnit),null!==t){const s=n.effectName;if(n.trans)h+=s+"("+t+") ";else for(o=0;o<i.length;o++)i[o].style.setProperty(s,t)}}if(h.length>0)for((!this._isReverse&&1!==s||this._isReverse&&0!==s)&&(h+="translateZ(0px)"),r=0;r<i.length;r++)i[r].style.setProperty("transform",h)}_setTrans(s,t){const i=this._elements;if(!i||0===i.length||!this._fxProperties)return;const e=t?"linear":this.getEasing(),n=s+"ms";for(const{style:t}of i)s>0?(t.transitionDuration=n,null!==e&&(t.transitionTimingFunction=e)):t.transitionDuration="0"}_beforeAnimation(){this._fireBeforeReadFunc(),this._fireBeforeWriteFunc(),this._setBeforeStyles()}_setBeforeStyles(){const s=this._childAnimations;if(s)for(const t of s)t._setBeforeStyles();const t=this._elements;if(!t||0===t.length||this._isReverse)return;const i=this._beforeAddClasses,e=this._beforeRemoveClasses;for(const s of t){const t=s.classList;if(i)for(const s of i)t.add(s);if(e)for(const s of e)t.remove(s);if(this._beforeStyles)for(const[t,i]of Object.entries(this._beforeStyles))s.style.setProperty(t,i)}}_fireBeforeReadFunc(){const s=this._childAnimations;if(s)for(const t of s)t._fireBeforeReadFunc();const t=this._readCallbacks;if(t)for(const s of t)s()}_fireBeforeWriteFunc(){const s=this._childAnimations;if(s)for(const t of s)t._fireBeforeWriteFunc();const t=this._writeCallbacks;if(t)for(const s of t)s()}_setAfterStyles(){const s=this._elements;if(s)for(const t of s){const s=t.classList;if(t.style.transitionDuration=t.style.transitionTimingFunction="",this._isReverse){const i=this._beforeAddClasses;if(i)for(const t of i)s.remove(t);const e=this._beforeRemoveClasses;if(e)for(const t of e)s.add(t);const n=this._beforeStyles;if(n)for(const s of Object.keys(n))t.style.removeProperty(s)}else{const i=this._afterAddClasses;if(i)for(const t of i)s.add(t);const e=this._afterRemoveClasses;if(e)for(const t of e)s.remove(t);const n=this._afterStyles;if(n)for(const[s,i]of Object.entries(n))t.style.setProperty(s,i)}}}_willChange(s){let t;const i=this._fxProperties;let e;if(s&&i){t=[];for(const s of i){const i=s.wc;"webkitTransform"===i?t.push("transform","-webkit-transform"):void 0!==i&&t.push(i)}e=t.join(",")}else e="";const n=this._elements;if(n)for(const s of n)s.style.setProperty("will-change",e)}progressStart(){this._clearAsync(),this._beforeAnimation(),this._progressStart()}_progressStart(){const s=this._childAnimations;if(s)for(const t of s)t._progressStart();this._setTrans(0,!0),this._willChange(!0)}progressStep(s){s=Math.min(1,Math.max(0,s));const t=this._childAnimations;if(t)for(const i of t)i.progressStep(s);this._progress(s)}progressEnd(s,t,i=-1){this._isReverse&&(t=1-t);const e=s?1:0,r=Math.abs(t-e);i<0?i=this._duration||0:r<.05&&(i=0),this._isAsync=i>30,this._progressEnd(s,e,i,this._isAsync),this._isAsync&&(this._asyncEnd(i,s),this._destroyed||n(()=>{this._playToStep(e)}))}_progressEnd(s,t,i,e){const n=this._childAnimations;if(n)for(const r of n)r._progressEnd(s,t,i,e);e?(this.isPlaying=!0,this.hasCompleted=!1,this._hasDur=!0,this._willChange(!0),this._setTrans(i,!1)):(this._progress(t),this._willChange(!1),this._setAfterStyles(),this._didFinish(s))}onFinish(s,t){return t&&t.clearExistingCallbacks&&(this._onFinishCallbacks=this._onFinishOneTimeCallbacks=void 0),t&&t.oneTimeCallback?(this._onFinishOneTimeCallbacks=this._onFinishOneTimeCallbacks||[],this._onFinishOneTimeCallbacks.push(s)):(this._onFinishCallbacks=this._onFinishCallbacks||[],this._onFinishCallbacks.push(s)),this}_didFinishAll(s,t,i){const e=this._childAnimations;if(e)for(const n of e)n._didFinishAll(s,t,i);(t&&this._isAsync||i&&!this._isAsync)&&this._didFinish(s)}_didFinish(s){if(this.isPlaying=!1,this.hasCompleted=s,this._onFinishCallbacks)for(const s of this._onFinishCallbacks)s(this);if(this._onFinishOneTimeCallbacks){for(const s of this._onFinishOneTimeCallbacks)s(this);this._onFinishOneTimeCallbacks.length=0}}reverse(s=!0){const t=this._childAnimations;if(t)for(const i of t)i.reverse(s);return this._isReverse=!!s,this}destroy(){this._didFinish(!1),this._destroyed=!0;const s=this._childAnimations;if(s)for(const t of s)t.destroy();this._clearAsync(),this._elements&&(this._elements.length=0),this._readCallbacks&&(this._readCallbacks.length=0),this._writeCallbacks&&(this._writeCallbacks.length=0),this.parent=void 0,this._childAnimations&&(this._childAnimations.length=0),this._onFinishCallbacks&&(this._onFinishCallbacks.length=0),this._onFinishOneTimeCallbacks&&(this._onFinishOneTimeCallbacks.length=0)}_transEl(){const s=this._childAnimations;if(s)for(const t of s){const s=t._transEl();if(s)return s}return this._hasTweenEffect&&this._hasDur&&void 0!==this._elements&&this._elements.length>0?this._elements[0]:null}}function o(s,t,i){return s?s(r,t,i):Promise.resolve(new r)}export{o as create};