Basic dialog classes implemented.
This commit is contained in:
parent
bd83449e79
commit
de3c73a508
|
@ -0,0 +1,66 @@
|
||||||
|
export default class Dialog
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
this.htmlElement = document.createElement('div');
|
||||||
|
this.htmlElement.classList.add('dialog');
|
||||||
|
this.boxElement = document.createElement('div');
|
||||||
|
this.boxElement.classList.add('dialog-box');
|
||||||
|
this.htmlElement.appendChild(this.boxElement);
|
||||||
|
this.messageElement = document.createElement('div');
|
||||||
|
this.messageElement.classList.add('dialog-message');
|
||||||
|
this.boxElement.appendChild(this.messageElement);
|
||||||
|
this.inputAreaElement = document.createElement('div');
|
||||||
|
this.inputAreaElement.classList.add('dialog-input-area');
|
||||||
|
this.boxElement.appendChild(this.inputAreaElement);
|
||||||
|
this.buttonAreaElement = document.createElement('div');
|
||||||
|
this.buttonAreaElement.classList.add('dialog-button-area');
|
||||||
|
this.boxElement.appendChild(this.buttonAreaElement);
|
||||||
|
|
||||||
|
document.body.appendChild(this.htmlElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
createButton(text)
|
||||||
|
{
|
||||||
|
let button = document.createElement('span');
|
||||||
|
button.classList.add('dialog-button');
|
||||||
|
button.innerText = text;
|
||||||
|
this.buttonAreaElement.appendChild(button);
|
||||||
|
|
||||||
|
button.addEventListener(
|
||||||
|
'click',
|
||||||
|
() => {
|
||||||
|
this.htmlElement.remove();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
|
||||||
|
createInputNumber(label, value = 0, min = 0, max = 999999)
|
||||||
|
{
|
||||||
|
let htmlElement = document.createElement('div');
|
||||||
|
htmlElement.classList.add('dialog-input-area');
|
||||||
|
|
||||||
|
let htmlElementLabel = document.createElement('div');
|
||||||
|
htmlElementLabel.classList.add('dialog-label');
|
||||||
|
htmlElementLabel.innerText = label;
|
||||||
|
|
||||||
|
let htmlElementInput = document.createElement('input');
|
||||||
|
htmlElementInput.classList.add('dialog-input');
|
||||||
|
htmlElementInput.type = 'number';
|
||||||
|
htmlElementInput.value = value;
|
||||||
|
|
||||||
|
htmlElement.appendChild(htmlElementLabel);
|
||||||
|
htmlElement.appendChild(htmlElementInput);
|
||||||
|
|
||||||
|
this.inputAreaElement.appendChild(htmlElement);
|
||||||
|
|
||||||
|
return htmlElementInput;
|
||||||
|
}
|
||||||
|
|
||||||
|
setMessage(message)
|
||||||
|
{
|
||||||
|
this.messageElement.innerText = message;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
import Dialog from "./Dialog.js";
|
||||||
|
|
||||||
|
export default class DialogNotification extends Dialog
|
||||||
|
{
|
||||||
|
constructor(message, callback = function () {})
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
this.buttonOk = this.createButton('OK');
|
||||||
|
this.buttonOk.addEventListener(
|
||||||
|
'click',
|
||||||
|
() => {
|
||||||
|
callback();
|
||||||
|
this.htmlElement.remove();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
this.setMessage(message)
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue