diff options
| author | Přemysl Eric Janouch <p@janouch.name> | 2022-09-23 08:57:10 +0200 |
|---|---|---|
| committer | Přemysl Eric Janouch <p@janouch.name> | 2022-09-23 09:41:29 +0200 |
| commit | ef3d1cc409c6d3ea6db48623f2c0004c9c52d716 (patch) | |
| tree | 96d18f867d2c0c1298bc60b903f94d2d472433f7 /xP | |
| parent | e6bf88673f31e62050333f98d6bcd407ac34c13d (diff) | |
| download | xK-ef3d1cc409c6d3ea6db48623f2c0004c9c52d716.tar.gz xK-ef3d1cc409c6d3ea6db48623f2c0004c9c52d716.tar.xz xK-ef3d1cc409c6d3ea6db48623f2c0004c9c52d716.zip | |
xP: add formatting buttons
And fix autoscroll autoenabler, as well as toolbar padding.
Only add the basic toggles, which should be well supported.
Diffstat (limited to 'xP')
| -rw-r--r-- | xP/public/xP.css | 6 | ||||
| -rw-r--r-- | xP/public/xP.js | 30 |
2 files changed, 33 insertions, 3 deletions
diff --git a/xP/public/xP.css b/xP/public/xP.css index 1f4dae8..676a7ca 100644 --- a/xP/public/xP.css +++ b/xP/public/xP.css @@ -69,12 +69,16 @@ body { .toolbar { display: flex; align-items: baseline; - column-gap: .3em; + margin-right: -.3em; +} +.indicator { + margin: 0 .3em; } button { font: inherit; background: transparent; border: 1px solid transparent; + padding: 0 .3em; } button:focus { border: 1px dashed #000; diff --git a/xP/public/xP.js b/xP/public/xP.js index 7bbf530..155a8f5 100644 --- a/xP/public/xP.js +++ b/xP/public/xP.js @@ -631,7 +631,7 @@ let Buffer = { return m('.buffer', {onscroll: event => { const dom = event.target bufferAutoscroll = - dom.scrollTop + dom.clientHeight + 0.5 >= dom.scrollHeight + dom.scrollTop + dom.clientHeight + 1 >= dom.scrollHeight }}, lines) }, } @@ -687,9 +687,35 @@ let BufferContainer = { } let Toolbar = { + insert: formatting => { + let textarea = document.getElementById('input') + if (textarea === null) + return + + const [start, end] = [textarea.selectionStart, textarea.selectionEnd] + if (start === end) { + textarea.setRangeText(formatting) + textarea.setSelectionRange( + start + formatting.length, end + formatting.length) + } else { + textarea.setRangeText( + formatting + textarea.value.substr(start, end) + formatting) + } + textarea.focus() + }, + view: vnode => { + let indicator = undefined + if (bufferLog === undefined && !bufferAutoscroll) + indicator = m('.indicator', {}, '⇩') return m('.toolbar', {}, [ - bufferLog === undefined && !bufferAutoscroll ? '⇩' : undefined, + indicator, + m('button', {onclick: event => Toolbar.insert('\u0002')}, + m('b', {}, 'B')), + m('button', {onclick: event => Toolbar.insert('\u001D')}, + m('i', {}, 'I')), + m('button', {onclick: event => Toolbar.insert('\u001F')}, + m('u', {}, 'U')), m('button', {onclick: event => bufferToggleLog()}, bufferLog === undefined ? 'Log' : 'Hide log'), ]) |