fix(item): item-options width calculated correctly

Author: manucorporat

src/components/item/item-sliding-gesture.ts

@@ -54,7 +54,6 @@ export class ItemSlidingGesture extends DragGesture {
       this.closeOpened();
     }
 
-    // Close all item sliding containers but the selected one
     this.selectedContainer = container;
     this.openContainer = container;
     container.startSliding(ev.center.x);
@@ -72,6 +71,8 @@ export class ItemSlidingGesture extends DragGesture {
 
   onDragEnd(ev: any) {
     if (this.selectedContainer) {
+      ev.preventDefault();
+
       let openAmount = this.selectedContainer.endSliding(ev.velocityX);
       this.selectedContainer = null;
 
@@ -109,7 +110,7 @@ export class ItemSlidingGesture extends DragGesture {
 function getContainer(ev: any): ItemSliding {
   let ele = closest(ev.target, 'ion-item-sliding', true);
   if (ele) {
-    return ele['$ionComponent'];
+    return (<any>ele)['$ionComponent'];
   }
   return null;
 }

src/components/item/item-sliding.ts

@@ -1,10 +1,9 @@
 import {ChangeDetectionStrategy, Component, ContentChildren, ContentChild,  Directive, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, QueryList, Renderer, ViewEncapsulation} from '@angular/core';
 
 import {List} from '../list/list';
-import {Ion} from '../ion';
 import {Item} from './item';
 import {isPresent} from '../../util/util';
-import {CSS} from '../../util/dom';
+import {CSS, nativeRaf, nativeTimeout} from '../../util/dom';
 
 const SWIPE_FACTOR = 1.1;
 const ELASTIC_FACTOR = 0.55;
@@ -22,19 +21,18 @@ export const enum SideFlags {
 @Directive({
   selector: 'ion-item-options',
 })
-export class ItemOptions extends Ion {
+export class ItemOptions {
   @Input() side: string;
   @Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter();
 
-  constructor(elementRef: ElementRef, private _renderer: Renderer) {
-    super(elementRef);
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
   }
 
   /**
    * @private
    */
   setCssStyle(property: string, value: string) {
-    this._renderer.setElementStyle(this.elementRef.nativeElement, property, value);
+    this._renderer.setElementStyle(this._elementRef.nativeElement, property, value);
   }
 
   /**
@@ -48,6 +46,10 @@ export class ItemOptions extends Ion {
     }
   }
 
+  width() {
+    return this._elementRef.nativeElement.offsetWidth;
+  }
+
 }
 
 const enum SlidingState {
@@ -224,10 +226,14 @@ export class ItemSliding {
    * @private
    */
   startSliding(startX: number) {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
     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');
   }
@@ -236,7 +242,10 @@ export class ItemSliding {
    * @private
    */
   moveSliding(x: number): number {
-    this.calculateOptsWidth();
+    if (this._optsDirty) {
+      this.calculateOptsWidth();
+      return;
+    }
 
     let openAmount = this._startX - x;
     switch (this._sides) {
@@ -290,17 +299,20 @@ export class ItemSliding {
   }
 
   calculateOptsWidth() {
-    if (this._optsDirty) {
-      this._optsWidthRightSide = 0;
-      if (this._rightOptions) {
-        this._optsWidthRightSide = this._rightOptions.width();
+    nativeRaf(() => {
+      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();
+        }
+        this._optsDirty = false;
       }
-      this._optsWidthLeftSide = 0;
-      if (this._leftOptions) {
-        this._optsWidthLeftSide = this._leftOptions.width();
-      }
-      this._optsDirty = false;
-    }
+    });
   }
 
   /**
@@ -317,7 +329,7 @@ export class ItemSliding {
     if (didEnd) {
       // TODO: refactor. there must exist a better way
       // if sliding ended, we wait 400ms until animation finishes
-      this._timer = setTimeout(() => {
+      this._timer = nativeTimeout(() => {
         this._setState(SlidingState.Disabled);
         this._timer = null;
       }, 400);
@@ -347,6 +359,10 @@ export class ItemSliding {
       this.setClass('active-slide', state !== SlidingState.Disabled);
       this.setClass('active-options-right', state === SlidingState.Right);
       this.setClass('active-options-left', state === SlidingState.Left);
+      if (state === SlidingState.Disabled || state === SlidingState.Enabled) {
+        this.setClass('active-swipe-right', false);
+        this.setClass('active-swipe-left', false);
+      }
     }
   }
 

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

@@ -14,6 +14,32 @@
   </div>
   <ion-list #myList>
 
+    <ion-item-sliding #item100>
+      <a ion-item>
+        <h2>HubStruck Notifications</h2>
+        <p>A new message from a repo in your network</p>
+        <p>Oceanic Next has joined your network</p>
+        <ion-note item-right>
+          10:45 AM
+        </ion-note>
+      </a>
+
+      <ion-item-options side="left">
+        <button (click)="unread(item100)">
+          <ion-icon name="mail"></ion-icon>
+        </button>
+      </ion-item-options>
+      <ion-item-options side="right">
+        <button danger (click)="share(item100)">
+          <ion-icon name="trash"></ion-icon>
+        </button>
+        <button (click)="favorite(item100)" >
+          <ion-icon name="star"></ion-icon>
+        </button>
+      </ion-item-options>
+
+    </ion-item-sliding>
+
     <ion-item-sliding #item0>
       <button ion-item text-wrap (click)="didClick(item0)">
         <h2>RIGHT side - no icons</h2>
@@ -26,10 +52,10 @@ <h2>RIGHT side - no icons</h2>
     </ion-item-sliding>
 
     <ion-item-sliding #item1>
-      <ion-item text-wrap detail-push class="activated">
+      <a ion-item text-wrap detail-push class="activated">
         <h2>LEFT side - no icons</h2>
         <p>I think I figured out how to get more Mountain Dew</p>
-      </ion-item>
+      </a>
       <ion-item-options side="left" (ionSwipe)="del($event)" *ngIf="slidingEnabled">
         <button primary (click)="archive(item1)">Archive</button>
         <button danger (click)="del(item1)">Delete</button>

src/components/tabs/test/advanced/index.ts

@@ -137,7 +137,7 @@ class Tab1Page1 {
   }
 
   push() {
-    this.nav.push(Tab1Page2)
+    this.nav.push(Tab1Page2);
   }
 
   goBack() {
@@ -193,7 +193,7 @@ class Tab1Page2 {
   constructor(private nav: NavController) {}
 
   push() {
-    this.nav.push(Tab1Page3)
+    this.nav.push(Tab1Page3);
   }
 
   ionViewWillEnter() {
@@ -273,7 +273,7 @@ class Tab2Page1 {
   constructor(private nav: NavController) {}
 
   push() {
-    this.nav.push(Tab2Page2)
+    this.nav.push(Tab2Page2);
   }
 
   ionViewWillEnter() {
@@ -314,7 +314,7 @@ class Tab2Page2 {
   constructor(private nav: NavController) {}
 
   push() {
-    this.nav.push(Tab2Page3)
+    this.nav.push(Tab2Page3);
   }
 
   ionViewWillEnter() {