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

Merge pull request #3041 from crazyserver/MOBILE-3833 

Mobile 3833
main
Noel De Martin 2022-01-10 16:24:02 +01:00 committed by GitHub
parent af24a778ab dc0b1d9587
commit 1793ddc818
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 803 additions and 715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/badges/pages/issued-badge/issued-badge.html
View File

@ -9,8 +9,7 @@
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<core-swipe-navigation [manager]="badges">
<ion-content [core-swipe-navigation]="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>

7
src/addons/mod/assign/pages/submission-review/submission-review.html
View File

@ -19,15 +19,12 @@
</ion-button>
</core-navbar-buttons>
</ion-header>
<ion-content>
<core-swipe-navigation [manager]="submissions">
<ion-content [core-swipe-navigation]="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"
[courseId]="courseId" [moduleId]="moduleId" [submitId]="submitId" [blindId]="blindId">
<addon-mod-assign-submission *ngIf="loaded" [courseId]="courseId" [moduleId]="moduleId" [submitId]="submitId" [blindId]="blindId">
</addon-mod-assign-submission>
</core-loading>
</core-swipe-navigation>
</ion-content>

4
src/addons/mod/feedback/pages/attempt/attempt.html
View File

@ -9,8 +9,7 @@
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<core-swipe-navigation [manager]="attempts">
<ion-content [core-swipe-navigation]="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>

20
src/addons/mod/forum/pages/discussion/discussion.html
View File

@ -55,8 +55,7 @@
</core-context-menu-item>
</core-context-menu>
</core-navbar-buttons>
<ion-content>
<core-swipe-navigation [manager]="discussions">
<ion-content [core-swipe-navigation]="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"
[ratingInfo]="ratingInfo" [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
[originalData]="originalData" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
[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"
[parentSubject]="postSubjects[post.parentid]" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts"
[ratingInfo]="ratingInfo" [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
[componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
[forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
[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"
[parentSubject]="postSubjects[post.parentid]" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts"
[ratingInfo]="ratingInfo" [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
[componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
[forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
[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>

8
src/addons/mod/forum/pages/new-discussion/new-discussion.html
View File

@ -11,8 +11,7 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<core-swipe-navigation [manager]="discussions">
<ion-content [core-swipe-navigation]="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"
[componentId]="forum.cmid" [allowOffline]="true" [courseId]="courseId">
[maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid"
[allowOffline]="true" [courseId]="courseId">
</core-attachments>
</div>
<ion-item>
@ -84,5 +83,4 @@
</ion-item>
</form>
</core-loading>
</core-swipe-navigation>
</ion-content>

11
src/addons/mod/glossary/pages/edit/edit.html
View File

@ -11,22 +11,20 @@
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<core-swipe-navigation [manager]="entries">
<ion-content [core-swipe-navigation]="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"
name="concept">
<ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="entry.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"
elementId="definition_editor" [draftExtraParams]="editorExtraParams">
[componentId]="cmId" [autoSave]="true" contextLevel="module" [contextInstanceId]="cmId" elementId="definition_editor"
[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>

12
src/addons/mod/glossary/pages/entry/entry.html
View File

@ -11,8 +11,7 @@
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<core-swipe-navigation [manager]="entries">
<ion-content [core-swipe-navigation]="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"
contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId">
<core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition" contextLevel="module"
[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"
[aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale">
[instanceId]="glossary.coursemodule" [itemId]="entry.id" [courseId]="glossary.course" [aggregateMethod]="glossary.assessed"
[scaleId]="glossary.scale">
</core-rating-aggregate>
</ng-container>
@ -82,5 +81,4 @@
</ion-item>
</ion-card>
</core-loading>
</core-swipe-navigation>
</ion-content>

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

14
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
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');

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

7
src/core/features/user/pages/profile/profile.html
View File

@ -8,8 +8,7 @@
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<core-swipe-navigation [manager]="users">
<ion-content [core-swipe-navigation]="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"
[message]=" 'core.user.detailsnotavailable' | translate">
<core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user" [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>