espterm
/
espterm-front-end
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merge.jpg

Browse Source
box-drawing
cpsdqs 7 years ago
parent 5245917c88 46099bb749
commit a66e90e3eb
4 changed files with 133 additions and 91 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 14
      js/term/screen_parser.js
  2. 26
      js/term/themes.js
  3. 164
      pages/cfg_term.php
  4. 20
      sass/pages/_term.scss

14
js/term/screen_parser.js
Unescape View File

@ -86,12 +86,10 @@ module.exports = class ScreenParser {
const newHeight = du(strArray[ci++]) const newHeight = du(strArray[ci++])
const newWidth = du(strArray[ci++]) const newWidth = du(strArray[ci++])
const theme = du(strArray[ci++]) const theme = du(strArray[ci++])
const defFg = du(strArray[ci++]) | (du(strArray[ci++]) << 12) const defFg = (du(strArray[ci++]) & 0xFFFF) | ((du(strArray[ci++]) & 0xFFFF) << 16)
const defBg = du(strArray[ci++]) | (du(strArray[ci++]) << 12) const defBg = (du(strArray[ci++]) & 0xFFFF) | ((du(strArray[ci++]) & 0xFFFF) << 16)
const attributes = du(strArray[ci++]) const attributes = du(strArray[ci++])
console.log(`set colors ${defFg}, ${defBg}, theme ${theme}`)
// theming // theming
this.screen.renderer.loadTheme(theme) this.screen.renderer.loadTheme(theme)
this.screen.renderer.setDefaultColors(defFg, defBg) this.screen.renderer.setDefaultColors(defFg, defBg)
@ -323,8 +321,8 @@ module.exports = class ScreenParser {
case SEQ_SET_FG: case SEQ_SET_FG:
data = du(strArray[ci++]) data = du(strArray[ci++])
if (data & 0x10000) { if (data & 0x10000) {
data ^= 0x10000 data &= 0xFFF
data |= du(strArray[ci++]) << 12 data |= (du(strArray[ci++]) & 0xFFF) << 12
data += 256 data += 256
} }
fg = data fg = data
@ -333,8 +331,8 @@ module.exports = class ScreenParser {
case SEQ_SET_BG: case SEQ_SET_BG:
data = du(strArray[ci++]) data = du(strArray[ci++])
if (data & 0x10000) { if (data & 0x10000) {
data ^= 0x10000 data &= 0xFFF
data |= du(strArray[ci++]) << 12 data |= (du(strArray[ci++]) & 0xFFF) << 12
data += 256 data += 256
} }
bg = data bg = data

26
js/term/themes.js
Unescape View File

@ -98,24 +98,26 @@ exports.buildColorTable = function () {
exports.SELECTION_FG = '#333' exports.SELECTION_FG = '#333'
exports.SELECTION_BG = '#b2d7fe' 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) => { document.querySelectorAll('[data-fg]').forEach((elem) => {
let shade = elem.dataset.fg 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 elem.style.color = shade
}) })
document.querySelectorAll('[data-bg]').forEach((elem) => { document.querySelectorAll('[data-bg]').forEach((elem) => {
let shade = elem.dataset.bg 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 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
}

164
pages/cfg_term.php
Unescape View File

@ -12,7 +12,7 @@
<div class="Row"> <div class="Row">
<label for="theme"><?= tr("term.theme") ?></label> <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="0">Tango</option>
<option value="1">Linux (CGA)</option> <option value="1">Linux (CGA)</option>
<option value="2">XTerm</option> <option value="2">XTerm</option>
@ -26,6 +26,8 @@
<option value="8">Apple II</option> <option value="8">Apple II</option>
<option value="9">Commodore</option> <option value="9">Commodore</option>
</select> </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>
<div class="Row color-preview"> <div class="Row color-preview">
@ -59,25 +61,25 @@
<label><?= tr("term.color_fg_prev") ?></label> <label><?= tr("term.color_fg_prev") ?></label>
<div> <div>
<div class="colorprev fg"> <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>
<div class="colorprev fg"> <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> </div>
</div> </div>
@ -292,69 +294,89 @@
</form> </form>
<script> <script>
$('#cursor_shape').val(%cursor_shape%); function showColor() {
$('#theme').val(%theme%); var ex = qs('.color-example');
var fg = $('#default_fg').val();
$('#uart_baud').val(%uart_baud%); var bg = $('#default_bg').val();
$('#uart_parity').val(%uart_parity%);
$('#uart_stopbits').val(%uart_stopbits%); if (/^\d+$/.test(fg)) fg = +fg;
else if (!/^#[\da-f]{6}$/i.test(fg)) {
function showColor() { fg = 'black';
var ex = qs('.color-example'); }
var fg = $('#default_fg').val();
var bg = $('#default_bg').val(); if (/^\d+$/.test(bg)) bg = +bg;
else if (!/^#[\da-f]{6}$/i.test(bg)) {
if (/^\d+$/.test(fg)) fg = +fg; bg = 'black';
else if (!/^#[\da-f]{6}$/i.test(fg)) { }
fg = 'black';
} var themeN = +$('#theme').val();
ex.dataset.fg = fg;
if (/^\d+$/.test(bg)) bg = +bg; ex.dataset.bg = bg;
else if (!/^#[\da-f]{6}$/i.test(bg)) {
bg = 'black'; themes.themePreview(themeN);
}
$('.colorprev.fg span').css('background', themes.toCss(bg, themeN));
ex.dataset.fg = fg; }
ex.dataset.bg = bg;
$.ready(function () {
themes.themePreview(+$('#theme').val()) $('#cursor_shape').val('%cursor_shape%');
} $('#theme').val('%theme%');
showColor(); $('#uart_baud').val('%uart_baud%');
$('#uart_parity').val('%uart_parity%');
$('#default_fg').on('input', showColor) $('#uart_stopbits').val('%uart_stopbits%');
$('#default_bg').on('input', showColor)
$('#theme').on('change', showColor);
$('.colorprev.bg span').on('click', function() {
var bg = this.dataset.bg; $('#default_fg').on('input', showColor)
if (typeof bg != 'undefined') $('#default_bg').val(bg); $('#default_bg').on('input', showColor)
showColor()
}); $('.colorprev.bg span').on('click', function () {
var bg = this.dataset.bg;
$('.colorprev.fg span').on('click', function() { if (typeof bg != 'undefined') $('#default_bg').val(bg);
var fg = this.dataset.fg; showColor()
if (typeof fg != 'undefined') $('#default_fg').val(fg); });
showColor()
}); $('.colorprev.fg span').on('click', function () {
var fg = this.dataset.fg;
var $presets = $('#fgbg_presets'); if (typeof fg != 'undefined') $('#default_fg').val(fg);
for(var i = 0; i < themes.fgbgThemes.length; i++) { showColor()
var thm = themes.fgbgThemes[i]; });
var fg = thm[0];
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 bg = thm[1];
var lbl = thm[2]; var lbl = thm[2];
var tit = thm[3]; var tit = thm[3];
$presets $presets
.htmlAppend( .htmlAppend(
'<span class="preset" ' + '<span class="preset" ' +
'data-xfg="'+fg+'" data-xbg="'+bg+'" ' + 'data-xfg="' + fg + '" data-xbg="' + bg + '" ' +
'style="color:'+fg+';background:'+bg+'" title="'+tit+'">&nbsp;'+lbl+'&nbsp;</span>'); '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_fg').val(this.dataset.xfg)
$('#default_bg').val(this.dataset.xbg) $('#default_bg').val(this.dataset.xbg)
showColor() 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> </script>

20
sass/pages/_term.scss
Unescape View File

@ -381,3 +381,23 @@ body.pseudo-fullscreen {
display: inline-block; display: inline-block;
padding: 5px; 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;
}
}

Write Preview
Loading…
Cancel
Save