fix(reorder): several reorder lists in the same view

Author: manucorporat

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

@@ -129,7 +129,7 @@ export class ItemReorderGesture {
   }
 
   private itemForCoord(coord: PointerCoordinates): HTMLElement {
-    return itemForPosition(this.offset.x - 100, coord.y);
+    return itemForPosition(this.offset.x - 100, coord.y, this.reorderList.getNativeElement());
   }
 
   private scroll(posY: number): number {
@@ -152,7 +152,7 @@ export class ItemReorderGesture {
   }
 }
 
-function itemForPosition(x: number, y: number): HTMLElement {
+function itemForPosition(x: number, y: number, list: any): HTMLElement {
   let element = <HTMLElement>document.elementFromPoint(x, y);
-  return findReorderItem(element);
+  return findReorderItem(element, list);
 }

src/components/item/item-reorder.ts

@@ -200,9 +200,12 @@ export class ItemReorder {
    * @private
    */
   reorderPrepare() {
-    let children: any = this._element.children;
+    let ele = this._element;
+    let children: any = ele.children;
     for (let i = 0, ilen = children.length; i < ilen; i++) {
-      children[i].$ionIndex = i;
+      var child = children[i];
+      child.$ionIndex = i;
+      child.$ionReorderList = ele;
     }
   }
 
@@ -315,25 +318,28 @@ export class ItemReorder {
 })
 export class Reorder {
   constructor(
-    @Inject(forwardRef(() => Item)) private item: Item,
+    @Inject(forwardRef(() => Item)) private item: ItemReorder,
     private elementRef: ElementRef) {
     elementRef.nativeElement['$ionComponent'] = this;
   }
 
-  getReorderNode() {
+  getReorderNode(): HTMLElement {
     let node = <any>this.item.getNativeElement();
-    return findReorderItem(node);
+    return findReorderItem(node, null);
   }
 
 }
 
 /**
  * @private
  */
-export function findReorderItem(node: any): HTMLElement {
+export function findReorderItem(node: any, listNode: any): HTMLElement {
   let nested = 0;
   while (node && nested < 4) {
-    if (indexForItem(node) !== undefined ) {
+    if (indexForItem(node) !== undefined) {
+      if (listNode && node.parentNode !== listNode) {
+        return null;
+      }
       return node;
     }
     node = node.parentNode;
@@ -349,3 +355,10 @@ export function indexForItem(element: any): number {
   return element['$ionIndex'];
 }
 
+/**
+ * @private
+ */
+export function reorderListForItem(element: any): any {
+  return element['$ionReorderList'];
+}
+

src/components/item/item.md.scss

@@ -36,7 +36,7 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   color: $list-md-text-color;
   background-color: $list-md-background-color;
   box-shadow: none;
-  transition: background-color 300ms cubic-bezier(.4, 0, .2, 1), transform 300ms;
+  transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
 }
 
 .item-md.activated {

src/components/item/test/reorder/app-module.ts

@@ -10,12 +10,16 @@ export class E2EPage {
   isReordering: boolean = false;
 
   constructor(private d: ChangeDetectorRef) {
-    let nu = 30;
+    let nu = 9;
     for (let i = 0; i < nu; i++) {
       this.items.push(i);
     }
   }
 
+  clickedButton(num: number) {
+    console.log('clicked', num);
+  }
+
   toggle() {
     this.isReordering = !this.isReordering;
   }

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

@@ -12,11 +12,25 @@
 <ion-content>
 
   <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
-    <ion-item *ngFor="let item of items"
+    <button ion-item *ngFor="let item of items" (click)="clickedButton(item)"
     [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
     [style.min-height]="item*2+35+'px'">
       {{item}}
-    </ion-item>
+    </button>
+  </ion-list>
+
+  <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
+    <ion-item-sliding *ngFor="let item of items">
+      <button ion-item (click)="clickedButton(item)">
+        Sliding item {{item}}
+      </button>
+      <ion-item-options side="right" icon-left>
+        <button ion-button color='danger'>
+          <ion-icon name="trash"></ion-icon>
+          Remove
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
   </ion-list>
 
 </ion-content>

src/components/menu/menu.ts

@@ -288,21 +288,16 @@ export class Menu {
    */
   @Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  /** @private */
-  _menuCtrl: MenuController;
-
   constructor(
-    _menuCtrl: MenuController,
+    public _menuCtrl: MenuController,
     private _elementRef: ElementRef,
     private _config: Config,
     private _platform: Platform,
     private _renderer: Renderer,
     private _keyboard: Keyboard,
     private _zone: NgZone,
     public gestureCtrl: GestureController
-  ) {
-    this._menuCtrl = _menuCtrl;
-  }
+  ) {}
 
   /**
    * @private

src/config/config.ts

@@ -233,12 +233,9 @@ export class Config {
     // or it was from the users platform configs
     // or it was from the default platform configs
     // in that order
-    let rtnVal: any;
-    if (isFunction(this._c[key])) {
-      rtnVal = this._c[key](this.platform);
-
-    } else {
-      rtnVal = this._c[key];
+    let rtnVal: any = this._c[key];
+    if (isFunction(rtnVal)) {
+      rtnVal = rtnVal(this.platform);
     }
 
     return (rtnVal !== null ? rtnVal : fallbackValue);