start using an event bus

This commit is contained in:
Nolan Lawson 2018-04-08 15:08:32 -07:00
parent f3712e3208
commit bcc7fb47ef
8 changed files with 63 additions and 41 deletions

13
package-lock.json generated
View File

@ -3186,9 +3186,9 @@
} }
}, },
"events": { "events": {
"version": "1.1.1", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz", "resolved": "https://registry.npmjs.org/events/-/events-2.0.0.tgz",
"integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=" "integrity": "sha512-r/M5YkNg9zwI8QbSf7tsDWWJvO3PGwZXyG7GpFAxtMASnHL2eblFd7iHiGPtyGKKFPZ59S63NeX10Ws6WqGDcg=="
}, },
"evp_bytestokey": { "evp_bytestokey": {
"version": "1.0.3", "version": "1.0.3",
@ -6369,6 +6369,13 @@
"url": "0.11.0", "url": "0.11.0",
"util": "0.10.3", "util": "0.10.3",
"vm-browserify": "0.0.4" "vm-browserify": "0.0.4"
},
"dependencies": {
"events": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
"integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
}
} }
}, },
"node-sass": { "node-sass": {

View File

@ -39,6 +39,7 @@
"cross-env": "^5.1.3", "cross-env": "^5.1.3",
"css-loader": "^0.28.7", "css-loader": "^0.28.7",
"esm": "^3.0.12", "esm": "^3.0.12",
"events": "^2.0.0",
"express": "^4.16.2", "express": "^4.16.2",
"fg-loadcss": "^2.0.1", "fg-loadcss": "^2.0.1",
"file-api": "^0.10.4", "file-api": "^0.10.4",

View File

@ -3,6 +3,7 @@ import { toast } from '../_utils/toast'
import { postStatus as postStatusToServer } from '../_api/statuses' import { postStatus as postStatusToServer } from '../_api/statuses'
import { addStatusOrNotification } from './addStatusOrNotification' import { addStatusOrNotification } from './addStatusOrNotification'
import { database } from '../_database/database' import { database } from '../_database/database'
import { emit } from '../_utils/eventBus'
export async function insertHandleForReply (statusId) { export async function insertHandleForReply (statusId) {
let instanceName = store.get('currentInstance') let instanceName = store.get('currentInstance')
@ -30,17 +31,14 @@ export async function postStatus (realm, text, inReplyToId, mediaIds,
} }
store.set({ store.set({
postingStatus: true, postingStatus: true
postedStatusForRealm: null
}) })
try { try {
let status = await postStatusToServer(instanceName, accessToken, text, let status = await postStatusToServer(instanceName, accessToken, text,
inReplyToId, mediaIds, sensitive, spoilerText, visibility) inReplyToId, mediaIds, sensitive, spoilerText, visibility)
addStatusOrNotification(instanceName, 'home', status) addStatusOrNotification(instanceName, 'home', status)
store.clearComposeData(realm) store.clearComposeData(realm)
store.set({ emit('postedStatus', realm)
postedStatusForRealm: realm
})
} catch (e) { } catch (e) {
console.error(e) console.error(e)
toast.say('Unable to post status: ' + (e.message || '')) toast.say('Unable to post status: ' + (e.message || ''))

View File

@ -126,13 +126,6 @@
// make sure the visibility is consistent with the replied-to status // make sure the visibility is consistent with the replied-to status
setReplyVisibility(realm, replyVisibility) setReplyVisibility(realm, replyVisibility)
} }
this.observe('postedStatusForRealm', postedStatusForRealm => {
if (postedStatusForRealm !== realm) {
return
}
this.fire('postedStatus')
}, {init: false})
}, },
ondestroy() { ondestroy() {
this.teardownStickyObserver() this.teardownStickyObserver()
@ -177,7 +170,6 @@
overLimit: (length) => length > CHAR_LIMIT, overLimit: (length) => length > CHAR_LIMIT,
contentWarningShown: (composeData) => composeData.contentWarningShown, contentWarningShown: (composeData) => composeData.contentWarningShown,
contentWarning: (composeData) => composeData.contentWarning || '', contentWarning: (composeData) => composeData.contentWarning || '',
postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm,
timelineInitialized: ($timelineInitialized) => $timelineInitialized timelineInitialized: ($timelineInitialized) => $timelineInitialized
}, },
transitions: { transitions: {

View File

@ -166,9 +166,6 @@
data: () => ({ data: () => ({
rawText: '' rawText: ''
}), }),
computed: {
postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm
},
events: { events: {
selectionChange selectionChange
} }

View File

@ -6,13 +6,17 @@
background="var(--main-bg)" background="var(--main-bg)"
on:destroyDialog="destroy()" on:destroyDialog="destroy()"
> >
<ComposeBox realm="dialog" size="slim" autoFocus="true" on:postedStatus="onPostedStatus()" /> <ComposeBox realm="dialog" size="slim" autoFocus="true" />
</ModalDialog> </ModalDialog>
<script> <script>
import ModalDialog from './ModalDialog.html' import ModalDialog from './ModalDialog.html'
import ComposeBox from '../compose/ComposeBox.html' import ComposeBox from '../compose/ComposeBox.html'
import { on } from '../../_utils/eventBus'
export default { export default {
oncreate() {
on('postedStatus', this, this.onPostedStatus)
},
components: { components: {
ModalDialog, ModalDialog,
ComposeBox ComposeBox
@ -21,7 +25,10 @@
async show() { async show() {
this.set({shown: true}) this.set({shown: true})
}, },
onPostedStatus() { onPostedStatus(realm) {
if (realm !== 'dialog') {
return
}
try { try {
this.set({closed: true}) this.set({closed: true})
} catch (e) { } catch (e) {

View File

@ -6,7 +6,6 @@
isReply="true" isReply="true"
replyVisibility="{{visibility}}" replyVisibility="{{visibility}}"
replySpoiler="{{spoilerText}}" replySpoiler="{{spoilerText}}"
on:postedStatus="onPostedStatus()"
/> />
</div> </div>
<style> <style>
@ -19,37 +18,25 @@
import { store } from '../../_store/store' import { store } from '../../_store/store'
import debounce from 'lodash-es/debounce' import debounce from 'lodash-es/debounce'
import throttle from 'lodash-es/throttle' import throttle from 'lodash-es/throttle'
import { on } from '../../_utils/eventBus'
const DEBOUNCE_DELAY = 400 const DEBOUNCE_DELAY = 400
const THROTTLE_DELAY = 150 const THROTTLE_DELAY = 150
export default { export default {
oncreate() { oncreate() {
const recalc = () => { on('postedStatus', this, this.onPostedStatus)
requestAnimationFrame(() => { this.setupRecalculateHeightListener()
this.fire('recalculateHeight')
})
}
// debounce AND throttle due to 333ms content warning animation
const debounced = debounce(recalc, DEBOUNCE_DELAY)
const throttled = throttle(() => {
debounced()
recalc()
}, THROTTLE_DELAY, {
leading: true,
trailing: true
})
this.observe('composeData', throttled)
},
components: {
ComposeBox
}, },
store: () => store, store: () => store,
computed: { computed: {
composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {} composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {}
}, },
methods: { methods: {
onPostedStatus() { onPostedStatus(realm) {
if (realm !== this.get('originalStatusId')) {
return
}
requestAnimationFrame(() => { requestAnimationFrame(() => {
let uuid = this.get('uuid') let uuid = this.get('uuid')
let $repliesShown = this.store.get('repliesShown') let $repliesShown = this.store.get('repliesShown')
@ -57,7 +44,23 @@
this.store.set({'repliesShown': $repliesShown}) this.store.set({'repliesShown': $repliesShown})
this.fire('recalculateHeight') this.fire('recalculateHeight')
}) })
},
setupRecalculateHeightListener() {
const recalc = () => requestAnimationFrame(() => this.fire('recalculateHeight'))
// debounce AND throttle due to 333ms content warning animation
const debounced = debounce(recalc, DEBOUNCE_DELAY)
const throttled = throttle(() => {
debounced()
recalc()
}, THROTTLE_DELAY, {
leading: true,
trailing: true
})
this.observe('composeData', throttled)
} }
},
components: {
ComposeBox
} }
} }
</script> </script>

17
routes/_utils/eventBus.js Normal file
View File

@ -0,0 +1,17 @@
import EventEmitter from 'events'
const eventBus = new EventEmitter()
if (process.browser && process.env.NODE_ENV !== 'production') {
window.eventBus = eventBus
}
export function on (eventName, component, method) {
let callback = method.bind(component)
eventBus.on(eventName, callback)
component.on('destroy', () => {
eventBus.removeListener(eventName, callback)
})
}
export const emit = eventBus.emit.bind(eventBus)