2021-05-31 09:33:49 +00:00
|
|
|
import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
|
|
|
|
import { CustomMarkupService } from './custom-markup.service'
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'my-custom-markup-container',
|
2021-06-29 13:17:01 +00:00
|
|
|
templateUrl: './custom-markup-container.component.html'
|
2021-05-31 09:33:49 +00:00
|
|
|
})
|
|
|
|
export class CustomMarkupContainerComponent implements OnChanges {
|
2023-01-19 13:52:27 +00:00
|
|
|
@ViewChild('contentWrapper', { static: true }) contentWrapper: ElementRef<HTMLInputElement>
|
2021-05-31 09:33:49 +00:00
|
|
|
|
2023-01-19 13:52:27 +00:00
|
|
|
@Input() content: string | HTMLDivElement
|
2021-05-31 09:33:49 +00:00
|
|
|
|
2021-06-29 14:16:12 +00:00
|
|
|
displayed = false
|
|
|
|
|
2021-05-31 09:33:49 +00:00
|
|
|
constructor (
|
|
|
|
private customMarkupService: CustomMarkupService
|
|
|
|
) { }
|
|
|
|
|
|
|
|
async ngOnChanges () {
|
2023-01-19 13:52:27 +00:00
|
|
|
await this.rebuild()
|
2021-05-31 09:33:49 +00:00
|
|
|
}
|
|
|
|
|
2023-01-19 13:52:27 +00:00
|
|
|
private async rebuild () {
|
|
|
|
if (this.content instanceof HTMLDivElement) {
|
|
|
|
return this.loadElement(this.content)
|
|
|
|
}
|
2021-06-29 14:16:12 +00:00
|
|
|
|
|
|
|
const { rootElement, componentsLoaded } = await this.customMarkupService.buildElement(this.content)
|
|
|
|
await componentsLoaded
|
|
|
|
|
2023-01-19 13:52:27 +00:00
|
|
|
return this.loadElement(rootElement)
|
|
|
|
}
|
|
|
|
|
|
|
|
private loadElement (el: HTMLDivElement) {
|
|
|
|
this.contentWrapper.nativeElement.appendChild(el)
|
|
|
|
|
2021-06-29 14:16:12 +00:00
|
|
|
this.displayed = true
|
|
|
|
}
|
2021-05-31 09:33:49 +00:00
|
|
|
}
|