pinafore/routes/_components/compose/ComposeLengthGauge.html

48 lines
1.6 KiB
HTML
Raw Normal View History

2018-03-04 01:12:48 +01:00
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}"
2018-03-12 18:06:41 +01:00
style="transform: scaleX({{lengthAsFractionRoundedAfterRaf || 0}});"
2018-02-27 06:50:03 +01: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 { 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-03-12 18:06:41 +01:00
this.observe('lengthAsFractionRounded', lengthAsFractionRounded => {
2018-02-27 06:50:03 +01:00
requestAnimationFrame(() => {
2018-03-12 18:06:41 +01:00
mark('set lengthAsFractionRoundedAfterRaf')
this.set({lengthAsFractionRoundedAfterRaf: lengthAsFractionRounded})
stop('set lengthAsFractionRoundedAfterRaf')
2018-02-27 06:50:03 +01:00
requestAnimationFrame(() => this.set({shouldAnimate: true}))
})
})
},
2018-02-27 07:22:56 +01:00
store: () => store,
2018-02-27 06:50:03 +01:00
computed: {
2018-03-04 01:12:48 +01:00
lengthAsFraction: (length) => Math.min(CHAR_LIMIT, length) / CHAR_LIMIT,
2018-03-03 23:51:48 +01:00
lengthAsFractionRounded: (lengthAsFraction) => {
2018-02-27 06:50:03 +01:00
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
2018-03-03 23:51:48 +01:00
let int = Math.round(lengthAsFraction * 100)
2018-02-27 06:50:03 +01:00
int -= (int % 2)
return int / 100
}
}
}
</script>