Skip to content

Commit f788d7b

Browse files
yannbfyannbf
authored
Merge pull request yannbf#35 from corysmc/origin/feature/delete-items
feat(delete-items): Add tap and swipe to delete options
2 parents 4c79855 + 6c09557 commit f788d7b

File tree

5 files changed

+140
-0
lines changed

5 files changed

+140
-0
lines changed

‎src/pages/list/delete-items/delete-items.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<ion-header>
2+
<ion-navbar>
3+
<ion-title>Delete Items</ion-title>
4+
</ion-navbar>
5+
</ion-header>
6+
<ion-content>
7+
<ion-list>
8+
<ion-list-header>
9+
Swipe left to delete
10+
<button item-end ion-button icon-only clear (click)="addItem()">
11+
<ion-icon color="primary" name="add-circle"></ion-icon>
12+
</button>
13+
</ion-list-header>
14+
<ion-item-sliding *ngFor="let item of items; let i = index; ">
15+
<ion-item>
16+
{{item.title}}
17+
</ion-item>
18+
<ion-item-options icon-start (ionSwipe)="items.splice(i,1)">
19+
<button color="danger" ion-button expandable (click)="items.splice(i,1)">
20+
<ion-icon name="trash"></ion-icon>
21+
</button>
22+
</ion-item-options>
23+
</ion-item-sliding>
24+
<ion-list-header>
25+
Tap or swipe to delete
26+
<button item-end ion-button icon-only clear (click)="addThing()">
27+
<ion-icon color="primary" name="add-circle"></ion-icon>
28+
</button>
29+
</ion-list-header>
30+
<ion-item-sliding #slidingItem *ngFor="let thing of things; let i = index; ">
31+
<ion-item #item>
32+
<ion-icon item-start color="danger" name="remove-circle" (click)="openOption(slidingItem, item, $event)"></ion-icon> {{thing.title}}
33+
</ion-item>
34+
<ion-item-options icon-start (ionSwipe)="things.splice(i,1)">
35+
<button color="danger" ion-button expandable (click)="things.splice(i,1)">
36+
<ion-icon name="trash"></ion-icon>
37+
</button>
38+
</ion-item-options>
39+
</ion-item-sliding>
40+
</ion-list>
41+
</ion-content>

‎src/pages/list/delete-items/delete-items.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { DeleteItemsPage } from './delete-items';
4+
5+
@NgModule({
6+
declarations: [
7+
DeleteItemsPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(DeleteItemsPage),
11+
],
12+
exports: [
13+
DeleteItemsPage
14+
]
15+
})
16+
export class DeleteItemsPageModule {}

‎src/pages/list/delete-items/delete-items.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-delete-items {
2+
3+
}

‎src/pages/list/delete-items/delete-items.ts

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3+
import { Item, ItemSliding } from 'ionic-angular';
4+
5+
@IonicPage()
6+
@Component({
7+
selector: 'page-delete-items',
8+
templateUrl: 'delete-items.html',
9+
})
10+
export class DeleteItemsPage {
11+
activeItemSliding: ItemSliding = null;
12+
items = [
13+
{
14+
title: 'Item 1',
15+
},
16+
{
17+
title: 'Item 2',
18+
},
19+
{
20+
title: 'Item 3',
21+
},
22+
]
23+
things = [
24+
{
25+
title: 'Thing 1',
26+
},
27+
{
28+
title: 'Thing 2',
29+
},
30+
{
31+
title: 'Thing 3',
32+
},
33+
]
34+
constructor(public navCtrl: NavController, public navParams: NavParams) {
35+
}
36+
37+
ionViewDidLoad() {
38+
console.log('ionViewDidLoad DeleteItemsPage');
39+
}
40+
addThing(){
41+
console.log('add thing');
42+
this.things.push({title: 'Thing ' + (+this.things.length+1)})
43+
}
44+
addItem(){
45+
console.log('add item');
46+
this.items.push({title: 'Item ' + (+this.items.length+1)})
47+
}
48+
openOption(itemSlide: ItemSliding, item: Item, event) {
49+
console.log('opening item slide..');
50+
event.stopPropagation(); //here if you want item to be tappable
51+
if(this.activeItemSliding!==null){ //use this so that only one active sliding item allowed
52+
this.closeOption();
53+
}
54+
this.activeItemSliding = itemSlide;
55+
let swipeAmount = 33; //set your required swipe amount
56+
//to do, can we make this width calculated?
57+
console.log('swipe amount ', itemSlide);
58+
// console shows itemSlide._optsWidthRightSide is calculated, but it's a private var
59+
60+
itemSlide.startSliding(swipeAmount);
61+
itemSlide.moveSliding(swipeAmount);
62+
63+
itemSlide.setElementClass('active-options-right', true);
64+
item.setElementStyle('transition', null);
65+
item.setElementStyle('transform', 'translate3d(-'+swipeAmount+'px, 0px, 0px)');
66+
}
67+
68+
closeOption() {
69+
console.log('closing item slide..');
70+
71+
if(this.activeItemSliding) {
72+
this.activeItemSliding.close();
73+
this.activeItemSliding = null;
74+
}
75+
}
76+
}

‎src/pages/list/list.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ export class ListPage {
2121
title: 'Sliding Item',
2222
page : 'SlidingItemPage'
2323
},
24+
{
25+
title: 'Delete Items',
26+
page: 'DeleteItemsPage'
27+
}
2428
]
2529
}
2630

0 commit comments

Comments
 (0)