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 {
|
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);
|
||||||
}
|
}
|
||||||
|
@ -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'];
|
||||||
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
@ -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);
|
||||||
|
Reference in New Issue
Block a user