diff --git a/tilorswift/js/dialog/Dialog.js b/tilorswift/js/dialog/Dialog.js new file mode 100644 index 0000000..41b116c --- /dev/null +++ b/tilorswift/js/dialog/Dialog.js @@ -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; + } +} \ No newline at end of file diff --git a/tilorswift/js/dialog/DialogNotification.js b/tilorswift/js/dialog/DialogNotification.js new file mode 100644 index 0000000..1d9dbf3 --- /dev/null +++ b/tilorswift/js/dialog/DialogNotification.js @@ -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) + } +} \ No newline at end of file