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">
* <!-- 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',

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

@ -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')">
* <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');
}
}

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

@ -26,7 +26,9 @@ import { CoreTabComponent } from './tab';
*
* <core-tabs selectedIndex="1">
* <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="switchTab('timeline')">
* <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);
}

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

@ -16,11 +16,14 @@
<core-tabs [selectedIndex]="firstSelectedTab" [hideUntil]="tabsReady">
<!-- Site home tab. -->
<core-tab [show]="siteHomeEnabled" [title]="'core.sitehome.sitehome' | translate" (ionSelect)="tabChanged('sitehome')">
<ng-template>
<core-sitehome-index></core-sitehome-index>
</ng-template>
</core-tab>
<!-- Timeline tab. -->
<core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="tabChanged('timeline')">
<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>
@ -48,10 +51,12 @@
<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')">
<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>
@ -97,7 +102,7 @@
</div>
</core-loading>
</ion-content>
</ng-template>
</core-tab>
</core-tabs>
</ion-content>