diff options
author | TrueDoctor <d-kobert@web.de> | 2018-10-01 14:26:46 +0200 |
---|---|---|
committer | TrueDoctor <d-kobert@web.de> | 2018-10-01 14:26:46 +0200 |
commit | a5a5d368cddd6e8a15298002ccb3b10c90a33980 (patch) | |
tree | 85f51826e3463829ec554f303eb886b5290b26a5 /WebInterface/NodeJSServer/src/modules/ui/modal.js | |
parent | 1d9dc432584c270307805b165e24fa2d7f566017 (diff) | |
parent | 237e4d43229847bb69aadcfa6e6aca517128913b (diff) |
Merge branch 'WebApi' of https://github.com/TrueDoctor/DiscoBot into WebApi
Diffstat (limited to 'WebInterface/NodeJSServer/src/modules/ui/modal.js')
-rw-r--r-- | WebInterface/NodeJSServer/src/modules/ui/modal.js | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js index 55e38bd..10a1be5 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/modal.js +++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js @@ -1,4 +1,12 @@ +/** + * Parent class to create Modals on the screen + * Contains no content, as that is implemented by child classes + */ export default class Modal { + /** + * Creates a new modal with a title and empty content + * @param {string} titleString Title to show at the top of the modal + */ constructor(titleString) { let modalBackground = document.createElement('div'); let modal = document.createElement('div'); @@ -8,7 +16,7 @@ export default class Modal { modalBackground.className = 'modal-container'; modal.className = 'modal'; title.className = 'modal-title'; - body.className = 'modal-body' + body.className = 'modal-body'; title.textContent = titleString; @@ -25,6 +33,10 @@ export default class Modal { this.registerEvents(); } + /** + * Register event to close if clicked outside of modal + * Clicking on the modal itself should not close it though + */ registerEvents() { this.modal.addEventListener('click', (e) => { e.stopPropagation(); @@ -35,6 +47,9 @@ export default class Modal { }); } + /** + * Fades modal out and removes it from the flow of the document + */ close() { this.bg.classList.add('hidden'); this.bg.addEventListener('transitionend', () => { @@ -42,6 +57,10 @@ export default class Modal { }); } + /** + * Puts text in the body + * @param {string} text Text to put into the body + */ setBodyText(text) { this.body.textContent = text; } |