GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-2554 course: Add infinite scroll on course all sections

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2018-09-18 16:18:16 +02:00
parent 2799bcdd5e
commit 2b3ebc5452
9 changed files with 100 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/addon/calendar/pages/list/list.html
View File

@ -29,9 +29,12 @@
</a>
</ion-list>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchEvents())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="canLoadMore" padding>
<button ion-button block (click)="fetchEvents()" color="light">{{'core.loadmore' | translate }}</button>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchEvents())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</core-loading>
</ion-content>
</core-split-view>

9
src/addon/messages/pages/discussion/discussion.html
View File

@ -15,9 +15,12 @@
<ion-content class="has-footer">
<core-loading [hideUntil]="loaded">
<!-- Load previous messages. -->
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadPrevious($event)" position="top">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="canLoadMore" padding>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadPrevious($event)" position="top">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<button ion-button block (click)="loadPrevious()" color="light">{{'core.loadmore' | translate }}</button>
</div>
<ion-list class="addon-messages-discussion-container" [attr.aria-live]="polite">
<ng-container *ngFor="let message of messages; index as index; last as last">
<ion-chip *ngIf="showDate(message, messages[index - 1])" class="addon-messages-date" color="light">

9
src/addon/mod/forum/components/index/addon-mod-forum-index.html
View File

@ -88,9 +88,12 @@
</div>
</core-empty-box>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchMoreDiscussions())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="canLoadMore" padding>
<button ion-button block (click)="fetchMoreDiscussions()" color="light">{{'core.loadmore' | translate }}</button>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchMoreDiscussions())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</core-loading>
<ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">

9
src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
View File

@ -56,9 +56,12 @@
<core-empty-box *ngIf="!entries.length && !offlineEntries.length" icon="list" [message]="'addon.mod_glossary.noentriesfound' | translate"></core-empty-box>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(loadMoreEntries())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="canLoadMore" padding>
<button ion-button block (click)="loadMoreEntries()" color="light">{{'core.loadmore' | translate }}</button>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(loadMoreEntries())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</core-loading>
<ion-fab bottom end *ngIf="canAdd">

9
src/addon/notifications/pages/list/list.html
View File

@ -32,8 +32,11 @@
<addon-notifications-actions [contextUrl]="notification.contexturl" [courseId]="notification.courseid"></addon-notifications-actions>
</ion-card>
<core-empty-box *ngIf="!notifications || notifications.length <= 0" icon="notifications" [message]="'addon.notifications.therearentnotificationsyet' | translate"></core-empty-box>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreNotifications($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="canLoadMore" padding>
<button ion-button block (click)="loadMoreNotifications()" color="light">{{'core.loadmore' | translate }}</button>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreNotifications($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</core-loading>
</ion-content>

13
src/core/course/components/format/core-course-format.html
View File

@ -44,10 +44,19 @@
<!-- Multiple sections. -->
<div *ngIf="selectedSection && selectedSection.id == allSectionsId">
<core-dynamic-component [component]="allSectionsComponent" [data]="data">
<ng-container *ngFor="let section of sections">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
<ng-container *ngFor="let section of sections; index as i">
<ng-container *ngIf="i <= showSectionId">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
</ng-container>
</ng-container>
</core-dynamic-component>
<div *ngIf="canLoadMore" padding>
<button ion-button block (click)="showMoreActivities()" color="light">{{'core.loadmore' | translate }}</button>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(showMoreActivities())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</div>
</core-loading>
<ion-buttons padding end class="core-course-section-nav-buttons" *ngIf="displaySectionSelector && sections && sections.length">

47
src/core/course/components/format/format.ts
View File

@ -41,6 +41,8 @@ import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-comp
templateUrl: 'core-course-format.html'
})
export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
static LOAD_MORE_ACTIVITIES = 20; // How many activities should load each time showMoreActivities is called.
@Input() course: any; // The course to render.
@Input() sections: any[]; // List of course sections.
@Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled.
@ -57,6 +59,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
sectionSelectorComponent: any;
singleSectionComponent: any;
allSectionsComponent: any;
canLoadMore = false;
showSectionId = 0;
// Data to pass to the components.
data: any = {};
@ -273,6 +277,9 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
} else {
this.previousSection = null;
this.nextSection = null;
this.canLoadMore = false;
this.showSectionId = 0;
this.showMoreActivities();
}
if (this.moduleId && typeof previousValue == 'undefined') {
@ -363,6 +370,46 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
return Promise.all(promises);
}
/**
* Show more activities (only used when showing all the sections at the same time).
*
* @return {Promise<void>} Resolved when done to change infinite loading status.
*/
showMoreActivities(): Promise<void> {
this.canLoadMore = false;
let modulesLoaded = 0,
i;
for (i = this.showSectionId + 1; i < this.sections.length; i++) {
if (this.sections[i].hasContent && this.sections[i].modules) {
modulesLoaded += this.sections[i].modules.reduce((total, module) => {
return module.visibleoncoursepage !== 0 ? total + 1 : total;
}, 0);
if (modulesLoaded >= CoreCourseFormatComponent.LOAD_MORE_ACTIVITIES) {
this.showSectionId = i;
break;
}
}
}
this.canLoadMore = i < this.sections.length;
if (this.canLoadMore) {
// Check if any of the following sections have any content.
let thereAreMore = false;
for (i++; i < this.sections.length; i++) {
if (this.sections[i].hasContent && this.sections[i].modules) {
thereAreMore = true;
break;
}
}
this.canLoadMore = thereAreMore;
}
return Promise.resolve();
}
/**
* Component destroyed.
*/

9
src/core/courses/pages/search/search.html
View File

@ -10,9 +10,12 @@
<ion-item-divider color="light">{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
<core-empty-box *ngIf="total == 0" icon="search" [message]="'core.courses.nosearchresults' | translate"></core-empty-box>
<core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreResults($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="canLoadMore" padding>
<button ion-button block (click)="loadMoreResults()" color="light">{{'core.loadmore' | translate }}</button>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreResults($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</div>
</ion-content>

9
src/core/user/components/participants/core-user-participants.html
View File

@ -17,9 +17,12 @@
</a>
</ion-list>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchData())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="canLoadMore" padding>
<button ion-button block (click)="fetchData()" color="light">{{'core.loadmore' | translate }}</button>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchData())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</core-loading>
</ion-content>
</core-split-view>