javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): sliding item supports dynamic options + tests

Browse Source 
Closes #5192
This commit is contained in:
Manu Mtz.-Almeida
2016-06-08 23:58:03 +02:00
committed by Adam Bradley
parent c1d09dd6b2
commit 14d29e687e
3 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/item/item-sliding.ts
View File

@ -224,9 +224,9 @@ export class ItemSliding {
*/
startSliding(startX: number) {
if (this._openAmount === 0) {
this._optsDirty = true;
this._setState(SlidingState.Enabled);
}
this._optsDirty = true;
this._startX = startX + this._openAmount;
this.item.setCssStyle(CSS.transition, 'none');
}
@ -290,9 +290,11 @@ export class ItemSliding {
calculateOptsWidth() {
if (this._optsDirty) {
this._optsWidthRightSide = 0;
if (this._rightOptions) {
this._optsWidthRightSide = this._rightOptions.width();
}
this._optsWidthLeftSide = 0;
if (this._leftOptions) {
this._optsWidthLeftSide = this._leftOptions.width();
}

20
src/components/item/test/sliding/index.ts
View File

@ -9,10 +9,10 @@ class E2EPage {
@ViewChild('myList', {read: List}) list: List;
items: number[] = [];
shouldShow: boolean = true;
slidingEnabled: boolean = true;
moreText: string = "Dynamic More";
archiveText: string = "Dynamic Archive";
moreText: string = 'Dynamic More';
archiveText: string = 'Dynamic Archive';
constructor(private app: App, private nav: NavController) {
for (let x = 0; x < 5; x++) {
@ -20,13 +20,17 @@ class E2EPage {
}
}
toggleSliding() {
this.slidingEnabled = !this.slidingEnabled;
}
changeDynamic() {
if (this.moreText.includes("Dynamic")) {
this.moreText = "Changed More";
this.archiveText = "Changed Archive";
if (this.moreText.includes('Dynamic')) {
this.moreText = 'Changed More';
this.archiveText = 'Changed Archive';
} else {
this.moreText = "Dynamic More";
this.archiveText = "Dynamic Archive";
this.moreText = 'Dynamic More';
this.archiveText = 'Dynamic Archive';
}
}

61
src/components/item/test/sliding/main.html
View File

@ -7,17 +7,21 @@
</ion-toolbar>
<ion-content>
<div padding>
<button block (click)="toggleSliding()">Toggle sliding</button>
<button block (click)="changeDynamic()">Change Dynamic Options</button>
<button block (click)="closeOpened()">Close Opened Items</button>
</div>
<ion-list #myList>
<ion-item-sliding #item>
<button ion-item text-wrap (click)="didClick(item)">
<ion-item-sliding #item0>
<button ion-item text-wrap (click)="didClick(item0)">
<h2>RIGHT side - no icons</h2>
<p>Hey do you want to go to the game tonight?</p>
</button>
<ion-item-options>
<button primary (click)="archive(item)">Archive</button>
<button danger (click)="del(item)">Delete</button>
<ion-item-options *ngIf="slidingEnabled">
<button primary (click)="archive(item0)">Archive</button>
<button danger (click)="del(item0)">Delete</button>
</ion-item-options>
</ion-item-sliding>
@ -26,25 +30,25 @@
<h2>LEFT side - no icons</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="left" (ionSwipe)="del($event)" *ngIf="slidingEnabled">
<button primary (click)="archive(item1)">Archive</button>
<button danger (click)="del(item1)" swipeable>Delete</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item2 *ngIf="shouldShow">
<ion-item-sliding #item2>
<ion-item text-wrap detail-push>
<h2>RIGHT/LEFT side - icons</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-item>
<ion-item-options side="left" (ionSwipe)="unread($event)">
<ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
<button secondary swipeable (click)="unread(item2)">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</button>
</ion-item-options>
<ion-item-options side="right" (ionSwipe)="del(item2)">
<ion-item-options side="right" (ionSwipe)="del(item2)" *ngIf="slidingEnabled">
<button primary (click)="archive(item2)">
<ion-icon name="mail"></ion-icon>Archive
</button>
@ -55,12 +59,12 @@
</ion-item-sliding>
<ion-item-sliding #item3 *ngIf="shouldShow">
<ion-item-sliding #item3>
<ion-item text-wrap detail-push>
<h2>RIGHT/LEFT side - icons (item-left)</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-item>
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)">
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
<button secondary swipeable (click)="unread(item3)">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</button>
@ -70,7 +74,7 @@
<button primary (click)="archive(item3)">
<ion-icon name="mail"></ion-icon>Archive
</button>
<button danger (click)="del(item3)" swipeable>
<button danger (click)="del(item3)" swipeable *ngIf="slidingEnabled">
<ion-icon name="trash"></ion-icon>Delete
</button>
</ion-item-options>
@ -83,14 +87,14 @@
One Line w/ Icon, div only text
</ion-item>
<ion-item-options icon-left (ionSwipe)="archive($event)">
<button primary (click)="archive(item4)" swipeable>
<button primary (click)="archive(item4)" swipeable *ngIf="slidingEnabled">
<ion-icon name="archive"></ion-icon>Archive
</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item5>
<ion-item-sliding #item5 *ngIf="slidingEnabled">
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@ -110,7 +114,7 @@
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<ion-item-sliding #item6>
<ion-item>
One Line, dynamic option
</ion-item>
@ -119,14 +123,14 @@
<ion-icon name="more"></ion-icon>
{{ moreText }}
</button>
<button secondary (click)="archive(item)">
<button secondary (click)="archive(item6)">
<ion-icon name="archive"></ion-icon>
{{ archiveText }}
</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<ion-item-sliding #item7>
<ion-item>
One Line, dynamic icon-left option
</ion-item>
@ -135,14 +139,14 @@
<ion-icon name="more"></ion-icon>
{{ moreText }}
</button>
<button secondary (click)="archive(item)">
<button secondary (click)="archive(item7)">
<ion-icon name="archive"></ion-icon>
{{ archiveText }}
</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item6>
<ion-item-sliding #item8>
<ion-item>
<ion-thumbnail item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@ -151,10 +155,10 @@
<p>Paragraph text.</p>
</ion-item>
<ion-item-options (ionSwipe)="download($event)">
<button primary (click)="archive(item6)">
<button primary (click)="archive(item8)">
<ion-icon name="archive"></ion-icon>Archive
</button>
<button secondary swipeable (click)="download(item6)">
<button secondary swipeable (click)="download(item8)">
<ion-icon name="download" class="download-hide"></ion-icon>
<div class="download-hide">Download</div>
<ion-spinner id="download-spinner"></ion-spinner>
@ -162,7 +166,7 @@
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item-sliding item9>
<ion-item>
<ion-thumbnail item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@ -177,7 +181,7 @@
<p>Paragraph text.</p>
</ion-item>
<button ion-item text-wrap (click)="didClick(item)">
<button ion-item text-wrap (click)="didClick(item9)">
<h2>Normal button (no sliding)</h2>
<p>Hey do you want to go to the game tonight?</p>
</button>
@ -186,22 +190,17 @@
<ion-list>
<ion-item-sliding *ngFor="let data of items" #item8>
<ion-item-sliding *ngFor="let data of items" #item9>
<ion-item text-wrap detail-push>
<h3>ng-for {{data}}</h3>
</ion-item>
<ion-item-options>
<button primary (click)="archive(item8)">Archive</button>
<button primary (click)="archive(item9)">Archive</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<div padding>
<button block (click)="changeDynamic()">Change Dynamic Options</button>
<button block (click)="closeOpened()">Close Opened Items</button>
</div>
</ion-content>
<style>