From 11496a133c40d8bb83187fb985301ddeda9958ef Mon Sep 17 00:00:00 2001 From: RunasSudo Date: Tue, 20 Jul 2021 13:41:38 +1000 Subject: [PATCH] Use custom dropdown box for presets --- html/index.html | 27 +++++++------ html/index.js | 11 ++++++ html/main.css | 55 ++++++++++++++++++++++++-- html/vendor/vanilla-js-dropdown.min.js | 5 +++ 4 files changed, 83 insertions(+), 15 deletions(-) create mode 100644 html/vendor/vanilla-js-dropdown.min.js diff --git a/html/index.html b/html/index.html index 3ad54fe..7b84ae8 100644 --- a/html/index.html +++ b/html/index.html @@ -35,17 +35,21 @@ @@ -282,6 +286,7 @@
Printing directly from this page is not supported. Use the ‘Print result’ button to generate a printer-friendly report.
+ diff --git a/html/index.js b/html/index.js index 8bf1507..448ed5d 100644 --- a/html/index.js +++ b/html/index.js @@ -37,6 +37,17 @@ worker.onmessage = function(evt) { document.getElementById('divLoading').style.display = 'none'; document.getElementById('divUI').style.display = 'block'; + // Init dropdowns + // Can't compute correct width until #divUI, etc. is display: block + //document.getElementById('divAdvancedOptions').style.display = 'grid'; + //for (let elSel of document.querySelectorAll('select')) { + let elSel = document.getElementById('selPreset'); { + var sel = new CustomSelect({elem: elSel}); + sel.open(); + document.getElementById('custom-' + elSel.id).style.width = (document.getElementById('custom-' + elSel.id).querySelector('.js-Dropdown-list').clientWidth + 32) + 'px'; + sel.close(); + } + //document.getElementById('divAdvancedOptions').style.display = 'none'; } else if (evt.data.type === 'initResultsTable') { tblResult.innerHTML = evt.data.content; divLogs2.innerHTML = '

Stage comments:

'; diff --git a/html/main.css b/html/main.css index 13ffc72..fd51848 100644 --- a/html/main.css +++ b/html/main.css @@ -200,9 +200,9 @@ select, input, button { line-height: 1.15; } -select, input[type="text"], input[type="number"], textarea { +select, input[type="text"], input[type="number"], textarea, .js-Dropdown-title { appearance: none; - background-color: #fff; + background-color: #fff !important; border: 1px solid; border-color: #999 #bbb #ddd; border-radius: 0; @@ -211,7 +211,7 @@ select, input[type="text"], input[type="number"], textarea { padding: 2px 3px; } -select { +select, .js-Dropdown-title { /* Dropdown arrow */ background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==); background-position: right center; @@ -277,10 +277,57 @@ input[type="checkbox"]:checked { button:focus, select:focus, input:focus, textarea:focus { outline: 0; } -select:focus, input:focus, textarea:focus { +select:focus, .js-Dropdown-title:focus, input:focus, textarea:focus { border-color: #3daee9; } label { white-space: nowrap; } + +/* Custom dropdown */ +/* Adapted from https://github.com/zoltantothcom/vanilla-js-dropdown (Unlicense) */ + +.js-Dropdown { + display: inline-block; + position: relative; +} +.js-Dropdown-title { + width: 100%; + text-align: left; +} +.js-Dropdown-list { + background: #fff; + border-bottom: 1px solid #ddd; + border-left: 1px solid #bbb; + border-right: 1px solid #bbb; + box-sizing: border-box; + display: none; + list-style: none; + margin: -2px 0 0 0; + padding: 0; + position: absolute; + min-width: 100%; + z-index: 999; + max-height: 80vh; + overflow-y: auto; +} +.js-Dropdown-list.is-open { + display: block; +} +.js-Dropdown-list li { + cursor: pointer; + padding: 2px 3px 2px 11px; + line-height: 1.3; +} +.js-Dropdown-list li:hover { + background-color: #e9f7ff; +} +.js-Dropdown-list li.is-selected { + background-color: #c0e8fd; +} +.js-Dropdown-optgroup { + font-weight: bold; + padding: 2px 3px; + line-height: 1.3; +} diff --git a/html/vendor/vanilla-js-dropdown.min.js b/html/vendor/vanilla-js-dropdown.min.js new file mode 100644 index 0000000..534928d --- /dev/null +++ b/html/vendor/vanilla-js-dropdown.min.js @@ -0,0 +1,5 @@ +/** + * Vanilla JavaScript Dropdown v2.2.0 + * https://zoltantothcom.github.io/vanilla-js-dropdown + */ +var CustomSelect=function(e){var o="string"==typeof e.elem?document.getElementById(e.elem):e.elem,s="boolean"==typeof e.bubbles,l="js-Dropdown-title",i="is-selected",t="is-open",n=o.getElementsByTagName("optgroup"),a=o.options,d=a.length,r=0,c=document.createElement("div");c.className="js-Dropdown",o.id&&(c.id="custom-"+o.id);var u=document.createElement("button");u.className=l,u.textContent=a[0].textContent;var m=document.createElement("ul");if(m.className="js-Dropdown-list",n.length)for(var p=0;p