From e75d9be822d2bfd48ef39f57dcf77add717224fd Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Fri, 30 Sep 2016 19:39:53 +0200 Subject: [PATCH] fix(reorder): several reorder lists in the same view --- src/components/item/item-reorder-gesture.ts | 6 ++--- src/components/item/item-reorder.ts | 27 ++++++++++++++----- src/components/item/item.md.scss | 2 +- .../item/test/reorder/app-module.ts | 6 ++++- src/components/item/test/reorder/main.html | 18 +++++++++++-- src/components/menu/menu.ts | 9 ++----- src/config/config.ts | 9 +++---- 7 files changed, 50 insertions(+), 27 deletions(-) diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts index ab1765f9193..fea1caa3d55 100644 --- a/src/components/item/item-reorder-gesture.ts +++ b/src/components/item/item-reorder-gesture.ts @@ -129,7 +129,7 @@ export class ItemReorderGesture { } private itemForCoord(coord: PointerCoordinates): HTMLElement { - return itemForPosition(this.offset.x - 100, coord.y); + return itemForPosition(this.offset.x - 100, coord.y, this.reorderList.getNativeElement()); } private scroll(posY: number): number { @@ -152,7 +152,7 @@ export class ItemReorderGesture { } } -function itemForPosition(x: number, y: number): HTMLElement { +function itemForPosition(x: number, y: number, list: any): HTMLElement { let element = document.elementFromPoint(x, y); - return findReorderItem(element); + return findReorderItem(element, list); } diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts index bdbf3feea19..4ca806ed036 100644 --- a/src/components/item/item-reorder.ts +++ b/src/components/item/item-reorder.ts @@ -200,9 +200,12 @@ export class ItemReorder { * @private */ reorderPrepare() { - let children: any = this._element.children; + let ele = this._element; + let children: any = ele.children; for (let i = 0, ilen = children.length; i < ilen; i++) { - children[i].$ionIndex = i; + var child = children[i]; + child.$ionIndex = i; + child.$ionReorderList = ele; } } @@ -315,14 +318,14 @@ export class ItemReorder { }) export class Reorder { constructor( - @Inject(forwardRef(() => Item)) private item: Item, + @Inject(forwardRef(() => Item)) private item: ItemReorder, private elementRef: ElementRef) { elementRef.nativeElement['$ionComponent'] = this; } - getReorderNode() { + getReorderNode(): HTMLElement { let node = this.item.getNativeElement(); - return findReorderItem(node); + return findReorderItem(node, null); } } @@ -330,10 +333,13 @@ export class Reorder { /** * @private */ -export function findReorderItem(node: any): HTMLElement { +export function findReorderItem(node: any, listNode: any): HTMLElement { let nested = 0; while (node && nested < 4) { - if (indexForItem(node) !== undefined ) { + if (indexForItem(node) !== undefined) { + if (listNode && node.parentNode !== listNode) { + return null; + } return node; } node = node.parentNode; @@ -349,3 +355,10 @@ export function indexForItem(element: any): number { return element['$ionIndex']; } +/** + * @private + */ +export function reorderListForItem(element: any): any { + return element['$ionReorderList']; +} + diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 05be0f26e9c..da9be4d472e 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -36,7 +36,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; color: $list-md-text-color; background-color: $list-md-background-color; box-shadow: none; - transition: background-color 300ms cubic-bezier(.4, 0, .2, 1), transform 300ms; + transition: background-color 300ms cubic-bezier(.4, 0, .2, 1); } .item-md.activated { diff --git a/src/components/item/test/reorder/app-module.ts b/src/components/item/test/reorder/app-module.ts index 3ec6d8fdcd6..d03c16be527 100644 --- a/src/components/item/test/reorder/app-module.ts +++ b/src/components/item/test/reorder/app-module.ts @@ -10,12 +10,16 @@ export class E2EPage { isReordering: boolean = false; constructor(private d: ChangeDetectorRef) { - let nu = 30; + let nu = 9; for (let i = 0; i < nu; i++) { this.items.push(i); } } + clickedButton(num: number) { + console.log('clicked', num); + } + toggle() { this.isReordering = !this.isReordering; } diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html index b2173350ead..e884285a11a 100644 --- a/src/components/item/test/reorder/main.html +++ b/src/components/item/test/reorder/main.html @@ -12,11 +12,25 @@ - {{item}} - + + + + + + + + + + diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 5ae09c7ad6f..7fc98c5c633 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -288,11 +288,8 @@ export class Menu { */ @Output() ionClose: EventEmitter = new EventEmitter(); - /** @private */ - _menuCtrl: MenuController; - constructor( - _menuCtrl: MenuController, + public _menuCtrl: MenuController, private _elementRef: ElementRef, private _config: Config, private _platform: Platform, @@ -300,9 +297,7 @@ export class Menu { private _keyboard: Keyboard, private _zone: NgZone, public gestureCtrl: GestureController - ) { - this._menuCtrl = _menuCtrl; - } + ) {} /** * @private diff --git a/src/config/config.ts b/src/config/config.ts index b08360133f5..dff53a988bb 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -233,12 +233,9 @@ export class Config { // or it was from the users platform configs // or it was from the default platform configs // in that order - let rtnVal: any; - if (isFunction(this._c[key])) { - rtnVal = this._c[key](this.platform); - - } else { - rtnVal = this._c[key]; + let rtnVal: any = this._c[key]; + if (isFunction(rtnVal)) { + rtnVal = rtnVal(this.platform); } return (rtnVal !== null ? rtnVal : fallbackValue);