MOBILE-3833 core: Fix RTL swipe navigation
parent
f5c9c3d022
commit
d6795d72b5
|
@ -16,7 +16,7 @@ import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angula
|
||||||
import { CoreSwipeNavigationItemsManager } from '@classes/items-management/swipe-navigation-items-manager';
|
import { CoreSwipeNavigationItemsManager } from '@classes/items-management/swipe-navigation-items-manager';
|
||||||
import { Gesture, GestureDetail } from '@ionic/angular';
|
import { Gesture, GestureDetail } from '@ionic/angular';
|
||||||
import { CoreScreen } from '@services/screen';
|
import { CoreScreen } from '@services/screen';
|
||||||
import { GestureController } from '@singletons';
|
import { GestureController, Platform } from '@singletons';
|
||||||
|
|
||||||
const ACTIVATION_THRESHOLD = 150;
|
const ACTIVATION_THRESHOLD = 150;
|
||||||
const SWIPE_FRICTION = 0.6;
|
const SWIPE_FRICTION = 0.6;
|
||||||
|
@ -74,25 +74,55 @@ export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Swipe to previous item.
|
* Move to item to the left.
|
||||||
*/
|
*/
|
||||||
swipeLeft(): void {
|
swipeLeft(): void {
|
||||||
if (!this.enabled) {
|
if (!this.enabled) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.manager?.navigateToNextItem();
|
Platform.isRTL
|
||||||
|
? this.manager?.navigateToPreviousItem()
|
||||||
|
: this.manager?.navigateToNextItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Swipe to next item.
|
* Move to item to the right.
|
||||||
*/
|
*/
|
||||||
swipeRight(): void {
|
swipeRight(): void {
|
||||||
if (!this.enabled) {
|
if (!this.enabled) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.manager?.navigateToPreviousItem();
|
Platform.isRTL
|
||||||
|
? this.manager?.navigateToNextItem()
|
||||||
|
: this.manager?.navigateToPreviousItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check whether there is an item to the right of the current selection.
|
||||||
|
*/
|
||||||
|
protected async hasItemRight(): Promise<boolean> {
|
||||||
|
if (!this.manager) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Platform.isRTL
|
||||||
|
? await this.manager.hasNextItem()
|
||||||
|
: await this.manager.hasPreviousItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check whether there is an item to the left of the current selection.
|
||||||
|
*/
|
||||||
|
protected async hasItemLeft(): Promise<boolean> {
|
||||||
|
if (!this.manager) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Platform.isRTL
|
||||||
|
? await this.manager.hasPreviousItem()
|
||||||
|
: await this.manager.hasNextItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -127,7 +157,7 @@ export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy {
|
||||||
protected async onRelease(event: GestureDetail): Promise<void> {
|
protected async onRelease(event: GestureDetail): Promise<void> {
|
||||||
this.element.style.transition = '.5s ease-out';
|
this.element.style.transition = '.5s ease-out';
|
||||||
|
|
||||||
if (event.deltaX > ACTIVATION_THRESHOLD && await this.manager?.hasPreviousItem()) {
|
if (event.deltaX > ACTIVATION_THRESHOLD && await this.hasItemRight()) {
|
||||||
this.preventClickOnElement();
|
this.preventClickOnElement();
|
||||||
this.swipeRight();
|
this.swipeRight();
|
||||||
|
|
||||||
|
@ -136,7 +166,7 @@ export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (event.deltaX < -ACTIVATION_THRESHOLD && await this.manager?.hasNextItem()) {
|
if (event.deltaX < -ACTIVATION_THRESHOLD && await this.hasItemLeft()) {
|
||||||
this.element.style.transform = 'translateX(-100%) !important';
|
this.element.style.transform = 'translateX(-100%) !important';
|
||||||
|
|
||||||
this.preventClickOnElement();
|
this.preventClickOnElement();
|
||||||
|
|
Loading…
Reference in New Issue