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

box-drawing
Ondřej Hruška 7 years ago
parent 61953f608e
commit 23fc105754
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 26
      js/term/themes.js
  2. 164
      pages/cfg_term.php
  3. 20
      sass/pages/_term.scss

@ -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
}

@ -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>

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

Loading…
Cancel
Save