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

MOBILE-2309 core: Don't initialize core-tab content until it's selected

main
Dani Palou 2018-01-19 15:41:14 +01:00
parent 8a3f7053e5
commit cb561cc4a3
4 changed files with 118 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/loading/loading.ts
View File

@ -26,6 +26,14 @@ import { TranslateService } from '@ngx-translate/core';
* <core-loading [message]="loadingMessage" [hideUntil]="dataLoaded"> * <core-loading [message]="loadingMessage" [hideUntil]="dataLoaded">
* <!-- CONTENT TO HIDE UNTIL LOADED --> * <!-- CONTENT TO HIDE UNTIL LOADED -->
* </core-loading> * </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({ @Component({
selector: 'core-loading', selector: 'core-loading',

31
src/components/tabs/tab.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // 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'; import { CoreTabsComponent } from './tabs';
/** /**
@ -20,17 +20,23 @@ import { CoreTabsComponent } from './tabs';
* *
* You must provide either a title or an icon for the tab. * 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: * Example usage:
* *
* <core-tabs selectedIndex="1"> * <core-tabs selectedIndex="1">
* <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="switchTab('timeline')"> * <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-tab>
* </core-tabs> * </core-tabs>
*/ */
@Component({ @Component({
selector: 'core-tab', selector: 'core-tab',
template: '<ng-content></ng-content>' template: '<ng-container *ngIf="loaded" [ngTemplateOutlet]="template"></ng-container>'
}) })
export class CoreTabComponent implements OnInit, OnDestroy { export class CoreTabComponent implements OnInit, OnDestroy {
@Input() title?: string; // The tab title. @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. @Input() id?: string; // An ID to identify the tab.
@Output() ionSelect: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>(); @Output() ionSelect: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>();
@ContentChild(TemplateRef) template: TemplateRef<any> // Template defined by the content.
element: HTMLElement; // The core-tab element. element: HTMLElement; // The core-tab element.
loaded = false;
constructor(private tabs: CoreTabsComponent, element: ElementRef) { constructor(private tabs: CoreTabsComponent, element: ElementRef) {
this.element = element.nativeElement; this.element = element.nativeElement;
@ -61,4 +70,20 @@ export class CoreTabComponent implements OnInit, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
this.tabs.removeTab(this); 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');
}
} }

13
src/components/tabs/tabs.ts
View File

@ -26,7 +26,9 @@ import { CoreTabComponent } from './tab';
* *
* <core-tabs selectedIndex="1"> * <core-tabs selectedIndex="1">
* <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="switchTab('timeline')"> * <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-tab>
* </core-tabs> * </core-tabs>
* *
@ -171,7 +173,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
index = 0; index = 0;
} }
const currenTab = this.getSelected(), const currentTab = this.getSelected(),
newTab = this.tabs[index]; newTab = this.tabs[index];
if (!newTab.enabled || !newTab.show) { if (!newTab.enabled || !newTab.show) {
@ -179,14 +181,13 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
return; return;
} }
if (currenTab) { if (currentTab) {
// Unselect previous selected tab. // Unselect previous selected tab.
currenTab.element.classList.remove('selected'); currentTab.unselectTab();
} }
this.selected = index; this.selected = index;
newTab.element.classList.add('selected'); newTab.selectTab();
newTab.ionSelect.emit(newTab);
this.ionChange.emit(newTab); this.ionChange.emit(newTab);
} }

145
src/core/courses/pages/my-overview/my-overview.html
View File

@ -16,88 +16,93 @@
<core-tabs [selectedIndex]="firstSelectedTab" [hideUntil]="tabsReady"> <core-tabs [selectedIndex]="firstSelectedTab" [hideUntil]="tabsReady">
<!-- Site home tab. --> <!-- Site home tab. -->
<core-tab [show]="siteHomeEnabled" [title]="'core.sitehome.sitehome' | translate" (ionSelect)="tabChanged('sitehome')"> <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> </core-tab>
<!-- Timeline tab. --> <!-- Timeline tab. -->
<core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="tabChanged('timeline')"> <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="tabChanged('timeline')">
<ion-content> <ng-template>
<ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)"> <ion-content>
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> <ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
</ion-refresher> <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<div no-padding [hidden]="!(timeline.loaded || timelineCourses.loaded)"> <div no-padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
<ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()"> <ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()">
<ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option> <ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
<ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option> <ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
</ion-select> </ion-select>
</div> </div>
<core-loading [hideUntil]="timeline.loaded" [hidden]="timeline.sort != 'sortbydates'" class="core-loading-center"> <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-courses-overview-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()"></core-courses-overview-events>
</core-loading> </core-loading>
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="timeline.sort != 'sortbycourses'" class="core-loading-center"> <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="timeline.sort != 'sortbycourses'" class="core-loading-center">
<ion-grid no-padding> <ion-grid no-padding>
<ion-row no-padding> <ion-row no-padding>
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6> <ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
<core-courses-course-progress [course]="course"> <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-overview-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)"></core-courses-overview-events>
</core-courses-course-progress> </core-courses-course-progress>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </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-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesoverview' | translate"></core-empty-box>
</core-loading> </core-loading>
</ion-content> </ion-content>
</ng-template>
</core-tab> </core-tab>
<!-- Courses tab. --> <!-- Courses tab. -->
<core-tab [title]="'core.courses.courses' | translate" (ionSelect)="tabChanged('courses')"> <core-tab [title]="'core.courses.courses' | translate" (ionSelect)="tabChanged('courses')">
<ion-content> <ng-template>
<ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)"> <ion-content>
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> <ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
</ion-refresher> <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="courses.loaded" class="core-loading-center"> <core-loading [hideUntil]="courses.loaded" class="core-loading-center">
<!-- "Time" selector. --> <!-- "Time" selector. -->
<div no-padding class="clearfix" [hidden]="showFilter"> <div no-padding class="clearfix" [hidden]="showFilter">
<ion-select [title]="'core.show' | translate" [(ngModel)]="courses.selected" float-start (ngModelChange)="selectedChanged()"> <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="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
<ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option> <ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
<ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option> <ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
</ion-select> </ion-select>
<!-- Download all courses. --> <!-- Download all courses. -->
<div *ngIf="courses[courses.selected] && courses[courses.selected].length > 1" class="core-button-spinner" float-end> <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()"> <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> <ion-icon [name]="prefetchCoursesData[courses.selected].icon"></ion-icon>
</button> </button>
<ion-spinner *ngIf="!prefetchCoursesData[courses.selected].icon || prefetchCoursesData[courses.selected].icon == 'spinner'"></ion-spinner> <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> <span float-end *ngIf="prefetchCoursesData[courses.selected].badge">{{prefetchCoursesData[courses.selected].badge}}</span>
</div>
</div> </div>
</div> <!-- Filter courses. -->
<!-- Filter courses. --> <div no-padding padding-bottom [hidden]="!showFilter">
<div no-padding padding-bottom [hidden]="!showFilter"> <ion-item>
<ion-item> <ion-label><ion-icon name="funnel" class="placeholder-icon"></ion-icon></ion-label>
<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-input type="text" name="filter" clearInput [(ngModel)]="courses.filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input> </ion-item>
</ion-item> </div>
</div> <!-- List of courses. -->
<!-- List of courses. --> <div>
<div> <ion-grid no-padding>
<ion-grid no-padding> <ion-row 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>
<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>
<core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress> </ion-col>
</ion-col> </ion-row>
</ion-row> </ion-grid>
</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 == '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 == '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> <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> </div>
</core-loading> </core-loading>
</ion-content> </ion-content>
</ng-template>
</core-tab> </core-tab>
</core-tabs> </core-tabs>
</ion-content> </ion-content>