implement #208 preview foreground palette on configured default bg + other improvements

js/term/themes.js

@@ -98,24 +98,26 @@ exports.buildColorTable = function () {
 exports.SELECTION_FG = '#333'
 exports.SELECTION_BG = '#b2d7fe'
 
-function resolveColor (themeN, shade) {
+exports.themePreview = function (themeN) {
-  shade = +shade
-  if (shade < 16) shade = themes[themeN][shade]
-  else {
-    shade = exports.buildColorTable()[shade]
-  }
-  return shade
-}
-
-exports.themePreview = function (n) {
   document.querySelectorAll('[data-fg]').forEach((elem) => {
     let shade = elem.dataset.fg
-    if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
+    if (/^\d+$/.test(shade)) shade = exports.toCss(shade, themeN)
     elem.style.color = shade
   })
   document.querySelectorAll('[data-bg]').forEach((elem) => {
     let shade = elem.dataset.bg
-    if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
+    if (/^\d+$/.test(shade)) shade = exports.toCss(shade, themeN)
     elem.style.backgroundColor = shade
   })
 }
+
+exports.toCss = function (shade, themeN) {
+  if (/^\d+$/.test(shade)) {
+    shade = +shade
+    if (shade < 16) shade = themes[themeN][shade]
+    else {
+      shade = exports.buildColorTable()[shade]
+    }
+  }
+  return shade
+}

pages/cfg_term.php

@@ -12,7 +12,7 @@
 
 	<div class="Row">
 		<label for="theme"><?= tr("term.theme") ?></label>
-		<select name="theme" id="theme" onchange="showColor()">
+		<select name="theme" id="theme">
 			<option value="0">Tango</option>
 			<option value="1">Linux (CGA)</option>
 			<option value="2">XTerm</option>
@@ -26,6 +26,8 @@
 			<option value="8">Apple II</option>
 			<option value="9">Commodore</option>
 		</select>
+		<span onclick="prevTheme()" class="mq-no-phone theme-nav-btn">◀</span>
+		<span onclick="nextTheme()" class="mq-no-phone theme-nav-btn">▶</span>
 	</div>
 
 	<div class="Row color-preview">
@@ -59,25 +61,25 @@
 		<label><?= tr("term.color_fg_prev") ?></label>
 		<div>
 			<div class="colorprev fg">
-				<span data-fg=0 data-bg=0 style="text-shadow: 0 0 4px white;">0</span><!--
+				<span data-fg=0>0</span><!--
-				--><span data-fg=1 data-bg=0>1</span><!--
+				--><span data-fg=1>1</span><!--
-				--><span data-fg=2 data-bg=0>2</span><!--
+				--><span data-fg=2>2</span><!--
-				--><span data-fg=3 data-bg=0>3</span><!--
+				--><span data-fg=3>3</span><!--
-				--><span data-fg=4 data-bg=0>4</span><!--
+				--><span data-fg=4>4</span><!--
-				--><span data-fg=5 data-bg=0>5</span><!--
+				--><span data-fg=5>5</span><!--
-				--><span data-fg=6 data-bg=0>6</span><!--
+				--><span data-fg=6>6</span><!--
-				--><span data-fg=7 data-bg=0>7</span>
+				--><span data-fg=7>7</span>
 			</div>
 
 			<div class="colorprev fg">
-				<span data-fg=8 data-bg=0>8</span><!--
+				<span data-fg=8>8</span><!--
-				--><span data-fg=9 data-bg=0>9</span><!--
+				--><span data-fg=9>9</span><!--
-				--><span data-fg=10 data-bg=0>10</span><!--
+				--><span data-fg=10>10</span><!--
-				--><span data-fg=11 data-bg=0>11</span><!--
+				--><span data-fg=11>11</span><!--
-				--><span data-fg=12 data-bg=0>12</span><!--
+				--><span data-fg=12>12</span><!--
-				--><span data-fg=13 data-bg=0>13</span><!--
+				--><span data-fg=13>13</span><!--
-				--><span data-fg=14 data-bg=0>14</span><!--
+				--><span data-fg=14>14</span><!--
-				--><span data-fg=15 data-bg=0>15</span>
+				--><span data-fg=15>15</span>
 			</div>
 		</div>
 	</div>
@@ -292,13 +294,6 @@
 </form>
 
 <script>
-	$('#cursor_shape').val(%cursor_shape%);
-	$('#theme').val(%theme%);
-
-    $('#uart_baud').val(%uart_baud%);
-    $('#uart_parity').val(%uart_parity%);
-    $('#uart_stopbits').val(%uart_stopbits%);
-
   function showColor() {
     var ex = qs('.color-example');
     var fg = $('#default_fg').val();
@@ -314,12 +309,23 @@
       bg = 'black';
     }
 
+    var themeN = +$('#theme').val();
     ex.dataset.fg = fg;
     ex.dataset.bg = bg;
 
-		themes.themePreview(+$('#theme').val())
+    themes.themePreview(themeN);
+
+    $('.colorprev.fg span').css('background', themes.toCss(bg, themeN));
   }
-	showColor();
+
+  $.ready(function () {
+    $('#cursor_shape').val('%cursor_shape%');
+    $('#theme').val('%theme%');
+    $('#uart_baud').val('%uart_baud%');
+    $('#uart_parity').val('%uart_parity%');
+    $('#uart_stopbits').val('%uart_stopbits%');
+
+    $('#theme').on('change', showColor);
 
     $('#default_fg').on('input', showColor)
     $('#default_bg').on('input', showColor)
@@ -357,4 +363,20 @@
       $('#default_bg').val(this.dataset.xbg)
       showColor()
     });
+
+    showColor();
+  })
+
+  function nextTheme() {
+    var sel = qs('#theme');
+    var i = sel.selectedIndex;
+    sel.options[++i % sel.options.length].selected = true;
+    showColor();
+  }
+  function prevTheme() {
+    var sel = qs('#theme');
+    var i = sel.selectedIndex;
+    sel.options[(sel.options.length+(--i)) % sel.options.length].selected = true;
+    showColor();
+  }
 </script>

sass/pages/_term.scss

@@ -381,3 +381,23 @@ body.pseudo-fullscreen {
 	display: inline-block;
 	padding: 5px;
 }
+
+.theme-nav-btn {
+	width: 2em;
+	height: 2em;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	background: #4c4c4c;
+	color: #eaeaea;
+	margin: 5px;
+	border-radius: 5px;
+
+	@include noselect();
+
+	cursor: pointer;
+	position: relative;
+	&:active {
+		top: 1px;
+	}
+}