@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
85 lines • 11.8 kB
JavaScript
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable, createComponent, } from '@angular/core';
import { DokuBreakpoint } from '../breakpoint';
import { DokuSpinner } from '../spinner';
import * as i0 from "@angular/core";
import * as i1 from "../backdrop";
export class DokuPageLoadingService {
constructor(document, backdropService, environmentInjector, appRef, ngZone) {
this.document = document;
this.backdropService = backdropService;
this.environmentInjector = environmentInjector;
this.appRef = appRef;
this.ngZone = ngZone;
this.mobileScreen = window.matchMedia(DokuBreakpoint.mobile);
this.currentSpinnerSize = this.mobileScreen.matches ? 'small' : 'medium';
}
get isOpen() {
return !!this.pageLoadingElement;
}
ngOnDestroy() {
this.hide();
}
show() {
if (this.isOpen)
return;
this.backdropRef = this.backdropService.open();
this.appendPageLoadingElementToBody();
}
hide() {
if (!this.isOpen)
return;
this.backdropRef?.close();
this.removePageLoadingElement();
}
createPageLoadingElement() {
const el = this.document.createElement('div');
el.classList.add('d-page-loading');
this.spinnerComponentRef = createComponent(DokuSpinner, {
environmentInjector: this.environmentInjector,
});
this.spinnerComponentRef.setInput('size', this.currentSpinnerSize);
this.appRef.attachView(this.spinnerComponentRef.hostView);
// Listener to change spinner size based on the breakpoint.
this.resizeListener = () => {
const newSpinnerSize = this.mobileScreen.matches ? 'small' : 'medium';
if (this.currentSpinnerSize === newSpinnerSize)
return;
this.spinnerComponentRef?.setInput('size', newSpinnerSize);
this.currentSpinnerSize = newSpinnerSize;
};
this.ngZone.runOutsideAngular(() => {
if (!this.resizeListener)
return;
window.addEventListener('resize', this.resizeListener);
});
el.appendChild(this.spinnerComponentRef.location.nativeElement);
return el;
}
appendPageLoadingElementToBody() {
this.pageLoadingElement = this.createPageLoadingElement();
this.document.body.appendChild(this.pageLoadingElement);
}
removePageLoadingElement() {
if (!this.pageLoadingElement)
return;
this.document.body.removeChild(this.pageLoadingElement);
this.pageLoadingElement = undefined;
this.spinnerComponentRef?.destroy();
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
}
}
}
DokuPageLoadingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageLoadingService, deps: [{ token: DOCUMENT }, { token: i1.DokuBackdropService }, { token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
DokuPageLoadingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageLoadingService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageLoadingService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i1.DokuBackdropService }, { type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: i0.NgZone }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1sb2FkaW5nLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2t1LWZyYWdtZW50L3NyYy9saWIvcGFnZS1sb2FkaW5nL3BhZ2UtbG9hZGluZy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMzQyxPQUFPLEVBSUwsTUFBTSxFQUNOLFVBQVUsRUFHVixlQUFlLEdBQ2hCLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLFlBQVksQ0FBQzs7O0FBS3pDLE1BQU0sT0FBTyxzQkFBc0I7SUFRakMsWUFDNEIsUUFBa0IsRUFDcEMsZUFBb0MsRUFDcEMsbUJBQXdDLEVBQ3hDLE1BQXNCLEVBQ3RCLE1BQWM7UUFKSSxhQUFRLEdBQVIsUUFBUSxDQUFVO1FBQ3BDLG9CQUFlLEdBQWYsZUFBZSxDQUFxQjtRQUNwQyx3QkFBbUIsR0FBbkIsbUJBQW1CLENBQXFCO1FBQ3hDLFdBQU0sR0FBTixNQUFNLENBQWdCO1FBQ3RCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFaaEIsaUJBQVksR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUl4RCx1QkFBa0IsR0FBeUIsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO0lBUy9GLENBQUM7SUFFSixJQUFZLE1BQU07UUFDaEIsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDO0lBQ25DLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2QsQ0FBQztJQUVELElBQUk7UUFDRixJQUFJ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QkFDbkI7OzBCQVVJLE1BQU07MkJBQUMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERPQ1VNRU5UIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIEFwcGxpY2F0aW9uUmVmLFxuICBDb21wb25lbnRSZWYsXG4gIEVudmlyb25tZW50SW5qZWN0b3IsXG4gIEluamVjdCxcbiAgSW5qZWN0YWJsZSxcbiAgTmdab25lLFxuICBPbkRlc3Ryb3ksXG4gIGNyZWF0ZUNvbXBvbmVudCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb2t1QmFja2Ryb3BTZXJ2aWNlIH0gZnJvbSAnLi4vYmFja2Ryb3AnO1xuaW1wb3J0IHsgRG9rdUJhY2tkcm9wUmVmIH0gZnJvbSAnLi4vYmFja2Ryb3AvYmFja2Ryb3AtcmVmJztcbmltcG9ydCB7IERva3VCcmVha3BvaW50IH0gZnJvbSAnLi4vYnJlYWtwb2ludCc7XG5pbXBvcnQgeyBEb2t1U3Bpbm5lciB9IGZyb20gJy4uL3NwaW5uZXInO1xuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdyb290Jyxcbn0pXG5leHBvcnQgY2xhc3MgRG9rdVBhZ2VMb2FkaW5nU2VydmljZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgbW9iaWxlU2NyZWVuID0gd2luZG93Lm1hdGNoTWVkaWEoRG9rdUJyZWFrcG9pbnQubW9iaWxlKTtcbiAgcHJpdmF0ZSBwYWdlTG9hZGluZ0VsZW1lbnQ/OiBIVE1MRGl2RWxlbWVudDtcbiAgcHJpdmF0ZSBzcGlubmVyQ29tcG9uZW50UmVmPzogQ29tcG9uZW50UmVmPERva3VTcGlubmVyPjtcbiAgcHJpdmF0ZSByZXNpemVMaXN0ZW5lcj86IEV2ZW50TGlzdGVuZXJPckV2ZW50TGlzdGVuZXJPYmplY3Q7XG4gIHByaXZhdGUgY3VycmVudFNwaW5uZXJTaXplPzogRG9rdVNwaW5uZXJbJ3NpemUnXSA9IHRoaXMubW9iaWxlU2NyZWVuLm1hdGNoZXMgPyAnc21hbGwnIDogJ21lZGl1bSc7XG4gIHByaXZhdGUgYmFja2Ryb3BSZWY/OiBEb2t1QmFja2Ryb3BSZWY7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgQEluamVjdChET0NVTUVOVCkgcHJpdmF0ZSBkb2N1bWVudDogRG9jdW1lbnQsXG4gICAgcHJpdmF0ZSBiYWNrZHJvcFNlcnZpY2U6IERva3VCYWNrZHJvcFNlcnZpY2UsXG4gICAgcHJpdmF0ZSBlbnZpcm9ubWVudEluamVjdG9yOiBFbnZpcm9ubWVudEluamVjdG9yLFxuICAgIHByaXZhdGUgYXBwUmVmOiBBcHBsaWNhdGlvblJlZixcbiAgICBwcml2YXRlIG5nWm9uZTogTmdab25lXG4gICkge31cblxuICBwcml2YXRlIGdldCBpc09wZW4oKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICEhdGhpcy5wYWdlTG9hZGluZ0VsZW1lbnQ7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmhpZGUoKTtcbiAgfVxuXG4gIHNob3coKSB7XG4gICAgaWYgKHRoaXMuaXNPcGVuKSByZXR1cm47XG4gICAgdGhpcy5iYWNrZHJvcFJlZiA9IHRoaXMuYmFja2Ryb3BTZXJ2aWNlLm9wZW4oKTtcbiAgICB0aGlzLmFwcGVuZFBhZ2VMb2FkaW5nRWxlbWVudFRvQm9keSgpO1xuICB9XG5cbiAgaGlkZSgpIHtcbiAgICBpZiAoIXRoaXMuaXNPcGVuKSByZXR1cm47XG4gICAgdGhpcy5iYWNrZHJvcFJlZj8uY2xvc2UoKTtcbiAgICB0aGlzLnJlbW92ZVBhZ2VMb2FkaW5nRWxlbWVudCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBjcmVhdGVQYWdlTG9hZGluZ0VsZW1lbnQoKTogSFRNTERpdkVsZW1lbnQge1xuICAgIGNvbnN0IGVsID0gdGhpcy5kb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcbiAgICBlbC5jbGFzc0xpc3QuYWRkKCdkLXBhZ2UtbG9hZGluZycpO1xuXG4gICAgdGhpcy5zcGlubmVyQ29tcG9uZW50UmVmID0gY3JlYXRlQ29tcG9uZW50KERva3VTcGlubmVyLCB7XG4gICAgICBlbnZpcm9ubWVudEluamVjdG9yOiB0aGlzLmVudmlyb25tZW50SW5qZWN0b3IsXG4gICAgfSk7XG4gICAgdGhpcy5zcGlubmVyQ29tcG9uZW50UmVmLnNldElucHV0KCdzaXplJywgdGhpcy5jdXJyZW50U3Bpbm5lclNpemUpO1xuXG4gICAgdGhpcy5hcHBSZWYuYXR0YWNoVmlldyh0aGlzLnNwaW5uZXJDb21wb25lbnRSZWYuaG9zdFZpZXcpO1xuXG4gICAgLy8gTGlzdGVuZXIgdG8gY2hhbmdlIHNwaW5uZXIgc2l6ZSBiYXNlZCBvbiB0aGUgYnJlYWtwb2ludC5cbiAgICB0aGlzLnJlc2l6ZUxpc3RlbmVyID0gKCkgPT4ge1xuICAgICAgY29uc3QgbmV3U3Bpbm5lclNpemU6IERva3VTcGlubmVyWydzaXplJ10gPSB0aGlzLm1vYmlsZVNjcmVlbi5tYXRjaGVzID8gJ3NtYWxsJyA6ICdtZWRpdW0nO1xuICAgICAgaWYgKHRoaXMuY3VycmVudFNwaW5uZXJTaXplID09PSBuZXdTcGlubmVyU2l6ZSkgcmV0dXJuO1xuICAgICAgdGhpcy5zcGlubmVyQ29tcG9uZW50UmVmPy5zZXRJbnB1dCgnc2l6ZScsIG5ld1NwaW5uZXJTaXplKTtcbiAgICAgIHRoaXMuY3VycmVudFNwaW5uZXJTaXplID0gbmV3U3Bpbm5lclNpemU7XG4gICAgfTtcblxuICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIGlmICghdGhpcy5yZXNpemVMaXN0ZW5lcikgcmV0dXJuO1xuICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHRoaXMucmVzaXplTGlzdGVuZXIpO1xuICAgIH0pO1xuXG4gICAgZWwuYXBwZW5kQ2hpbGQodGhpcy5zcGlubmVyQ29tcG9uZW50UmVmLmxvY2F0aW9uLm5hdGl2ZUVsZW1lbnQpO1xuICAgIHJldHVybiBlbDtcbiAgfVxuXG4gIHByaXZhdGUgYXBwZW5kUGFnZUxvYWRpbmdFbGVtZW50VG9Cb2R5KCkge1xuICAgIHRoaXMucGFnZUxvYWRpbmdFbGVtZW50ID0gdGhpcy5jcmVhdGVQYWdlTG9hZGluZ0VsZW1lbnQoKTtcbiAgICB0aGlzLmRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQodGhpcy5wYWdlTG9hZGluZ0VsZW1lbnQpO1xuICB9XG5cbiAgcHJpdmF0ZSByZW1vdmVQYWdlTG9hZGluZ0VsZW1lbnQoKSB7XG4gICAgaWYgKCF0aGlzLnBhZ2VMb2FkaW5nRWxlbWVudCkgcmV0dXJuO1xuICAgIHRoaXMuZG9jdW1lbnQuYm9keS5yZW1vdmVDaGlsZCh0aGlzLnBhZ2VMb2FkaW5nRWxlbWVudCk7XG4gICAgdGhpcy5wYWdlTG9hZGluZ0VsZW1lbnQgPSB1bmRlZmluZWQ7XG4gICAgdGhpcy5zcGlubmVyQ29tcG9uZW50UmVmPy5kZXN0cm95KCk7XG5cbiAgICBpZiAodGhpcy5yZXNpemVMaXN0ZW5lcikge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHRoaXMucmVzaXplTGlzdGVuZXIpO1xuICAgIH1cbiAgfVxufVxuIl19