javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +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) { startSliding(startX: number) {
if (this._openAmount === 0) { if (this._openAmount === 0) {
this._optsDirty = true;
this._setState(SlidingState.Enabled); this._setState(SlidingState.Enabled);
} }
this._optsDirty = true;
this._startX = startX + this._openAmount; this._startX = startX + this._openAmount;
this.item.setCssStyle(CSS.transition, 'none'); this.item.setCssStyle(CSS.transition, 'none');
} }
@ -290,9 +290,11 @@ export class ItemSliding {
calculateOptsWidth() { calculateOptsWidth() {
if (this._optsDirty) { if (this._optsDirty) {
this._optsWidthRightSide = 0;
if (this._rightOptions) { if (this._rightOptions) {
this._optsWidthRightSide = this._rightOptions.width(); this._optsWidthRightSide = this._rightOptions.width();
} }
this._optsWidthLeftSide = 0;
if (this._leftOptions) { if (this._leftOptions) {
this._optsWidthLeftSide = this._leftOptions.width(); 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; @ViewChild('myList', {read: List}) list: List;
items: number[] = []; items: number[] = [];
shouldShow: boolean = true; slidingEnabled: boolean = true;
moreText: string = "Dynamic More"; moreText: string = 'Dynamic More';
archiveText: string = "Dynamic Archive"; archiveText: string = 'Dynamic Archive';
constructor(private app: App, private nav: NavController) { constructor(private app: App, private nav: NavController) {
for (let x = 0; x < 5; x++) { for (let x = 0; x < 5; x++) {
@ -20,13 +20,17 @@ class E2EPage {
} }
} }
toggleSliding() {
this.slidingEnabled = !this.slidingEnabled;
}
changeDynamic() { changeDynamic() {
if (this.moreText.includes("Dynamic")) { if (this.moreText.includes('Dynamic')) {
this.moreText = "Changed More"; this.moreText = 'Changed More';
this.archiveText = "Changed Archive"; this.archiveText = 'Changed Archive';
} else { } else {
this.moreText = "Dynamic More"; this.moreText = 'Dynamic More';
this.archiveText = "Dynamic Archive"; this.archiveText = 'Dynamic Archive';
} }
} }

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

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