feat(item): sliding items work with list reorder

Author: manucorporat

demos/item-sliding/index.ts

@@ -1,17 +1,52 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 import { ionicBootstrap, ItemSliding, NavController, Toast } from 'ionic-angular';
 
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  encapsulation: ViewEncapsulation.None
 })
 class ApiDemoPage {
   chats: any[];
   logins: any[];
+  editButton: string = 'Edit';
+  editing: boolean = false;
 
   constructor(private nav: NavController) {
     this.chats = [
+    {
+      img: './avatar-cher.png',
+      name: 'Cher',
+      message: 'Ugh. As if.',
+      time: '9:38 pm'
+    }, {
+      img: './avatar-dionne.png',
+      name: 'Dionne',
+      message: 'Mr. Hall was way harsh.',
+      time: '8:59 pm'
+    }, {
+      img: './avatar-murray.png',
+      name: 'Murray',
+      message: 'Excuse me, "Ms. Dione."',
+      time: 'Wed'
+    },
+    {
+      img: './avatar-cher.png',
+      name: 'Cher',
+      message: 'Ugh. As if.',
+      time: '9:38 pm'
+    }, {
+      img: './avatar-dionne.png',
+      name: 'Dionne',
+      message: 'Mr. Hall was way harsh.',
+      time: '8:59 pm'
+    }, {
+      img: './avatar-murray.png',
+      name: 'Murray',
+      message: 'Excuse me, "Ms. Dione."',
+      time: 'Wed'
+    },
     {
       img: './avatar-cher.png',
       name: 'Cher',
@@ -49,6 +84,15 @@ class ApiDemoPage {
     }];
   }
 
+  toggleEdit() {
+    this.editing = !this.editing;
+    if (this.editing) {
+      this.editButton = 'Done';
+    } else {
+      this.editButton = 'Edit';
+    }
+  }
+
   more(item: ItemSliding) {
     console.log('More');
     item.close();

demos/item-sliding/main.html

@@ -2,19 +2,24 @@
 
   <ion-navbar>
     <ion-title>Item Sliding</ion-title>
+    <ion-buttons end>
+      <button (click)="toggleEdit()">{{editButton}}</button>
+    </ion-buttons>
   </ion-navbar>
 
 </ion-header>
 
 
-<ion-content class="outer-content">
+<ion-content class="outer-content" fullscreen>
 
-  <ion-list class="chat-sliding-demo">
+  <ion-list class="chat-sliding-demo" [sliding]="!editing">
     <ion-list-header>
       Chats
     </ion-list-header>
 
-    <ion-item-sliding *ngFor="let chat of chats; let ref = index" [ref]="ref" #item>
+    <ion-item-group [reorder]="editing">
+
+    <ion-item-sliding *ngFor="let chat of chats" #item>
       <ion-item>
         <ion-avatar item-left>
           <img [src]="chat.img">
@@ -41,13 +46,14 @@ <h2>{{chat.name}}</h2>
         </button>
       </ion-item-options>
 
-      <ion-item-options side="left">
+      <ion-item-options side="left" (ionSwipe)="archive(item)">
         <button primary expandable (click)="archive(item)">
           <ion-icon name="archive"></ion-icon>
           Archive
         </button>
       </ion-item-options>
     </ion-item-sliding>
+    </ion-item-group>
   </ion-list>
 
   <ion-list class="login-sliding-demo">
@@ -87,6 +93,12 @@ <h2>{{login.name}}</h2>
   #download-spinner {
     display: none;
   }
+  
+  div.toolbar-background {
+    background-color: rgba(255, 255, 255, 0.65);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(20px);
+  }
 
   svg circle {
     stroke: white;

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

@@ -1,5 +1,5 @@
 import {Item} from './item';
-import {List} from '../list/list';
+import {Reorder} from '../item/item-reorder';
 import {UIEventManager} from '../../util/ui-event-manager';
 import {closest, Coordinates, pointerCoord, CSS, nativeRaf} from '../../util/dom';
 
@@ -12,7 +12,6 @@ const ITEM_REORDER_ACTIVE = 'reorder-active';
  * @private
  */
 export class ItemReorderGesture {
-  private selectedItem: Item = null;
   private selectedItemEle: HTMLElement = null;
   private selectedItemHeight: number;
 
@@ -26,7 +25,7 @@ export class ItemReorderGesture {
 
   private events: UIEventManager = new UIEventManager(false);
 
-  constructor(public list: List) {
+  constructor(public list: Reorder) {
     let element = this.list.getNativeElement();
     this.events.pointerEvents(element,
       this.onDragStart.bind(this),
@@ -35,32 +34,30 @@ export class ItemReorderGesture {
   }
 
   private onDragStart(ev: any): boolean {
-    let itemEle = ev.target;
-    if (itemEle.nodeName !== 'ION-REORDER') {
+    let reorderElement = ev.target;
+    if (reorderElement.nodeName !== 'ION-REORDER') {
       return false;
     }
 
-    let item = <Item> itemEle['$ionComponent'];
+    let item = reorderElement['$ionReorderNode'];
     if (!item) {
-      console.error('item does not contain ion component');
+      console.error('item does not contain ion ionReorderNode');
       return false;
     }
     ev.preventDefault();
 
     // Preparing state
-    this.selectedItem = item;
-    this.selectedItemEle = item.getNativeElement();
-    this.selectedItemHeight = item.height();
-    this.lastToIndex = item.index;
-    this.lastYcoord = -100;
+    this.selectedItemEle = item;
+    this.selectedItemHeight = item.offsetHeight;
+    this.lastYcoord = this.lastToIndex = -100;
 
     this.windowHeight = window.innerHeight - AUTO_SCROLL_MARGIN;
     this.lastScrollPosition = this.list.scrollContent(0);
 
     this.offset = pointerCoord(ev);
     this.offset.y += this.lastScrollPosition;
 
-    item.setCssClass(ITEM_REORDER_ACTIVE, true);
+    item.classList.add(ITEM_REORDER_ACTIVE);
     this.list.reorderStart();
     return true;
   }
@@ -83,9 +80,9 @@ export class ItemReorderGesture {
     if (Math.abs(posY - this.lastYcoord) > 30) {
       let overItem = this.itemForCoord(coord);
       if (overItem) {
-        let toIndex = overItem.index;      
-        if (toIndex !== this.lastToIndex || this.emptyZone) {
-          let fromIndex = this.selectedItem.index;
+        let toIndex = indexForItem(overItem);
+        if (toIndex && (toIndex !== this.lastToIndex || this.emptyZone)) {
+          let fromIndex = indexForItem(this.selectedItemEle);
           this.lastToIndex = toIndex;
           this.lastYcoord = posY;
           this.emptyZone = false;
@@ -96,40 +93,25 @@ export class ItemReorderGesture {
       }
     }
 
-    // Update selected item position    
+    // Update selected item position
     let ydiff = Math.round(posY - this.offset.y + scrollPosition);
     selectedItem.style[CSS.transform] = `translateY(${ydiff}px)`;
   }
- 
+
   private onDragEnd() {
     if (!this.selectedItemEle) {
       return;
     }
 
-    nativeRaf(() => {
-      let toIndex = this.lastToIndex;
-      let fromIndex = this.selectedItem.index;
-      this.selectedItem.setCssClass(ITEM_REORDER_ACTIVE, false);
-      this.selectedItem = null;
-      this.selectedItemEle = null;
-      this.list.reorderEmit(fromIndex, toIndex);
-    });   
+    let toIndex = this.lastToIndex;
+    let fromIndex = indexForItem(this.selectedItemEle);
+    this.selectedItemEle.classList.remove(ITEM_REORDER_ACTIVE);
+    this.selectedItemEle = null;
+    this.list.reorderEmit(fromIndex, toIndex);
   }
 
-  private itemForCoord(coord: Coordinates): Item {
-    let element = <HTMLElement>document.elementFromPoint(this.offset.x - 100, coord.y);
-    if (!element) {
-      return null;
-    }
-    if (element.nodeName !== 'ION-ITEM') {
-      return null;
-    }
-    let item = <Item>(<any>element)['$ionComponent'];
-    if (!item) {
-      console.error('item does not have $ionComponent');
-      return null;
-    }
-    return item;
+  private itemForCoord(coord: Coordinates): HTMLElement {
+    return itemForPosition(this.offset.x - 100, coord.y);
   }
 
   private scroll(posY: number): number {
@@ -141,8 +123,6 @@ export class ItemReorderGesture {
     return this.lastScrollPosition;
   }
 
-
-
   /**
    * @private
    */
@@ -153,3 +133,25 @@ export class ItemReorderGesture {
     this.list = null;
   }
 }
+
+function itemForPosition(x: number, y: number): HTMLElement {
+  let element = <HTMLElement>document.elementFromPoint(x, y);
+  if (!element) {
+    return null;
+  }
+  if (element.nodeName !== 'ION-ITEM' && !element.hasAttribute('ion-item')) {
+    return null;
+  }
+  if (indexForItem(element)) {
+    return element;
+  }
+  let parent = element.parentNode;
+  if (indexForItem(parent)) {
+    return <HTMLElement>parent;
+  }
+  return null;
+}
+
+function indexForItem(element: any): number {
+  return element['$ionIndex'];
+}

src/components/item/item-reorder.scss

@@ -24,7 +24,9 @@ ion-reorder {
 
 .reorder-enabled {
 
-  .item {
+  .item, .item-wrapper {
+    transition: transform 300ms;
+
     will-change: transform;
   }
 
@@ -40,6 +42,7 @@ ion-reorder {
 }
 
 
+.item-wrapper.reorder-active,
 .item.reorder-active {
   z-index: 4;