Skip to content

Commit

Permalink
fix(reorder): several reorder lists in the same view
Browse files Browse the repository at this point in the history
  • Loading branch information
manucorporat committed Sep 30, 2016
1 parent 9bbe485 commit e75d9be
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 27 deletions.
6 changes: 3 additions & 3 deletions src/components/item/item-reorder-gesture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);
}
27 changes: 20 additions & 7 deletions src/components/item/item-reorder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -315,25 +318,28 @@ 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);
}

}

/**
* @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;
Expand All @@ -349,3 +355,10 @@ export function indexForItem(element: any): number {
return element['$ionIndex'];
}

/**
* @private
*/
export function reorderListForItem(element: any): any {
return element['$ionReorderList'];
}

2 changes: 1 addition & 1 deletion src/components/item/item.md.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 5 additions & 1 deletion src/components/item/test/reorder/app-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
18 changes: 16 additions & 2 deletions src/components/item/test/reorder/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
9 changes: 2 additions & 7 deletions src/components/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -288,21 +288,16 @@ 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,
private _renderer: Renderer,
private _keyboard: Keyboard,
private _zone: NgZone,
public gestureCtrl: GestureController
) {
this._menuCtrl = _menuCtrl;
}
) {}

/**
* @private
Expand Down
9 changes: 3 additions & 6 deletions src/config/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit e75d9be

Please sign in to comment.