46 lines
1.6 KiB
HTML
46 lines
1.6 KiB
HTML
|
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}"
|
||
|
|
style="transform: scaleX({{inputLengthAsFractionRoundedAfterRaf || 0}});"
|
||
|
|
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 { CHAR_LIMIT } from '../../_static/statuses'
|
||
|
|
import { mark, stop } from '../../_utils/marks'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
oncreate() {
|
||
|
|
this.observe('inputLengthAsFractionRounded', inputLengthAsFractionRounded => {
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
mark('set inputLengthAsFractionRoundedAfterRaf')
|
||
|
|
this.set({inputLengthAsFractionRoundedAfterRaf: inputLengthAsFractionRounded})
|
||
|
|
stop('set inputLengthAsFractionRoundedAfterRaf')
|
||
|
|
requestAnimationFrame(() => this.set({shouldAnimate: true}))
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
overLimit: (inputLength) => inputLength > CHAR_LIMIT,
|
||
|
|
inputLengthAsFraction: (inputLength) => (Math.min(CHAR_LIMIT, inputLength) / CHAR_LIMIT),
|
||
|
|
inputLengthAsFractionRounded: (inputLengthAsFraction) => {
|
||
|
|
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
|
||
|
|
let int = Math.round(inputLengthAsFraction * 100)
|
||
|
|
int -= (int % 2)
|
||
|
|
return int / 100
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|