feat(item-reorder): add side support

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

@@ -2,6 +2,7 @@ import { indexForItem, findReorderItem } from './item-reorder-util';
 import { Platform } from '../../platform/platform';
 import { PointerCoordinates, pointerCoord } from '../../util/dom';
 import { UIEventManager } from '../../gestures/ui-event-manager';
+import { isRightSide, Side } from '../../util/util';
 
 
 /**
@@ -134,7 +135,7 @@ export class ItemReorderGesture {
   }
 
   private itemForCoord(coord: PointerCoordinates): HTMLElement {
-    const sideOffset = this.plt.isRTL ? 100 : -100;
+    const sideOffset = isRightSide(this.reorderList.side, this.plt.isRTL) ? -100 : 100;
     const x = this.offset.x + sideOffset;
     const y = coord.y;
     const element = this.plt.getElementFromPoint(x, y);
@@ -167,6 +168,7 @@ const SCROLL_JUMP = 10;
 const ITEM_REORDER_ACTIVE = 'reorder-active';
 
 export interface ItemReorderGestureDelegate {
+  side: Side;
   getNativeElement: () => any;
   _reorderPrepare: () => void;
   _scrollContent: (scrollPosition: number) => number;

src/components/item/item-reorder.scss

@@ -16,14 +16,37 @@ ion-reorder {
   font-size: 1.7em;
   opacity: .25;
 
-  transform: translate3d(160%, 0, 0);
-
   transition: transform 140ms ease-in;
 
   pointer-events: all;
   touch-action: manipulation;
 }
 
+.reorder-side-end ion-reorder {
+  transform: translate3d(160%, 0, 0)
+}
+
+.reorder-side-start ion-reorder {
+  order: -1;
+  transform: translate3d(-160%, 0, 0);
+}
+
+.reorder-side-right ion-reorder {
+  transform: translate3d(160%, 0, 0); // stays the same for rtl
+
+  @include rtl() {
+    order: -1;
+  }
+}
+
+.reorder-side-left ion-reorder {
+  transform: translate3d(-160%, 0, 0); // stays the same for rtl
+
+  @include ltr() {
+    order: -1;
+  }
+}
+
 ion-reorder ion-icon {
   pointer-events: none;
 }

src/components/item/item-reorder.ts

@@ -2,7 +2,7 @@ import { Directive, ElementRef, EventEmitter, Input, NgZone, Renderer, Optional,
 
 import { Content } from '../content/content';
 import { DomController } from '../../platform/dom-controller';
-import { isTrueProperty, reorderArray } from '../../util/util';
+import { isTrueProperty, reorderArray, Side } from '../../util/util';
 import { ItemReorderGestureDelegate, ItemReorderGesture } from './item-reorder-gesture';
 import { Platform } from '../../platform/platform';
 
@@ -142,6 +142,10 @@ export class ReorderIndexes {
   host: {
     '[class.reorder-enabled]': '_enableReorder',
     '[class.reorder-visible]': '_visibleReorder',
+    '[class.reorder-side-left]': 'side === "left"',
+    '[class.reorder-side-right]': 'side === "right"',
+    '[class.reorder-side-start]': 'side === "start"',
+    '[class.reorder-side-end]': 'side === "end"'
   }
 })
 export class ItemReorder implements ItemReorderGestureDelegate {
@@ -158,6 +162,11 @@ export class ItemReorder implements ItemReorderGestureDelegate {
    */
   @Output() ionItemReorder: EventEmitter<ReorderIndexes> = new EventEmitter<ReorderIndexes>();
 
+  /**
+   * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
+   */
+  @Input() side: Side = 'end';
+
   constructor(
     private _plt: Platform,
     private _dom: DomController,

src/components/item/test/reorder/pages/root-page/root-page.html

@@ -1,36 +1,40 @@
 <ion-header>
-  <ion-toolbar color="primary">
-    <ion-title>Item Reorder</ion-title>
-    <ion-buttons end>
-      <button ion-button (click)="toggle()">
-        Edit
-      </button>
-    </ion-buttons>
-  </ion-toolbar>
+    <ion-toolbar color="primary">
+        <ion-title>Item Reorder</ion-title>
+        <ion-buttons end>
+            <button ion-button (click)="toggle()">
+                Edit
+            </button>
+        </ion-buttons>
+    </ion-toolbar>
 </ion-header>
 
 <ion-content>
 
-  <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
-    <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}}
-    </button>
-  </ion-list>
-
-  <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)">
-    <ion-item-sliding *ngFor="let item of items">
-      <button ion-item (click)="clickedButton(item)">
-        <h2>Sliding item {{item}}</h2>
-      </button>
-      <ion-item-options side="right" icon-left>
-        <button ion-button color='danger'>
-          <ion-icon name="trash"></ion-icon>
-          Remove
+    <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
+        <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}}
         </button>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
+    </ion-list>
+
+    <div *ngFor="let side of ['left', 'right', 'start', 'end']">
+        <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
+            <ion-list-header>{{side}}</ion-list-header>
+            <ion-item-sliding *ngFor="let item of items">
+                <button ion-item (click)="clickedButton(item)">
+                    <h2>Sliding item {{item}}</h2>
+                    <div item-right>right</div>
+                </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>
+    </div>
 
 </ion-content>

src/components/item/test/reorder/pages/root-page/root-page.ts

@@ -9,7 +9,7 @@ export class RootPage {
   isReordering: boolean = false;
 
   constructor() {
-    let nu = 9;
+    let nu = 5;
     for (let i = 0; i < nu; i++) {
       this.items.push(i);
     }