ionic generate page gesture
Copy and Paste the html code to your Components .html file.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Gesture</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card (tap)="tapEvent($event)" class="cardStyle">
<ion-item>
Tapped: {{tap}} times
</ion-item>
</ion-card>
<ion-card (press)="pressEvent($event)" class="cardStyle">
<ion-item>
Pressed: {{press}} times
</ion-item>
</ion-card>
<ion-card (pan)="panEvent($event)" >
<ion-item [ngStyle]="calculateStyle()">
Panned: {{pan}} times <br>
Panning: {{panDirection}}
</ion-item>
</ion-card>
<ion-card (swipe)="swipeEvent($event)" (tap)="changeColor()" class="cardStyle">
<ion-item id="swipeItem" >
Swiped: {{swipe}} times
</ion-item>
</ion-card>
</ion-content>
In the above code we have defined cards individually for every event with their corresponding function calls.
Copy and Paste the below ts code to your Components .ts file.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the GesturePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-gesture',
templateUrl: 'gesture.html',
})
export class GesturePage {
public press: number = 0;
public pan: number = 0;
public swipe: number = 0;
public tap: number = 0;
public pinch: number = 0;
public panDirection:string = "";
public bgHorz: number = 0 ;
public lastBgH: number = 0 ;
public bgVert: number = 0 ;
public lastBgV: number = 0 ;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad GesturePage');
}
// function to call when item is pressed.
pressEvent(e) {
this.press++;
}
// function to call when item is panned.
panEvent(e) {
console.log(e.additionalEvent+"||"+e.direction)
console.log(e.deltaX +"||"+e.deltaY)
this.pan++
if(e.direction == 1){
this.panDirection = "None";
}else if(e.direction == 2){
this.panDirection ="Left";
}else if(e.direction == 4){
this.panDirection = "Right";
}else if(e.direction == 6){
this.panDirection = "HORIZONTAL";
}else if(e.direction == 8){
this.panDirection = "Up";
}else if(e.direction == 16){
this.panDirection = "Down";
}else if(e.direction == 24){
this.panDirection = "VERTICAL";
}else{
this.panDirection = "ALL";
}
// logic to pan image
var stepH = e.deltaX /10 ;
var stepV = e.deltaY /10 ;
this.bgHorz = this.bgHorz + (this.lastBgH - stepH) ;
if (this.bgHorz < 0) {
this.bgHorz = 0 ;
} else {
if (this.bgHorz > 100)
this.bgHorz = 100 ;
}
this.bgVert = this.bgVert + (this.lastBgV - stepV) ;
if (this.bgVert < 0) {
this.bgVert = 0 ;
} else {
if (this.bgVert > 100)
this.bgVert = 100 ;
}
this.calculateStyle()
}
// function to call when item panning is ended.
panEnd($event){
//events pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown
console.log("Panning Ended")
}
// function to calculate the position of image when it is panned.
calculateStyle() {
var style = {
backgroundImage : 'url("../assets/ionicFramework.png")',
backgroundPositionX : this.bgHorz+'%',
backgroundPositionY : this.bgVert+'%',
backgroundRepeat: 'no-repeat',
height:"200px"
} ;
return style ;
}
// function to call when item is swiped.
swipeEvent(e) {
this.swipe++
console.log('' + e.direction);
// Swipe Direction "DIRECTION_LEFT"
if(e.direction == 2){
document.getElementById("swipeItem").style.backgroundColor = "#ff0026db"
document.getElementById("swipeItem").style.color = "white"
}
// Swipe Direction "DIRECTION_RIGHT"
if(e.direction == 4){
document.getElementById("swipeItem").style.backgroundColor = "#189666"
document.getElementById("swipeItem").style.color = "white"
}
/** --Direction for swip event--
DIRECTION_NONE 1
DIRECTION_LEFT 2
DIRECTION_RIGHT 4
DIRECTION_UP 8
DIRECTION_DOWN 16
DIRECTION_HORIZONTAL 6
DIRECTION_VERTICAL 24
DIRECTION_ALL 30
--Direction for swip event-- **/
}
// function to call when item is tapped.
tapEvent(e) {
this.tap++
}
// function to call when qwiped item is tapped.
changeColor(){
document.getElementById("swipeItem").style.backgroundColor = "white"
document.getElementById("swipeItem").style.color = "black"
}
}
Now run the project to check the events in action. feel free to comment below for any queries.
With more than 10,000 domains under management of PK Domain, we are the one of the most reliable web hosting providers of Pakistan. Our hosting packages are much economical, which are in everybody reach ranging from the Web Hosting in Pakistan for professional websites, business hosting for the small-oriented business circles to professional web hosting for larger organizations. Visit www.pkdomain.com.pk to get information about cheap domain hosting prices.
ReplyDelete