pinafore/routes/_components/compose/ComposeLengthIndicator.html

53 lines
1.6 KiB
HTML
Raw Normal View History

2018-03-04 00:12:48 +00:00
<span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
aria-label={{lengthLabel}}>
{{lengthToDisplayDeferred}}
2018-02-27 05:50:03 +00:00
</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 06:22:56 +00:00
import { store } from '../../_store/store'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
2018-02-27 05:50:03 +00:00
export default {
2018-04-20 04:38:01 +00:00
oncreate () {
let { lengthToDisplay } = this.get()
this.set({lengthToDisplayDeferred: lengthToDisplay})
2018-02-27 06:22:56 +00:00
// perf improvement for keyboard input latency
this.observe('lengthToDisplay', () => {
scheduleIdleTask(() => {
mark('set lengthToDisplayDeferred')
let { lengthToDisplay } = this.get() || {} // https://github.com/sveltejs/svelte/issues/1354
this.set({lengthToDisplayDeferred: lengthToDisplay})
stop('set lengthToDisplayDeferred')
2018-02-27 05:50:03 +00:00
})
}, {init: false})
2018-02-27 05:50:03 +00:00
},
data: () => ({
lengthToDisplayDeferred: 0
}),
2018-02-27 06:22:56 +00:00
store: () => store,
2018-02-27 05:50:03 +00:00
computed: {
2018-03-04 00:12:48 +00:00
lengthToDisplay: (length) => CHAR_LIMIT - length,
lengthLabel: (overLimit, lengthToDisplayDeferred) => {
2018-03-04 00:12:48 +00:00
if (overLimit) {
return `${lengthToDisplayDeferred} characters over limit`
2018-02-27 05:50:03 +00:00
} else {
return `${lengthToDisplayDeferred} characters remaining`
2018-02-27 05:50:03 +00:00
}
}
}
}
</script>