Simplify click delegate implementation (#155)
This commit is contained in:
parent
00e71293d6
commit
7c548018c1
|
@ -107,11 +107,11 @@
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import LazyImage from '../LazyImage.html'
|
import LazyImage from '../LazyImage.html'
|
||||||
import AutoplayVideo from '../AutoplayVideo.html'
|
import AutoplayVideo from '../AutoplayVideo.html'
|
||||||
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
import { registerClickDelegate } from '../../_utils/delegate'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
registerClickDelegate(this.get('delegateKey'), () => {
|
registerClickDelegate(this, this.get('delegateKey'), () => {
|
||||||
if (this.get('media').type === 'video') {
|
if (this.get('media').type === 'video') {
|
||||||
this.onClickPlayVideoButton()
|
this.onClickPlayVideoButton()
|
||||||
} else {
|
} else {
|
||||||
|
@ -119,9 +119,6 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
ondestroy() {
|
|
||||||
unregisterClickDelegate(this.get('delegateKey'))
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
// width/height to show inline
|
// width/height to show inline
|
||||||
inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,
|
inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,
|
||||||
|
|
|
@ -111,7 +111,7 @@
|
||||||
import StatusComposeBox from './StatusComposeBox.html'
|
import StatusComposeBox from './StatusComposeBox.html'
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import { goto } from 'sapper/runtime.js'
|
import { goto } from 'sapper/runtime.js'
|
||||||
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
import { registerClickDelegate } from '../../_utils/delegate'
|
||||||
import { classname } from '../../_utils/classname'
|
import { classname } from '../../_utils/classname'
|
||||||
import { checkDomAncestors } from '../../_utils/checkDomAncestors'
|
import { checkDomAncestors } from '../../_utils/checkDomAncestors'
|
||||||
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
||||||
|
@ -126,7 +126,7 @@
|
||||||
let delegateKey = this.get('delegateKey')
|
let delegateKey = this.get('delegateKey')
|
||||||
if (!this.get('isStatusInOwnThread')) {
|
if (!this.get('isStatusInOwnThread')) {
|
||||||
// the whole <article> is clickable in this case
|
// 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')) {
|
if (!this.get('showContent')) {
|
||||||
scheduleIdleTask(() => {
|
scheduleIdleTask(() => {
|
||||||
|
@ -136,12 +136,6 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ondestroy() {
|
|
||||||
let delegateKey = this.get('delegateKey')
|
|
||||||
if (!this.get('isStatusInOwnThread')) {
|
|
||||||
unregisterClickDelegate(delegateKey)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
components: {
|
||||||
StatusSidebar,
|
StatusSidebar,
|
||||||
StatusHeader,
|
StatusHeader,
|
||||||
|
|
|
@ -126,14 +126,11 @@
|
||||||
<script>
|
<script>
|
||||||
import MediaAttachments from './MediaAttachments.html'
|
import MediaAttachments from './MediaAttachments.html'
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
import { registerClickDelegate } from '../../_utils/delegate'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
registerClickDelegate(this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
|
registerClickDelegate(this, this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
|
||||||
},
|
|
||||||
ondestroy() {
|
|
||||||
unregisterClickDelegate(this.get('delegateKey'))
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
MediaAttachments
|
MediaAttachments
|
||||||
|
|
|
@ -46,17 +46,14 @@
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
import { registerClickDelegate } from '../../_utils/delegate'
|
||||||
import { mark, stop } from '../../_utils/marks'
|
import { mark, stop } from '../../_utils/marks'
|
||||||
import { emojifyText } from '../../_utils/emojifyText'
|
import { emojifyText } from '../../_utils/emojifyText'
|
||||||
import escapeHtml from 'escape-html'
|
import escapeHtml from 'escape-html'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
|
registerClickDelegate(this, this.get('delegateKey'), () => this.onClickSpoilerButton())
|
||||||
},
|
|
||||||
ondestroy() {
|
|
||||||
unregisterClickDelegate(this.get('delegateKey'))
|
|
||||||
},
|
},
|
||||||
store: () => store,
|
store: () => store,
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
<script>
|
<script>
|
||||||
import IconButton from '../IconButton.html'
|
import IconButton from '../IconButton.html'
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
import { registerClickDelegates } from '../../_utils/delegate'
|
||||||
import { setFavorited } from '../../_actions/favorite'
|
import { setFavorited } from '../../_actions/favorite'
|
||||||
import { setReblogged } from '../../_actions/reblog'
|
import { setReblogged } from '../../_actions/reblog'
|
||||||
import { importDialogs } from '../../_utils/asyncModules'
|
import { importDialogs } from '../../_utils/asyncModules'
|
||||||
|
@ -54,18 +54,14 @@
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
registerClickDelegate(this.get('favoriteKey'), (e) => this.onFavoriteClick(e))
|
registerClickDelegates(this, {
|
||||||
registerClickDelegate(this.get('reblogKey'), (e) => this.onReblogClick(e))
|
[this.get('favoriteKey')]: (e) => this.onFavoriteClick(e),
|
||||||
registerClickDelegate(this.get('replyKey'), (e) => this.onReplyClick(e))
|
[this.get('reblogKey')]: (e) => this.onReblogClick(e),
|
||||||
registerClickDelegate(this.get('optionsKey'), (e) => this.onOptionsClick(e))
|
[this.get('replyKey')]: (e) => this.onReplyClick(e),
|
||||||
|
[this.get('optionsKey')]: (e) => this.onOptionsClick(e)
|
||||||
|
})
|
||||||
on('postedStatus', this, this.onPostedStatus)
|
on('postedStatus', this, this.onPostedStatus)
|
||||||
},
|
},
|
||||||
ondestroy() {
|
|
||||||
unregisterClickDelegate(this.get('favoriteKey'))
|
|
||||||
unregisterClickDelegate(this.get('reblogKey'))
|
|
||||||
unregisterClickDelegate(this.get('replyKey'))
|
|
||||||
unregisterClickDelegate(this.get('optionsKey'))
|
|
||||||
},
|
|
||||||
components: {
|
components: {
|
||||||
IconButton
|
IconButton
|
||||||
},
|
},
|
||||||
|
|
|
@ -29,12 +29,18 @@ function onEvent (e) {
|
||||||
stop('delegate onEvent')
|
stop('delegate onEvent')
|
||||||
}
|
}
|
||||||
|
|
||||||
export function registerClickDelegate (key, callback) {
|
export function registerClickDelegates (component, delegates) {
|
||||||
callbacks[key] = callback
|
Object.assign(callbacks, delegates)
|
||||||
|
|
||||||
|
component.on('destroy', () => {
|
||||||
|
Object.keys(delegates).forEach(key => {
|
||||||
|
delete callbacks[key]
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function unregisterClickDelegate (key) {
|
export function registerClickDelegate (component, key, callback) {
|
||||||
delete callbacks[key]
|
registerClickDelegates(component, {[key]: callback})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (process.browser) {
|
if (process.browser) {
|
||||||
|
|
Loading…
Reference in a new issue