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 {
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 = <HTMLElement>document.elementFromPoint(x, y);
return findReorderItem(element);
return findReorderItem(element, list);
}

View File

@ -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 = <any>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 (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'];
}

View File

@ -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 {

View File

@ -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;
}

View File

@ -12,11 +12,25 @@
<ion-content>
<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.min-height]="item*2+35+'px'">
{{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-content>

View File

@ -288,11 +288,8 @@ export class Menu {
*/
@Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>();
/** @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

View File

@ -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);