Merge pull request #3041 from crazyserver/MOBILE-3833

Mobile 3833

src/addons/badges/pages/issued-badge/issued-badge.html

@@ -9,8 +9,7 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content [core-swipe-navigation]="badges">
-    <core-swipe-navigation [manager]="badges">
     <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
@@ -246,5 +245,4 @@
             </ion-item-group>
         </ng-container>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>

src/addons/mod/assign/pages/submission-review/submission-review.html

@@ -19,15 +19,12 @@
         </ion-button>
     </core-navbar-buttons>
 </ion-header>
-<ion-content>
+<ion-content [core-swipe-navigation]="submissions">
-    <core-swipe-navigation [manager]="submissions">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshSubmission($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-            <addon-mod-assign-submission *ngIf="loaded"
+        <addon-mod-assign-submission *ngIf="loaded" [courseId]="courseId" [moduleId]="moduleId" [submitId]="submitId" [blindId]="blindId">
-                [courseId]="courseId" [moduleId]="moduleId" [submitId]="submitId" [blindId]="blindId">
         </addon-mod-assign-submission>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>

src/addons/mod/feedback/pages/attempt/attempt.html

@@ -9,8 +9,7 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content [core-swipe-navigation]="attempts">
-    <core-swipe-navigation [manager]="attempts">
     <core-loading [hideUntil]="loaded">
         <ion-list class="ion-no-margin" *ngIf="attempt || anonAttempt">
             <ion-item *ngIf="attempt" class="ion-text-wrap" core-user-link [userId]="attempt.userid"
@@ -51,5 +50,4 @@
             </ng-container>
         </ion-list>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>

src/addons/mod/forum/pages/discussion/discussion.html

@@ -55,8 +55,7 @@
         </core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
-<ion-content>
+<ion-content [core-swipe-navigation]="discussions">
-    <core-swipe-navigation [manager]="discussions">
     <ion-refresher slot="fixed" [disabled]="!discussionLoaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
@@ -88,8 +87,8 @@
         <div *ngIf="startingPost" class="ion-margin-bottom">
             <addon-mod-forum-post [post]="startingPost" [discussion]="discussion" [courseId]="courseId" [highlight]="true"
                 [discussionId]="discussionId" [component]="component" [componentId]="cmId" [formData]="formData"
-                    [originalData]="originalData" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts"
+                [originalData]="originalData" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
-                    [ratingInfo]="ratingInfo" [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
+                [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
             </addon-mod-forum-post>
         </div>
 
@@ -97,9 +96,9 @@
             <ng-container *ngFor="let post of posts; first as first">
                 <core-spacer *ngIf="!first"></core-spacer>
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component"
-                        [componentId]="cmId" [formData]="formData" [originalData]="originalData"
+                    [componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
-                        [parentSubject]="postSubjects[post.parentid]" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts"
+                    [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
-                        [ratingInfo]="ratingInfo" [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
+                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
                 </addon-mod-forum-post>
             </ng-container>
         </ion-card>
@@ -113,9 +112,9 @@
         <ng-template #nestedPosts let-post="post">
             <ion-card>
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component"
-                        [componentId]="cmId" [formData]="formData" [originalData]="originalData"
+                    [componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
-                        [parentSubject]="postSubjects[post.parentid]" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts"
+                    [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
-                        [ratingInfo]="ratingInfo" [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
+                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
                 </addon-mod-forum-post>
             </ion-card>
             <div class="ion-padding-start" *ngIf="post.children && post.children.length && post.children[0].subject">
@@ -125,5 +124,4 @@
             </div>
         </ng-template>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>

src/addons/mod/forum/pages/new-discussion/new-discussion.html

@@ -11,8 +11,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content [core-swipe-navigation]="discussions">
-    <core-swipe-navigation [manager]="discussions">
     <ion-refresher slot="fixed" [disabled]="!groupsLoaded" (ionRefresh)="refreshGroups($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
@@ -63,8 +62,8 @@
                     <ion-toggle [(ngModel)]="newDiscussion.pin" name="pin"></ion-toggle>
                 </ion-item>
                 <core-attachments *ngIf="canCreateAttachments && forum && forum.maxattachments > 0" [files]="newDiscussion.files"
-                        [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component"
+                    [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid"
-                        [componentId]="forum.cmid" [allowOffline]="true" [courseId]="courseId">
+                    [allowOffline]="true" [courseId]="courseId">
                 </core-attachments>
             </div>
             <ion-item>
@@ -84,5 +83,4 @@
             </ion-item>
         </form>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>

src/addons/mod/glossary/pages/edit/edit.html

@@ -11,22 +11,20 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content [core-swipe-navigation]="entries">
-    <core-swipe-navigation [manager]="entries">
     <core-loading [hideUntil]="loaded">
         <form #editFormEl *ngIf="glossary">
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_glossary.concept' | translate }}</ion-label>
-                    <ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="entry.concept"
+                <ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="entry.concept" name="concept">
-                        name="concept">
                 </ion-input>
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_glossary.definition' | translate }}</ion-label>
                 <core-rich-text-editor [control]="definitionControl" (contentChanged)="onDefinitionChange($event)"
                     [placeholder]="'addon.mod_glossary.definition' | translate" name="addon_mod_glossary_edit" [component]="component"
-                        [componentId]="cmId" [autoSave]="true" contextLevel="module" [contextInstanceId]="cmId"
+                    [componentId]="cmId" [autoSave]="true" contextLevel="module" [contextInstanceId]="cmId" elementId="definition_editor"
-                        elementId="definition_editor" [draftExtraParams]="editorExtraParams">
+                    [draftExtraParams]="editorExtraParams">
                 </core-rich-text-editor>
             </ion-item>
             <ion-item *ngIf="categories.length > 0">
@@ -82,5 +80,4 @@
             </ion-button>
         </form>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>

src/addons/mod/glossary/pages/entry/entry.html

@@ -11,8 +11,7 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content [core-swipe-navigation]="entries">
-    <core-swipe-navigation [manager]="entries">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
@@ -42,8 +41,8 @@
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition"
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition" contextLevel="module"
-                            contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId">
+                        [contextInstanceId]="componentId" [courseId]="courseId">
                     </core-format-text>
                 </ion-label>
             </ion-item>
@@ -71,8 +70,8 @@
                 [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" [userId]="entry.userid" (onUpdate)="ratingUpdated()">
             </core-rating-rate>
             <core-rating-aggregate *ngIf="glossary && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module"
-                    [instanceId]="glossary.coursemodule" [itemId]="entry.id" [courseId]="glossary.course"
+                [instanceId]="glossary.coursemodule" [itemId]="entry.id" [courseId]="glossary.course" [aggregateMethod]="glossary.assessed"
-                    [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale">
+                [scaleId]="glossary.scale">
             </core-rating-aggregate>
         </ng-container>
 
@@ -82,5 +81,4 @@
             </ion-item>
         </ion-card>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>

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

@@ -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
      */

src/core/classes/page-transition.ts

@@ -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
+            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,10 +252,16 @@ export const moodleTransitionAnimation = (navEl: HTMLElement, opts: TransitionOp
 
         } else {
             // leaving content, forward direction
+            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) {
             const leavingTransitionEffectEl = shadow(leavingContentEl).querySelector('.transition-effect');

src/core/components/components.module.ts

@@ -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,

src/core/components/swipe-navigation/swipe-navigation.html

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

src/core/components/swipe-navigation/swipe-navigation.scss

@@ -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;
-    }
-
-}

src/core/components/swipe-navigation/swipe-navigation.ts

@@ -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();
-    }
-
-}

src/core/directives/directives.module.ts

@@ -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 {}

src/core/directives/swipe-navigation.ts

@@ -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();
+    }
+
+}

src/core/features/user/pages/profile/profile.html

@@ -8,8 +8,7 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content [core-swipe-navigation]="users">
-    <core-swipe-navigation [manager]="users">
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
@@ -86,11 +85,9 @@
                 </ion-label>
             </ion-item>
         </ion-list>
-            <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user"
+        <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user" [message]=" 'core.user.detailsnotavailable' | translate">
-                [message]=" 'core.user.detailsnotavailable' | translate">
         </core-empty-box>
         <core-empty-box *ngIf="isDeleted" icon="far-user" [message]="'core.userdeleted' | translate"></core-empty-box>
         <core-empty-box *ngIf="!isEnrolled" icon="far-user" [message]="'core.notenrolledprofile' | translate"></core-empty-box>
     </core-loading>
-    </core-swipe-navigation>
 </ion-content>