neale/vail
neale
/
vail
mirror of https://github.com/nealey/vail.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

More UI fixes

This commit is contained in:
Neale Pickett 2022-05-15 10:46:51 -06:00
parent dec3959b66
commit f970376f17
5 changed files with 59 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/buzzer.mjs
View File

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

55
static/index.html
View File

@ -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">

6
static/inputs.mjs
View File

@ -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()

49
static/ui.mjs
View File

@ -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") {

3
static/vail.mjs
View File

@ -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)