From d993a1bfd86f6987e44f0a78fa5b4a46026de779 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Wed, 29 Jun 2016 23:52:50 +0200 Subject: [PATCH] fix(reorder): reorder can be used with any element --- demos/item-sliding/index.ts | 4 +- demos/item-sliding/main.html | 2 +- src/components/item/item-reorder-gesture.ts | 37 ++++++++-------- src/components/item/item-reorder.scss | 5 ++- src/components/item/item-reorder.ts | 47 ++++++++++++++++----- src/components/item/test/reorder/index.ts | 10 ++++- src/components/item/test/reorder/main.html | 2 +- 7 files changed, 69 insertions(+), 38 deletions(-) diff --git a/demos/item-sliding/index.ts b/demos/item-sliding/index.ts index 46b46b10127..873e5f5df21 100644 --- a/demos/item-sliding/index.ts +++ b/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 diff --git a/demos/item-sliding/main.html b/demos/item-sliding/main.html index f0aa037119b..c0152693ffb 100644 --- a/demos/item-sliding/main.html +++ b/demos/item-sliding/main.html @@ -93,7 +93,7 @@

{{login.name}}

#download-spinner { display: none; } - + div.toolbar-background { background-color: rgba(255, 255, 255, 0.65); -webkit-backdrop-filter: saturate(180%) blur(20px); diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts index 4962807cdbe..7fd7cddb107 100644 --- a/src/components/item/item-reorder-gesture.ts +++ b/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,9 +39,16 @@ 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(); @@ -49,7 +56,8 @@ export class ItemReorderGesture { // 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 parent; - } - return null; -} - -function indexForItem(element: any): number { - return element['$ionIndex']; + return findReorderItem(element); } diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss index 5d870db5012..5c8b5bf4aa3 100644 --- a/src/components/item/item-reorder.scss +++ b/src/components/item/item-reorder.scss @@ -36,7 +36,7 @@ ion-reorder { } } -.reorder-active { +.reorder-list-active { .item-inner { pointer-events: none; } @@ -44,7 +44,8 @@ ion-reorder { .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); diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts index 6914bc05dbc..bf114532be3 100644 --- a/src/components/item/item-reorder.ts +++ b/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++) { (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 = 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']; } + diff --git a/src/components/item/test/reorder/index.ts b/src/components/item/test/reorder/index.ts index 6e92454c3ed..26edea3c073 100644 --- a/src/components/item/test/reorder/index.ts +++ b/src/components/item/test/reorder/index.ts @@ -25,4 +25,12 @@ class E2EPage { } } -ionicBootstrap(E2EPage); + +@Component({ + template: '' +}) +class E2EApp { + root = E2EPage; +} + +ionicBootstrap(E2EApp); diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html index 6b36ae1991a..6cf434a1058 100644 --- a/src/components/item/test/reorder/main.html +++ b/src/components/item/test/reorder/main.html @@ -14,7 +14,7 @@ + [style.min-height]="item*2+35+'px'"> {{item}}