Clean up usage of delegate keys

This commit is contained in:
Nolan Lawson 2018-03-04 17:16:33 -08:00
parent d6073e33ff
commit c949c3c3fc
6 changed files with 29 additions and 17 deletions

View file

@ -42,10 +42,11 @@
}
this.store.setForRealm({intersectionStates: intersectionStates})
this.set({intersectionObserver: new IntersectionObserver(this.onIntersection.bind(this), {
let intersectionObserver = new IntersectionObserver(this.onIntersection.bind(this), {
root: document.querySelector(this.get('containerQuery')),
rootMargin: '300% 0px'
})})
})
this.set({intersectionObserver})
this.observe('allItemsHaveHeight', allItemsHaveHeight => {
console.log('allItemsHaveHeight', allItemsHaveHeight)
if (allItemsHaveHeight && !this.get('initialized')) {

View file

@ -6,7 +6,7 @@
aria-setsize="{{length}}"
aria-label="{{ariaLabel}}"
on:recalculateHeight>
{{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog || timelineType === 'pinned'}}
{{#if showHeader}}
<StatusHeader :notification :status :isStatusInNotification :timelineType />
{{/if}}
<StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
@ -16,7 +16,8 @@
{{/if}}
<StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
{{#if originalStatus.spoiler_text}}
<StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification on:recalculateHeight />
<StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification
:timelineType :timelineValue on:recalculateHeight />
{{/if}}
{{#if !originalStatus.spoiler_text || spoilerShown}}
<StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
@ -97,10 +98,9 @@
export default {
oncreate() {
let elementKey = this.get('elementKey')
let onClickOrKeydown = this.onClickOrKeydown.bind(this)
if (!this.get('isStatusInOwnThread')) {
// the whole <article> is clickable in this case
registerClickDelegate(elementKey, onClickOrKeydown)
registerClickDelegate(elementKey, (e) => this.onClickOrKeydown(e))
}
},
ondestroy() {
@ -164,6 +164,11 @@
ariaLabel: (originalAccount, visibility) => {
return (visibility === 'direct' ? 'Direct message' : 'Status') +
` by ${originalAccount.display_name || originalAccount.username}`
},
showHeader: (notification, status, timelineType) => {
return (notification && (notification.type === 'reblog' || notification.type === 'favourite'))
|| status.reblog
|| timelineType === 'pinned'
}
}
}

View file

@ -2,7 +2,7 @@
<p>{{status.spoiler_text}}</p>
</div>
<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
<button type="button" on:click="onClickSpoilerButton()">
<button type="button" delegate-key="{{delegateKey}}">
{{spoilerShown ? 'Show less' : 'Show more'}}
</button>
</div>
@ -40,11 +40,20 @@
</style>
<script>
import { store } from '../../_store/store'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
export default {
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
},
store: () => store,
computed: {
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId]
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
statusId: (status) => status.id,
delegateKey: (statusId, timelineType, timelineValue) => `spoiler-${timelineType}-${timelineValue}-${statusId}`
},
methods: {
onClickSpoilerButton() {

View file

@ -44,11 +44,8 @@
export default {
oncreate() {
this.onFavoriteClick = this.onFavoriteClick.bind(this)
this.onReblogClick = this.onReblogClick.bind(this)
registerClickDelegate(this.get('favoriteKey'), this.onFavoriteClick)
registerClickDelegate(this.get('reblogKey'), this.onReblogClick)
registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
},
ondestroy() {
unregisterClickDelegate(this.get('favoriteKey'))