feat(list): list items can be reordered

references ionic-team#5595

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

@@ -0,0 +1,131 @@
+import {Item} from './item';
+import {List} from '../list/list';
+import {closest, Coordinates, pointerCoord, CSS, raf} from '../../util/dom';
+
+/**
+ * @private
+ */
+export class ItemReorderGesture {
+  private selectedItem: Item = null;
+  private offset: Coordinates;
+  private itemHeight: number;
+  private lastToIndex: number;
+  private emptyZone: boolean;
+
+  private onTouchstart: Function;
+  private onTouchmove: Function;
+  private onTouchend: Function;
+
+  constructor(public list: List) {
+    this.listen();
+  }
+
+  private onDragStart(ev: any) {
+    let itemEle = ev.target;
+    if (itemEle.nodeName === 'ION-REORDER') {
+      let item = itemEle['$ionComponent'];
+      if (!item) {
+        console.error('item does not contain ion component');
+        return;
+      }
+
+      this.offset = pointerCoord(ev);
+      this.selectedItem = item;
+      this.itemHeight = item.height();
+      this.lastToIndex = item.index;
+      item.setCssClass('reorder-active', true);
+      ev.preventDefault();
+    }
+  }
+
+  private onDrag(ev: any) {
+    if (!this.selectedItem) {
+      return;
+    }
+
+    let coord = pointerCoord(ev);
+    let ydiff = Math.round(coord.y - this.offset.y);
+
+    this.selectedItem.setCssStyle(CSS.transform, 'translateY(' + ydiff + 'px)');
+    ev.preventDefault();
+
+    let item = this.itemForCoord(coord);
+    if (!item) {
+      this.emptyZone = true;
+      return;
+    }
+    let fromIndex = this.selectedItem.index;    
+    let toIndex = item.index;
+    if (toIndex !== this.lastToIndex || this.emptyZone) {
+      this.lastToIndex = toIndex;
+      this.emptyZone = false;
+      this.list.reorderMove(fromIndex, toIndex, this.itemHeight);
+    }
+  }
+
+  private onDragEnd(ev: any) {
+    if (!this.selectedItem) {
+      return;
+    }
+
+    let item = this.selectedItem;
+    let fromIndex = item.index;
+
+    item.setCssClass('reorder-active', false);
+    this.selectedItem = null;
+
+    let toIndex = this.lastToIndex;
+    this.list.reorderEmit(fromIndex, toIndex);
+  }
+
+  private itemForCoord(coord: Coordinates): Item {
+    let element = <any>document.elementFromPoint(this.offset.x - 100, coord.y);
+    if (!element) {
+      return null;
+    }
+    element = closest(element, 'ion-item', true);
+    if (!element) {
+      return null;
+    }
+    let item = <Item>(<any>element)['$ionComponent'];
+    if (!item) {
+      return null;
+    }
+    return item;
+  }
+
+  /**
+   * @private
+   */
+  listen() {
+    let ele = this.list.getNativeElement();
+    this.onTouchstart = (ev: any) => this.onDragStart(ev);
+    this.onTouchmove = (ev: any) => this.onDrag(ev);
+    this.onTouchend = (ev: any) => this.onDragEnd(ev);
+
+    ele.addEventListener('touchstart', this.onTouchstart);
+    ele.addEventListener('touchmove', this.onTouchmove);
+    ele.addEventListener('touchend', this.onTouchend);
+  }
+
+  /**
+   * @private
+   */
+  unlisten() {
+    let ele = this.list.getNativeElement();
+    ele.removeEventListener('touchstart', this.onTouchstart);
+    ele.removeEventListener('touchmove', this.onTouchmove);
+    ele.removeEventListener('touchend', this.onTouchend);
+    this.onTouchstart = null;
+    this.onTouchmove = null;
+    this.onTouchend = null;
+  }
+
+  /**
+   * @private
+   */
+  destroy() {
+    this.unlisten();
+    this.list = null;
+  }
+}

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

@@ -12,8 +12,8 @@ export class ItemSlidingGesture extends DragGesture {
   selectedContainer: ItemSliding = null;
   openContainer: ItemSliding = null;
 
-  constructor(public list: List, public listEle: HTMLElement) {
-    super(listEle, {
+  constructor(public list: List) {
+    super(list.getNativeElement(), {
       direction: 'x',
       threshold: DRAG_THRESHOLD
     });

src/components/item/item.scss

@@ -83,5 +83,46 @@ ion-input.item {
   align-items: flex-start;
 }
 
+// Item reorder
+// --------------------------------------------------
+
+ion-reorder {
+  display: none;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  max-width: 40px;
+  height: 100%;
+  font-size: 1.6em;
+  pointer-events: all;
+  touch-action: manipulation;
+
+  ion-icon {
+    pointer-events: none;
+  }
+}
+
+.reorder-enabled {
+  ion-item {
+    will-change: transform;
+  }
+
+  ion-reorder{
+    display: flex;
+  }
+}
+
+.reorder-active {
+  pointer-events: none;
+  transition: none;
+  box-shadow: 0 0 10px  rgba(0, 0, 0, .5);
+  opacity: 0.8;
+  z-index: 4;
+  ion-reorder {
+    pointer-events: none;
+  }
+}
+
+
 @import "item-media";
 @import "item-sliding";

src/components/item/item.ts

@@ -1,4 +1,4 @@
-import {Component, ContentChildren, forwardRef, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+import {Component, ContentChildren, forwardRef, Input, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Button} from '../button/button';
 import {Form} from '../../util/form';
@@ -235,11 +235,13 @@ import {Label} from '../label/label';
         '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
       '</div>' +
       '<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
+      '<ion-reorder></ion-reorder>' +
     '</div>' +
     '<ion-button-effect></ion-button-effect>',
   host: {
     'class': 'item'
   },
+  directives: [forwardRef(() => ItemReorder)],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
@@ -249,6 +251,11 @@ export class Item {
   private _label: Label;
   private _viewLabel: boolean = true;
 
+  /**
+   * @private
+   */
+  @Input() index: number;
+
   /**
    * @private
    */
@@ -261,6 +268,7 @@ export class Item {
 
   constructor(form: Form, private _renderer: Renderer, private _elementRef: ElementRef) {
     this.id = form.nextId().toString();
+    _elementRef.nativeElement['$ionComponent'] = this;
   }
 
   /**
@@ -354,4 +362,24 @@ export class Item {
       icon.addClass('item-icon');
     });
   }
+
+  /**
+   * @private
+   */  
+  height(): number {
+    return this._elementRef.nativeElement.offsetHeight;
+  }
+}
+
+/**
+ * @private
+ */
+@Component({
+  selector: 'ion-reorder',
+  template: `<ion-icon name="menu"></ion-icon>`
+})
+class ItemReorder {
+  constructor(item: Item, elementRef: ElementRef) {
+    elementRef.nativeElement['$ionComponent'] = item;
+  }
 }

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,32 @@
+import {Component, ChangeDetectorRef} from '@angular/core';
+import {ionicBootstrap} from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  items: any[] = [];
+  isReordering: boolean = false;
+
+  constructor(private d: ChangeDetectorRef) {
+    let nu = 30;
+    for (let i = 0; i < nu; i++) {
+      this.items.push(i);
+    }
+  }
+
+  toggle() {
+    this.isReordering = !this.isReordering;
+  }
+
+  reorder(indexes: any) {
+    let element =  this.items[indexes.from];
+    this.items.splice(indexes.from, 1);
+    this.items.splice(indexes.to, 0, element);
+    // console.log(this.items);
+    // this.d.detectChanges();
+  }
+}
+
+ionicBootstrap(E2EPage);

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

@@ -0,0 +1,21 @@
+<ion-toolbar primary>
+  <ion-title>Reorder items</ion-title>
+  <ion-buttons end>
+    <button (click)="toggle()">
+      Edit
+    </button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-content>
+
+  <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
+    <ion-item *ngFor="let item of items; let index=index"
+    [index]="index"
+    [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"> 
+      {{item}}
+    </ion-item>
+  </ion-list>
+
+</ion-content>
+