63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
import { DEFAULT_FONT_SIZE, MIN_FONT_SIZE, MAX_FONT_SIZE, FONT_SIZE_KEY, readFontSize, saveFontSize } from './terminal-preferences.js';
|
||
|
||
const toolbar = document.createElement('header');
|
||
toolbar.className = 'terminal-settings';
|
||
toolbar.innerHTML = `
|
||
<a href="/">← 看板</a>
|
||
<label for="terminalFontSize">字号</label>
|
||
<button id="smallerFont" type="button" aria-label="减小终端字号">A−</button>
|
||
<select id="terminalFontSize" aria-label="终端字号"></select>
|
||
<button id="largerFont" type="button" aria-label="增大终端字号">A+</button>
|
||
<button id="resetFont" type="button">重置</button>
|
||
<span id="fontSizeStatus" role="status">保存在当前浏览器</span>`;
|
||
document.body.prepend(toolbar);
|
||
|
||
const select = toolbar.querySelector('#terminalFontSize');
|
||
const smaller = toolbar.querySelector('#smallerFont');
|
||
const larger = toolbar.querySelector('#largerFont');
|
||
const status = toolbar.querySelector('#fontSizeStatus');
|
||
for (let size = MIN_FONT_SIZE; size <= MAX_FONT_SIZE; size++) {
|
||
select.add(new Option(`${size} px`, String(size)));
|
||
}
|
||
let fontSize = readFontSize();
|
||
let fittedTerminal;
|
||
|
||
function updateControls() {
|
||
select.value = String(fontSize);
|
||
smaller.disabled = fontSize <= MIN_FONT_SIZE;
|
||
larger.disabled = fontSize >= MAX_FONT_SIZE;
|
||
}
|
||
|
||
function applyFontSize() {
|
||
const term = window.term;
|
||
if (!term) return;
|
||
if (term.options.fontSize !== fontSize || fittedTerminal !== term) {
|
||
term.options.fontSize = fontSize;
|
||
term.fit();
|
||
fittedTerminal = term;
|
||
}
|
||
}
|
||
|
||
function changeFontSize(size) {
|
||
fontSize = size;
|
||
status.textContent = saveFontSize(size) ? '已保存到当前浏览器' : '无法保存设置，仅当前页面生效';
|
||
updateControls();
|
||
applyFontSize();
|
||
window.term?.focus();
|
||
}
|
||
|
||
select.addEventListener('change', () => changeFontSize(Number(select.value)));
|
||
smaller.addEventListener('click', () => changeFontSize(Math.max(MIN_FONT_SIZE, fontSize - 1)));
|
||
larger.addEventListener('click', () => changeFontSize(Math.min(MAX_FONT_SIZE, fontSize + 1)));
|
||
toolbar.querySelector('#resetFont').addEventListener('click', () => changeFontSize(DEFAULT_FONT_SIZE));
|
||
window.addEventListener('storage', (event) => {
|
||
if (event.key !== FONT_SIZE_KEY && event.key !== null) return;
|
||
fontSize = readFontSize();
|
||
updateControls();
|
||
applyFontSize();
|
||
});
|
||
updateControls();
|
||
applyFontSize();
|
||
// ttyd applies server preferences again on connect/reconnect; restore this browser's choice.
|
||
setInterval(applyFontSize, 250);
|