More UI fixes

static/buzzer.mjs

@@ -1,5 +1,5 @@
-const HIGH_FREQ = 666
+const HIGH_FREQ = 555
-const LOW_FREQ = 555
+const LOW_FREQ = 444
 
 
  /**

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">
-
+									<input class="input" type="text" id="repeater" list="repeater-list">
-									<div class="field is-horizontal">
+									<datalist id="repeater-list"></datalist>
-										<div class="field-label is-hidden">
+									<div class="dropdown is-right is-hoverable">
-											<label class="label" for="repeater">Repeater</label>
+										<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="dropdown-menu" id="stock-repeaters" role="menu">
-											<div class="field">
+											<div class="dropdown-content">
-												<div class="control">
+												<a class="dropdown-item" data-value="">General</a>
-													<input class="input" type="text" id="repeater" list="repeater-list">
+												<a class="dropdown-item" data-value="1">Channel 1</a>
-													<datalist id="repeater-list">
+												<a class="dropdown-item" data-value="2">Channel 2</a>
-														<option>General</option>
+												<a class="dropdown-item" data-value="3">Channel 3</a>
-														<option value="1">Channel 1</option>
+												<hr class="dropdown-divider">
-														<option value="2">Channel 2</option>
+												<a class="dropdown-item" data-value="Null">Null (no transmit)</a>
-														<option value="3">Channel 3</option>
+												<a class="dropdown-item">Echo</a>
-														<option value="Null">No transmit</option>
+												<a class="dropdown-item">Fortunes</a>
-														<option>Echo</option>
+												<a class="dropdown-item">Fortunes: Pauses ×2</a>
-														<option>Echo 5s</option>
+												<a class="dropdown-item">Fortunes: Pauses ×4</a>
-														<option>Echo 10s</option>
+												<a class="dropdown-item">Fortunes: Pauses ×8</a>
-														<option>Fortunes</option>
-														<option>Fortunes: Pauses ×2</option>
-														<option>Fortunes: Pauses ×4</option>
-														<option>Fortunes: Pauses ×8</option>
-													</datalist>
-												</div>
 											</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">

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 down = event.type.endsWith("down") || event.type.endsWith("start")
-		let key = event.target.dataset.key
+		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()

static/ui.mjs

@@ -1,35 +1,34 @@
 /**
- * If the user clicked on the little down arrow,
+ * Set up repeater autofill list, and make dropdown active
- * clear the input field so all autocomplete options are shown.
  *
- * This kludge may not work properly on every browser.
+ * This fills the dataset from the dropdown, and make each dropdown element set
- * 
+ * the value in the input field.
- * @param event Triggering event
  */
-function maybeDropdown(event) {
+function setRepeaterList() {
-    let el = event.target
+    let input = document.querySelector("#repeater")
-    switch (event.type) {
+    let datalist = document.querySelector("datalist#repeater-list")
-        case "click":
+    let repeaterList = document.querySelector("#stock-repeaters .dropdown-content")
-            let offset = el.clientWidth + el.offsetLeft - event.clientX;
+    for (let a of repeaterList.children) {
-            if (el.value) {
+        if (a.tagName == "A") {
-                el.dataset.value = el.value
+            let opt = datalist.appendChild(document.createElement("option"))
+            if (a.dataset.value != undefined) {
+                opt.value = a.dataset.value
             }
-            if (offset < 0) {
+            opt.textContent = a.textContent
-                el.value = ""
+
-            }
+            a.addEventListener(
-            break
+                "click", 
-        case "mouseleave":
+                () => {
-            if (!el.value) {
+                    input.value = opt.value
-                el.value = el.dataset.value
+                    input.dispatchEvent(new Event("change"))
-            }
+                },
-            break;
+            )
+        }
     }
 }
 
 function init() {
-    let rep = document.querySelector("#repeater")
+    setRepeaterList()
-    rep.addEventListener("click", maybeDropdown)
-    rep.addEventListener("mouseleave", maybeDropdown)
 }
 
 if (document.readyState === "loading") {

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)