Use custom dropdown box for presets
This commit is contained in:
parent
f80875b583
commit
11496a133c
GPG Key ID:
7234E476BF21C61A
|
|
@ -35,17 +35,21 @@
|
|||
<label>
|
||||
Preset:
|
||||
<select id="selPreset" onchange="changePreset()">
|
||||
<option value="wigm" selected>Recommended WIGM</option>
|
||||
<option value="scottish">Scottish STV</option>
|
||||
<option value="meek87">Meek STV (1987)</option>
|
||||
<option value="meek06">Meek STV (2006)</option>
|
||||
<option value="meeknz">Meek STV (New Zealand)</option>
|
||||
<option value="senate">Australian Senate STV</option>
|
||||
<option value="wright">Wright STV</option>
|
||||
<option value="prsa77">PRSA 1977</option>
|
||||
<option value="ers97">ERS97</option>
|
||||
<option value="ers76">ERS76</option>
|
||||
<option value="ers73">ERS73</option>
|
||||
<optgroup label="Recommended methods">
|
||||
<option value="wigm" selected>OpenTally WIGM</option>
|
||||
<option value="scottish">Scottish STV</option>
|
||||
<option value="meek87">Meek STV (1987)</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other methods">
|
||||
<option value="meek06">Meek STV (2006)</option>
|
||||
<option value="meeknz">Meek STV (New Zealand)</option>
|
||||
<option value="senate">Australian Senate STV</option>
|
||||
<option value="wright">Wright STV</option>
|
||||
<option value="prsa77">PRSA 1977</option>
|
||||
<option value="ers97">ERS97</option>
|
||||
<option value="ers76">ERS76</option>
|
||||
<option value="ers73">ERS73</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</label>
|
||||
<button id="btnAdvancedOptions" onclick="clickAdvancedOptions()">Show advanced options</button>
|
||||
|
|
@ -282,6 +286,7 @@
|
|||
|
||||
<div id="printWarning">Printing directly from this page is not supported. Use the ‘Print result’ button to generate a printer-friendly report.</div>
|
||||
|
||||
<script src="vendor/vanilla-js-dropdown.min.js"></script>
|
||||
<script src="opentally.js?v=GITVERSION"></script>
|
||||
<script src="index.js?v=GITVERSION"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -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 = '<p>Stage comments:</p>';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<n.length;p++){var v=document.createElement("div");v.innerText=n[p].label,v.classList.add("js-Dropdown-optgroup"),m.appendChild(v),g(n[p].getElementsByTagName("option"))}else g(a);function g(e){for(var t=0;t<e.length;t++){var n=document.createElement("li");n.innerText=e[t].textContent,n.setAttribute("data-value",e[t].value),n.setAttribute("data-index",r++),a[o.selectedIndex].textContent===e[t].textContent&&(n.classList.add(i),u.textContent=e[t].textContent),m.appendChild(n)}}function f(){m.classList.toggle(t)}function x(){m.classList.remove(t)}return c.appendChild(u),c.appendChild(m),c.addEventListener("click",function(e){e.preventDefault();var t=e.target;t.className===l&&f();if("LI"===t.tagName){c.querySelector("."+l).innerText=t.innerText,o.options.selectedIndex=t.getAttribute("data-index");var n=s?new CustomEvent("change",{bubbles:!0}):new CustomEvent("change");o.dispatchEvent(n);for(var a=0;a<d;a++)m.querySelectorAll("li")[a].classList.remove(i);t.classList.add(i),x()}}),o.parentNode.insertBefore(c,o),o.style.display="none",document.addEventListener("click",function(e){c.contains(e.target)||x()}),{toggle:f,close:x,open:function(){m.classList.add(t)}}};
|
||||
Loading…
Reference in New Issue