EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3833 swipe: Change swipe navigation component to directive

main
Pau Ferrer Ocaña 2021-12-21 16:46:31 +01:00
parent a2c4f35628
commit 9d645fe254
8 changed files with 199 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/core/classes/items-management/swipe-navigation-items-manager.ts
View File

@ -49,6 +49,24 @@ export class CoreSwipeNavigationItemsManager<
await this.navigateToItemBy(1, 'forward');
}
/**
* Has a next item.
*/
async hasNextItem(): Promise<boolean> {
const item = await this.getItemBy(-1);
return !!item;
}
/**
* Has a previous item.
*/
async hasPreviousItem(): Promise<boolean> {
const item = await this.getItemBy(1);
return !!item;
}
/**
* @inheritdoc
*/

26
src/core/classes/page-transition.ts
View File

@ -229,11 +229,19 @@ export const moodleTransitionAnimation = (navEl: HTMLElement, opts: TransitionOp
rootAnimation.addAnimation(leavingContent);
// Check if leaving content is being translated using transform styles and decide to use fromTo or only To animation.
const hasTransformStyle = !!leavingContentEl && (leavingContentEl as HTMLElement).style.transform !== '';
if (backDirection) {
// leaving content, back direction
leavingContent
.beforeClearStyles([OPACITY])
.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
if (hasTransformStyle) {
leavingContent
.to('transform', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'))
.fromTo(OPACITY, 1, OFF_OPACITY);
} else {
leavingContent
.beforeClearStyles([OPACITY])
.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
}
const leavingPage = getIonPageElement(leavingEl) as HTMLElement;
rootAnimation.afterAddWrite(() => {
@ -244,9 +252,15 @@ export const moodleTransitionAnimation = (navEl: HTMLElement, opts: TransitionOp
} else {
// leaving content, forward direction
leavingContent
.fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
.fromTo(OPACITY, 1, OFF_OPACITY);
if (hasTransformStyle) {
leavingContent
.to('transform', (isRTL ? 'translateX(100%)' : 'translateX(-100%)'))
.fromTo(OPACITY, 1, OFF_OPACITY);
} else {
leavingContent
.fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
.fromTo(OPACITY, 1, OFF_OPACITY);
}
}
if (leavingContentEl) {

3
src/core/components/components.module.ts
View File

@ -50,7 +50,6 @@ import { CoreShowPasswordComponent } from './show-password/show-password';
import { CoreSitePickerComponent } from './site-picker/site-picker';
import { CoreSplitViewComponent } from './split-view/split-view';
import { CoreStyleComponent } from './style/style';
import { CoreSwipeNavigationComponent } from './swipe-navigation/swipe-navigation';
import { CoreTabComponent } from './tabs/tab';
import { CoreTabsComponent } from './tabs/tabs';
import { CoreTabsOutletComponent } from './tabs-outlet/tabs-outlet';
@ -94,7 +93,6 @@ import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides';
CoreSitePickerComponent,
CoreSplitViewComponent,
CoreStyleComponent,
CoreSwipeNavigationComponent,
CoreSwipeSlidesComponent,
CoreTabComponent,
CoreTabsComponent,
@ -144,7 +142,6 @@ import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides';
CoreSitePickerComponent,
CoreSplitViewComponent,
CoreStyleComponent,
CoreSwipeNavigationComponent,
CoreSwipeSlidesComponent,
CoreTabComponent,
CoreTabsComponent,

5
src/core/components/swipe-navigation/swipe-navigation.html
View File

@ -1,5 +0,0 @@
<ion-slides [options]="{ allowTouchMove: enabled }" (swipeleft)="swipeLeft()" (swiperight)="swipeRight()">
<ion-slide>
<ng-content></ng-content>
</ion-slide>
</ion-slides>

24
src/core/components/swipe-navigation/swipe-navigation.scss
View File

@ -1,24 +0,0 @@
ion-slides {
min-height: 100%;
}
ion-slide {
align-items: start;
}
:host ::ng-deep {
.swiper-wrapper {
position: absolute;
}
core-loading .core-loading-content {
display: block !important;
width: 100%;
}
ion-refresher.refresher-native {
z-index: 2;
}
}

54
src/core/components/swipe-navigation/swipe-navigation.ts
View File

@ -1,54 +0,0 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input } from '@angular/core';
import { CoreSwipeNavigationItemsManager } from '@classes/items-management/swipe-navigation-items-manager';
import { CoreScreen } from '@services/screen';
@Component({
selector: 'core-swipe-navigation',
templateUrl: 'swipe-navigation.html',
styleUrls: ['swipe-navigation.scss'],
})
export class CoreSwipeNavigationComponent {
@Input() manager?: CoreSwipeNavigationItemsManager;
get enabled(): boolean {
return CoreScreen.isMobile && !!this.manager;
}
/**
* Swipe to previous item.
*/
swipeLeft(): void {
if (!this.enabled) {
return;
}
this.manager?.navigateToPreviousItem();
}
/**
* Swipe to next item.
*/
swipeRight(): void {
if (!this.enabled) {
return;
}
this.manager?.navigateToNextItem();
}
}

3
src/core/directives/directives.module.ts
View File

@ -28,6 +28,7 @@ import { CoreAriaButtonClickDirective } from './aria-button';
import { CoreOnResizeDirective } from './on-resize';
import { CoreDownloadFileDirective } from './download-file';
import { CoreCollapsibleHeaderDirective } from './collapsible-header';
import { CoreSwipeNavigationDirective } from './swipe-navigation';
@NgModule({
declarations: [
@ -45,6 +46,7 @@ import { CoreCollapsibleHeaderDirective } from './collapsible-header';
CoreOnResizeDirective,
CoreDownloadFileDirective,
CoreCollapsibleHeaderDirective,
CoreSwipeNavigationDirective,
],
exports: [
CoreAutoFocusDirective,
@ -61,6 +63,7 @@ import { CoreCollapsibleHeaderDirective } from './collapsible-header';
CoreOnResizeDirective,
CoreDownloadFileDirective,
CoreCollapsibleHeaderDirective,
CoreSwipeNavigationDirective,
],
})
export class CoreDirectivesModule {}

158
src/core/directives/swipe-navigation.ts 100644
View File

@ -0,0 +1,158 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { CoreSwipeNavigationItemsManager } from '@classes/items-management/swipe-navigation-items-manager';
import { Gesture } from '@ionic/angular';
import { CoreScreen } from '@services/screen';
import { GestureController } from '@singletons';
const ACTIVATION_THRESHOLD = 150;
const SWIPE_FRICTION = 0.6;
/**
* Directive to enable content navigation with swipe.
*
* Example usage:
*
* <ion-content [core-swipe-navigation]="manager">
*/
@Directive({
selector: 'ion-content[core-swipe-navigation]',
})
export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy {
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('core-swipe-navigation') manager?: CoreSwipeNavigationItemsManager;
protected element: HTMLElement;
protected swipeGesture?: Gesture;
constructor(el: ElementRef) {
this.element = el.nativeElement;
}
get enabled(): boolean {
return CoreScreen.isMobile && !!this.manager;
}
/**
* @inheritdoc
*/
ngAfterViewInit(): void {
const style = this.element.style;
this.swipeGesture = GestureController.create({
el: this.element,
gestureName: 'swipe',
threshold: 10,
gesturePriority: 10,
canStart: () => this.enabled,
onStart: () => {
style.transition = '';
},
onMove: (ev) => {
style.transform = `translateX(${ev.deltaX * SWIPE_FRICTION }px)`;
},
onEnd: (ev) => {
style.transition = '.5s ease-out';
if (ev.deltaX > ACTIVATION_THRESHOLD) {
this.manager?.hasNextItem().then((hasNext) => {
if (hasNext) {
this.preventClickOnElement();
style.transform = 'translateX(100%) !important';
this.swipeRight();
} else {
style.transform = '';
}
return;
});
return;
}
if (ev.deltaX < -ACTIVATION_THRESHOLD) {
this.manager?.hasPreviousItem().then((hasPrevious) => {
if (hasPrevious) {
this.preventClickOnElement();
style.transform = 'translateX(-100%) !important';
this.swipeLeft();
} else {
style.transform = '';
}
return;
});
return;
}
style.transform = '';
},
});
this.swipeGesture.enable();
}
/**
* Swipe to previous item.
*/
swipeLeft(): void {
if (!this.enabled) {
return;
}
this.manager?.navigateToPreviousItem();
}
/**
* Swipe to next item.
*/
swipeRight(): void {
if (!this.enabled) {
return;
}
this.manager?.navigateToNextItem();
}
/**
* Prevent click event by capturing the click before happening.
*/
protected preventClickOnElement(): void {
this.element.addEventListener(
'click',
(ev: Event) => {
ev.preventDefault();
ev.stopPropagation();
return false;
},
true, // Register event on the capture phase.
);
}
/**
* @inheritdoc
*/
ngOnDestroy(): void {
this.swipeGesture?.destroy();
}
}