pinafore/routes/_components/compose/ComposeLengthGauge.html

57 lines
1.8 KiB
HTML
Raw Normal View History

<div class="compose-box-length-gauge {shouldAnimate ? 'should-animate' : ''} {overLimit ? 'over-char-limit' : ''}"
style="transform: scaleX({lengthAsFractionDeferred});"
2018-02-27 05:50:03 +00:00
aria-hidden="true"
></div>
<style>
.compose-box-length-gauge {
grid-area: gauge;
margin: 0 0 5px 5px;
height: 2px;
background: var(--main-theme-color);
transform-origin: left;
}
.compose-box-length-gauge.should-animate {
transition: transform 0.2s linear;
}
.compose-box-length-gauge.over-char-limit {
background: var(--warning-color);
}
</style>
<script>
import { mark, stop } from '../../_utils/marks'
2018-02-27 06:22:56 +00:00
import { store } from '../../_store/store'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { observe } from 'svelte-extras'
2018-02-27 05:50:03 +00:00
export default {
2018-04-20 04:38:01 +00:00
oncreate () {
let { lengthAsFraction } = this.get()
this.set({ lengthAsFractionDeferred: lengthAsFraction })
2018-02-27 06:22:56 +00:00
// perf improvement for keyboard input latency
this.observe('lengthAsFraction', () => {
scheduleIdleTask(() => {
mark('set lengthAsFractionDeferred')
let { lengthAsFraction } = this.get()
this.set({ lengthAsFractionDeferred: lengthAsFraction })
stop('set lengthAsFractionDeferred')
requestAnimationFrame(() => this.set({ shouldAnimate: true }))
2018-02-27 05:50:03 +00:00
})
}, { init: false })
2018-02-27 05:50:03 +00:00
},
data: () => ({
shouldAnimate: false,
lengthAsFractionDeferred: 0
}),
2018-02-27 06:22:56 +00:00
store: () => store,
2018-02-27 05:50:03 +00:00
computed: {
lengthAsFraction: ({ length, $maxStatusChars }) => {
2018-02-27 05:50:03 +00:00
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
let int = Math.round(Math.min($maxStatusChars, length) / $maxStatusChars * 100)
return (int - (int % 2)) / 100
2018-02-27 05:50:03 +00:00
}
},
methods: {
observe
2018-02-27 05:50:03 +00:00
}
}
2018-02-27 05:50:03 +00:00
</script>