simplify click delegates

This commit is contained in:
Nolan Lawson 2018-02-24 16:12:25 -08:00
parent 1b7a01f1ee
commit 160e763e0d
4 changed files with 16 additions and 29 deletions

View file

@ -4,8 +4,7 @@
aria-pressed="{{!!pressed}}" aria-pressed="{{!!pressed}}"
class="{{computedClass}}" class="{{computedClass}}"
disabled="{{disabled}}" disabled="{{disabled}}"
delegate-click-key="{{delegateKey}}" delegate-key="{{delegateKey}}"
delegate-keydown-key="{{delegateKey}}"
on:click on:click
> >
<svg> <svg>
@ -17,8 +16,7 @@
aria-label="{{label}}" aria-label="{{label}}"
class="{{computedClass}}" class="{{computedClass}}"
disabled="{{disabled}}" disabled="{{disabled}}"
delegate-click-key="{{delegateKey}}" delegate-key="{{delegateKey}}"
delegate-keydown-key="{{delegateKey}}"
on:click on:click
> >
<svg> <svg>

View file

@ -1,7 +1,6 @@
<article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}" <article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}"
tabindex="0" tabindex="0"
delegate-click-key="{{elementKey}}" delegate-key="{{elementKey}}"
delegate-keydown-key="{{elementKey}}"
focus-key="{{elementKey}}" focus-key="{{elementKey}}"
aria-posinset="{{index}}" aria-posinset="{{index}}"
aria-setsize="{{length}}" aria-setsize="{{length}}"
@ -91,7 +90,7 @@
import { store } from '../../_store/store' import { store } from '../../_store/store'
import identity from 'lodash/identity' import identity from 'lodash/identity'
import { goto } from 'sapper/runtime.js' import { goto } from 'sapper/runtime.js'
import { registerDelegate, unregisterDelegate } from '../../_utils/delegate' import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
export default { export default {
oncreate() { oncreate() {
@ -99,15 +98,13 @@
let onClickOrKeydown = this.onClickOrKeydown.bind(this) let onClickOrKeydown = this.onClickOrKeydown.bind(this)
if (!this.get('isStatusInOwnThread')) { if (!this.get('isStatusInOwnThread')) {
// the whole <article> is clickable in this case // the whole <article> is clickable in this case
registerDelegate('click', elementKey, onClickOrKeydown) registerClickDelegate(elementKey, onClickOrKeydown)
registerDelegate('keydown', elementKey, onClickOrKeydown)
} }
}, },
ondestroy() { ondestroy() {
let elementKey = this.get('elementKey') let elementKey = this.get('elementKey')
if (!this.get('isStatusInOwnThread')) { if (!this.get('isStatusInOwnThread')) {
unregisterDelegate('click', elementKey) unregisterClickDelegate(elementKey)
unregisterDelegate('keydown', elementKey)
} }
}, },
components: { components: {

View file

@ -36,7 +36,7 @@
<script> <script>
import IconButton from '../IconButton.html' import IconButton from '../IconButton.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { registerDelegate, unregisterDelegate } from '../../_utils/delegate' import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { setFavorited } from '../../_actions/favorite' import { setFavorited } from '../../_actions/favorite'
export default { export default {
@ -44,13 +44,11 @@
this.onFavoriteClick = this.onFavoriteClick.bind(this) this.onFavoriteClick = this.onFavoriteClick.bind(this)
let favoriteKey = this.get('favoriteKey') let favoriteKey = this.get('favoriteKey')
registerDelegate('click', favoriteKey, this.onFavoriteClick) registerClickDelegate(favoriteKey, this.onFavoriteClick)
registerDelegate('keydown', favoriteKey, this.onFavoriteClick)
}, },
ondestroy() { ondestroy() {
let favoriteKey = this.get('favoriteKey') let favoriteKey = this.get('favoriteKey')
unregisterDelegate('click', favoriteKey, this.onFavoriteClick) unregisterClickDelegate(favoriteKey)
unregisterDelegate('keydown', favoriteKey, this.onFavoriteClick)
}, },
components: { components: {
IconButton IconButton

View file

@ -15,7 +15,7 @@ function onEvent (e) {
return return
} }
mark('delegate onEvent') mark('delegate onEvent')
let attr = `delegate-${type}-key` let attr = `delegate-key`
let key let key
let element = target let element = target
while (element) { while (element) {
@ -24,24 +24,18 @@ function onEvent (e) {
} }
element = element.parentElement element = element.parentElement
} }
if (key && callbacks[type] && callbacks[type][key]) { if (key && callbacks[key]) {
callbacks[type][key](e) callbacks[key](e)
} }
stop('delegate onEvent') stop('delegate onEvent')
} }
export function registerDelegate (type, key, callback) { export function registerClickDelegate (key, callback) {
mark('delegate registerDelegate') callbacks[key] = callback
callbacks[type] = callbacks[type] || {}
callbacks[type][key] = callback
stop('delegate registerDelegate')
} }
export function unregisterDelegate (type, key) { export function unregisterClickDelegate (key) {
mark('delegate unregisterDelegate') delete callbacks[key]
callbacks[type] = callbacks[type] || {}
delete callbacks[type][key]
stop('delegate unregisterDelegate')
} }
if (process.browser) { if (process.browser) {