forked from cybrespace/pinafore
improve keyboard latency in compose box
This commit is contained in:
parent
136ec67d61
commit
624020dd01
|
@ -1,5 +1,5 @@
|
|||
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}"
|
||||
style="transform: scaleX({{lengthAsFractionRoundedAfterRaf || 0}});"
|
||||
style="transform: scaleX({{lengthAsFractionDeferred || 0}});"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<style>
|
||||
|
@ -21,27 +21,27 @@
|
|||
import { CHAR_LIMIT } from '../../_static/statuses'
|
||||
import { mark, stop } from '../../_utils/marks'
|
||||
import { store } from '../../_store/store'
|
||||
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
this.set({lengthAsFractionDeferred: this.get('lengthAsFraction')})
|
||||
// perf improvement for keyboard input latency
|
||||
this.observe('lengthAsFractionRounded', lengthAsFractionRounded => {
|
||||
requestAnimationFrame(() => {
|
||||
mark('set lengthAsFractionRoundedAfterRaf')
|
||||
this.set({lengthAsFractionRoundedAfterRaf: lengthAsFractionRounded})
|
||||
stop('set lengthAsFractionRoundedAfterRaf')
|
||||
this.observe('lengthAsFraction', () => {
|
||||
scheduleIdleTask(() => {
|
||||
mark('set lengthAsFractionDeferred')
|
||||
this.set({lengthAsFractionDeferred: this.get('lengthAsFraction')})
|
||||
stop('set lengthAsFractionDeferred')
|
||||
requestAnimationFrame(() => this.set({shouldAnimate: true}))
|
||||
})
|
||||
})
|
||||
}, {init: false})
|
||||
},
|
||||
store: () => store,
|
||||
computed: {
|
||||
lengthAsFraction: (length) => Math.min(CHAR_LIMIT, length) / CHAR_LIMIT,
|
||||
lengthAsFractionRounded: (lengthAsFraction) => {
|
||||
lengthAsFraction: (length) => {
|
||||
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
|
||||
let int = Math.round(lengthAsFraction * 100)
|
||||
int -= (int % 2)
|
||||
return int / 100
|
||||
let int = Math.round(Math.min(CHAR_LIMIT, length) / CHAR_LIMIT * 100)
|
||||
return (int - (int % 2)) / 100
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
|
||||
aria-label="{{lengthLabel}}">
|
||||
{{lengthToDisplayAfterRaf || '0'}}
|
||||
{{lengthToDisplayDeferred || '0'}}
|
||||
</span>
|
||||
<style>
|
||||
.compose-box-length {
|
||||
|
@ -19,26 +19,28 @@
|
|||
import { CHAR_LIMIT } from '../../_static/statuses'
|
||||
import { mark, stop } from '../../_utils/marks'
|
||||
import { store } from '../../_store/store'
|
||||
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
this.set({lengthToDisplayDeferred: this.get('lengthToDisplay')})
|
||||
// perf improvement for keyboard input latency
|
||||
this.observe('lengthToDisplay', lengthToDisplay => {
|
||||
requestAnimationFrame(() => {
|
||||
mark('set lengthToDisplayAfterRaf')
|
||||
this.set({lengthToDisplayAfterRaf: lengthToDisplay})
|
||||
stop('set lengthToDisplayAfterRaf')
|
||||
this.observe('lengthToDisplay', () => {
|
||||
scheduleIdleTask(() => {
|
||||
mark('set lengthToDisplayDeferred')
|
||||
this.set({lengthToDisplayDeferred: this.get('lengthToDisplay')})
|
||||
stop('set lengthToDisplayDeferred')
|
||||
})
|
||||
})
|
||||
}, {init: false})
|
||||
},
|
||||
store: () => store,
|
||||
computed: {
|
||||
lengthToDisplay: (length) => CHAR_LIMIT - length,
|
||||
lengthLabel: (overLimit, lengthToDisplay) => {
|
||||
lengthLabel: (overLimit, lengthToDisplayDeferred) => {
|
||||
if (overLimit) {
|
||||
return `${lengthToDisplay} characters over limit`
|
||||
return `${lengthToDisplayDeferred} characters over limit`
|
||||
} else {
|
||||
return `${lengthToDisplay} characters remaining`
|
||||
return `${lengthToDisplayDeferred} characters remaining`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue