JS and CS to support the about dialog.

lanceewing · Apr 27, 2024 · f55234b · f55234b
1 parent 4b44ad4
commit f55234b
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 17 deletions.
diff --git 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 {
 		        <div data-ref="template"></div>
 		      </fieldset>
 		      <menu>
-		        <button${this.dialogSupported ? '' : ` type="button"`} data-ref="cancel" value="cancel"></button>
+		        <button${this.dialogSupported ? '' : ` type="button"`} data-ref="export" value="export"><span></span></button>
+		        <button${this.dialogSupported ? '' : ` type="button"`} data-ref="import" value="import"><span></span></button>
+		        <button${this.dialogSupported ? '' : ` type="button"`} data-ref="reset" value="reset"><span></span></button>
+		        <button${this.dialogSupported ? '' : ` type="button"`} data-ref="clear" value="clear"><span></span></button>
 		        <button${this.dialogSupported ? '' : ` type="button"`} data-ref="accept" value="default"></button>
+		        <button${this.dialogSupported ? '' : ` type="button"`} data-ref="cancel" value="cancel"></button>
 		      </menu>
-		      <audio data-ref="soundAccept"></audio>
-		      <audio data-ref="soundOpen"></audio>
 		    </form>`;
 		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
@@ -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"]) {