mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
fix(reorder): several reorder lists in the same view
This commit is contained in:
@ -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);
|
||||
}
|
||||
|
@ -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'];
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
|
Reference in New Issue
Block a user