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.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')), root: document.querySelector(this.get('containerQuery')),
rootMargin: '300% 0px' rootMargin: '300% 0px'
})}) })
this.set({intersectionObserver})
this.observe('allItemsHaveHeight', allItemsHaveHeight => { this.observe('allItemsHaveHeight', allItemsHaveHeight => {
console.log('allItemsHaveHeight', allItemsHaveHeight) console.log('allItemsHaveHeight', allItemsHaveHeight)
if (allItemsHaveHeight && !this.get('initialized')) { if (allItemsHaveHeight && !this.get('initialized')) {

View file

@ -6,7 +6,7 @@
aria-setsize="{{length}}" aria-setsize="{{length}}"
aria-label="{{ariaLabel}}" aria-label="{{ariaLabel}}"
on:recalculateHeight> on:recalculateHeight>
{{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog || timelineType === 'pinned'}} {{#if showHeader}}
<StatusHeader :notification :status :isStatusInNotification :timelineType /> <StatusHeader :notification :status :isStatusInNotification :timelineType />
{{/if}} {{/if}}
<StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification /> <StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
@ -16,7 +16,8 @@
{{/if}} {{/if}}
<StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread /> <StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
{{#if originalStatus.spoiler_text}} {{#if originalStatus.spoiler_text}}
<StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification on:recalculateHeight /> <StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification
:timelineType :timelineValue on:recalculateHeight />
{{/if}} {{/if}}
{{#if !originalStatus.spoiler_text || spoilerShown}} {{#if !originalStatus.spoiler_text || spoilerShown}}
<StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification /> <StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
@ -97,10 +98,9 @@
export default { export default {
oncreate() { oncreate() {
let elementKey = this.get('elementKey') let elementKey = this.get('elementKey')
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
registerClickDelegate(elementKey, onClickOrKeydown) registerClickDelegate(elementKey, (e) => this.onClickOrKeydown(e))
} }
}, },
ondestroy() { ondestroy() {
@ -164,6 +164,11 @@
ariaLabel: (originalAccount, visibility) => { ariaLabel: (originalAccount, visibility) => {
return (visibility === 'direct' ? 'Direct message' : 'Status') + return (visibility === 'direct' ? 'Direct message' : 'Status') +
` by ${originalAccount.display_name || originalAccount.username}` ` 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> <p>{{status.spoiler_text}}</p>
</div> </div>
<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"> <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'}} {{spoilerShown ? 'Show less' : 'Show more'}}
</button> </button>
</div> </div>
@ -40,11 +40,20 @@
</style> </style>
<script> <script>
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
export default { export default {
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
},
store: () => store, store: () => store,
computed: { computed: {
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId] spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
statusId: (status) => status.id,
delegateKey: (statusId, timelineType, timelineValue) => `spoiler-${timelineType}-${timelineValue}-${statusId}`
}, },
methods: { methods: {
onClickSpoilerButton() { onClickSpoilerButton() {

View file

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