Clean up usage of delegate keys

routes/_actions/statuses.js

@@ -24,7 +24,7 @@ export async function getNotificationIdsForStatuses (instanceName, statusIds) {
   return database.getNotificationIdsForStatuses(instanceName, statusIds)
 }
 
-export async function postStatus(realm, text, inReplyToId, mediaIds,
+export async function postStatus (realm, text, inReplyToId, mediaIds,
                                  sensitive, spoilerText, visibility) {
   let instanceName = store.get('currentInstance')
   let accessToken = store.get('accessToken')

routes/_api/statuses.js

@@ -1,7 +1,7 @@
 import { auth, basename } from './utils'
 import { postWithTimeout } from '../_utils/ajax'
 
-export async function postStatus(instanceName, accessToken, text, inReplyToId, mediaIds,
+export async function postStatus (instanceName, accessToken, text, inReplyToId, mediaIds,
                                  sensitive, spoilerText, visibility) {
   let url = `${basename(instanceName)}/api/v1/statuses`
 

routes/_components/pseudoVirtualList/PseudoVirtualList.html

@@ -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')) {

routes/_components/status/Status.html

@@ -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'
       }
     }
   }

routes/_components/status/StatusSpoiler.html

@@ -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() {

routes/_components/status/StatusToolbar.html

@@ -44,11 +44,8 @@
 
   export default {
     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() {
       unregisterClickDelegate(this.get('favoriteKey'))