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

perf: be more consistent about compose input scheduling (#1414)

Browse source
This commit is contained in:
Nolan Lawson 2019-08-20 08:08:15 -07:00 committed by GitHub
parent cccbfd70da
commit f80ca32478
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/routes/_components/compose/ComposeContentWarning.html
View file

@ -15,9 +15,11 @@
</style>
<script>
import { store } from '../../_store/store'
import debounce from 'lodash-es/debounce'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { observe } from 'svelte-extras'
import { throttleTimer } from '../../_utils/throttleTimer'
const updateContentWarningInStore = throttleTimer(scheduleIdleTask)
export default {
oncreate () {
@ -36,14 +38,12 @@
})
},
setupSyncToStore () {
const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
const { realm } = this.get()
this.observe('rawText', rawText => {
const { realm } = this.get()
this.store.setComposeData(realm, {
contentWarning: rawText
updateContentWarningInStore(() => {
this.store.setComposeData(realm, { contentWarning: rawText })
this.store.save()
})
saveText()
}, { init: false })
}
}

20
src/routes/_components/compose/ComposeMediaItem.html
View file

@ -123,7 +123,6 @@
<script>
import { store } from '../../_store/store'
import { deleteMedia } from '../../_actions/media'
import debounce from 'lodash-es/debounce'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { observe } from 'svelte-extras'
import SvgIcon from '../SvgIcon.html'
@ -132,6 +131,9 @@
import { get } from '../../_utils/lodash-lite'
import { coordsToPercent } from '../../_utils/coordsToPercent'
import { importMediaFocalPointDialog } from '../dialog/asyncDialogs'
import { throttleTimer } from '../../_utils/throttleTimer'
const updateMediaInStore = throttleTimer(scheduleIdleTask)
export default {
oncreate () {
@ -183,15 +185,15 @@
})
},
setupSyncToStore () {
const saveStore = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
this.observe('rawText', rawText => {
const { realm, index, media } = this.get()
if (media[index].description !== rawText) {
media[index].description = rawText
this.store.setComposeData(realm, { media })
saveStore()
}
updateMediaInStore(() => {
const { realm, index, media } = this.get()
if (media[index].description !== rawText) {
media[index].description = rawText
this.store.setComposeData(realm, { media })
this.store.save()
}
})
}, { init: false })
},
setupAutosize () {

13
src/routes/_components/compose/ComposePoll.html
View file

@ -109,43 +109,48 @@
const poll = this.store.getComposeData(realm, 'poll')
poll.options[i] = element.value
this.store.setComposeData(realm, { poll })
this.store.save()
})
},
onMultipleChange () {
requestAnimationFrame(() => {
scheduleIdleTask(() => {
const { realm } = this.get()
const element = document.getElementById(`poll-option-multiple-${realm}`)
const poll = this.store.getComposeData(realm, 'poll')
poll.multiple = !!element.checked
this.store.setComposeData(realm, { poll })
this.store.save()
})
},
onDeleteClick (i) {
requestAnimationFrame(() => {
scheduleIdleTask(() => {
const { realm } = this.get()
const poll = this.store.getComposeData(realm, 'poll')
poll.options.splice(i, 1)
this.store.setComposeData(realm, { poll })
this.store.save()
flushPollOptionsToDom(poll, realm)
})
},
onAddClick () {
requestAnimationFrame(() => {
scheduleIdleTask(() => {
const { realm } = this.get()
const poll = this.store.getComposeData(realm, 'poll')
if (!poll.options.length !== 4) {
poll.options.push('')
}
this.store.setComposeData(realm, { poll })
this.store.save()
})
},
onExpiryChange (e) {
requestAnimationFrame(() => {
scheduleIdleTask(() => {
const { realm } = this.get()
const { value } = e.target
const poll = this.store.getComposeData(realm, 'poll')
poll.expiry = parseInt(value, 10)
this.store.setComposeData(realm, { poll })
this.store.save()
})
}
},