fix(reorder): reorder can be used with any element

Author: manucorporat

demos/item-sliding/index.ts

@@ -114,13 +114,13 @@ class ApiDemoPage {
   }
 
   download(item: ItemSliding) {
-    item.setClass('downloading', true);
+    item.setCssClass('downloading', true);
     setTimeout(() => {
       const toast = this.toastCtrl.create({
         message: 'Item was downloaded!'
       });
       toast.present();
-      item.setClass('downloading', false);
+      item.setCssClass('downloading', false);
       item.close();
 
       // Wait 2s to close toast

demos/item-sliding/main.html

@@ -93,7 +93,7 @@ <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);

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

@@ -1,7 +1,7 @@
-import {Item} from './item';
-import {ItemReorder} from '../item/item-reorder';
-import {UIEventManager} from '../../util/ui-event-manager';
-import {closest, Coordinates, pointerCoord, CSS, nativeRaf} from '../../util/dom';
+import { Item } from './item';
+import { ItemReorder, indexForItem, findReorderItem } from '../item/item-reorder';
+import { UIEventManager } from '../../util/ui-event-manager';
+import { closest, Coordinates, pointerCoord, CSS, nativeRaf } from '../../util/dom';
 
 
 const AUTO_SCROLL_MARGIN = 60;
@@ -39,17 +39,25 @@ export class ItemReorderGesture {
       return false;
     }
 
-    let item = reorderElement['$ionReorderNode'];
+    let reorderMark = reorderElement['$ionComponent'];
+    if (!reorderMark) {
+      console.error('ion-reorder does not contain $ionComponent');
+      return false;
+    }
+    this.list.reorderPrepare();
+
+    let item = reorderMark.getReorderNode();
     if (!item) {
-      console.error('item does not contain ion ionReorderNode');
+      console.error('reorder node not found');
       return false;
     }
     ev.preventDefault();
 
     // Preparing state
     this.selectedItemEle = item;
     this.selectedItemHeight = item.offsetHeight;
-    this.lastYcoord = this.lastToIndex = -100;
+    this.lastYcoord = -100;
+    this.lastToIndex = indexForItem(item);
 
     this.windowHeight = window.innerHeight - AUTO_SCROLL_MARGIN;
     this.lastScrollPosition = this.list.scrollContent(0);
@@ -81,7 +89,7 @@ export class ItemReorderGesture {
       let overItem = this.itemForCoord(coord);
       if (overItem) {
         let toIndex = indexForItem(overItem);
-        if (toIndex && (toIndex !== this.lastToIndex || this.emptyZone)) {
+        if (toIndex !== undefined && (toIndex !== this.lastToIndex || this.emptyZone)) {
           let fromIndex = indexForItem(this.selectedItemEle);
           this.lastToIndex = toIndex;
           this.lastYcoord = posY;
@@ -142,16 +150,5 @@ function itemForPosition(x: number, y: number): HTMLElement {
   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'];
+  return findReorderItem(element);
 }

src/components/item/item-reorder.scss

@@ -36,15 +36,16 @@ ion-reorder {
   }
 }
 
-.reorder-active {
+.reorder-list-active {
   .item-inner {
     pointer-events: none;
   }
 }
 
 
 .item-wrapper.reorder-active,
-.item.reorder-active {
+.item.reorder-active,
+.reorder-active {
   z-index: 4;
 
   box-shadow: 0 0 10px rgba(0, 0, 0, .5);

src/components/item/item-reorder.ts

@@ -125,7 +125,7 @@ export interface ReorderIndexes {
  * @see {@link ../Item Item API Docs}
  */
 @Directive({
-  selector: '[reorder]',
+  selector: 'ion-list[reorder],ion-item-group[reorder]',
   host: {
     '[class.reorder-enabled]': '_enableReorder',
   }
@@ -181,15 +181,21 @@ export class ItemReorder {
   /**
    * @private
    */
-  reorderStart() {
+  reorderPrepare() {
     let children = this._element.children;
     let len = children.length;
-    this.setCssClass('reorder-active', true);
     for (let i = 0; i < len; i++) {
       children[i]['$ionIndex'] = i;
     }
   }
 
+  /**
+   * @private
+   */
+  reorderStart() {
+    this.setCssClass('reorder-list-active', true);
+  }
+
   /**
    * @private
    */
@@ -223,7 +229,7 @@ export class ItemReorder {
     let children = this._element.children;
     let len = children.length;
 
-    this.setCssClass('reorder-active', false);
+    this.setCssClass('reorder-list-active', false);
     let transform = CSS.transform;
     for (let i = 0; i < len; i++) {
       (<any>children[i]).style[transform] = '';
@@ -294,16 +300,35 @@ export class Reorder {
   constructor(
     @Inject(forwardRef(() => Item)) private item: Item,
     private elementRef: ElementRef) {
+    elementRef.nativeElement['$ionComponent'] = this;
   }
 
-  ngAfterContentInit() {
-    let item = this.item.getNativeElement();
-    if (item.parentNode.nodeName === 'ION-ITEM-SLIDING') {
-      this.elementRef.nativeElement['$ionReorderNode'] = item.parentNode;
-    } else {
-      this.elementRef.nativeElement['$ionReorderNode'] = item;
-    }
+  getReorderNode() {
+    let node = <any>this.item.getNativeElement();
+    return findReorderItem(node);
   }
 
+}
+
+/**
+ * @private
+ */
+export function findReorderItem(node: any): HTMLElement {
+  let nested = 0;
+  while (node && nested < 4) {
+    if (indexForItem(node) !== undefined ) {
+      return node;
+    }
+    node = node.parentNode;
+    nested++;
+  }
+  return null;
+}
 
+/**
+ * @private
+ */
+export function indexForItem(element: any): number {
+  return element['$ionIndex'];
 }
+

src/components/item/test/reorder/index.ts

@@ -25,4 +25,12 @@ class E2EPage {
   }
 }
 
-ionicBootstrap(E2EPage);
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+}
+
+ionicBootstrap(E2EApp);

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

@@ -14,7 +14,7 @@
   <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
     <ion-item *ngFor="let item of items"
     [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
-    [style.height]="item*2+35+'px'">
+    [style.min-height]="item*2+35+'px'">
       {{item}}
     </ion-item>
   </ion-list>