simplify click delegates
This commit is contained in:
parent
1b7a01f1ee
commit
160e763e0d
|
@ -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>
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue