@rxdi/ui-kit
Version:
UI Components for building graphql-server website
159 lines • 5.96 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalService = void 0;
const core_1 = require("@rxdi/core");
const lit_html_1 = require("@rxdi/lit-html");
const rxjs_1 = require("rxjs");
const interface_1 = require("./interface");
const operators_1 = require("rxjs/operators");
const main_1 = require("../modals/main/main");
let ModalService = class ModalService {
constructor() {
this.modalTemplate = new rxjs_1.ReplaySubject();
this.closeSubject$ = new rxjs_1.Subject();
this.$onScroll = new rxjs_1.Subject();
this.originalOptions = Object.assign({}, this.options);
}
setScrollWidth(value) {
this.$onScroll.next(value);
}
setContainerRef(element) {
this.containerRef = element;
}
getContainerRef() {
return this.containerRef;
}
scrollTo(value) {
this.containerRef.scrollTo(0, value);
}
onScroll() {
return this.$onScroll.asObservable();
}
open(template, dialogOptions) {
this.overflow('hidden');
return new rxjs_1.Observable((observer) => {
this.createModalPortal();
if (dialogOptions) {
this.setSettings(dialogOptions);
}
this.closeSubject$.pipe((0, operators_1.take)(1)).subscribe((stream) => {
if (dialogOptions) {
this.setSettings(this.originalOptions);
}
this.overflow('visible');
observer.next(stream);
observer.complete();
});
this.modalTemplate.next(template);
});
}
openCustomModal(data, settings = { backdropClose: true }) {
this.overflow('hidden');
return this.openComponent(main_1.MainModalComponent, data, {
backdropClose: settings.backdropClose,
style: settings.style ||
(0, lit_html_1.css) `
.wrapper {
position: fixed;
top: 0;
left: 0;
align-items: center;
justify-content: center;
pointer-events: none;
width: 100%;
height: 100%;
z-index: 200;
}
.content {
width: 100%;
height: 100%;
z-index: 201;
position: fixed;
pointer-events: all;
}
`,
}).pipe((0, operators_1.tap)(() => this.overflow('visible')));
}
overflow(type) {
if (this.options.hideScroll) {
document.body.style.overflow = type;
}
}
openComponent(component, options = {}, dialogOptions) {
if (dialogOptions) {
this.setSettings(dialogOptions);
}
this.overflow('hidden');
return new rxjs_1.Observable((observer) => {
const tag = component.is;
if (!tag) {
throw new Error('Provide static method `is` inside component or if you use regular html`` template use `open` method instead of `openComponent`');
}
this.createModalPortal();
core_1.Container.remove(interface_1.MODAL_DIALOG_DATA);
core_1.Container.set(interface_1.MODAL_DIALOG_DATA, options);
this.modalTemplate.next((0, lit_html_1.html) ` ${(0, lit_html_1.unsafeHTML)(`<${tag()}></${tag()}>`)} `);
this.closeSubject$.pipe((0, operators_1.take)(1)).subscribe((stream) => {
if (dialogOptions) {
this.setSettings(this.originalOptions);
}
observer.next(stream);
this.overflow('visible');
observer.complete();
});
});
}
setSettings(options) {
core_1.Container.remove(interface_1.MODAL_DIALOG_OPTIONS);
core_1.Container.set(interface_1.MODAL_DIALOG_OPTIONS, options);
}
openSequence(components) {
const identity = (v) => v;
return (0, rxjs_1.of)(components).pipe((0, operators_1.map)((val) => val.map((v) => this.openComponent(v.component, v.data, v.options))), (0, operators_1.concatMap)(identity), (0, operators_1.concatMap)(identity));
}
getTemplate() {
return this.modalTemplate.asObservable();
}
getRef() {
return this.modalRef;
}
close(result) {
this.removeModalPortal();
this.closeSubject$.next(result);
}
createModalContainer() {
this.modalRef = document.createElement('modal-container');
}
appendReference() {
document.body.appendChild(this.modalRef);
}
createModalPortal() {
if (this.modalRef) {
this.removeModalPortal();
}
this.createModalContainer();
this.appendReference();
}
removeModalPortal() {
this.modalRef.remove();
}
};
__decorate([
(0, core_1.Injector)(interface_1.MODAL_DIALOG_OPTIONS),
__metadata("design:type", Object)
], ModalService.prototype, "options", void 0);
ModalService = __decorate([
(0, core_1.Injectable)(),
__metadata("design:paramtypes", [])
], ModalService);
exports.ModalService = ModalService;
//# sourceMappingURL=modal.service.js.map