HI all i am using swipe in Swipe out option for Mark attendance in my app. I am using Ionic Animation And Gesture. It is working fine when i am on the page swipe in or out. But if i Swipe in and not doing swipe out and close the application and open again the button position again comes to in. here is my ts and html code
import {
Component,
OnInit,
ViewChild,
ElementRef,
QueryList,
AfterViewInit,
NgZone
} from "@angular/core";
import "@capacitor-community/camera-preview";
import { Animation, Gesture, GestureController } from "@ionic/angular";
import { AnimationController } from "@ionic/angular";
@Component({
selector: "app-firstpage",
templateUrl: "./firstpage.page.html",
styleUrls: ["./firstpage.page.scss"]
})
export class FirstpagePage implements AfterViewInit {
@ViewChild("square", { read: ElementRef }) square: ElementRef;
private gesture?: Gesture;
private animation?: Animation;
private started: boolean = false;
private initialStep: any;
private MAX_TRANSLATE: number;
image = null;
cameraActive = false;
address: any;
address1: any;
width: any;
longPressActive: boolean = false;
swipeInButton: boolean;
swipeOutButton: boolean;
shouldComplete: boolean;
constructor(
private animationCtrl: AnimationController,
private gestureCtrl: GestureController,
private zone: NgZone
) {}
ngAfterViewInit() {}
ionViewWillEnter() {
if (localStorage.getItem("swipeInOut")) {
this.swipeInButton = false;
this.swipeOutButton = true;
this.zone.run(()=>{
// this.animation.progressStep(1);
this.initialStep = localStorage.getItem('initialStep');
// progressEnd(playTo: 0 | 1 | undefined, step: number, dur?: number): void;
// this.animation.progressEnd(1, 1,1000)
})
console.log("inside if localstorage", localStorage.getItem("swipeInOut"));
}
else {
console.log("inside else localStorage");
this.swipeInButton = true;
this.swipeOutButton = false;
this.initialStep = localStorage.getItem('initialStep');
}
let el = document.querySelector(".track");
console.log("el width", el.clientWidth);
this.MAX_TRANSLATE = el.clientWidth - 60;
// let button = document.querySelector(".in");
this.animation = this.animationCtrl.create().addElement(this.square.nativeElement)
.duration(1000)
.fromTo(
"transform",
"translateX(0)",
`translateX(${this.MAX_TRANSLATE}px)`
);
this.gesture = this.gestureCtrl.create({
el: this.square.nativeElement,
threshold: 0,
gestureName: "square-drag",
onMove: ev => {
this.onMove(ev);
console.log('onMove',ev)
},
onEnd: ev => {
this.onEnd(ev);
console.log('on End',ev)
}
});
this.gesture.enable(true);
}
private onMove(ev) {
// if (!this.started) {
this.animation.progressStart(true, this.MAX_TRANSLATE);
// this.started = true;
// }
this.animation.progressStep(this.getStep(ev));
}
private onEnd(ev) {
// if (!this.started) {
// return;
// }
this.gesture.enable(false);
const step = this.getStep(ev);
console.log("step", step);
const shouldComplete = step > 0.5;
this.animation.progressEnd(shouldComplete ? 1 : 0, step);
this.animation.onFinish(() => {
this.gesture.enable(true);
this.zone.run(() => {
if (shouldComplete) {
console.log("inside run");
localStorage.setItem("swipeInOut", "true");
this.swipeInButton = false;
this.swipeOutButton = true;
this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
console.log('this.initialStep if',this.initialStep);
localStorage.setItem('initialStep',this.initialStep)
// this.started = false;
} else {
console.log("inside run else");
localStorage.setItem("swipeInOut", "false");
this.swipeInButton = true;
this.swipeOutButton = false;
this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
localStorage.setItem('initialStep',this.initialStep)
console.log('this.initialStep eklse',this.initialStep);
// this.started = false;
}
});
});
// this.animation.onFinish()
// this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
// this.started = false;
}
private clamp(min, n, max) {
return Math.max(min, Math.min(n, max));
}
private getStep(ev) {
const delta = this.initialStep + ev.deltaX;
return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
}
}
and html code
<div class="track" >
<div>
<ion-text style="position: absolute;top:20px;right:30px;" *ngIf="swipeInButton"> Swipe to CLOCK IN</ion-text>
<ion-text style="position: absolute;top:20px;left:30px;" *ngIf="swipeOutButton"> Swipe to CLOCK OUT</ion-text>
<div>
<ion-button class="in" color="light" expand="block" #square>
<ion-icon slot="icon-only" name="arrow-forward-outline" color="dark" *ngIf="swipeInButton">IN</ion-icon>
<ion-icon slot="icon-only" name="arrow-back-outline" color="dark" *ngIf="swipeOutButton">OUT</ion-icon>
</ion-button>
</div>
</div>
