javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(reorder): add TapticEngine support

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2017-10-21 16:40:44 +02:00
parent 611361fc74
commit 7f7efe56fb
2 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/core/src/components/reorder/reorder-group.tsx
View File

@ -209,6 +209,11 @@ export class ReorderGroup {
} }
private onDragStart(ev: GestureDetail) { private onDragStart(ev: GestureDetail) {
if (ev.event) {
ev.event.preventDefault();
ev.event.stopPropagation();
}
const item = this.selectedItemEl = ev.data; const item = this.selectedItemEl = ev.data;
const heights = this.cachedHeights; const heights = this.cachedHeights;
heights.length = 0; heights.length = 0;
@ -246,6 +251,10 @@ export class ReorderGroup {
this._actived = true; this._actived = true;
item.classList.add(ITEM_REORDER_SELECTED); item.classList.add(ITEM_REORDER_SELECTED);
if ((window as any).TapticEngine) {
(window as any).TapticEngine.gestureSelectionStart();
}
} }
private onDragMove(ev: GestureDetail) { private onDragMove(ev: GestureDetail) {
@ -266,6 +275,10 @@ export class ReorderGroup {
if (toIndex !== undefined && (toIndex !== this.lastToIndex)) { if (toIndex !== undefined && (toIndex !== this.lastToIndex)) {
let fromIndex = indexForItem(selectedItem); let fromIndex = indexForItem(selectedItem);
this.lastToIndex = toIndex; this.lastToIndex = toIndex;
if ((window as any).TapticEngine) {
(window as any).TapticEngine.gestureSelectionChanged();
}
this._reorderMove(fromIndex, toIndex); this._reorderMove(fromIndex, toIndex);
} }
@ -279,25 +292,21 @@ export class ReorderGroup {
if (!selectedItem) { if (!selectedItem) {
return; return;
} }
// if (ev.event) {
// ev.event.preventDefault();
// ev.event.stopPropagation();
// }
const children = this.containerEl.children as any;
const toIndex = this.lastToIndex; const toIndex = this.lastToIndex;
const fromIndex = indexForItem(selectedItem); const fromIndex = indexForItem(selectedItem);
const ref = (fromIndex < toIndex) const ref = (fromIndex < toIndex)
? this.containerEl.children[toIndex + 1] ? children[toIndex + 1]
: this.containerEl.children[toIndex]; : children[toIndex];
this.containerEl.insertBefore(this.selectedItemEl, ref); this.containerEl.insertBefore(this.selectedItemEl, ref);
const children = this.containerEl.children;
const len = children.length; const len = children.length;
const transform = CSS_PROP.transformProp; const transform = CSS_PROP.transformProp;
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
(children[i] as any).style[transform] = ''; children[i].style[transform] = '';
} }
const reorderInactive = () => { const reorderInactive = () => {
@ -311,6 +320,10 @@ export class ReorderGroup {
} else { } else {
reorderInactive(); reorderInactive();
} }
if ((window as any).TapticEngine) {
(window as any).TapticEngine.gestureSelectionEnd();
}
} }
private itemIndexForTop(deltaY: number): number { private itemIndexForTop(deltaY: number): number {
@ -386,7 +399,7 @@ export class ReorderGroup {
type: 'pan', type: 'pan',
direction: 'y', direction: 'y',
threshold: 0, threshold: 0,
attachTo: 'parent' attachTo: 'body'
}}> }}>
<slot></slot> <slot></slot>
</ion-gesture> </ion-gesture>

7
packages/core/src/components/reorder/reorder.scss
View File

@ -67,11 +67,14 @@ ion-reorder[slot="start"] {
@include transform(translate3d($reorder-initial-transform, 0, 0)); @include transform(translate3d($reorder-initial-transform, 0, 0));
font-size: 1.3em; font-size: 1.3em;
opacity: .25;
transition: transform 140ms ease-in; transition: transform 140ms ease-in;
} }
.item-ios .reorder-icon {
font-size: 2em;
opacity: 0.3;
}
ion-reorder[slot="start"] .reorder-icon { ion-reorder[slot="start"] .reorder-icon {
@include transform(translate3d(-$reorder-initial-transform, 0, 0)); @include transform(translate3d(-$reorder-initial-transform, 0, 0));
} }