aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPřemysl Eric Janouch <p@janouch.name>2022-09-23 08:57:10 +0200
committerPřemysl Eric Janouch <p@janouch.name>2022-09-23 09:41:29 +0200
commitef3d1cc409c6d3ea6db48623f2c0004c9c52d716 (patch)
tree96d18f867d2c0c1298bc60b903f94d2d472433f7
parente6bf88673f31e62050333f98d6bcd407ac34c13d (diff)
downloadxK-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.
-rw-r--r--xP/public/xP.css6
-rw-r--r--xP/public/xP.js30
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'),
])