From f55234bdf4a7596e5b588cf28e6f1d02eef31d6e Mon Sep 17 00:00:00 2001 From: Lance Ewing Date: Sat, 27 Apr 2024 22:02:23 +0100 Subject: [PATCH] JS and CS to support the about dialog. --- html/webapp/dialog.js | 46 ++++++++++++++++++++----------- html/webapp/styles.css | 61 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 90 insertions(+), 17 deletions(-) diff --git a/html/webapp/dialog.js b/html/webapp/dialog.js index b55c179..22e2e57 100644 --- a/html/webapp/dialog.js +++ b/html/webapp/dialog.js @@ -17,9 +17,8 @@ class Dialog { cancel: 'Cancel', dialogClass: '', message: '', - soundAccept: '', - soundOpen: '', - template: '' + template: '', + showStateButtons: false }, settings ); @@ -57,11 +56,13 @@ class Dialog {
- + + + + + - - `; document.body.appendChild(this.dialog); @@ -94,20 +95,18 @@ class Dialog { this.dialog.className = dialog.dialogClass || ''; this.elements.accept.innerText = dialog.accept; this.elements.cancel.innerText = dialog.cancel; - this.elements.cancel.hidden = dialog.cancel === ''; + this.elements.cancel.hidden = dialog.cancel === '';; + this.elements.export.hidden = !dialog.showStateButtons; + this.elements.import.hidden = !dialog.showStateButtons; + this.elements.clear.hidden = !dialog.showStateButtons; + this.elements.reset.hidden = !dialog.showStateButtons; this.elements.message.innerText = dialog.message; - this.elements.soundAccept.src = dialog.soundAccept || ''; - this.elements.soundOpen.src = dialog.soundOpen || ''; this.elements.target = dialog.target || ''; this.elements.template.innerHTML = dialog.template || ''; this.focusable = this.getFocusable(); this.hasFormData = this.elements.fieldset.elements.length > 0; - if (dialog.soundOpen) { - this.elements.soundOpen.play(); - } - this.toggle(true); if (this.hasFormData) { @@ -141,15 +140,30 @@ class Dialog { }, { once: true }); this.elements.accept.addEventListener('click', () => { let value = this.hasFormData ? this.collectFormData(new FormData(this.elements.form)) : true; - if (this.elements.soundAccept.getAttribute('src').length > 0) this.elements.soundAccept.play(); this.toggle(); resolve(value); }, { once: true }); + this.elements.export.addEventListener('click', () => { + this.toggle(); + resolve("EXPORT"); + }, { once: true }); + this.elements.import.addEventListener('click', () => { + this.toggle(); + resolve("IMPORT"); + }, { once: true }); + this.elements.clear.addEventListener('click', () => { + this.toggle(); + resolve("CLEAR"); + }, { once: true }); + this.elements.reset.addEventListener('click', () => { + this.toggle(); + resolve("RESET"); + }, { once: true }); }) } - alert(message) { - const settings = Object.assign({}, { cancel: '', message: message, template: '' }); + alert(message, defaultSettings = { template: '' }) { + const settings = Object.assign(defaultSettings, { cancel: '', message: message }); this.open(settings); return this.waitForUser(); } diff --git a/html/webapp/styles.css b/html/webapp/styles.css index cf2b55b..d5f8e6b 100644 --- a/html/webapp/styles.css +++ b/html/webapp/styles.css @@ -67,6 +67,7 @@ a { min-inline-size: var(--dlg-mis, auto); padding: var(--dlg-p, var(--dlg-gap)); width: var(--dlg-w, fit-content); + user-select: none } :where([data-component="no-dialog"]:not([hidden])) { @@ -78,7 +79,6 @@ a { } :where([data-component*="dialog"] menu) { - display: flex; gap: calc(var(--dlg-gap)/2); justify-content: var(--dlg-menu-jc, flex-end); margin: 0; @@ -92,16 +92,75 @@ a { color: var(--dlg-button-c); font-size: var(--dlg-button-fz, 0.8em); padding: var(--dlg-button-p, 0.65em 1.5em); + height: 35px; } :where([data-component*="dialog"] [data-ref="accept"]) { --dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%)); --dlg-button-c: var(--dlg-accept-c, #fff); + float: right; +} + +:where([data-component*="dialog"] [data-ref="export"]) { + --dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%)); + --dlg-button-c: var(--dlg-accept-c, #fff); + background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc); + border: 1px solid #7A8A99; +} + +:where([data-component*="dialog"] [data-ref="export"] span) { + background: url(icons/export.png) no-repeat; + float: left; + width: 16px; + height: 16px; +} + +:where([data-component*="dialog"] [data-ref="import"]) { + --dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%)); + --dlg-button-c: var(--dlg-accept-c, #fff); + background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc); + border: 1px solid #7A8A99; +} + +:where([data-component*="dialog"] [data-ref="import"] span) { + background: url(icons/import.png) no-repeat; + float: left; + width: 16px; + height: 16px; +} + +:where([data-component*="dialog"] [data-ref="clear"]) { + --dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%)); + --dlg-button-c: var(--dlg-accept-c, #fff); + background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc); + border: 1px solid #7A8A99; +} + +:where([data-component*="dialog"] [data-ref="clear"] span) { + background: url(icons/clear.png) no-repeat; + float: left; + width: 16px; + height: 16px; +} + +:where([data-component*="dialog"] [data-ref="reset"]) { + --dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%)); + --dlg-button-c: var(--dlg-accept-c, #fff); + background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc); + border: 1px solid #7A8A99; +} + +:where([data-component*="dialog"] [data-ref="reset"] span) { + background: url(icons/reset.png) no-repeat; + float: left; + width: 16px; + height: 16px; } :where([data-component*="dialog"] [data-ref="cancel"]) { --dlg-button-bgc: var(--dlg-cancel-bgc, transparent); --dlg-button-c: var(--dlg-cancel-c, inherit); + float: right; } :where([data-component*="dialog"] [data-ref="fieldset"]) {