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) {
-  shade = +shade
-  if (shade < 16) shade = themes[themeN][shade]
-  else {
-    shade = exports.buildColorTable()[shade]
-  }
-  return shade
-}
-
-exports.themePreview = function (n) {
+exports.themePreview = function (themeN) {
   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=1 data-bg=0>1</span><!--
-				--><span data-fg=2 data-bg=0>2</span><!--
-				--><span data-fg=3 data-bg=0>3</span><!--
-				--><span data-fg=4 data-bg=0>4</span><!--
-				--><span data-fg=5 data-bg=0>5</span><!--
-				--><span data-fg=6 data-bg=0>6</span><!--
-				--><span data-fg=7 data-bg=0>7</span>
+				<span data-fg=0>0</span><!--
+				--><span data-fg=1>1</span><!--
+				--><span data-fg=2>2</span><!--
+				--><span data-fg=3>3</span><!--
+				--><span data-fg=4>4</span><!--
+				--><span data-fg=5>5</span><!--
+				--><span data-fg=6>6</span><!--
+				--><span data-fg=7>7</span>
 			</div>
 
 			<div class="colorprev fg">
-				<span data-fg=8 data-bg=0>8</span><!--
-				--><span data-fg=9 data-bg=0>9</span><!--
-				--><span data-fg=10 data-bg=0>10</span><!--
-				--><span data-fg=11 data-bg=0>11</span><!--
-				--><span data-fg=12 data-bg=0>12</span><!--
-				--><span data-fg=13 data-bg=0>13</span><!--
-				--><span data-fg=14 data-bg=0>14</span><!--
-				--><span data-fg=15 data-bg=0>15</span>
+				<span data-fg=8>8</span><!--
+				--><span data-fg=9>9</span><!--
+				--><span data-fg=10>10</span><!--
+				--><span data-fg=11>11</span><!--
+				--><span data-fg=12>12</span><!--
+				--><span data-fg=13>13</span><!--
+				--><span data-fg=14>14</span><!--
+				--><span data-fg=15>15</span>
 			</div>
 		</div>
 	</div>
@@ -292,69 +294,89 @@
 </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();
-		var bg = $('#default_bg').val();
-
-		if (/^\d+$/.test(fg)) fg = +fg;
-		else if (!/^#[\da-f]{6}$/i.test(fg)) {
-		  fg = 'black';
-		}
-
-		if (/^\d+$/.test(bg)) bg = +bg;
-		else if (!/^#[\da-f]{6}$/i.test(bg)) {
-		  bg = 'black';
-		}
-
-		ex.dataset.fg = fg;
-		ex.dataset.bg = bg;
-
-		themes.themePreview(+$('#theme').val())
-	}
-	showColor();
-
-	$('#default_fg').on('input', showColor)
-	$('#default_bg').on('input', showColor)
-
-	$('.colorprev.bg span').on('click', function() {
-		var bg = this.dataset.bg;
-		if (typeof bg != 'undefined') $('#default_bg').val(bg);
-		showColor()
-	});
-
-	$('.colorprev.fg span').on('click', function() {
-		var fg = this.dataset.fg;
-		if (typeof fg != 'undefined') $('#default_fg').val(fg);
-		showColor()
-	});
-
-	var $presets = $('#fgbg_presets');
-	for(var i = 0; i < themes.fgbgThemes.length; i++) {
-	  var thm = themes.fgbgThemes[i];
-	  var fg = thm[0];
+  function showColor() {
+    var ex = qs('.color-example');
+    var fg = $('#default_fg').val();
+    var bg = $('#default_bg').val();
+
+    if (/^\d+$/.test(fg)) fg = +fg;
+    else if (!/^#[\da-f]{6}$/i.test(fg)) {
+      fg = 'black';
+    }
+
+    if (/^\d+$/.test(bg)) bg = +bg;
+    else if (!/^#[\da-f]{6}$/i.test(bg)) {
+      bg = 'black';
+    }
+
+    var themeN = +$('#theme').val();
+    ex.dataset.fg = fg;
+    ex.dataset.bg = bg;
+
+    themes.themePreview(themeN);
+
+    $('.colorprev.fg span').css('background', themes.toCss(bg, themeN));
+  }
+
+  $.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)
+
+    $('.colorprev.bg span').on('click', function () {
+      var bg = this.dataset.bg;
+      if (typeof bg != 'undefined') $('#default_bg').val(bg);
+      showColor()
+    });
+
+    $('.colorprev.fg span').on('click', function () {
+      var fg = this.dataset.fg;
+      if (typeof fg != 'undefined') $('#default_fg').val(fg);
+      showColor()
+    });
+
+    var $presets = $('#fgbg_presets');
+    for (var i = 0; i < themes.fgbgThemes.length; i++) {
+      var thm = themes.fgbgThemes[i];
+      var fg = thm[0];
       var bg = thm[1];
       var lbl = thm[2];
       var tit = thm[3];
       $presets
         .htmlAppend(
           '<span class="preset" ' +
-          'data-xfg="'+fg+'" data-xbg="'+bg+'" ' +
-          'style="color:'+fg+';background:'+bg+'" title="'+tit+'">&nbsp;'+lbl+'&nbsp;</span>');
+          'data-xfg="' + fg + '" data-xbg="' + bg + '" ' +
+          'style="color:' + fg + ';background:' + bg + '" title="' + tit + '">&nbsp;' + lbl + '&nbsp;</span>');
 
-	  if ((i+1)%5==0) $presets.htmlAppend('<br>');
-	}
+      if ((i + 1) % 5 == 0) $presets.htmlAppend('<br>');
+    }
 
-	$('.preset').on('click', function() {
+    $('.preset').on('click', function () {
       $('#default_fg').val(this.dataset.xfg)
       $('#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;
+	}
+}