Use custom dropdown box for presets

html/index.html

@@ -35,9 +35,12 @@
 				<label>
 					Preset:
 					<select id="selPreset" onchange="changePreset()">
-						<option value="wigm" selected>Recommended WIGM</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>
@@ -46,6 +49,7 @@
 							<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>

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 = '<p>Stage comments:</p>';

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;
+}

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<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)}}};