2021-11-08 00:25:27 +02:00
|
|
|
class Banner {
|
|
|
|
constructor() {
|
2022-01-25 17:10:35 +02:00
|
|
|
this.element = null;
|
|
|
|
|
|
|
|
this.title = "";
|
|
|
|
this.text = "";
|
|
|
|
}
|
|
|
|
|
|
|
|
updateText(newText) {
|
|
|
|
this.text = newText;
|
|
|
|
this.element.querySelector("#banner-text").innerText = this.text;
|
2021-11-08 00:25:27 +02:00
|
|
|
}
|
|
|
|
|
2022-01-25 17:10:35 +02:00
|
|
|
updateTitle(newTitle) {
|
|
|
|
this.title = newTitle;
|
|
|
|
this.element.querySelector("#banner-title").innerText = this.title;
|
2021-11-08 00:25:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
mountOn(target) {
|
|
|
|
if (this.element)
|
|
|
|
return; // Already mounted
|
|
|
|
|
|
|
|
this.element = document.createRange().createContextualFragment(`
|
2022-08-26 15:56:42 +03:00
|
|
|
<div class="Card Card-ui-bottom Card-centered-text">
|
2022-01-25 17:10:35 +02:00
|
|
|
<h2 id="banner-title"></h2>
|
|
|
|
<p id="banner-text"></p>
|
2021-11-08 00:25:27 +02:00
|
|
|
</div>
|
|
|
|
`).children[0];
|
|
|
|
|
|
|
|
target.appendChild(this.element);
|
|
|
|
}
|
2022-01-25 17:10:35 +02:00
|
|
|
|
|
|
|
unmount() {
|
|
|
|
if (!this.element)
|
|
|
|
return; // Already unmounted
|
|
|
|
|
|
|
|
this.element.parentElement.removeChild(this.element);
|
|
|
|
this.element = null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Banner;
|