data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

add animations for gauge

Browse source
This commit is contained in:
Nolan Lawson 2018-02-25 23:16:55 -08:00
parent cef354d412
commit 3d921f3bfe
1 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
routes/_components/compose/LiteComposeBox.html
View file

@ -13,8 +13,8 @@
ref:textarea ref:textarea
bind:value=inputText bind:value=inputText
></textarea> ></textarea>
<div class="compose-profile-length-gauge" <div class="compose-profile-length-gauge {{shouldAnimate ? 'should-animate' : ''}}"
style="transform: scaleX({{inputLengthAsFractionOfMaxAfterRaf || 0}});" style="transform: scaleX({{inputLengthAsFractionOfMaxRoundedAfterRaf || 0}});"
aria-hidden="true" aria-hidden="true"
></div> ></div>
<span class="compose-profile-length" <span class="compose-profile-length"
@ -110,6 +110,9 @@
margin-left: 5px; margin-left: 5px;
transform-origin: left; transform-origin: left;
} }
.compose-profile-length-gauge.should-animate {
transition: transform 0.2s linear;
}
.compose-profile-length { .compose-profile-length {
grid-area: length; grid-area: length;
@ -177,11 +180,12 @@
stop('set inputLengthToDisplayAfterRaf') stop('set inputLengthToDisplayAfterRaf')
}) })
}) })
this.observe('inputLengthAsFractionOfMax', inputLengthAsFractionOfMax => { this.observe('inputLengthAsFractionOfMaxRounded', inputLengthAsFractionOfMaxRounded => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
mark('set inputLengthAsFractionOfMaxAfterRaf') mark('set inputLengthAsFractionOfMaxRoundedAfterRaf')
this.set({inputLengthAsFractionOfMaxAfterRaf: inputLengthAsFractionOfMax}) this.set({inputLengthAsFractionOfMaxRoundedAfterRaf: inputLengthAsFractionOfMaxRounded})
stop('set inputLengthAsFractionOfMaxAfterRaf') stop('set inputLengthAsFractionOfMaxRoundedAfterRaf')
requestAnimationFrame(() => this.set({shouldAnimate: true}))
}) })
}) })
}, },
@ -201,7 +205,13 @@
currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose, currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose,
inputLength: (inputText) => inputText ? inputText.length : 0, inputLength: (inputText) => inputText ? inputText.length : 0,
inputLengthToDisplay: (inputLength) => (inputLength <= CHAR_LIMIT ? inputLength : CHAR_LIMIT - inputLength), inputLengthToDisplay: (inputLength) => (inputLength <= CHAR_LIMIT ? inputLength : CHAR_LIMIT - inputLength),
inputLengthAsFractionOfMax: (inputLength) => Math.round(100 * (Math.min(CHAR_LIMIT, inputLength)) / CHAR_LIMIT) / 100, inputLengthAsFractionOfMax: (inputLength) => (Math.min(CHAR_LIMIT, inputLength) / CHAR_LIMIT),
inputLengthAsFractionOfMaxRounded: (inputLengthAsFractionOfMax) => {
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
let int = Math.round(inputLengthAsFractionOfMax * 100)
int -= (int % 2)
return int / 100
},
overLimit: (inputLength) => inputLength > CHAR_LIMIT, overLimit: (inputLength) => inputLength > CHAR_LIMIT,
inputLengthLabel: (overLimit, inputLengthToDisplay) => { inputLengthLabel: (overLimit, inputLengthToDisplay) => {
if (overLimit) { if (overLimit) {