diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts index 374fdf164ff..1967446df2b 100644 --- a/src/components/item/item-reorder-gesture.ts +++ b/src/components/item/item-reorder-gesture.ts @@ -134,7 +134,7 @@ export class ItemReorderGesture { } private itemForCoord(coord: PointerCoordinates): HTMLElement { - const sideOffset = this.plt.isRTL ? 100 : -100; + const sideOffset = this.reorderList._isStart === this.plt.isRTL ? -100 : 100; const x = this.offset.x + sideOffset; const y = coord.y; const element = this.plt.getElementFromPoint(x, y); @@ -167,6 +167,7 @@ const SCROLL_JUMP = 10; const ITEM_REORDER_ACTIVE = 'reorder-active'; export interface ItemReorderGestureDelegate { + _isStart: boolean; getNativeElement: () => any; _reorderPrepare: () => void; _scrollContent: (scrollPosition: number) => number; diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss index 1cc415e7cae..45e04bbe636 100644 --- a/src/components/item/item-reorder.scss +++ b/src/components/item/item-reorder.scss @@ -1,10 +1,12 @@ @import "../../themes/ionic.globals"; +$reorder-initial-transform: 160% !default; + // Item reorder // -------------------------------------------------- ion-reorder { - @include transform(translate3d(160%, 0, 0)); + @include transform(translate3d($reorder-initial-transform, 0, 0)); display: none; @@ -18,13 +20,18 @@ ion-reorder { font-size: 1.7em; opacity: .25; - transition: transform 140ms ease-in; pointer-events: all; touch-action: manipulation; } +.reorder-side-start ion-reorder { + @include transform(translate3d(-$reorder-initial-transform, 0, 0)); + + order: -1; +} + ion-reorder ion-icon { pointer-events: none; } diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts index 6c90eb45618..d21cb23873c 100644 --- a/src/components/item/item-reorder.ts +++ b/src/components/item/item-reorder.ts @@ -142,12 +142,14 @@ export class ReorderIndexes { host: { '[class.reorder-enabled]': '_enableReorder', '[class.reorder-visible]': '_visibleReorder', + '[class.reorder-side-start]': '_isStart' } }) export class ItemReorder implements ItemReorderGestureDelegate { _enableReorder: boolean = false; _visibleReorder: boolean = false; + _isStart: boolean = false; _reorderGesture: ItemReorderGesture; _lastToIndex: number = -1; _element: HTMLElement; @@ -158,6 +160,14 @@ export class ItemReorder implements ItemReorderGestureDelegate { */ @Output() ionItemReorder: EventEmitter = new EventEmitter(); + /** + * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`. + */ + @Input('side') + set side(side: 'start' | 'end') { + this._isStart = side === 'start'; + } + constructor( private _plt: Platform, private _dom: DomController, diff --git a/src/components/item/test/reorder/pages/root-page/root-page.html b/src/components/item/test/reorder/pages/root-page/root-page.html index 2252a67f9a5..4138bd6a3ae 100644 --- a/src/components/item/test/reorder/pages/root-page/root-page.html +++ b/src/components/item/test/reorder/pages/root-page/root-page.html @@ -13,24 +13,30 @@ - - - - - - - - +
+ + {{side}} + + + + + + + + + +
diff --git a/src/components/item/test/reorder/pages/root-page/root-page.ts b/src/components/item/test/reorder/pages/root-page/root-page.ts index 7300c3aa73e..fccd3f61bb2 100644 --- a/src/components/item/test/reorder/pages/root-page/root-page.ts +++ b/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); }