Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor

This commit is contained in:
Nolan Lawson 2018-02-27 21:01:01 -08:00
parent 333ac62b61
commit 4ef576b7f1
8 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
routes/_actions/instances.js
View File

@ -23,7 +23,7 @@ export function switchToInstance (instanceName) {
currentInstance: instanceName, currentInstance: instanceName,
searchResults: null, searchResults: null,
queryInSearch: '', queryInSearch: '',
rawInputTextInCompose: '' rawComposeText: ''
}) })
store.save() store.save()
switchToTheme(instanceThemes[instanceName]) switchToTheme(instanceThemes[instanceName])
@ -47,7 +47,7 @@ export async function logOutOfInstance (instanceName) {
currentInstance: newInstance, currentInstance: newInstance,
searchResults: null, searchResults: null,
queryInSearch: '', queryInSearch: '',
rawInputTextInCompose: '' rawComposeText: ''
}) })
store.save() store.save()
toast.say(`Logged out of ${instanceName}`) toast.say(`Logged out of ${instanceName}`)

4
routes/_components/compose/ComposeButton.html
View File

@ -16,8 +16,8 @@
export default { export default {
store: () => store, store: () => store,
computed: { computed: {
disabled: ($rawInputTextInComposeOverLimit, $rawInputTextInComposeLength) => { disabled: ($rawComposeTextOverLimit, $rawComposeTextLength) => {
return $rawInputTextInComposeOverLimit || $rawInputTextInComposeLength === 0 return $rawComposeTextOverLimit || $rawComposeTextLength === 0
} }
} }
} }

16
routes/_components/compose/ComposeInput.html
View File

@ -2,7 +2,7 @@
class="compose-box-input" class="compose-box-input"
placeholder="What's on your mind?" placeholder="What's on your mind?"
ref:textarea ref:textarea
bind:value=$rawInputTextInCompose bind:value=$rawComposeText
></textarea> ></textarea>
<style> <style>
.compose-box-input { .compose-box-input {
@ -31,7 +31,7 @@
export default { export default {
oncreate() { oncreate() {
this.store.set({rawInputTextInCompose: store.get('currentInputTextInCompose')}) this.store.set({rawComposeText: store.get('currentComposeText')})
requestAnimationFrame(() => { requestAnimationFrame(() => {
mark('autosize()') mark('autosize()')
@ -40,11 +40,11 @@
}) })
const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000) const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
this.observe('rawInputTextInCompose', rawInputTextInCompose => { this.observe('rawComposeText', rawComposeText => {
let inputTextInCompose = this.store.get('inputTextInCompose') let composeText = this.store.get('composeText')
let currentInstance = this.store.get('currentInstance') let currentInstance = this.store.get('currentInstance')
inputTextInCompose[currentInstance] = rawInputTextInCompose || '' composeText[currentInstance] = rawComposeText || ''
this.store.set({inputTextInCompose: inputTextInCompose}) this.store.set({composeText: composeText})
saveText() saveText()
}, {init: false}) }, {init: false})
}, },
@ -55,8 +55,8 @@
}, },
store: () => store, store: () => store,
computed: { computed: {
rawInputTextInCompose: ($rawInputTextInCompose) => $rawInputTextInCompose, rawComposeText: ($rawComposeText) => $rawComposeText,
currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose, currentComposeText: ($currentComposeText) => $currentComposeText,
} }
} }
</script> </script>

6
routes/_components/compose/ComposeLengthGauge.html
View File

@ -1,4 +1,4 @@
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{$rawInputTextInComposeOverLimit ? 'over-char-limit' : ''}}" <div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{$rawComposeTextOverLimit ? 'over-char-limit' : ''}}"
style="transform: scaleX({{inputLengthAsFractionRoundedAfterRaf || 0}});" style="transform: scaleX({{inputLengthAsFractionRoundedAfterRaf || 0}});"
aria-hidden="true" aria-hidden="true"
></div> ></div>
@ -36,8 +36,8 @@
}, },
store: () => store, store: () => store,
computed: { computed: {
inputLengthAsFraction: ($rawInputTextInComposeLength) => { inputLengthAsFraction: ($rawComposeTextLength) => {
return Math.min(CHAR_LIMIT, $rawInputTextInComposeLength) / CHAR_LIMIT return Math.min(CHAR_LIMIT, $rawComposeTextLength) / CHAR_LIMIT
}, },
inputLengthAsFractionRounded: (inputLengthAsFraction) => { inputLengthAsFractionRounded: (inputLengthAsFraction) => {
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02 // We don't need to update the gauge for every decimal point, so round it to the nearest 0.02

14
routes/_components/compose/ComposeLengthIndicator.html
View File

@ -1,4 +1,4 @@
<span class="compose-box-length {{$rawInputTextInComposeOverLimit ? 'over-char-limit' : ''}}" <span class="compose-box-length {{$rawComposeTextOverLimit ? 'over-char-limit' : ''}}"
aria-label="{{inputLengthLabel}}"> aria-label="{{inputLengthLabel}}">
{{inputLengthToDisplayAfterRaf || '0'}} {{inputLengthToDisplayAfterRaf || '0'}}
</span> </span>
@ -33,13 +33,13 @@
}, },
store: () => store, store: () => store,
computed: { computed: {
inputLengthToDisplay: ($rawInputTextInComposeLength) => { inputLengthToDisplay: ($rawComposeTextLength) => {
return ($rawInputTextInComposeLength <= CHAR_LIMIT return ($rawComposeTextLength <= CHAR_LIMIT
? $rawInputTextInComposeLength ? $rawComposeTextLength
: CHAR_LIMIT - $rawInputTextInComposeLength) : CHAR_LIMIT - $rawComposeTextLength)
}, },
inputLengthLabel: ($rawInputTextInComposeOverLimit, inputLengthToDisplay) => { inputLengthLabel: ($rawComposeTextOverLimit, inputLengthToDisplay) => {
if ($rawInputTextInComposeOverLimit) { if ($rawComposeTextOverLimit) {
return `${inputLengthToDisplay} characters over limit` return `${inputLengthToDisplay} characters over limit`
} else { } else {
return `${inputLengthToDisplay} characters` return `${inputLengthToDisplay} characters`

6
routes/_store/instanceComputations.js
View File

@ -102,8 +102,8 @@ export function instanceComputations (store) {
return statusModifications[currentInstance] return statusModifications[currentInstance]
}) })
store.compute('currentInputTextInCompose', store.compute('currentComposeText',
['inputTextInCompose', 'currentInstance'], ['composeText', 'currentInstance'],
(inputTextInCompose, currentInstance) => (inputTextInCompose[currentInstance] || '') (composeText, currentInstance) => (composeText[currentInstance] || '')
) )
} }

12
routes/_store/statusComputations.js
View File

@ -1,13 +1,13 @@
import { CHAR_LIMIT } from '../_static/statuses' import { CHAR_LIMIT } from '../_static/statuses'
export function statusComputations (store) { export function statusComputations (store) {
store.compute('rawInputTextInComposeLength', store.compute('rawComposeTextLength',
['rawInputTextInCompose'], ['rawComposeText'],
(rawInputTextInCompose) => rawInputTextInCompose.length (rawComposeText) => rawComposeText.length
) )
store.compute('rawInputTextInComposeOverLimit', store.compute('rawComposeTextOverLimit',
['rawInputTextInComposeLength'], ['rawComposeTextLength'],
(rawInputTextInComposeLength) => rawInputTextInComposeLength > CHAR_LIMIT (rawComposeTextLength) => rawComposeTextLength > CHAR_LIMIT
) )
} }

6
routes/_store/store.js
View File

@ -14,7 +14,7 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
'autoplayGifs', 'autoplayGifs',
'markMediaAsSensitive', 'markMediaAsSensitive',
'pinnedPages', 'pinnedPages',
'inputTextInCompose' 'composeText'
]) ])
class PinaforeStore extends LocalStorageStore { class PinaforeStore extends LocalStorageStore {
@ -39,8 +39,8 @@ export const store = new PinaforeStore({
pinnedStatuses: {}, pinnedStatuses: {},
instanceInfos: {}, instanceInfos: {},
statusModifications: {}, statusModifications: {},
inputTextInCompose: {}, composeText: {},
rawInputTextInCompose: '' rawComposeText: ''
}) })
mixins(PinaforeStore) mixins(PinaforeStore)