From 14d29e687e59bf587415c9846b49914233c9080c Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Wed, 8 Jun 2016 23:58:03 +0200
Subject: [PATCH] fix(item): sliding item supports dynamic options + tests

Closes #5192
---
 src/components/item/item-sliding.ts        |  4 +-
 src/components/item/test/sliding/index.ts  | 20 ++++---
 src/components/item/test/sliding/main.html | 61 +++++++++++-----------
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts
index 44b1e6824f4..4b835a2da71 100644
--- a/src/components/item/item-sliding.ts
+++ b/src/components/item/item-sliding.ts
@@ -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();
       }
diff --git a/src/components/item/test/sliding/index.ts b/src/components/item/test/sliding/index.ts
index df490975e01..b6dcd8863c0 100644
--- a/src/components/item/test/sliding/index.ts
+++ b/src/components/item/test/sliding/index.ts
@@ -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';
     }
   }
 
diff --git a/src/components/item/test/sliding/main.html b/src/components/item/test/sliding/main.html
index ee30fa3d61a..c7a73e7b697 100644
--- a/src/components/item/test/sliding/main.html
+++ b/src/components/item/test/sliding/main.html
@@ -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>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>
@@ -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>
@@ -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>
@@ -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==">
@@ -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>
@@ -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>
@@ -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==">
@@ -151,10 +155,10 @@ <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>
@@ -162,7 +166,7 @@ <h2>DOWNLOAD</h2>
       </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 @@ <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>
@@ -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>