fix(item): sliding item updates

ionic/components/item/item-sliding.ts

@@ -39,14 +39,13 @@ import {CSS, raf} from 'ionic/util/dom';
 })
 @View({
   template:
-    '<ng-content select="[item-left]"></ng-content>' +
+      '<ng-content select="ion-item-options"></ng-content>' +
       '<ion-item-sliding-content>' +
         '<ion-item-content>' +
           '<ng-content></ng-content>'+
         '</ion-item-content>' +
         '<ng-content select="[item-right]"></ng-content>' +
-      '</ion-item-sliding-content>' +
+      '</ion-item-sliding-content>'
-      '<ng-content select="ion-item-options"></ng-content>',
   directives: [NgIf]
 })
 export class ItemSliding {
@@ -76,17 +75,19 @@ export class ItemSliding {
     var itemSlidingContent = this.ele.querySelector('ion-item-sliding-content');
     var itemOptionsContent = this.ele.querySelector('ion-item-options');
 
+    console.log('List width', this.list.width());
+
     this.itemSlidingContent = itemSlidingContent;
     this.itemOptions = itemOptionsContent;
 
-    this.itemWidth = itemSlidingContent.offsetWidth;
+    this.itemWidth = this.list.width();
-    this.itemOptionsWidth = itemOptionsContent && itemOptionsContent.offsetWidth || 0;
 
     this.openAmount = 0;
 
     this.gesture = new ItemSlideGesture(this, itemSlidingContent);
   }
 
+
   close(andStopDrag) {
     this.openAmount = 0;
 
@@ -163,6 +164,9 @@ class ItemSlideGesture extends DragGesture {
 
     this.el.addEventListener('touchstart', (e) => {
       this.item.didTouch();
+      raf(() => {
+        this.item.itemOptionsWidth = this.item.itemOptions && this.item.itemOptions.offsetWidth || 0;
+      })
     })
 
     this.el.addEventListener('touchend', (e) => {
@@ -176,6 +180,8 @@ class ItemSlideGesture extends DragGesture {
   onDragStart(ev) {
     if(this.item.didClose) { return; }
 
+    if(!this.item.itemOptionsWidth) { return; }
+
     this.slide = {};
 
     this.slide.offsetX = this.item.getOpenAmt();

ionic/components/item/test/sliding/index.ts

@@ -4,4 +4,10 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  constructor() {
+    setTimeout(() => {
+      this.shouldShow = true;
+    }, 5000);
+  }
+}

ionic/components/item/test/sliding/main.html

@@ -31,4 +31,14 @@
       <button primary>Archive</button>
     </ion-item-options>
   </ion-item-sliding>
+
+  <ion-item-sliding text-wrap detail-push *ng-if="shouldShow">
+    <h3>Max Lynch</h3>
+    <p>
+      Hey do you want to go to the game tonight?
+    </p>
+    <ion-item-options>
+      <button primary>Archive</button>
+    </ion-item-options>
+  </ion-item-sliding>
 </ion-list>