Simplify click delegate implementation

This commit is contained in:
Nolan Lawson 2018-04-17 20:35:49 -07:00
parent 00e71293d6
commit 09de3d3984
6 changed files with 25 additions and 38 deletions

View File

@ -107,11 +107,11 @@
import { store } from '../../_store/store'
import LazyImage from '../LazyImage.html'
import AutoplayVideo from '../AutoplayVideo.html'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { registerClickDelegate } from '../../_utils/delegate'
export default {
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => {
registerClickDelegate(this, this.get('delegateKey'), () => {
if (this.get('media').type === 'video') {
this.onClickPlayVideoButton()
} else {
@ -119,9 +119,6 @@
}
})
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
},
computed: {
// width/height to show inline
inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,

View File

@ -111,7 +111,7 @@
import StatusComposeBox from './StatusComposeBox.html'
import { store } from '../../_store/store'
import { goto } from 'sapper/runtime.js'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { registerClickDelegate } from '../../_utils/delegate'
import { classname } from '../../_utils/classname'
import { checkDomAncestors } from '../../_utils/checkDomAncestors'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
@ -126,7 +126,7 @@
let delegateKey = this.get('delegateKey')
if (!this.get('isStatusInOwnThread')) {
// the whole <article> is clickable in this case
registerClickDelegate(delegateKey, (e) => this.onClickOrKeydown(e))
registerClickDelegate(this, delegateKey, (e) => this.onClickOrKeydown(e))
}
if (!this.get('showContent')) {
scheduleIdleTask(() => {
@ -136,12 +136,6 @@
})
}
},
ondestroy() {
let delegateKey = this.get('delegateKey')
if (!this.get('isStatusInOwnThread')) {
unregisterClickDelegate(delegateKey)
}
},
components: {
StatusSidebar,
StatusHeader,

View File

@ -126,14 +126,11 @@
<script>
import MediaAttachments from './MediaAttachments.html'
import { store } from '../../_store/store'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { registerClickDelegate } from '../../_utils/delegate'
export default {
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
registerClickDelegate(this, this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
},
components: {
MediaAttachments

View File

@ -46,17 +46,14 @@
</style>
<script>
import { store } from '../../_store/store'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { registerClickDelegate } from '../../_utils/delegate'
import { mark, stop } from '../../_utils/marks'
import { emojifyText } from '../../_utils/emojifyText'
import escapeHtml from 'escape-html'
export default {
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
registerClickDelegate(this, this.get('delegateKey'), () => this.onClickSpoilerButton())
},
store: () => store,
computed: {

View File

@ -44,7 +44,7 @@
<script>
import IconButton from '../IconButton.html'
import { store } from '../../_store/store'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { registerClickDelegates } from '../../_utils/delegate'
import { setFavorited } from '../../_actions/favorite'
import { setReblogged } from '../../_actions/reblog'
import { importDialogs } from '../../_utils/asyncModules'
@ -54,18 +54,14 @@
export default {
oncreate() {
registerClickDelegate(this.get('favoriteKey'), (e) => this.onFavoriteClick(e))
registerClickDelegate(this.get('reblogKey'), (e) => this.onReblogClick(e))
registerClickDelegate(this.get('replyKey'), (e) => this.onReplyClick(e))
registerClickDelegate(this.get('optionsKey'), (e) => this.onOptionsClick(e))
registerClickDelegates(this, {
[this.get('favoriteKey')]: (e) => this.onFavoriteClick(e),
[this.get('reblogKey')]: (e) => this.onReblogClick(e),
[this.get('replyKey')]: (e) => this.onReplyClick(e),
[this.get('optionsKey')]: (e) => this.onOptionsClick(e)
})
on('postedStatus', this, this.onPostedStatus)
},
ondestroy() {
unregisterClickDelegate(this.get('favoriteKey'))
unregisterClickDelegate(this.get('reblogKey'))
unregisterClickDelegate(this.get('replyKey'))
unregisterClickDelegate(this.get('optionsKey'))
},
components: {
IconButton
},

View File

@ -29,12 +29,18 @@ function onEvent (e) {
stop('delegate onEvent')
}
export function registerClickDelegate (key, callback) {
callbacks[key] = callback
export function registerClickDelegates (component, delegates) {
Object.assign(callbacks, delegates)
component.on('destroy', () => {
Object.keys(delegates).forEach(key => {
delete callbacks[key]
})
})
}
export function unregisterClickDelegate (key) {
delete callbacks[key]
export function registerClickDelegate (component, key, callback) {
registerClickDelegates(component, {[key]: callback})
}
if (process.browser) {