From 330c49947c82d3d66f65f03abcad75d57d3dc121 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sat, 29 Sep 2018 21:52:43 +0200 Subject: Started work on Modals Started work on the modals, that will be used as dialog boxes to create a new server, or to log into an existing one with the required password. Currently just calls the creation method at start, and with not much content, which will be added later. --- WebInterface/NodeJSServer/src/modules/ui/modal.js | 39 +++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 WebInterface/NodeJSServer/src/modules/ui/modal.js (limited to 'WebInterface/NodeJSServer/src/modules/ui/modal.js') diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js new file mode 100644 index 0000000..e1aa8a2 --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js @@ -0,0 +1,39 @@ +export default class Modal { + constructor(titleString) { + let modalBackground = document.createElement('div'); + let modal = document.createElement('div'); + let title = document.createElement('h1'); + let body = document.createElement('div'); + + modalBackground.className = 'modal-container'; + modal.className = 'modal'; + title.className = 'modal-title'; + body.className = 'modal-body' + + title.textContent = titleString; + + modal.appendChild(title); + modalBackground.appendChild(modal); + document.body.appendChild(modalBackground); + + this.bg = modalBackground; + this.modal = modal; + this.title = title; + this.body = body; + + this.registerEvents(); + } + + registerEvents() { + this.bg.addEventListener('click', () => { + this.bg.classList.add('hidden'); + this.bg.addEventListener('transitionend', () => { + document.body.removeChild(this.bg); + }); + }); + } + + setBodyText(text) { + this.body.textContent = text; + } +} -- cgit v1.2.3-54-g00ecf