@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
70 lines • 12.5 kB
JavaScript
import { Injector, TemplateRef, createComponent, } from '@angular/core';
import { DokuActiveModal } from './modal-ref';
export class ViewElement {
static createElement(content, props) {
let contentTemplateRef;
let contentComponentRef;
const elementInjector = Injector.create({
providers: [{ provide: DokuActiveModal, useValue: props.activeModal }],
parent: props.injector,
});
if (content instanceof TemplateRef) {
contentTemplateRef = content.createEmbeddedView({ $implicit: props.activeModal }, elementInjector);
props.applicationRef.attachView(contentTemplateRef);
}
else {
contentComponentRef = createComponent(content, {
environmentInjector: props.environmentInjector,
elementInjector,
});
contentComponentRef.location.nativeElement.classList.add('d-modal-content-host');
props.applicationRef.attachView(contentComponentRef.hostView);
}
const modalContentElement = this.createModalContentElement({ document: props.document });
const modalElement = this.createModalElement({ document: props.document });
const portalElement = this.createPortalElement({ document: props.document });
return {
element: { portal: portalElement, modal: modalElement, modalContent: modalContentElement },
content: { componentRef: contentComponentRef, templateRef: contentTemplateRef },
};
}
static createModalElement(props) {
const element = props.document.createElement('div');
element.className = 'd-modal';
return element;
}
static createModalContentElement(props) {
const element = props.document.createElement('div');
element.className = 'd-modal-content';
return element;
}
static createPortalElement(props) {
const element = props.document.createElement('div');
element.className = 'd-modal-portal';
return element;
}
static appendToBody(view, props) {
const backdropRef = props.backdropService.open();
// Append content (from component or template) to modal content
if (view.content.componentRef) {
view.element.modalContent.appendChild(view.content.componentRef.location.nativeElement);
}
if (view.content.templateRef) {
view.element.modalContent.append(...view.content.templateRef.rootNodes);
}
// Append modal content to modal
view.element.modal.appendChild(view.element.modalContent);
// Append modal to portal
view.element.portal.appendChild(view.element.modal);
// Append portal to document body
props.document.body.appendChild(view.element.portal);
return { backdropRef };
}
static removeFromBody(view, props) {
view.content.componentRef?.destroy();
view.content.templateRef?.destroy();
props.document.body.removeChild(view.element.portal);
props.backdropRef?.close();
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlldy1lbGVtZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZG9rdS1mcmFnbWVudC9zcmMvbGliL21vZGFsL3ZpZXctZWxlbWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBS0wsUUFBUSxFQUNSLFdBQVcsRUFDWCxlQUFlLEdBQ2hCLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFHOUMsTUFBTSxPQUFPLFdBQVc7SUFDdEIsTUFBTSxDQUFDLGFBQWEsQ0FDbEIsT0FBMEMsRUFDMUMsS0FNQztRQUVELElBQUksa0JBQWtELENBQUM7UUFDdkQsSUFBSSxtQkFBZ0QsQ0FBQztRQUVyRCxNQUFNLGVBQWUsR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDO1lBQ3RDLFNBQVMsRUFBRSxDQUFDLEVBQUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxRQUFRLEVBQUUsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ3RFLE1BQU0sRUFBRSxLQUFLLENBQUMsUUFBUTtTQUN2QixDQUFDLENBQUM7UUFFSCxJQUFJLE9BQU8sWUFBWSxXQUFXLEVBQUU7WUFDbEMsa0JBQWtCLEdBQUcsT0FBTyxDQUFDLGtCQUFrQixDQUMxQyxFQUFFLFNBQVMsRUFBRSxLQUFLLENBQUMsV0FBVyxFQUFFLEVBQ25DLGVBQWUsQ0FDaEIsQ0FBQztZQUNGLEtBQUssQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLGtCQUFrQixDQUFDLENBQUM7U0FDckQ7YUFBTTtZQUNMLG1CQUFtQixHQUFHLGVBQWUsQ0FBQyxPQUFPLEVBQUU7Z0JBQzdDLG1CQUFtQixFQUFFLEtBQUssQ0FBQyxtQkFBbUI7Z0JBQzlDLGVBQWU7YUFDaEIsQ0FBQyxDQUFDO1lBQ0YsbUJBQW1CLENBQUMsUUFBUSxDQUFDLGFBQTZCLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FDdkUsc0JBQXNC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O1FBRUQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFDckMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFFcEMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDckQsS0FBSyxDQUFDLFdBQVcsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUM3QixDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBcHBsaWNhdGlvblJlZixcbiAgQ29tcG9uZW50UmVmLFxuICBFbWJlZGRlZFZpZXdSZWYsXG4gIEVudmlyb25tZW50SW5qZWN0b3IsXG4gIEluamVjdG9yLFxuICBUZW1wbGF0ZVJlZixcbiAgY3JlYXRlQ29tcG9uZW50LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERva3VCYWNrZHJvcFJlZiB9IGZyb20gJy4uL2JhY2tkcm9wL2JhY2tkcm9wLXJlZic7XG5pbXBvcnQgeyBEb2t1QmFja2Ryb3BTZXJ2aWNlIH0gZnJvbSAnLi4vYmFja2Ryb3AvYmFja2Ryb3Auc2VydmljZSc7XG5pbXBvcnQgeyBEb2t1QWN0aXZlTW9kYWwgfSBmcm9tICcuL21vZGFsLXJlZic7XG5pbXBvcnQgeyBDb21wb25lbnRUeXBlIH0gZnJvbSAnLi9tb2RhbC5pbnRlcmZhY2UnO1xuXG5leHBvcnQgY2xhc3MgVmlld0VsZW1lbnQge1xuICBzdGF0aWMgY3JlYXRlRWxlbWVudDxUPihcbiAgICBjb250ZW50OiBDb21wb25lbnRUeXBlPFQ+IHwgVGVtcGxhdGVSZWY8VD4sXG4gICAgcHJvcHM6IHtcbiAgICAgIGVudmlyb25tZW50SW5qZWN0b3I6IEVudmlyb25tZW50SW5qZWN0b3I7XG4gICAgICBhcHBsaWNhdGlvblJlZjogQXBwbGljYXRpb25SZWY7XG4gICAgICBpbmplY3RvcjogSW5qZWN0b3I7XG4gICAgICBkb2N1bWVudDogRG9jdW1lbnQ7XG4gICAgICBhY3RpdmVNb2RhbDogRG9rdUFjdGl2ZU1vZGFsO1xuICAgIH1cbiAgKSB7XG4gICAgbGV0IGNvbnRlbnRUZW1wbGF0ZVJlZjogRW1iZWRkZWRWaWV3UmVmPFQ+IHwgdW5kZWZpbmVkO1xuICAgIGxldCBjb250ZW50Q29tcG9uZW50UmVmOiBDb21wb25lbnRSZWY8VD4gfCB1bmRlZmluZWQ7XG5cbiAgICBjb25zdCBlbGVtZW50SW5qZWN0b3IgPSBJbmplY3Rvci5jcmVhdGUoe1xuICAgICAgcHJvdmlkZXJzOiBbeyBwcm92aWRlOiBEb2t1QWN0aXZlTW9kYWwsIHVzZVZhbHVlOiBwcm9wcy5hY3RpdmVNb2RhbCB9XSxcbiAgICAgIHBhcmVudDogcHJvcHMuaW5qZWN0b3IsXG4gICAgfSk7XG5cbiAgICBpZiAoY29udGVudCBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmKSB7XG4gICAgICBjb250ZW50VGVtcGxhdGVSZWYgPSBjb250ZW50LmNyZWF0ZUVtYmVkZGVkVmlldyhcbiAgICAgICAgPFQ+eyAkaW1wbGljaXQ6IHByb3BzLmFjdGl2ZU1vZGFsIH0sXG4gICAgICAgIGVsZW1lbnRJbmplY3RvclxuICAgICAgKTtcbiAgICAgIHByb3BzLmFwcGxpY2F0aW9uUmVmLmF0dGFjaFZpZXcoY29udGVudFRlbXBsYXRlUmVmKTtcbiAgICB9IGVsc2Uge1xuICAgICAgY29udGVudENvbXBvbmVudFJlZiA9IGNyZWF0ZUNvbXBvbmVudChjb250ZW50LCB7XG4gICAgICAgIGVudmlyb25tZW50SW5qZWN0b3I6IHByb3BzLmVudmlyb25tZW50SW5qZWN0b3IsXG4gICAgICAgIGVsZW1lbnRJbmplY3RvcixcbiAgICAgIH0pO1xuICAgICAgKGNvbnRlbnRDb21wb25lbnRSZWYubG9jYXRpb24ubmF0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudCkuY2xhc3NMaXN0LmFkZChcbiAgICAgICAgJ2QtbW9kYWwtY29udGVudC1ob3N0J1xuICAgICAgKTtcbiAgICAgIHByb3BzLmFwcGxpY2F0aW9uUmVmLmF0dGFjaFZpZXcoY29udGVudENvbXBvbmVudFJlZi5ob3N0Vmlldyk7XG4gICAgfVxuXG4gICAgY29uc3QgbW9kYWxDb250ZW50RWxlbWVudCA9IHRoaXMuY3JlYXRlTW9kYWxDb250ZW50RWxlbWVudCh7IGRvY3VtZW50OiBwcm9wcy5kb2N1bWVudCB9KTtcbiAgICBjb25zdCBtb2RhbEVsZW1lbnQgPSB0aGlzLmNyZWF0ZU1vZGFsRWxlbWVudCh7IGRvY3VtZW50OiBwcm9wcy5kb2N1bWVudCB9KTtcbiAgICBjb25zdCBwb3J0YWxFbGVtZW50ID0gdGhpcy5jcmVhdGVQb3J0YWxFbGVtZW50KHsgZG9jdW1lbnQ6IHByb3BzLmRvY3VtZW50IH0pO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIGVsZW1lbnQ6IHsgcG9ydGFsOiBwb3J0YWxFbGVtZW50LCBtb2RhbDogbW9kYWxFbGVtZW50LCBtb2RhbENvbnRlbnQ6IG1vZGFsQ29udGVudEVsZW1lbnQgfSxcbiAgICAgIGNvbnRlbnQ6IHsgY29tcG9uZW50UmVmOiBjb250ZW50Q29tcG9uZW50UmVmLCB0ZW1wbGF0ZVJlZjogY29udGVudFRlbXBsYXRlUmVmIH0sXG4gICAgfTtcbiAgfVxuXG4gIHByaXZhdGUgc3RhdGljIGNyZWF0ZU1vZGFsRWxlbWVudChwcm9wczogeyBkb2N1bWVudDogRG9jdW1lbnQgfSkge1xuICAgIGNvbnN0IGVsZW1lbnQ6IEhUTUxEaXZFbGVtZW50ID0gcHJvcHMuZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XG4gICAgZWxlbWVudC5jbGFzc05hbWUgPSAnZC1tb2RhbCc7XG4gICAgcmV0dXJuIGVsZW1lbnQ7XG4gIH1cblxuICBwcml2YXRlIHN0YXRpYyBjcmVhdGVNb2RhbENvbnRlbnRFbGVtZW50KHByb3BzOiB7IGRvY3VtZW50OiBEb2N1bWVudCB9KSB7XG4gICAgY29uc3QgZWxlbWVudDogSFRNTERpdkVsZW1lbnQgPSBwcm9wcy5kb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcbiAgICBlbGVtZW50LmNsYXNzTmFtZSA9ICdkLW1vZGFsLWNvbnRlbnQnO1xuICAgIHJldHVybiBlbGVtZW50O1xuICB9XG5cbiAgcHJpdmF0ZSBzdGF0aWMgY3JlYXRlUG9ydGFsRWxlbWVudChwcm9wczogeyBkb2N1bWVudDogRG9jdW1lbnQgfSkge1xuICAgIGNvbnN0IGVsZW1lbnQ6IEhUTUxEaXZFbGVtZW50ID0gcHJvcHMuZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XG4gICAgZWxlbWVudC5jbGFzc05hbWUgPSAnZC1tb2RhbC1wb3J0YWwnO1xuICAgIHJldHVybiBlbGVtZW50O1xuICB9XG5cbiAgc3RhdGljIGFwcGVuZFRvQm9keShcbiAgICB2aWV3OiBSZXR1cm5UeXBlPHR5cGVvZiB0aGlzLmNyZWF0ZUVsZW1lbnQ+LFxuICAgIHByb3BzOiB7IGJhY2tkcm9wU2VydmljZTogRG9rdUJhY2tkcm9wU2VydmljZTsgZG9jdW1lbnQ6IERvY3VtZW50IH1cbiAgKSB7XG4gICAgY29uc3QgYmFja2Ryb3BSZWYgPSBwcm9wcy5iYWNrZHJvcFNlcnZpY2Uub3BlbigpO1xuXG4gICAgLy8gQXBwZW5kIGNvbnRlbnQgKGZyb20gY29tcG9uZW50IG9yIHRlbXBsYXRlKSB0byBtb2RhbCBjb250ZW50XG4gICAgaWYgKHZpZXcuY29udGVudC5jb21wb25lbnRSZWYpIHtcbiAgICAgIHZpZXcuZWxlbWVudC5tb2RhbENvbnRlbnQuYXBwZW5kQ2hpbGQodmlldy5jb250ZW50LmNvbXBvbmVudFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50KTtcbiAgICB9XG4gICAgaWYgKHZpZXcuY29udGVudC50ZW1wbGF0ZVJlZikge1xuICAgICAgdmlldy5lbGVtZW50Lm1vZGFsQ29udGVudC5hcHBlbmQoLi4udmlldy5jb250ZW50LnRlbXBsYXRlUmVmLnJvb3ROb2Rlcyk7XG4gICAgfVxuXG4gICAgLy8gQXBwZW5kIG1vZGFsIGNvbnRlbnQgdG8gbW9kYWxcbiAgICB2aWV3LmVsZW1lbnQubW9kYWwuYXBwZW5kQ2hpbGQodmlldy5lbGVtZW50Lm1vZGFsQ29udGVudCk7XG5cbiAgICAvLyBBcHBlbmQgbW9kYWwgdG8gcG9ydGFsXG4gICAgdmlldy5lbGVtZW50LnBvcnRhbC5hcHBlbmRDaGlsZCh2aWV3LmVsZW1lbnQubW9kYWwpO1xuXG4gICAgLy8gQXBwZW5kIHBvcnRhbCB0byBkb2N1bWVudCBib2R5XG4gICAgcHJvcHMuZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh2aWV3LmVsZW1lbnQucG9ydGFsKTtcblxuICAgIHJldHVybiB7IGJhY2tkcm9wUmVmIH07XG4gIH1cblxuICBzdGF0aWMgcmVtb3ZlRnJvbUJvZHkoXG4gICAgdmlldzogUmV0dXJuVHlwZTx0eXBlb2YgdGhpcy5jcmVhdGVFbGVtZW50PixcbiAgICBwcm9wczoge1xuICAgICAgYmFja2Ryb3BTZXJ2aWNlOiBEb2t1QmFja2Ryb3BTZXJ2aWNlO1xuICAgICAgZG9jdW1lbnQ6IERvY3VtZW50O1xuICAgICAgYmFja2Ryb3BSZWY/OiBEb2t1QmFja2Ryb3BSZWY7XG4gICAgfVxuICApIHtcbiAgICB2aWV3LmNvbnRlbnQuY29tcG9uZW50UmVmPy5kZXN0cm95KCk7XG4gICAgdmlldy5jb250ZW50LnRlbXBsYXRlUmVmPy5kZXN0cm95KCk7XG5cbiAgICBwcm9wcy5kb2N1bWVudC5ib2R5LnJlbW92ZUNoaWxkKHZpZXcuZWxlbWVudC5wb3J0YWwpO1xuICAgIHByb3BzLmJhY2tkcm9wUmVmPy5jbG9zZSgpO1xuICB9XG59XG4iXX0=