Skip to content

Commit

Permalink
fix(item): sliding item supports dynamic options + tests
Browse files Browse the repository at this point in the history 
Closes #5192
  • Loading branch information
@manucorporat @adamdbradley
manucorporat authored and adamdbradley committed Jun 8, 2016
1 parent c1d09dd commit 14d29e6
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 40 deletions.
4 changes: 3 additions & 1 deletion src/components/item/item-sliding.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down Expand Up @@ -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();
}
Expand Down
20 changes: 12 additions & 8 deletions src/components/item/test/sliding/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,28 @@ 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++) {
this.items.push(x);
}
}

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';
}
}

Expand Down
61 changes: 30 additions & 31 deletions src/components/item/test/sliding/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -26,25 +30,25 @@ <h2>RIGHT side - no icons</h2>
<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>
Expand All @@ -55,12 +59,12 @@ <h2>RIGHT/LEFT side - icons</h2>
</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>
Expand All @@ -70,7 +74,7 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
<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>
Expand All @@ -83,14 +87,14 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
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==">
Expand All @@ -110,7 +114,7 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
</ion-item-options>
</ion-item-sliding>

<ion-item-sliding #item>
<ion-item-sliding #item6>
<ion-item>
One Line, dynamic option
</ion-item>
Expand All @@ -119,14 +123,14 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
<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>
Expand All @@ -135,14 +139,14 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
<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==">
Expand All @@ -151,18 +155,18 @@ <h2>DOWNLOAD</h2>
<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>
</button>
</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==">
Expand All @@ -177,7 +181,7 @@ <h2>Normal ion-item (no sliding)</h2>
<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>
Expand All @@ -186,22 +190,17 @@ <h2>Normal button (no sliding)</h2>


<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>
Expand Down

0 comments on commit 14d29e6

Please sign in to comment.