Use left softkey to send a message
Earlier, we were using the centre softkey but this is a bit too easy to trigger by mistake. Now, we use the centre softkey for the more mundane but arguably equally important "Enter"...which doesn't actually work because we're using a single-line input and not a multi-line textarea, but we'll get to that sometime. Or, maybe the centre key can become something more funky such as... an emoji selector? Fixes #4
This commit is contained in:
parent
e5a9ea5905
commit
301b72b488
1 changed files with 72 additions and 26 deletions
|
@ -15,7 +15,8 @@
|
|||
|
||||
export let params = {}
|
||||
let title
|
||||
let centerSoftkeyLabel = ' '
|
||||
let centerSoftkeyLabel = 'Enter'
|
||||
let leftSoftkeyLabel = ' '
|
||||
let chatbox
|
||||
let messages
|
||||
let chatListEl
|
||||
|
@ -44,14 +45,13 @@
|
|||
}
|
||||
|
||||
softkeysStore.update((k) => {
|
||||
k.left.label = 'Back'
|
||||
k.left.callback = () => { push('/messages') }
|
||||
|
||||
k.center.label = 'Enter'
|
||||
k.center.callback = async () => {
|
||||
k.left.label = leftSoftkeyLabel
|
||||
k.left.callback = async () => {
|
||||
let el = document.querySelector('.compose-box input')
|
||||
if(document.activeElement == el) {
|
||||
// Send only if not blank
|
||||
|
||||
// Send message if textbox activated
|
||||
if (document.activeElement == el) {
|
||||
// Send only if not blank
|
||||
if (!!composeBox) {
|
||||
let messageText = composeBox
|
||||
composeBox = ''
|
||||
|
@ -65,10 +65,28 @@
|
|||
// update the message list
|
||||
messages = [...chatbox.messages]
|
||||
}
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
k.center.label = centerSoftkeyLabel
|
||||
k.center.callback = () => {
|
||||
|
||||
// Focus input if not already focused
|
||||
let el = document.querySelector('.compose-box input')
|
||||
if (document.activeElement != el) {
|
||||
// focus the input element
|
||||
el.focus()
|
||||
} else {
|
||||
|
||||
// Otherwise, we literally type an Enter
|
||||
if (!composeBox) composeBox = ''
|
||||
composeBox = composeBox + '\n'
|
||||
|
||||
// FIXME: compose box should be a textarea for
|
||||
// this to actually work.
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
k.right.label = 'Options'
|
||||
|
@ -93,13 +111,20 @@
|
|||
// scroll to last message, for convenience
|
||||
scrollToLatest()
|
||||
|
||||
centerSoftkeyLabel = 'Enter'
|
||||
|
||||
if (!!composeBox) {
|
||||
centerSoftkeyLabel = 'Send'
|
||||
leftSoftkeyLabel = 'Send'
|
||||
} else {
|
||||
centerSoftkeyLabel = ' '
|
||||
leftSoftkeyLabel = ' '
|
||||
}
|
||||
}
|
||||
|
||||
function onComposeBoxBlur() {
|
||||
centerSoftkeyLabel = 'Compose'
|
||||
leftSoftkeyLabel = ' '
|
||||
}
|
||||
|
||||
function updateCenterSoftkeyLabel() {
|
||||
softkeysStore.update((k) => {
|
||||
k.center.label = centerSoftkeyLabel
|
||||
|
@ -108,21 +133,36 @@
|
|||
})
|
||||
}
|
||||
|
||||
function updateComposeLabel() {
|
||||
// We're using 'Send' as a proxy for
|
||||
// checking if the box is focused
|
||||
if (!composeBox && centerSoftkeyLabel == 'Send') {
|
||||
centerSoftkeyLabel = ' ' // hack
|
||||
function updateLeftSoftkeyLabel() {
|
||||
softkeysStore.update((k) => {
|
||||
k.left.label = leftSoftkeyLabel
|
||||
|
||||
// We have to do this since reactivity
|
||||
// doesn't recurse
|
||||
updateCenterSoftkeyLabel()
|
||||
} else if (!!composeBox && centerSoftkeyLabel == ' ') {
|
||||
centerSoftkeyLabel = 'Send'
|
||||
return k
|
||||
})
|
||||
}
|
||||
|
||||
// We have to do this since reactivity
|
||||
// doesn't recurse
|
||||
updateCenterSoftkeyLabel()
|
||||
function onComposeBoxUpdate() {
|
||||
/*
|
||||
* We're assuming the compose box is focused here,
|
||||
* because how else did it get updated? If this is
|
||||
* problematic, we can add an `if` condition here
|
||||
* to check if it is indeed the active element.
|
||||
* Either way, it only updates the label, not the
|
||||
* action itself (which is admittedly more or
|
||||
* less confusing depending on how you look at it).
|
||||
*/
|
||||
|
||||
// Clear 'Send' button if empty
|
||||
if (leftSoftkeyLabel == 'Send' && !composeBox) {
|
||||
leftSoftkeyLabel = ' '
|
||||
|
||||
// We have to do this since reactivity doesn't recurse
|
||||
updateLeftSoftkeyLabel()
|
||||
} else if (leftSoftkeyLabel == ' ' && !!composeBox) {
|
||||
leftSoftkeyLabel = 'Send'
|
||||
|
||||
// Again, no recursion in reactivity
|
||||
updateLeftSoftkeyLabel()
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -132,9 +172,15 @@
|
|||
return k
|
||||
})
|
||||
|
||||
$: softkeysStore.update((k) => {
|
||||
k.left.label = leftSoftkeyLabel
|
||||
|
||||
return k
|
||||
})
|
||||
|
||||
$: {
|
||||
!composeBox // whenever this changes
|
||||
updateComposeLabel()
|
||||
onComposeBoxUpdate()
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
@ -173,7 +219,7 @@
|
|||
autofocus={true}
|
||||
label='Compose'
|
||||
on:focus={onComposeBoxFocus}
|
||||
on:blur={() => { centerSoftkeyLabel = 'Compose' }}
|
||||
on:blur={onComposeBoxBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in a new issue