fix(reorder): several reorder lists in the same view

This commit is contained in:
Manu Mtz.-Almeida
2016-09-30 19:39:53 +02:00
parent 9bbe485ed0
commit e75d9be822
7 changed files with 50 additions and 27 deletions

View File

@ -129,7 +129,7 @@ export class ItemReorderGesture {
} }
private itemForCoord(coord: PointerCoordinates): HTMLElement { 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 { 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 = <HTMLElement>document.elementFromPoint(x, y); let element = <HTMLElement>document.elementFromPoint(x, y);
return findReorderItem(element); return findReorderItem(element, list);
} }

View File

@ -200,9 +200,12 @@ export class ItemReorder {
* @private * @private
*/ */
reorderPrepare() { 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++) { 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 { export class Reorder {
constructor( constructor(
@Inject(forwardRef(() => Item)) private item: Item, @Inject(forwardRef(() => Item)) private item: ItemReorder,
private elementRef: ElementRef) { private elementRef: ElementRef) {
elementRef.nativeElement['$ionComponent'] = this; elementRef.nativeElement['$ionComponent'] = this;
} }
getReorderNode() { getReorderNode(): HTMLElement {
let node = <any>this.item.getNativeElement(); let node = <any>this.item.getNativeElement();
return findReorderItem(node); return findReorderItem(node, null);
} }
} }
@ -330,10 +333,13 @@ export class Reorder {
/** /**
* @private * @private
*/ */
export function findReorderItem(node: any): HTMLElement { export function findReorderItem(node: any, listNode: any): HTMLElement {
let nested = 0; let nested = 0;
while (node && nested < 4) { while (node && nested < 4) {
if (indexForItem(node) !== undefined ) { if (indexForItem(node) !== undefined) {
if (listNode && node.parentNode !== listNode) {
return null;
}
return node; return node;
} }
node = node.parentNode; node = node.parentNode;
@ -349,3 +355,10 @@ export function indexForItem(element: any): number {
return element['$ionIndex']; return element['$ionIndex'];
} }
/**
* @private
*/
export function reorderListForItem(element: any): any {
return element['$ionReorderList'];
}

View File

@ -36,7 +36,7 @@ $item-md-sliding-content-background: $list-md-background-color !default;
color: $list-md-text-color; color: $list-md-text-color;
background-color: $list-md-background-color; background-color: $list-md-background-color;
box-shadow: none; 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 { .item-md.activated {

View File

@ -10,12 +10,16 @@ export class E2EPage {
isReordering: boolean = false; isReordering: boolean = false;
constructor(private d: ChangeDetectorRef) { constructor(private d: ChangeDetectorRef) {
let nu = 30; let nu = 9;
for (let i = 0; i < nu; i++) { for (let i = 0; i < nu; i++) {
this.items.push(i); this.items.push(i);
} }
} }
clickedButton(num: number) {
console.log('clicked', num);
}
toggle() { toggle() {
this.isReordering = !this.isReordering; this.isReordering = !this.isReordering;
} }

View File

@ -12,11 +12,25 @@
<ion-content> <ion-content>
<ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)"> <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
<ion-item *ngFor="let item of items" <button ion-item *ngFor="let item of items" (click)="clickedButton(item)"
[style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'" [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
[style.min-height]="item*2+35+'px'"> [style.min-height]="item*2+35+'px'">
{{item}} {{item}}
</ion-item> </button>
</ion-list>
<ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
<ion-item-sliding *ngFor="let item of items">
<button ion-item (click)="clickedButton(item)">
Sliding item {{item}}
</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> </ion-list>
</ion-content> </ion-content>

View File

@ -288,11 +288,8 @@ export class Menu {
*/ */
@Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>();
/** @private */
_menuCtrl: MenuController;
constructor( constructor(
_menuCtrl: MenuController, public _menuCtrl: MenuController,
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _config: Config, private _config: Config,
private _platform: Platform, private _platform: Platform,
@ -300,9 +297,7 @@ export class Menu {
private _keyboard: Keyboard, private _keyboard: Keyboard,
private _zone: NgZone, private _zone: NgZone,
public gestureCtrl: GestureController public gestureCtrl: GestureController
) { ) {}
this._menuCtrl = _menuCtrl;
}
/** /**
* @private * @private

View File

@ -233,12 +233,9 @@ export class Config {
// or it was from the users platform configs // or it was from the users platform configs
// or it was from the default platform configs // or it was from the default platform configs
// in that order // in that order
let rtnVal: any; let rtnVal: any = this._c[key];
if (isFunction(this._c[key])) { if (isFunction(rtnVal)) {
rtnVal = this._c[key](this.platform); rtnVal = rtnVal(this.platform);
} else {
rtnVal = this._c[key];
} }
return (rtnVal !== null ? rtnVal : fallbackValue); return (rtnVal !== null ? rtnVal : fallbackValue);