MOBILE-2309 core: Don't initialize core-tab content until it's selected
Dani Palou
parent
8a3f7053e5
commit
cb561cc4a3
|
|
@ -26,6 +26,14 @@ import { TranslateService } from '@ngx-translate/core';
|
|||
* <core-loading [message]="loadingMessage" [hideUntil]="dataLoaded">
|
||||
* <!-- CONTENT TO HIDE UNTIL LOADED -->
|
||||
* </core-loading>
|
||||
*
|
||||
* IMPORTANT: Due to how ng-content works in Angular, the content of core-loading will be executed as soon as your view
|
||||
* is loaded, even if the content hidden. So if you have the following code:
|
||||
* <core-loading [hideUntil]="dataLoaded"><my-component></my-component></core-loading>
|
||||
*
|
||||
* The component "my-component" will be initialized immediately, even if dataLoaded is false, but it will be hidden. If you want
|
||||
* your component to be initialized only if dataLoaded is true, then you should use ngIf:
|
||||
* <core-loading [hideUntil]="dataLoaded"><my-component *ngIf="dataLoaded"></my-component></core-loading>
|
||||
*/
|
||||
@Component({
|
||||
selector: 'core-loading',
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter } from '@angular/core';
|
||||
import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
|
||||
import { CoreTabsComponent } from './tabs';
|
||||
|
||||
/**
|
||||
|
|
@ -20,17 +20,23 @@ import { CoreTabsComponent } from './tabs';
|
|||
*
|
||||
* You must provide either a title or an icon for the tab.
|
||||
*
|
||||
* The tab content MUST be surrounded by ng-template. This component uses ngTemplateOutlet instead of ng-content because the
|
||||
* latter executes all the code immediately. This means that all the tabs would be initialized as soon as your view is
|
||||
* loaded, leading to performance issues.
|
||||
*
|
||||
* Example usage:
|
||||
*
|
||||
* <core-tabs selectedIndex="1">
|
||||
* <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="switchTab('timeline')">
|
||||
* <!-- Tab contents. -->
|
||||
* <ng-template> <!-- This ng-template is required. -->
|
||||
* <!-- Tab contents. -->
|
||||
* </ng-template>
|
||||
* </core-tab>
|
||||
* </core-tabs>
|
||||
*/
|
||||
@Component({
|
||||
selector: 'core-tab',
|
||||
template: '<ng-content></ng-content>'
|
||||
template: '<ng-container *ngIf="loaded" [ngTemplateOutlet]="template"></ng-container>'
|
||||
})
|
||||
export class CoreTabComponent implements OnInit, OnDestroy {
|
||||
@Input() title?: string; // The tab title.
|
||||
|
|
@ -42,7 +48,10 @@ export class CoreTabComponent implements OnInit, OnDestroy {
|
|||
@Input() id?: string; // An ID to identify the tab.
|
||||
@Output() ionSelect: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>();
|
||||
|
||||
@ContentChild(TemplateRef) template: TemplateRef<any> // Template defined by the content.
|
||||
|
||||
element: HTMLElement; // The core-tab element.
|
||||
loaded = false;
|
||||
|
||||
constructor(private tabs: CoreTabsComponent, element: ElementRef) {
|
||||
this.element = element.nativeElement;
|
||||
|
|
@ -61,4 +70,20 @@ export class CoreTabComponent implements OnInit, OnDestroy {
|
|||
ngOnDestroy() {
|
||||
this.tabs.removeTab(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Select tab.
|
||||
*/
|
||||
selectTab() {
|
||||
this.element.classList.add('selected');
|
||||
this.loaded = true;
|
||||
this.ionSelect.emit(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unselect tab.
|
||||
*/
|
||||
unselectTab() {
|
||||
this.element.classList.remove('selected');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@ import { CoreTabComponent } from './tab';
|
|||
*
|
||||
* <core-tabs selectedIndex="1">
|
||||
* <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="switchTab('timeline')">
|
||||
* <!-- Tab contents. -->
|
||||
* <ng-template> <!-- This ng-template is required, @see CoreTabComponent. -->
|
||||
* <!-- Tab contents. -->
|
||||
* </ng-template>
|
||||
* </core-tab>
|
||||
* </core-tabs>
|
||||
*
|
||||
|
|
@ -171,7 +173,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
index = 0;
|
||||
}
|
||||
|
||||
const currenTab = this.getSelected(),
|
||||
const currentTab = this.getSelected(),
|
||||
newTab = this.tabs[index];
|
||||
|
||||
if (!newTab.enabled || !newTab.show) {
|
||||
|
|
@ -179,14 +181,13 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
return;
|
||||
}
|
||||
|
||||
if (currenTab) {
|
||||
if (currentTab) {
|
||||
// Unselect previous selected tab.
|
||||
currenTab.element.classList.remove('selected');
|
||||
currentTab.unselectTab();
|
||||
}
|
||||
|
||||
this.selected = index;
|
||||
newTab.element.classList.add('selected');
|
||||
newTab.ionSelect.emit(newTab);
|
||||
newTab.selectTab();
|
||||
this.ionChange.emit(newTab);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,88 +16,93 @@
|
|||
<core-tabs [selectedIndex]="firstSelectedTab" [hideUntil]="tabsReady">
|
||||
<!-- Site home tab. -->
|
||||
<core-tab [show]="siteHomeEnabled" [title]="'core.sitehome.sitehome' | translate" (ionSelect)="tabChanged('sitehome')">
|
||||
<core-sitehome-index></core-sitehome-index>
|
||||
<ng-template>
|
||||
<core-sitehome-index></core-sitehome-index>
|
||||
</ng-template>
|
||||
</core-tab>
|
||||
|
||||
<!-- Timeline tab. -->
|
||||
<core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="tabChanged('timeline')">
|
||||
<ion-content>
|
||||
<ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<ng-template>
|
||||
<ion-content>
|
||||
<ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<div no-padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
|
||||
<ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()">
|
||||
<ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
|
||||
<ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
|
||||
</ion-select>
|
||||
</div>
|
||||
<core-loading [hideUntil]="timeline.loaded" [hidden]="timeline.sort != 'sortbydates'" class="core-loading-center">
|
||||
<core-courses-overview-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()"></core-courses-overview-events>
|
||||
</core-loading>
|
||||
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="timeline.sort != 'sortbycourses'" class="core-loading-center">
|
||||
<ion-grid no-padding>
|
||||
<ion-row no-padding>
|
||||
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
|
||||
<core-courses-course-progress [course]="course">
|
||||
<core-courses-overview-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)"></core-courses-overview-events>
|
||||
</core-courses-course-progress>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesoverview' | translate"></core-empty-box>
|
||||
</core-loading>
|
||||
</ion-content>
|
||||
<div no-padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
|
||||
<ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()">
|
||||
<ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
|
||||
<ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
|
||||
</ion-select>
|
||||
</div>
|
||||
<core-loading [hideUntil]="timeline.loaded" [hidden]="timeline.sort != 'sortbydates'" class="core-loading-center">
|
||||
<core-courses-overview-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()"></core-courses-overview-events>
|
||||
</core-loading>
|
||||
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="timeline.sort != 'sortbycourses'" class="core-loading-center">
|
||||
<ion-grid no-padding>
|
||||
<ion-row no-padding>
|
||||
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
|
||||
<core-courses-course-progress [course]="course">
|
||||
<core-courses-overview-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)"></core-courses-overview-events>
|
||||
</core-courses-course-progress>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesoverview' | translate"></core-empty-box>
|
||||
</core-loading>
|
||||
</ion-content>
|
||||
</ng-template>
|
||||
</core-tab>
|
||||
|
||||
<!-- Courses tab. -->
|
||||
<core-tab [title]="'core.courses.courses' | translate" (ionSelect)="tabChanged('courses')">
|
||||
<ion-content>
|
||||
<ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<ng-template>
|
||||
<ion-content>
|
||||
<ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<core-loading [hideUntil]="courses.loaded" class="core-loading-center">
|
||||
<!-- "Time" selector. -->
|
||||
<div no-padding class="clearfix" [hidden]="showFilter">
|
||||
<ion-select [title]="'core.show' | translate" [(ngModel)]="courses.selected" float-start (ngModelChange)="selectedChanged()">
|
||||
<ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
|
||||
<ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
|
||||
<ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
|
||||
</ion-select>
|
||||
<!-- Download all courses. -->
|
||||
<div *ngIf="courses[courses.selected] && courses[courses.selected].length > 1" class="core-button-spinner" float-end>
|
||||
<button *ngIf="prefetchCoursesData[courses.selected].icon && prefetchCoursesData[courses.selected].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
|
||||
<ion-icon [name]="prefetchCoursesData[courses.selected].icon"></ion-icon>
|
||||
</button>
|
||||
<ion-spinner *ngIf="!prefetchCoursesData[courses.selected].icon || prefetchCoursesData[courses.selected].icon == 'spinner'"></ion-spinner>
|
||||
<span float-end *ngIf="prefetchCoursesData[courses.selected].badge">{{prefetchCoursesData[courses.selected].badge}}</span>
|
||||
<core-loading [hideUntil]="courses.loaded" class="core-loading-center">
|
||||
<!-- "Time" selector. -->
|
||||
<div no-padding class="clearfix" [hidden]="showFilter">
|
||||
<ion-select [title]="'core.show' | translate" [(ngModel)]="courses.selected" float-start (ngModelChange)="selectedChanged()">
|
||||
<ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
|
||||
<ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
|
||||
<ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
|
||||
</ion-select>
|
||||
<!-- Download all courses. -->
|
||||
<div *ngIf="courses[courses.selected] && courses[courses.selected].length > 1" class="core-button-spinner" float-end>
|
||||
<button *ngIf="prefetchCoursesData[courses.selected].icon && prefetchCoursesData[courses.selected].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
|
||||
<ion-icon [name]="prefetchCoursesData[courses.selected].icon"></ion-icon>
|
||||
</button>
|
||||
<ion-spinner *ngIf="!prefetchCoursesData[courses.selected].icon || prefetchCoursesData[courses.selected].icon == 'spinner'"></ion-spinner>
|
||||
<span float-end *ngIf="prefetchCoursesData[courses.selected].badge">{{prefetchCoursesData[courses.selected].badge}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter courses. -->
|
||||
<div no-padding padding-bottom [hidden]="!showFilter">
|
||||
<ion-item>
|
||||
<ion-label><ion-icon name="funnel" class="placeholder-icon"></ion-icon></ion-label>
|
||||
<ion-input type="text" name="filter" clearInput [(ngModel)]="courses.filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input>
|
||||
</ion-item>
|
||||
</div>
|
||||
<!-- List of courses. -->
|
||||
<div>
|
||||
<ion-grid no-padding>
|
||||
<ion-row no-padding>
|
||||
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
|
||||
<core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<!-- Filter courses. -->
|
||||
<div no-padding padding-bottom [hidden]="!showFilter">
|
||||
<ion-item>
|
||||
<ion-label><ion-icon name="funnel" class="placeholder-icon"></ion-icon></ion-label>
|
||||
<ion-input type="text" name="filter" clearInput [(ngModel)]="courses.filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input>
|
||||
</ion-item>
|
||||
</div>
|
||||
<!-- List of courses. -->
|
||||
<div>
|
||||
<ion-grid no-padding>
|
||||
<ion-row no-padding>
|
||||
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
|
||||
<core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'inprogress'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesinprogress' | translate"></core-empty-box>
|
||||
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'future'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesfuture' | translate"></core-empty-box>
|
||||
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'past'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursespast' | translate"></core-empty-box>
|
||||
</div>
|
||||
</core-loading>
|
||||
</ion-content>
|
||||
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'inprogress'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesinprogress' | translate"></core-empty-box>
|
||||
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'future'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesfuture' | translate"></core-empty-box>
|
||||
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'past'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursespast' | translate"></core-empty-box>
|
||||
</div>
|
||||
</core-loading>
|
||||
</ion-content>
|
||||
</ng-template>
|
||||
</core-tab>
|
||||
</core-tabs>
|
||||
|
||||
</ion-content>
|
||||
|
|
|
|||
Loading…
Reference in New Issue