pinafore/routes/_components/compose/ComposeLengthIndicator.html

48 lines
1.4 KiB
HTML
Raw Normal View History

2018-02-28 06:01:01 +01:00
<span class="compose-box-length {{$rawComposeTextOverLimit ? 'over-char-limit' : ''}}"
2018-02-27 06:50:03 +01:00
aria-label="{{inputLengthLabel}}">
{{inputLengthToDisplayAfterRaf || '0'}}
</span>
<style>
.compose-box-length {
grid-area: length;
justify-self: right;
color: var(--main-theme-color);
font-size: 1.3em;
align-self: center;
}
.compose-box-length.over-char-limit {
color: var(--warning-color);
}
</style>
<script>
import { CHAR_LIMIT } from '../../_static/statuses'
import { mark, stop } from '../../_utils/marks'
2018-02-27 07:22:56 +01:00
import { store } from '../../_store/store'
2018-02-27 06:50:03 +01:00
export default {
oncreate() {
2018-02-27 07:22:56 +01:00
// perf improvement for keyboard input latency
2018-02-27 06:50:03 +01:00
this.observe('inputLengthToDisplay', inputLengthToDisplay => {
requestAnimationFrame(() => {
mark('set inputLengthToDisplayAfterRaf')
this.set({inputLengthToDisplayAfterRaf: inputLengthToDisplay})
stop('set inputLengthToDisplayAfterRaf')
})
})
},
2018-02-27 07:22:56 +01:00
store: () => store,
2018-02-27 06:50:03 +01:00
computed: {
2018-02-28 06:01:01 +01:00
inputLengthToDisplay: ($rawComposeTextLength) => {
2018-03-01 03:45:29 +01:00
return CHAR_LIMIT - $rawComposeTextLength
2018-02-27 07:22:56 +01:00
},
2018-02-28 06:01:01 +01:00
inputLengthLabel: ($rawComposeTextOverLimit, inputLengthToDisplay) => {
if ($rawComposeTextOverLimit) {
2018-02-27 06:50:03 +01:00
return `${inputLengthToDisplay} characters over limit`
} else {
2018-03-01 03:45:29 +01:00
return `${inputLengthToDisplay} characters remaining`
2018-02-27 06:50:03 +01:00
}
}
}
}
</script>