simplify and expand click delegates

routes/_components/status/Media.html

@@ -2,7 +2,7 @@
   <button type="button"
           class="play-video-button"
           aria-label="Play video: {{media.description || ''}}"
-          on:click="onClickPlayVideoButton()"
+          delegate-key="{{delegateKey}}"
           style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
   >
     <PlayVideoIcon />
@@ -20,7 +20,7 @@
   <button type="button"
           class="show-image-button"
           aria-label="Show image: {{media.description || ''}}"
-          on:click="onClickShowImageButton()"
+          delegate-key="{{delegateKey}}"
           on:mouseover="set({mouseover: event})"
           style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
   >
@@ -107,8 +107,21 @@
   import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
   import { store } from '../../_store/store'
   import LazyImage from '../LazyImage.html'
+  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
 
   export default {
+    oncreate() {
+      registerClickDelegate(this.get('delegateKey'), () => {
+        if (this.get('media').type === 'video') {
+          this.onClickPlayVideoButton()
+        } else {
+          this.onClickShowImageButton()
+        }
+      })
+    },
+    ondestroy() {
+      unregisterClickDelegate(this.get('delegateKey'))
+    },
     computed: {
       // width/height to show inline
       inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,
@@ -123,7 +136,8 @@
       smallHeight: small => small && small.height,
       originalWidth: original => original && original.width,
       originalHeight: original => original && original.height,
-      noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number'
+      noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number',
+      delegateKey: (media) => `media-${media.id}`
     },
     methods: {
       async onClickPlayVideoButton() {

routes/_components/status/Status.html

@@ -1,7 +1,7 @@
 <article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}"
          tabindex="0"
-         delegate-key="{{elementKey}}"
+         delegate-key="{{delegateKey}}"
-         focus-key="{{elementKey}}"
+         focus-key="{{delegateKey}}"
          aria-posinset="{{index}}"
          aria-setsize="{{length}}"
          aria-label="{{ariaLabel}}"
@@ -17,18 +17,18 @@
   <StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
   {{#if originalStatus.spoiler_text}}
     <StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification
-                   :timelineType :timelineValue on:recalculateHeight />
+                   on:recalculateHeight />
   {{/if}}
   {{#if !originalStatus.spoiler_text || spoilerShown}}
     <StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
   {{/if}}
   {{#if originalStatus.media_attachments && originalStatus.media_attachments.length}}
-    <StatusMediaAttachments status="{{originalStatus}}" :contextualStatusId on:recalculateHeight />
+    <StatusMediaAttachments status="{{originalStatus}}" :timelineType :timelineValue />
   {{/if}}
   {{#if isStatusInOwnThread}}
   <StatusDetails status="{{originalStatus}}" />
   {{/if}}
-  <StatusToolbar status="{{originalStatus}}" :isStatusInOwnThread :timelineType :timelineValue />
+  <StatusToolbar status="{{originalStatus}}" :isStatusInOwnThread />
 </article>
 
 <style>
@@ -98,16 +98,16 @@
 
   export default {
     oncreate() {
-      let elementKey = this.get('elementKey')
+      let delegateKey = this.get('delegateKey')
       if (!this.get('isStatusInOwnThread')) {
         // the whole <article> is clickable in this case
-        registerClickDelegate(elementKey, (e) => this.onClickOrKeydown(e))
+        registerClickDelegate(delegateKey, (e) => this.onClickOrKeydown(e))
       }
     },
     ondestroy() {
-      let elementKey = this.get('elementKey')
+      let delegateKey = this.get('delegateKey')
       if (!this.get('isStatusInOwnThread')) {
-        unregisterClickDelegate(elementKey)
+        unregisterClickDelegate(delegateKey)
       }
     },
     components: {
@@ -153,7 +153,7 @@
     computed: {
       originalStatus: (status) => status.reblog ? status.reblog : status,
       statusId: (originalStatus) => originalStatus.id,
-      elementKey: (statusId, timelineType, timelineValue) => `status-${timelineType}-${timelineValue}-${statusId}`,
+      delegateKey: (statusId) => `status-${statusId}`,
       contextualStatusId: ($currentInstance, timelineType, timelineValue, status, notification) => {
         return `${$currentInstance}/${timelineType}/${timelineValue}/${notification ? notification.id : ''}/${status.id}`
       },

routes/_components/status/StatusMediaAttachments.html

@@ -5,7 +5,7 @@
   <button type="button"
           class="status-sensitive-media-button"
           aria-label="Hide sensitive media"
-          on:click="onClickSensitiveMediaButton()" >
+          delegate-key="{{delegateKey}}" >
     <div class="svg-wrapper">
       <svg>
         <use xlink:href="#fa-eye-slash" />
@@ -17,7 +17,7 @@
     <button type="button"
             class="status-sensitive-media-button"
             aria-label="Show sensitive media"
-            on:click="onClickSensitiveMediaButton()" >
+            delegate-key="{{delegateKey}}" >
 
       <div class="status-sensitive-media-warning">
         <span>Sensitive content. Click to show.</span>
@@ -126,15 +126,24 @@
 <script>
   import MediaAttachments from './MediaAttachments.html'
   import { store } from '../../_store/store'
+  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
 
   export default {
+    oncreate() {
+      registerClickDelegate(this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
+    },
+    ondestroy() {
+      unregisterClickDelegate(this.get('delegateKey'))
+    },
     components: {
       MediaAttachments
     },
     store: () => store,
     computed: {
       mediaAttachments: (status) => status.media_attachments,
-      sensitiveShown: ($sensitivesShown, contextualStatusId) => !!$sensitivesShown[contextualStatusId]
+      sensitiveShown: ($sensitivesShown, contextualStatusId) => !!$sensitivesShown[contextualStatusId],
+      statusId: (status) => status.id,
+      delegateKey: (statusId) => `sensitive-${statusId}`,
     },
     methods: {
       onClickSensitiveMediaButton() {

routes/_components/status/StatusSpoiler.html

@@ -53,7 +53,7 @@
     computed: {
       spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
       statusId: (status) => status.id,
-      delegateKey: (statusId, timelineType, timelineValue) => `spoiler-${timelineType}-${timelineValue}-${statusId}`
+      delegateKey: (statusId) => `spoiler-${statusId}`
     },
     methods: {
       onClickSpoilerButton() {

routes/_components/status/StatusToolbar.html

@@ -126,12 +126,10 @@
       },
       statusId: (status) => status.id,
       accountId: (status) => status.account.id,
-      disableReply: (statusId, timelineType, timelineValue) => timelineType === 'reply' && statusId === timelineValue,
+      favoriteKey: (statusId) => `fav-${statusId}`,
-      keyPrefix: (timelineType, timelineValue, statusId) => `${timelineType}-${timelineValue}-${statusId}`,
+      reblogKey: (statusId) => `reblog-${statusId}`,
-      favoriteKey: (keyPrefix) => `${keyPrefix}-fav`,
+      replyKey: (statusId) => `reply-${statusId}`,
-      reblogKey: (keyPrefix) => `${keyPrefix}-reblog`,
+      optionsKey: (statusId) => `options-${statusId}`,
-      replyKey: (keyPrefix) => `${keyPrefix}-reply`,
-      optionsKey: (keyPrefix) => `${keyPrefix}-options`,
     }
   }
 </script>