2018-05-02 01:05:36 +01:00
|
|
|
<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'
|
2018-03-13 03:18:34 +00:00
|
|
|
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
2018-04-30 16:29:04 +01:00
|
|
|
import { observe } from 'svelte-extras'
|
2018-02-27 05:50:03 +00:00
|
|
|
|
|
|
|
export default {
|
2018-04-20 05:38:01 +01:00
|
|
|
oncreate () {
|
2018-04-19 17:37:05 +01:00
|
|
|
let { lengthAsFraction } = this.get()
|
2018-08-30 05:42:57 +01:00
|
|
|
this.set({ lengthAsFractionDeferred: lengthAsFraction })
|
2018-02-27 06:22:56 +00:00
|
|
|
// perf improvement for keyboard input latency
|
2018-03-13 03:18:34 +00:00
|
|
|
this.observe('lengthAsFraction', () => {
|
|
|
|
scheduleIdleTask(() => {
|
|
|
|
mark('set lengthAsFractionDeferred')
|
2018-05-05 04:09:20 +01:00
|
|
|
let { lengthAsFraction } = this.get()
|
2018-08-30 05:42:57 +01:00
|
|
|
this.set({ lengthAsFractionDeferred: lengthAsFraction })
|
2018-03-13 03:18:34 +00:00
|
|
|
stop('set lengthAsFractionDeferred')
|
2018-08-30 05:42:57 +01:00
|
|
|
requestAnimationFrame(() => this.set({ shouldAnimate: true }))
|
2018-02-27 05:50:03 +00:00
|
|
|
})
|
2018-08-30 05:42:57 +01:00
|
|
|
}, { init: false })
|
2018-02-27 05:50:03 +00:00
|
|
|
},
|
2018-04-30 06:13:41 +01: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: {
|
2018-08-26 20:14:16 +01:00
|
|
|
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
|
2018-08-26 20:14:16 +01:00
|
|
|
let int = Math.round(Math.min($maxStatusChars, length) / $maxStatusChars * 100)
|
2018-03-13 03:18:34 +00:00
|
|
|
return (int - (int % 2)) / 100
|
2018-02-27 05:50:03 +00:00
|
|
|
}
|
2018-04-30 16:29:04 +01:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
observe
|
2018-02-27 05:50:03 +00:00
|
|
|
}
|
2018-04-30 06:13:41 +01:00
|
|
|
}
|
2018-02-27 05:50:03 +00:00
|
|
|
</script>
|