forked from EVOgeek/Vmeda.Online
121 lines
4.9 KiB
TypeScript
121 lines
4.9 KiB
TypeScript
// (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, OnInit, OnChanges, SimpleChange, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
|
|
|
|
import { CoreEvents, CoreEventsProvider } from '@services/events';
|
|
import { CoreUtils } from '@services/utils/utils';
|
|
import { Translate } from '@singletons/core.singletons';
|
|
|
|
/**
|
|
* Component to show a loading spinner and message while data is being loaded.
|
|
*
|
|
* It will show a spinner with a message and hide all the content until 'hideUntil' variable is set to a truthy value (!!hideUntil).
|
|
* If 'message' isn't set, default message "Loading" is shown.
|
|
* 'message' attribute accepts hardcoded strings, variables, filters, etc. E.g. [message]="'core.loading' | translate".
|
|
*
|
|
* Usage:
|
|
* <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',
|
|
templateUrl: 'core-loading.html',
|
|
styleUrls: ['loading.scss'],
|
|
// @todo animations: [coreShowHideAnimation],
|
|
})
|
|
export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
|
|
|
|
@Input() hideUntil: unknown; // Determine when should the contents be shown.
|
|
@Input() message?: string; // Message to show while loading.
|
|
@ViewChild('content') content: ElementRef;
|
|
|
|
protected uniqueId: string;
|
|
protected element: HTMLElement; // Current element.
|
|
|
|
constructor(element: ElementRef) {
|
|
this.element = element.nativeElement;
|
|
}
|
|
|
|
/**
|
|
* Component being initialized.
|
|
*/
|
|
ngOnInit(): void {
|
|
// Calculate the unique ID.
|
|
this.uniqueId = 'core-loading-content-' + CoreUtils.instance.getUniqueId('CoreLoadingComponent');
|
|
|
|
if (!this.message) {
|
|
// Default loading message.
|
|
this.message = Translate.instance.instant('core.loading');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* View has been initialized.
|
|
*/
|
|
ngAfterViewInit(): void {
|
|
// Add class if loaded on init.
|
|
if (this.hideUntil) {
|
|
this.element.classList.add('core-loading-loaded');
|
|
this.content?.nativeElement.classList.add('core-loading-content');
|
|
} else {
|
|
this.content?.nativeElement.classList.remove('core-loading-content');
|
|
this.content?.nativeElement.classList.add('core-loading-content-loading');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Component input changed.
|
|
*
|
|
* @param changes Changes.
|
|
*/
|
|
ngOnChanges(changes: { [name: string]: SimpleChange }): void {
|
|
if (changes.hideUntil) {
|
|
if (this.hideUntil) {
|
|
setTimeout(() => {
|
|
// Content is loaded so, center the spinner on the content itself.
|
|
this.element.classList.add('core-loading-loaded');
|
|
setTimeout(() => {
|
|
// Change CSS to force calculate height.
|
|
this.content?.nativeElement.classList.add('core-loading-content');
|
|
this.content?.nativeElement.classList.remove('core-loading-content-loading');
|
|
}, 500);
|
|
});
|
|
} else {
|
|
this.element.classList.remove('core-loading-loaded');
|
|
this.content?.nativeElement.classList.remove('core-loading-content');
|
|
this.content?.nativeElement.classList.add('core-loading-content-loading');
|
|
}
|
|
|
|
// Trigger the event after a timeout since the elements inside ngIf haven't been added to DOM yet.
|
|
setTimeout(() => {
|
|
CoreEvents.instance.trigger(CoreEventsProvider.CORE_LOADING_CHANGED, {
|
|
loaded: !!this.hideUntil,
|
|
uniqueId: this.uniqueId,
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
}
|