refactor
This commit is contained in:
parent
333ac62b61
commit
4ef576b7f1
|
@ -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}`)
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -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
|
||||||
|
|
|
@ -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`
|
||||||
|
|
|
@ -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] || '')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in a new issue