From f970376f17a1d36466f8b1597572df66c53a4c4a Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@woozle.org>
Date: Sun, 15 May 2022 10:46:51 -0600
Subject: [PATCH] More UI fixes

---
 static/buzzer.mjs |  4 ++--
 static/index.html | 55 ++++++++++++++++++++++++++---------------------
 static/inputs.mjs |  6 +++---
 static/ui.mjs     | 49 +++++++++++++++++++++--------------------
 static/vail.mjs   |  3 ---
 5 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/static/buzzer.mjs b/static/buzzer.mjs
index 34dae61..925c990 100644
--- a/static/buzzer.mjs
+++ b/static/buzzer.mjs
@@ -1,5 +1,5 @@
-const HIGH_FREQ = 666
-const LOW_FREQ = 555
+const HIGH_FREQ = 555
+const LOW_FREQ = 444
 
 
  /**
diff --git a/static/index.html b/static/index.html
index 46f2193..07f5d82 100644
--- a/static/index.html
+++ b/static/index.html
@@ -27,7 +27,8 @@
 			</div>
 			<div class="navbar-menu">
 				<div class="navbar-end">
-					<a class="navbar-item" href="https://github.com/nealey/vail/wiki" target="_blank">Help</a>
+					<a class="navbar-item" href="https://discord.gg/GBzj8cBat7" target="_blank" title="Text/voice chat on Discord"><i class="mdi mdi-discord"></i></a>
+					<a class="navbar-item" href="https://github.com/nealey/vail/wiki" target="_blank" title="Vail Wiki">Help</a>
 				</div>
 			</div>
 		</nav>
@@ -40,30 +41,29 @@
 						<div class="level">
 							<div class="level-left">
 								<div class="level-item">
-
-									<div class="field is-horizontal">
-										<div class="field-label is-hidden">
-											<label class="label" for="repeater">Repeater</label>
+									<input class="input" type="text" id="repeater" list="repeater-list">
+									<datalist id="repeater-list"></datalist>
+									<div class="dropdown is-right is-hoverable">
+										<div class="dropdown-trigger">
+											<button class="button" aria-haspopup="true" aria-controls="stock-repeaters">
+												<span class="icon is-small">
+													<i class="mdi mdi-chevron-down" aria-hidden="true"></i>
+												</span>
+											</button>
 										</div>
-										<div class="field-body">
-											<div class="field">
-												<div class="control">
-													<input class="input" type="text" id="repeater" list="repeater-list">
-													<datalist id="repeater-list">
-														<option>General</option>
-														<option value="1">Channel 1</option>
-														<option value="2">Channel 2</option>
-														<option value="3">Channel 3</option>
-														<option value="Null">No transmit</option>
-														<option>Echo</option>
-														<option>Echo 5s</option>
-														<option>Echo 10s</option>
-														<option>Fortunes</option>
-														<option>Fortunes: Pauses ×2</option>
-														<option>Fortunes: Pauses ×4</option>
-														<option>Fortunes: Pauses ×8</option>
-													</datalist>
-												</div>
+										<div class="dropdown-menu" id="stock-repeaters" role="menu">
+											<div class="dropdown-content">
+												<a class="dropdown-item" data-value="">General</a>
+												<a class="dropdown-item" data-value="1">Channel 1</a>
+												<a class="dropdown-item" data-value="2">Channel 2</a>
+												<a class="dropdown-item" data-value="3">Channel 3</a>
+												<hr class="dropdown-divider">
+												<a class="dropdown-item" data-value="Null">Null (no transmit)</a>
+												<a class="dropdown-item">Echo</a>
+												<a class="dropdown-item">Fortunes</a>
+												<a class="dropdown-item">Fortunes: Pauses ×2</a>
+												<a class="dropdown-item">Fortunes: Pauses ×4</a>
+												<a class="dropdown-item">Fortunes: Pauses ×8</a>
 											</div>
 										</div>
 									</div>
@@ -245,7 +245,12 @@
 		<div class="box">
 			<h2 class="title">Notes</h2>
 			<textarea class="textarea" placeholder="Enter your own notes here" id="notes"></textarea>
-			<a href="https://github.com/nealey/vail/wiki" target="_blank">Vail Wiki</a>
+			<nav class="breadcrumb has-bullet-separator">
+				<ul>
+					<li><a href="https://discord.gg/GBzj8cBat7" target="_blank" title="Text/voice chat on Discord"><i class="mdi mdi-discord"></i></a></li>
+					<li><a href="https://github.com/nealey/vail/wiki" target="_blank" title="Vail Wiki">Help</a></li>
+				</ul>
+			</nav>
 		</div>
 
 		<div class="columns is-centered bottom">
diff --git a/static/inputs.mjs b/static/inputs.mjs
index 56b4d52..362f4d3 100644
--- a/static/inputs.mjs
+++ b/static/inputs.mjs
@@ -26,14 +26,14 @@ export class HTML extends Input{
 	}
 
 	keyButton(event) {
-		let begin = event.type.endsWith("down") || event.type.endsWith("start")
-		let key = event.target.dataset.key
+		let down = event.type.endsWith("down") || event.type.endsWith("start")
+		let key = Number(event.target.dataset.key)
 		
 		// Button 2 does the other key (assuming 2 keys)
 		if (event.button == 2) {
 			key = 1 - key
 		}
-		this.keyer.Key(key, begin)
+		this.keyer.Key(key, down)
 
 		if (event.cancelable) {
 			event.preventDefault()
diff --git a/static/ui.mjs b/static/ui.mjs
index c8e9213..501001c 100644
--- a/static/ui.mjs
+++ b/static/ui.mjs
@@ -1,35 +1,34 @@
 /**
- * If the user clicked on the little down arrow,
- * clear the input field so all autocomplete options are shown.
- * 
- * This kludge may not work properly on every browser.
- * 
- * @param event Triggering event
+ * Set up repeater autofill list, and make dropdown active
+ *
+ * This fills the dataset from the dropdown, and make each dropdown element set
+ * the value in the input field.
  */
-function maybeDropdown(event) {
-    let el = event.target
-    switch (event.type) {
-        case "click":
-            let offset = el.clientWidth + el.offsetLeft - event.clientX;
-            if (el.value) {
-                el.dataset.value = el.value
+function setRepeaterList() {
+    let input = document.querySelector("#repeater")
+    let datalist = document.querySelector("datalist#repeater-list")
+    let repeaterList = document.querySelector("#stock-repeaters .dropdown-content")
+    for (let a of repeaterList.children) {
+        if (a.tagName == "A") {
+            let opt = datalist.appendChild(document.createElement("option"))
+            if (a.dataset.value != undefined) {
+                opt.value = a.dataset.value
             }
-            if (offset < 0) {
-                el.value = ""
-            }
-            break
-        case "mouseleave":
-            if (!el.value) {
-                el.value = el.dataset.value
-            }
-            break;
+            opt.textContent = a.textContent
+
+            a.addEventListener(
+                "click", 
+                () => {
+                    input.value = opt.value
+                    input.dispatchEvent(new Event("change"))
+                },
+            )
+        }
     }
 }
 
 function init() {
-    let rep = document.querySelector("#repeater")
-    rep.addEventListener("click", maybeDropdown)
-    rep.addEventListener("mouseleave", maybeDropdown)
+    setRepeaterList()
 }
 
 if (document.readyState === "loading") {
diff --git a/static/vail.mjs b/static/vail.mjs
index 15937a2..470c707 100644
--- a/static/vail.mjs
+++ b/static/vail.mjs
@@ -285,9 +285,6 @@ class VailClient {
 			this.roboKeyer.SetPauseMultiplier(number || 1)
 			this.repeater = new Repeaters.Fortune(rx, this.roboKeyer)
 		} else if (name.startsWith("Echo")) {
-			let delayElement = document.querySelector("#rx-delay")
-			delayElement.value = (number || 2) * Second
-			delayElement.dispatchEvent(new Event("input"))
 			this.repeater = new Repeaters.Echo(rx)
 		} else if (name == "Null") {
 			this.repeater = new Repeaters.Null(rx)