a fancy slider for stack-option

Mightyfrong · Apr 16, 2021 · f0ed792 · f0ed792
1 parent e79703a
commit f0ed792
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 22 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,10 +1,12 @@
 @import 'my-select.css';
+@import 'my-slider.css';
 
 :root {
 	--col0: hsl(165deg, 80%, 10%);
 	--col1: hsl(225deg, 80%, 10%);
 	--col2: hsl(285deg, 80%, 10%);
 	--accent-col: hsl(45deg, 90%, 50%);
+	--input-background: rgba(255, 255, 255, .8);
 
 	--header-width: 640px;
 	--header-height: 360px;
@@ -190,6 +192,10 @@ input[type=submit] {
 	display: none;
 }
 
+label {
+	white-space: nowrap;
+}
+
 form>label {
 	display: inline-block;
 	width: 4em;
@@ -262,19 +268,21 @@ select {
 
 select {
 	background-color: var(--accent-col);
-	color:var(--col1);
+	color: var(--col1);
 	border-radius: .25em;
-	padding:.25em;
-	border:none
+	padding: .25em;
+	border: none;
 }
+
 .custominput {
 	display: inline-block;
 	position: relative;
 	user-select: none;
-	margin: .5em
+	margin: .5em;
 }
 
-.custominput input {
+.custominput input[type=radio],
+.custominput input[type=checkbox] {
 	/* Hide the browser's default checkbox */
 	display: none;
 }
@@ -288,7 +296,7 @@ select {
 	width: 2em;
 	border-radius: .5em;
 	border: none;
-	background-color: rgba(255, 255, 255, .8);
+	background-color: var(--input-background);
 }
 
 .checkmark::after {

diff --git a/css/my-slider.css b/css/my-slider.css
@@ -0,0 +1,102 @@
+/* taken from http://danielstern.ca/range.css/#/ */
+
+input[type=range] {
+  margin: 1em .5em 0 .5em;
+  background-color: transparent;
+  -webkit-appearance: none;
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  background: var(--input-background);
+  border: none;
+  border-radius: 1.3px;
+  height: .75em;
+  cursor: pointer;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  margin-top: -8px;
+  width:2em;
+  height:2em;
+  background: var(--accent-col);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: var(--input-background);
+}
+
+input[type=range]::-moz-range-track {
+  background: var(--input-background);
+  border: none;
+  border-radius: 1.3px;
+  height: .75em;
+  cursor: pointer;
+}
+
+input[type=range]::-moz-range-thumb {
+  width:2em;
+  height:2em;
+  background: var(--accent-col);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+input[type=range]::-ms-track {
+  background: transparent;
+  border-color: transparent;
+  border-width: 8.7px 0;
+  color: transparent;
+  height: .75em;
+  cursor: pointer;
+}
+
+input[type=range]::-ms-fill-lower {
+  background: var(--input-background);
+  border: none;
+  border-radius: 2.6px;
+}
+
+input[type=range]::-ms-fill-upper {
+  background: var(--input-background);
+  border: none;
+  border-radius: 2.6px;
+}
+
+input[type=range]::-ms-thumb {
+  width:2em;
+  height:2em;
+  background: var(--accent-col);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: 0;
+  /*Needed to keep the Edge thumb centred*/
+}
+
+input[type=range]:focus::-ms-fill-lower {
+  background: var(--input-background);
+}
+
+input[type=range]:focus::-ms-fill-upper {
+  background: var(--input-background);
+}
+
+/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
+  how to remove the virtical space around the range input in IE*/
+@supports (-ms-ime-align:auto) {
+
+  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
+  input[type=range] {
+    margin: 0;
+    /*Edge starts the margin from the thumb, not the track as other browsers do*/
+  }
+}
diff --git a/index.html b/index.html
@@ -69,15 +69,8 @@ <h1>
 						class="checkmark"></span></label>
 				<label class="custominput" for="stacking"><input type="checkbox" id="stacking" checked />stacking <span
 						class="checkmark"></span></label>
-				<label class="custominput" for="stack">Maximum stacked <select id="stack">
-						<option value="1">1</option>
-						<option value="2">2</option>
-						<option value="3">3</option>
-						<option value="4" selected>4</option>
-						<option value="5">5</option>
-						<option value="6">6</option>
-						<option value="7">7</option>
-					</select></label>
+				<label class="custominput" for="stack">Maximum stacked <input type="range" min="1" max="7" step="1" id="stack"
+						onchange="this.nextSibling.innerHTML=this.value" /><span>&nbsp;&nbsp;</span></label>
 
 				<div id="keyoptions">
 					<label class="custominput" for="ipakeys"><input type="radio" name="keyboard" id="ipakeys"
@@ -95,10 +88,12 @@ <h1>
 					<div id="cwconsonants" class="keys"></div>
 					<div id="cwvowels" class="keys"></div>
 					<div id="cwpunctuation" class="keys"></div>
-					<span id="cwhint">If a phrase does not end with supported punctuation, a period will be added by default.</span>
+					<span id="cwhint">If a phrase does not end with supported punctuation, a period will be added by
+						default.</span>
 				</div>
 				<div id="gc-hint">
-					<span id="gchint">If a phrase does not end with supported punctuation, a period will be added by default.</span>
+					<span id="gchint">If a phrase does not end with supported punctuation, a period will be added by
+						default.</span>
 				</div>
 				<div id="oddism-keys">
 					<div id="oddismconsonants" class="keys"></div>
@@ -170,7 +165,8 @@ <h1>
 		guides or other reasons. Of course we acknowledge and appreciate other writing styles as well and the effort of
 		developing and documenting them and contributing to the Doctor Who Fandom.
 		One or the other may or may not be on our inofficial to-do-list.<br /><br />
-		<a href="https://www.reddit.com/r/gallifreyan/wiki/language" target="ack">(Likely incomplete) list of known styles</a><br /><br />
+		<a href="https://www.reddit.com/r/gallifreyan/wiki/language" target="ack">(Likely incomplete) list of known
+			styles</a><br /><br />
 		Sources and references for the supported writing styles can be found and are linked on <a
 			href="https://github.com/Mightyfrong/gallifreyan-translation-helper" target="_blank">the repo</a>.
 	</div>

diff --git a/js/utils/UILanguage.js b/js/utils/UILanguage.js
@@ -107,7 +107,7 @@ export let UILanguage = {
 	},
 	init: function () {
 		//overwrite initial rendered text putputs
-		let dest = ["circular", "convertc", "stacking", "stack"];//, "ipakeys", "enkeys"];
+		let dest = ["circular", "convertc", "stacking"];//, "stack", "ipakeys", "enkeys"];
 		dest.forEach(id => {
 			document.getElementById(id).parentElement.innerHTML =
 				document.getElementById(id).parentElement.innerHTML.replaceAll(/[>|^](\D+?)</g, ($1, $2) => {

diff --git a/js/utils/funcs.js b/js/utils/funcs.js
@@ -83,15 +83,16 @@ export class unsupportedChars {
 // handler for rendering options
 export class renderOpts {
 	constructor() {
-		this.value = ["foregroundcolor", "backgroundcolor"];
-		this.option = ["stack"];
+		this.permavalue = ["foregroundcolor", "backgroundcolor"];
+		this.value = ["stack"];
+		this.option = [];
 		this.checked = ["circular", "convertc", "stacking"];
 
 		//todo default values, more meaningful data structure
 		//default + font size, window width/height
 	}
 	display(selected = []) {
-		//		this.value.forEach(id => {document.getElementById(id).parentElement.style.display = (selected.indexOf(id)>-1 ? 'initial' : 'none');}, { selected: selected });
+		this.value.forEach(id => {document.getElementById(id).parentElement.style.display = (selected.indexOf(id)>-1 ? 'initial' : 'none');}, { selected: selected });
 		this.option.forEach(id => {
 			document.getElementById(id).parentElement.style.display = (selected.indexOf(id) > -1 ? 'initial' : 'none');
 		}, {
@@ -105,6 +106,9 @@ export class renderOpts {
 	}
 	get() {
 		let output = {};
+		this.permavalue.forEach(id => {
+			output[id] = document.getElementById(id).parentElement.style.display == 'none' ? false : document.getElementById(id).value;
+		});
 		this.value.forEach(id => {
 			output[id] = document.getElementById(id).parentElement.style.display == 'none' ? false : document.getElementById(id).value;
 		});