xP: add formatting buttons

And fix autoscroll autoenabler, as well as toolbar padding.

Only add the basic toggles, which should be well supported.
This commit is contained in:
Přemysl Eric Janouch 2022-09-23 08:57:10 +02:00
parent e6bf88673f
commit ef3d1cc409
Signed by: p
GPG Key ID: A0420B94F92B9493
2 changed files with 33 additions and 3 deletions

View File

@ -69,12 +69,16 @@ body {
.toolbar { .toolbar {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
column-gap: .3em; margin-right: -.3em;
}
.indicator {
margin: 0 .3em;
} }
button { button {
font: inherit; font: inherit;
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0 .3em;
} }
button:focus { button:focus {
border: 1px dashed #000; border: 1px dashed #000;

View File

@ -631,7 +631,7 @@ let Buffer = {
return m('.buffer', {onscroll: event => { return m('.buffer', {onscroll: event => {
const dom = event.target const dom = event.target
bufferAutoscroll = bufferAutoscroll =
dom.scrollTop + dom.clientHeight + 0.5 >= dom.scrollHeight dom.scrollTop + dom.clientHeight + 1 >= dom.scrollHeight
}}, lines) }}, lines)
}, },
} }
@ -687,9 +687,35 @@ let BufferContainer = {
} }
let Toolbar = { 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 => { view: vnode => {
let indicator = undefined
if (bufferLog === undefined && !bufferAutoscroll)
indicator = m('.indicator', {}, '⇩')
return m('.toolbar', {}, [ 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()}, m('button', {onclick: event => bufferToggleLog()},
bufferLog === undefined ? 'Log' : 'Hide log'), bufferLog === undefined ? 'Log' : 'Hide log'),
]) ])