diff --git a/gesturevt/assets/index-1f5ddb5c.js b/gesturevt/assets/index-1f5ddb5c.js new file mode 100644 index 0000000..02e87c2 --- /dev/null +++ b/gesturevt/assets/index-1f5ddb5c.js @@ -0,0 +1 @@ +var G=Object.defineProperty;var U=(s,t,i)=>t in s?G(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var e=(s,t,i)=>(U(s,typeof t!="symbol"?t+"":t,i),i);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))a(n);new MutationObserver(n=>{for(const r of n)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&a(o)}).observe(document,{childList:!0,subtree:!0});function i(n){const r={};return n.integrity&&(r.integrity=n.integrity),n.referrerPolicy&&(r.referrerPolicy=n.referrerPolicy),n.crossOrigin==="use-credentials"?r.credentials="include":n.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function a(n){if(n.ep)return;n.ep=!0;const r=i(n);fetch(n.href,r)}})();var g=(s=>(s[s.LEFT=1]="LEFT",s[s.RIGHT=2]="RIGHT",s))(g||{}),l=(s=>(s[s.DOWN=1]="DOWN",s[s.MOVE=2]="MOVE",s[s.UP=3]="UP",s[s.CANCEL=4]="CANCEL",s))(l||{});function x(s,t,i){return(1-i)*s+i*t}var L=(s=>(s[s.INITIAL=1]="INITIAL",s[s.ACTIVE=2]="ACTIVE",s[s.FINISHED=3]="FINISHED",s))(L||{});const Y=412,_=window.innerWidth,H=Math.min(_,Y);class W{constructor(){e(this,"mLinearDistance",H);e(this,"mMaxDistance",window.innerWidth);e(this,"mNonLinearFactor",0);e(this,"mLatestTouchX",0);e(this,"mLatestTouchY",0);e(this,"mTriggerBack",!1);e(this,"mInitTouchX",0);e(this,"mInitTouchY",0);e(this,"mLatestVelocityX",0);e(this,"mLatestVelocityY",0);e(this,"mStartThresholdX",0);e(this,"mSwipeEdge",g.LEFT);e(this,"mLastUpdateTime",null);e(this,"mState",1)}update(t,i,a,n){(tthis.mStartThresholdX&&this.mSwipeEdge===g.RIGHT)&&(this.mStartThresholdX=t,(this.mSwipeEdge===g.LEFT&&this.mStartThresholdXthis.mInitTouchX)&&(this.mInitTouchX=this.mStartThresholdX));const r=performance.now();this.mLastUpdateTime||(this.mLastUpdateTime=r);const o=r-this.mLastUpdateTime;o==0||o>500?(this.mLatestVelocityX=0,this.mLatestVelocityY=0):(this.mLatestVelocityX=(t-this.mLatestTouchX)/(o/1e3),this.mLatestVelocityY=(i-this.mLatestTouchY)/(o/1e3)),this.mLastUpdateTime=r,this.mLatestTouchX=t,this.mLatestTouchY=i}setTriggerBack(t){this.mTriggerBack!==t&&!t&&(this.mStartThresholdX=this.mLatestTouchX),this.mTriggerBack=t}getTriggerBack(){return this.mTriggerBack}setState(t){this.mState=t}isInInitialState(){return this.mState===1}isActive(){return this.mState===2}isFinished(){return this.mState===3}setGestureStartLocation(t,i,a){this.mInitTouchX=t,this.mInitTouchY=i,this.mLatestTouchX=t,this.mLatestTouchY=i,this.mSwipeEdge=a,this.mStartThresholdX=this.mInitTouchX}updateStartLocation(){this.mInitTouchX=this.mLatestTouchX,this.mInitTouchY=this.mLatestTouchY,this.mStartThresholdX=this.mInitTouchX}reset(){this.mInitTouchX=0,this.mInitTouchY=0,this.mStartThresholdX=0,this.mTriggerBack=!1,this.mState=1,this.mSwipeEdge=g.LEFT}createStartEvent(t){return{x:this.mLatestTouchX,y:this.mLatestTouchY,progress:0,vx:0,vy:0,triggerBack:this.mTriggerBack,edge:this.mSwipeEdge,animation_target:null}}createProgressEvent(){const t=this.getProgress(this.mLatestTouchX);return this.createProgressEventFromProgress(t)}getProgress(t){const i=this.mTriggerBack?this.mInitTouchX:this.mStartThresholdX;let a;this.mSwipeEdge===g.LEFT?a=t-i:a=i-t;const n=Math.max(0,a);let r=this.mLinearDistance,o=this.getMaxDistance();o=o===0?1:o;let m;if(r{a(s+o),b(s+o,t,i-16,a,n)})}class ${constructor(t){e(this,"controller");this.controller=t}onBackMotion(t,i,a,n,r,o){this.controller.onMotionEvent(t,i,a,n,r,o)}onPilferPointers(){this.controller.onPilferPointers()}setTriggerBack(t){this.controller.setTriggerBack(t)}}class z{constructor(t){e(this,"mBackGestureStarted",!1);e(this,"mPostCommitAnimationInProgress",!1);e(this,"mShouldStartOnNextMoveEvent",!1);e(this,"mOnBackStartDispatched",!1);e(this,"mPointerPilfered",!1);e(this,"mCurrentTracker");e(this,"mActiveCallback");e(this,"mBackAnimation");this.mCurrentTracker=new W,this.mActiveCallback=t,this.mBackAnimation=new $(this)}getActiveTracker(){return this.mCurrentTracker.isActive()?this.mCurrentTracker:null}onPilferPointers(){}onPointerDown(t){this.onMotionEvent(t.clientX,t.clientY,0,0,l.DOWN,g.LEFT)}onPointerUp(t){this.onMotionEvent(t.clientX,t.clientY,0,0,l.UP,g.LEFT)}onPointerCancel(t){this.onMotionEvent(t.clientX,t.clientY,0,0,l.CANCEL,g.LEFT)}onPointerMove(t){this.onMotionEvent(t.clientX,t.clientY,0,0,l.MOVE,g.LEFT)}onMotionEvent(t,i,a,n,r,o){let m=this.getActiveTracker();m!=null&&r!==l.UP&&m.update(t,i,a,n),!this.mCurrentTracker.isFinished()&&(r===l.DOWN?this.mBackGestureStarted||(this.mShouldStartOnNextMoveEvent=!0):r===l.MOVE?(!this.mBackGestureStarted&&this.mShouldStartOnNextMoveEvent&&(this.onGestureStarted(t,i,o),this.mShouldStartOnNextMoveEvent=!1),this.onMove()):(r===l.UP||r===l.CANCEL)&&(r===l.CANCEL&&this.setTriggerBack(!1),this.onGestureFinished()))}onGestureStarted(t,i,a){let n;if(this.mCurrentTracker.isInInitialState())n=this.mCurrentTracker;else return;n.setGestureStartLocation(t,i,a),n.setState(L.ACTIVE),this.mBackGestureStarted=!0,this.tryDispatchOnBackStarted(this.mActiveCallback,n.createStartEvent(null))}onMove(){if(!this.mBackGestureStarted||!this.mOnBackStartDispatched)return;const t=this.mCurrentTracker.createProgressEvent();this.dispatchOnBackProgressed(this.mActiveCallback,t)}tryDispatchOnBackStarted(t,i){this.mOnBackStartDispatched||this.dispatchOnBackStarted(t,i)}dispatchOnBackStarted(t,i){t.onBackStarted(i),this.mOnBackStartDispatched=!0}dispatchOrAnimateOnBackInvoked(t,i){let a=!1;const n=this.mCurrentTracker.getMaxDistance(),r=this.mCurrentTracker.createProgressEvent();let o=250,m=3e3,h=n*.3,u=r.x,B=Math.min(Math.max(-m,r.vx),m),I=B/m*h,S=Math.min(Math.max(u+I,0),n);if(!Number.isNaN(S)&&u!=S&&Math.abs(B)>=o){let O=R=>{let X=i.getProgress(R),q=i.createProgressEventFromProgress(X);this.dispatchOnBackProgressed(this.mActiveCallback,q)},y=()=>this.dispatchOnBackInvoked(t);console.log("FLINGING"),b(u,S,200*250/B,O,y),a=!0}a||this.dispatchOnBackInvoked(t)}dispatchOnBackInvoked(t){this.onBackAnimationFinished(),t.onBackInvoked()}dispatchOnBackCancelled(t){this.onBackAnimationFinished(),t.onBackCancelled()}dispatchOnBackProgressed(t,i){t.onBackProgressed(i)}setTriggerBack(t){const i=this.getActiveTracker();i!=null&&i.setTriggerBack(t)}invokeOrCancelBack(t){this.finishBackNavigation(t.getTriggerBack())}onGestureFinished(){const t=this.getActiveTracker();!this.mBackGestureStarted||t==null||(t.getTriggerBack(),this.mBackGestureStarted=!1,t.setState(L.FINISHED),!this.mPostCommitAnimationInProgress&&this.startPostCommitAnimation())}startPostCommitAnimation(){this.mPostCommitAnimationInProgress||(this.mPostCommitAnimationInProgress=!0,this.mCurrentTracker.getTriggerBack()?this.dispatchOrAnimateOnBackInvoked(this.mActiveCallback,this.mCurrentTracker):this.dispatchOnBackCancelled(this.mActiveCallback))}onBackAnimationFinished(){this.mPostCommitAnimationInProgress=!1,(this.mCurrentTracker.isActive()||this.mCurrentTracker.isFinished())&&this.invokeOrCancelBack(this.mCurrentTracker),this.resetTouchTracker()}resetTouchTracker(){if(this.mCurrentTracker.reset(),this.mCurrentTracker.isInInitialState()){this.mBackGestureStarted&&(this.mBackGestureStarted=!1,this.dispatchOnBackCancelled(this.mActiveCallback),this.finishBackNavigation(!1));return}this.mCurrentTracker.isFinished()&&this.mCurrentTracker.getTriggerBack()?(this.finishBackNavigation(!0),this.mCurrentTracker.reset()):this.mCurrentTracker.isFinished()&&this.mCurrentTracker.reset()}finishBackNavigation(t){this.mShouldStartOnNextMoveEvent=!1,this.mOnBackStartDispatched=!1,this.mPointerPilfered=!1}}function D(s,t,i,a){if(i<=0)return;const n=Math.ceil(i/16),r=(t-s)/n;requestAnimationFrame(()=>{a(s+r),D(s+r,t,i-16,a)})}const M=class M{constructor(t){e(this,"mBackCallback");e(this,"mMinDeltaForSwitch",32);e(this,"mSwipeTriggerThreshold",16);e(this,"mSwipeProgressThreshold",412);e(this,"mIsLeftPanel",!0);e(this,"mBaseTranslation",M.BASE_TRANSLATION_DP);e(this,"mStartX",0);e(this,"mStartY",0);e(this,"mCurrentTranslation",0);e(this,"mDesiredTranslation",0);e(this,"mDragSlopPassed",!1);e(this,"mArrowsPointLeft",!0);e(this,"mMaxTranslation",70);e(this,"mTriggerBack",!1);e(this,"mPreviousTouchTranslation",0);e(this,"mTotalTouchDelta",0);this.mBackCallback=t}onMotionEvent(t,i){switch(i){case l.DOWN:this.mDragSlopPassed=!1,this.resetOnDown(),this.mStartX=t.clientX,this.mStartY=t.clientY;break;case l.MOVE:this.handleMoveEvent(t);break;case l.UP:this.mTriggerBack?this.triggerBack():this.cancelBack();break;case l.CANCEL:this.cancelBack();break}}onPointerDown(t){this.onMotionEvent(t,l.DOWN)}onPointerUp(t){this.onMotionEvent(t,l.UP)}onPointerCancel(t){this.onMotionEvent(t,l.CANCEL)}onPointerMove(t){this.onMotionEvent(t,l.MOVE)}triggerBack(){this.mBackCallback.triggerBack(),this.setDesiredTranslation(0,!0)}cancelBack(){this.mBackCallback.cancelBack()}resetOnDown(){this.setTriggerBack(!1,!1),this.setDesiredTranslation(0,!1),this.setCurrentTranslation(0),this.mPreviousTouchTranslation=0,this.mTotalTouchDelta=0}signum(t){return t===0||Number.isNaN(t)?t:Math.sign(t)}saturate(t){return Math.min(1,Math.max(0,t))}handleMoveEvent(t){const i=t.clientX>this.mStartX?t.clientX:this.mStartX,a=t.clientY;let n=Math.abs(i-this.mStartX);const r=a-this.mStartY;let o=n-this.mPreviousTouchTranslation;if(Math.abs(o)>0&&(this.signum(o)===this.signum(this.mTotalTouchDelta)?this.mTotalTouchDelta+=o:this.mTotalTouchDelta=o),this.mPreviousTouchTranslation=n,!this.mDragSlopPassed&&n>this.mSwipeTriggerThreshold&&(this.mDragSlopPassed=!0,navigator.vibrate(1),this.setTriggerBack(!0,!0)),n>this.mBaseTranslation){const h=n-this.mBaseTranslation;let u=this.saturate(h/(window.innerWidth-this.mBaseTranslation));u=u*(this.mMaxTranslation-this.mBaseTranslation),n=this.mBaseTranslation+u}else{const h=this.mBaseTranslation-n;let u=this.saturate(h/this.mBaseTranslation);u=u*(this.mBaseTranslation/4),n=this.mBaseTranslation-u}let m=this.mTriggerBack;if(Math.abs(this.mTotalTouchDelta)>this.mMinDeltaForSwitch){let h=m;m=this.mTotalTouchDelta>0,!h&&m&&navigator.vibrate(1)}Math.abs(r)>Math.abs(i-this.mStartX)*2&&(m=!1),this.setTriggerBack(m,!0),this.mTriggerBack?this.mIsLeftPanel&&this.mArrowsPointLeft||!this.mIsLeftPanel&&this.mArrowsPointLeft:n=0,this.setDesiredTranslation(n,!0)}setTriggerBack(t,i){this.mTriggerBack!==t&&(this.mTriggerBack=t,this.mBackCallback.setTriggerBack(this.mTriggerBack))}setDesiredTranslation(t,i){this.mDesiredTranslation!=t&&(this.mDesiredTranslation=t,i?D(this.mCurrentTranslation,this.mDesiredTranslation,64,a=>(this.setCurrentTranslation(a),Math.abs(this.mCurrentTranslation-this.mDesiredTranslation)<2)):this.setCurrentTranslation(t))}setCurrentTranslation(t){this.mCurrentTranslation=t,this.mBackCallback.updatedChevrons(this.mCurrentTranslation,this.mStartY-80)}};e(M,"BASE_TRANSLATION_DP",50);let v=M;class K{constructor(){e(this,"mValue",0);e(this,"mVelocity",0)}}const c=class c{constructor(t){e(this,"mNaturalFreq",Math.sqrt(c.STIFFNESS_MEDIUM));e(this,"mDampingRatio",c.DAMPING_RATIO_MEDIUM_BOUNCY);e(this,"mInitialized",!1);e(this,"mValueThreshold",0);e(this,"mVelocityThreshold",0);e(this,"mGammaPlus",0);e(this,"mGammaMinus",0);e(this,"mDampedFreq",0);e(this,"mFinalPosition",c.UNSET);e(this,"mMassState",new K);t!==void 0&&(this.mFinalPosition=t)}setStiffness(t){if(t<=0)throw new Error("Spring stiffness constant must be positive.");return this.mNaturalFreq=Math.sqrt(t),this.mInitialized=!1,this}getStiffness(){return this.mNaturalFreq*this.mNaturalFreq}setDampingRatio(t){if(t<0)throw new Error("Damping ratio must be non-negative");return this.mDampingRatio=t,this.mInitialized=!1,this}getDampingRatio(){return this.mDampingRatio}setFinalPosition(t){return this.mFinalPosition=t,this}getFinalPosition(){return this.mFinalPosition}getAcceleration(t,i){t-=this.getFinalPosition();const a=this.mNaturalFreq*this.mNaturalFreq,n=2*this.mNaturalFreq*this.mDampingRatio;return-a*t-n*i}isAtEquilibrium(t,i){return Math.abs(i)1?(this.mGammaPlus=-this.mDampingRatio*this.mNaturalFreq+this.mNaturalFreq*Math.sqrt(this.mDampingRatio*this.mDampingRatio-1),this.mGammaMinus=-this.mDampingRatio*this.mNaturalFreq-this.mNaturalFreq*Math.sqrt(this.mDampingRatio*this.mDampingRatio-1)):this.mDampingRatio>=0&&this.mDampingRatio<1&&(this.mDampedFreq=this.mNaturalFreq*Math.sqrt(1-this.mDampingRatio*this.mDampingRatio)),this.mInitialized=!0}}updateValues(t,i,a){this.init();const n=a/1e3;t-=this.mFinalPosition;let r,o;if(this.mDampingRatio>1){const m=t-(this.mGammaMinus*t-i)/(this.mGammaMinus-this.mGammaPlus),h=(this.mGammaMinus*t-i)/(this.mGammaMinus-this.mGammaPlus);r=m*Math.pow(Math.E,this.mGammaMinus*n)+h*Math.pow(Math.E,this.mGammaPlus*n),o=m*this.mGammaMinus*Math.pow(Math.E,this.mGammaMinus*n)+h*this.mGammaPlus*Math.pow(Math.E,this.mGammaPlus*n)}else if(this.mDampingRatio===1){const m=t,h=i+this.mNaturalFreq*t;r=(m+h*n)*Math.pow(Math.E,-this.mNaturalFreq*n),o=(m+h*n)*Math.pow(Math.E,-this.mNaturalFreq*n)*-this.mNaturalFreq+h*Math.pow(Math.E,-this.mNaturalFreq*n)}else{const m=t,h=1/this.mDampedFreq*(this.mDampingRatio*this.mNaturalFreq*t+i);r=Math.pow(Math.E,-this.mDampingRatio*this.mNaturalFreq*n)*(m*Math.cos(this.mDampedFreq*n)+h*Math.sin(this.mDampedFreq*n)),o=r*-this.mNaturalFreq*this.mDampingRatio+Math.pow(Math.E,-this.mDampingRatio*this.mNaturalFreq*n)*(-this.mDampedFreq*m*Math.sin(this.mDampedFreq*n)+this.mDampedFreq*h*Math.cos(this.mDampedFreq*n))}return this.mMassState.mValue=r+this.mFinalPosition,this.mMassState.mVelocity=o,this.mMassState}setValueThreshold(t){this.mValueThreshold=Math.abs(t),this.mVelocityThreshold=this.mValueThreshold*c.VELOCITY_THRESHOLD_MULTIPLIER}};e(c,"STIFFNESS_HIGH",1e4),e(c,"STIFFNESS_MEDIUM",1500),e(c,"STIFFNESS_LOW",200),e(c,"STIFFNESS_VERY_LOW",50),e(c,"DAMPING_RATIO_HIGH_BOUNCY",.2),e(c,"DAMPING_RATIO_MEDIUM_BOUNCY",.5),e(c,"DAMPING_RATIO_LOW_BOUNCY",.75),e(c,"DAMPING_RATIO_NO_BOUNCY",1),e(c,"VELOCITY_THRESHOLD_MULTIPLIER",1e3/16),e(c,"UNSET",Number.MAX_VALUE);let f=c;const d=class d{constructor(t,i,a){e(this,"mSpring",null);e(this,"mPendingPosition",Number.MAX_VALUE);e(this,"mEndRequested",!1);e(this,"writeCb");e(this,"readCb");e(this,"doneCb",null);e(this,"mLastFrameTime",0);e(this,"mMinVisibleChange",0);e(this,"mRunning",!1);e(this,"mStartValueIsSet",!1);e(this,"mValue",d.UNSET);e(this,"mVelocity",0);this.writeCb=t,this.readCb=i,this.doneCb=a}getSpring(){return this.mSpring}setSpring(t){return this.mSpring=t,this}rafHandler(){const t=performance.now();let i=!1;if(this.mLastFrameTime==0)this.mLastFrameTime=t,this.writeCb(this.mValue);else{let a=t-this.mLastFrameTime;this.mLastFrameTime=t,i=this.updateValueAndVelocity(a),this.writeCb(this.mValue)}i?this.endAnimationInternal(!1):requestAnimationFrame(this.rafHandler.bind(this))}endAnimationInternal(t){this.mRunning=!1,this.mLastFrameTime=0,this.mStartValueIsSet=!1}start(){this.sanityCheck(),this.mSpring&&this.mSpring.setValueThreshold(this.getValueThreshold()),this.mRunning||(this.mRunning=!0,this.mStartValueIsSet||(this.mValue=this.readCb()),requestAnimationFrame(this.rafHandler.bind(this)))}animateToFinalPosition(t){this.mRunning?this.mPendingPosition=t:(this.mSpring==null?this.mSpring=new f(t):this.mSpring.setFinalPosition(t),this.start())}cancel(){this.mRunning&&this.endAnimationInternal(!0),this.mPendingPosition!==d.UNSET&&(this.mSpring==null?this.mSpring=new f(this.mPendingPosition):this.mSpring.setFinalPosition(this.mPendingPosition),this.mPendingPosition=d.UNSET)}skipToEnd(){if(!this.canSkipToEnd())throw new Error("Spring animations can only come to an end when there is damping");this.mRunning&&(this.mEndRequested=!0)}canSkipToEnd(){return this.mSpring!==null&&this.mSpring.mDampingRatio>0}sanityCheck(){if(this.mSpring==null)throw new Error("Incomplete SpringAnimation: Either final position or a spring force needs to be set.")}updateValueAndVelocity(t){if(this.mEndRequested)return this.mPendingPosition!==d.UNSET&&(this.mSpring&&this.mSpring.setFinalPosition(this.mPendingPosition),this.mPendingPosition=d.UNSET),this.mValue=this.mSpring?this.mSpring.getFinalPosition():0,this.mVelocity=0,this.mEndRequested=!1,!0;if(this.mPendingPosition!==d.UNSET){let i;this.mSpring?(i=this.mSpring.updateValues(this.mValue,this.mVelocity,t/2),this.mSpring.setFinalPosition(this.mPendingPosition)):i={mValue:this.mValue,mVelocity:this.mVelocity},this.mPendingPosition=d.UNSET,this.mSpring&&(i=this.mSpring.updateValues(i.mValue,i.mVelocity,t/2)),this.mValue=i.mValue,this.mVelocity=i.mVelocity}else if(this.mSpring){const i=this.mSpring.updateValues(this.mValue,this.mVelocity,t);this.mValue=i.mValue,this.mVelocity=i.mVelocity}return this.isAtEquilibrium(this.mValue,this.mVelocity)?(this.mValue=this.mSpring?this.mSpring.getFinalPosition():0,this.mVelocity=0,!0):!1}getAcceleration(t,i){return this.mSpring?this.mSpring.getAcceleration(t,i):0}isAtEquilibrium(t,i){return this.mSpring?this.mSpring.isAtEquilibrium(t,i):!1}setValueThreshold(t){}getValueThreshold(){return .75}};e(d,"UNSET",Number.MAX_VALUE);let A=d;const k=class k{constructor(){e(this,"mSpring");e(this,"mCallback",null);e(this,"mProgress",0);e(this,"mLastBackEvent",null);e(this,"mBackAnimationInProgress",!1);e(this,"mBackCancelledFinishRunnable",null);e(this,"mOnAnimationEndListener",()=>{this.invokeBackCancelledRunnable(),this.reset()});this.mSpring=new A(i=>{i=Math.min(k.SCALE_FACTOR,Math.max(0,i)),this.setProgress(i),this.updateProgressValue(i)},()=>this.getProgress(),null);const t=new f;t.setStiffness(f.STIFFNESS_MEDIUM),t.setDampingRatio(f.DAMPING_RATIO_NO_BOUNCY),this.mSpring.setSpring(t)}setProgress(t){this.mProgress=t}getProgress(){return this.mProgress}onBackProgressed(t){this.mBackAnimationInProgress&&(this.mLastBackEvent=t,this.mSpring!=null&&this.mSpring.animateToFinalPosition(t.progress*k.SCALE_FACTOR))}onBackStarted(t,i){this.reset(),this.mLastBackEvent=t,this.mCallback=i,this.mBackAnimationInProgress=!0,this.updateProgressValue(0)}reset(){this.mBackCancelledFinishRunnable!=null&&(this.updateProgressValue(0),this.invokeBackCancelledRunnable()),this.mSpring.animateToFinalPosition(0),this.mSpring.canSkipToEnd()?this.mSpring.skipToEnd():this.mSpring.cancel(),this.mBackAnimationInProgress=!1,this.mLastBackEvent=null,this.mCallback=null,this.mProgress=0}onBackCancelled(t){this.mBackCancelledFinishRunnable=t,this.mSpring.doneCb=t,this.mSpring.animateToFinalPosition(0)}isBackAnimationInProgress(){return this.mBackAnimationInProgress}updateProgressValue(t){if(this.mLastBackEvent==null||this.mCallback==null||!this.mBackAnimationInProgress)return;const i=this.mLastBackEvent.x,a=this.mLastBackEvent.y,n=this.mLastBackEvent.vx,r=this.mLastBackEvent.vy,o=t/k.SCALE_FACTOR,m=this.mLastBackEvent.edge,h=this.mLastBackEvent.triggerBack;this.mCallback.onProgressUpdate({x:i,y:a,progress:o,vx:n,vy:r,triggerBack:h,edge:m,animation_target:null})}invokeBackCancelledRunnable(){this.mBackCancelledFinishRunnable&&this.mBackCancelledFinishRunnable(),this.mBackCancelledFinishRunnable=null}};e(k,"SCALE_FACTOR",100);let F=k;const E=[{src:"resources/photos2.png",timeline:"--progress-timeline",animation:"photosshrink",bganimation:"photosshrinkbg"},{src:"resources/photos1.png",timeline:"--progress-timeline",animation:"builtinback"},{src:"resources/cnn3.png",timeline:"--progress-timeline",animation:""},{src:"resources/cnn2.png",timeline:"--progress-timeline",animation:""},{src:"resources/cnn1.png",timeline:"--progress-timeline",animation:"builtinback"},{src:"resources/gmail3.png",timeline:"--progress-timeline",animation:"gmailshrink"},{src:"resources/gmail2.png",timeline:"--progress-timeline",animation:"slidefromleft",incomingTransform:"translateX(-100vw)"},{src:"resources/gmail1.png",timeline:"--progress-timeline",animation:"builtinback"},{src:"resources/mdn3.png",timeline:"--progress-timeline",animation:"fade"},{src:"resources/mdn2.png",timeline:"--progress-timeline",animation:"fade"},{src:"resources/mdn1.png",timeline:"--progress-timeline",animation:"builtinback"},{src:"resources/wiki4.png",timeline:"--progress-timeline",animation:"spin"},{src:"resources/wiki3.png",timeline:"--progress-timeline",animation:"spin"},{src:"resources/wiki2.png",timeline:"--progress-timeline",animation:"spin"},{src:"resources/wiki1.png",timeline:"--progress-timeline",animation:"builtinback"}];function j(s){const t=document.getElementById("progressScroller");t.scrollTop=s*1e4}addEventListener("keydown",()=>console.log("##################"));function J(s){j(s.progress)}const P=new F,p=new z({onBackStarted:s=>{P.onBackStarted(s,{onProgressUpdate:J})},onBackProgressed:s=>{P.onBackProgressed(s)},onBackCancelled:()=>{document.getElementById("progressScroller"),P.onBackCancelled(()=>{})},onBackInvoked:()=>{Z(),P.reset()}}),C=new v({triggerBack:function(){p.setTriggerBack(!0)},cancelBack:function(){p.setTriggerBack(!1)},setTriggerBack:function(s){p.setTriggerBack(s)},updatedChevrons:function(s,t){const i=document.getElementById("chevrons");i.style.left=`${s-50}px`,i.style.width=`${50+10*(s/70)**3}px`,i.style.top=`${Math.max(0,t)}px`}});let T=!1;window.onload=()=>{const s=document.getElementById("backarea");s.addEventListener("pointerdown",t=>{T||(T=!0,C.onPointerDown(t),p.onPointerDown(t),s.setPointerCapture(t.pointerId))}),s.addEventListener("pointerup",t=>{T&&(T=!1,C.onPointerUp(t),p.onPointerUp(t),s.releasePointerCapture(t.pointerId))}),s.addEventListener("pointercancel",t=>{T&&(T=!1,C.onPointerCancel(t),p.onPointerCancel(t),s.releasePointerCapture(t.pointerId))}),s.addEventListener("pointermove",t=>{T&&(C.onPointerMove(t),p.onPointerMove(t))}),Q()};let N=Number.parseInt(window.location.hash.substring(1));Number.isNaN(N)&&(N=E.length-1);function Q(){E.forEach((s,t)=>{if(t>N)return;const i=document.getElementById("stack");if("bganimation"in s){const a=document.createElement("div");a.id=`img${t}`,a.className="screen",a.style.width="100%",a.style.height="100%",a.style.animationDuration="100ms";const n=document.createElement("div");n.style.width="100%",n.style.height="100%",n.style.backgroundColor="black",n.style.animationName=s.bganimation,n.style.animationTimeline=s.timeline,n.style.animationFillMode="both",a.appendChild(n);const r=document.createElement("img");r.src=s.src,r.id=`img${t}`,r.className="screen",a.appendChild(r),i.insertBefore(a,i.firstElementChild)}else{const a=document.createElement("img");a.src=s.src,a.id=`img${t}`,a.className="screen",i.insertBefore(a,i.firstElementChild)}}),V()}function V(){const t=document.getElementById("stack").lastElementChild;if(!t)return;const i=Number.parseInt(t.id.substring(3));let a=t;"incomingTransform"in E[i]&&(a=t.previousElementSibling),a.classList.add("top"),a.classList.add("active"),a.style.animationName=E[i].animation}function Z(){const s=document.getElementById("stack"),t=s.querySelector(".active");t.classList.add("end");let i=()=>{t.classList.remove("active"),t.classList.remove("end"),t.classList.remove("top"),t.style.animationName="",t.style.transform="",t.style.opacity="";const a=s.lastElementChild;s.insertBefore(a,s.firstElementChild),document.getElementById("progressScroller").scrollTop=0,V()};if(t.getAnimations().length>0){t.getAnimations()[0].commitStyles();const a=Number.parseInt(s.lastElementChild.id.substring(3));t.style.animationName=`${E[a].animation}end`,t.getAnimations()[0].addEventListener("finish",i)}else i()} diff --git a/gesturevt/index.html b/gesturevt/index.html index 1a1c448..4e03f9a 100644 --- a/gesturevt/index.html +++ b/gesturevt/index.html @@ -1,5 +1,5 @@ - + @@ -161,6 +161,23 @@ } } + @keyframes photosshrink { + to { + transform: translateX(-20%) translateY(25%) scale(0.65); + } + } + @keyframes photosshrinkbg { + to { + opacity: 0; + } + } + + @keyframes photosshrinkend { + to { + transform: translateX(-20%) translateY(25%) scale(0.65); + } + } + @keyframes spin { to { transform: rotateY(-45deg) rotateX(5deg) scale(0.9); @@ -224,6 +241,7 @@

"origin" in this demo provides a custom back-animation:

    +
  • Photos: Hero use case.
  • CNN: A faulty override, does nothing.
  • GMail: shrink into inbox - slide in settings pannel.
  • MDN: Subtle swipe and fade out
    • diff --git a/gesturevt/resources/photos1.png b/gesturevt/resources/photos1.png new file mode 100644 index 0000000..32a1ce9 Binary files /dev/null and b/gesturevt/resources/photos1.png differ diff --git a/gesturevt/resources/photos2.png b/gesturevt/resources/photos2.png new file mode 100644 index 0000000..86517c4 Binary files /dev/null and b/gesturevt/resources/photos2.png differ