From f137f0c56c60c72cf62b8d52072491e228c20179 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 15 Mar 2018 08:59:30 -0700
Subject: [PATCH] simplify and expand click delegates

---
 routes/_components/status/Media.html          | 20 ++++++++++++++++---
 routes/_components/status/Status.html         | 20 +++++++++----------
 .../status/StatusMediaAttachments.html        | 15 +++++++++++---
 routes/_components/status/StatusSpoiler.html  |  2 +-
 routes/_components/status/StatusToolbar.html  | 10 ++++------
 5 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index 027e334f..dd3ef3f9 100644
--- a/routes/_components/status/Media.html
+++ b/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() {
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 01c10dd4..be6e3bfa 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -1,7 +1,7 @@
 <article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}"
          tabindex="0"
-         delegate-key="{{elementKey}}"
-         focus-key="{{elementKey}}"
+         delegate-key="{{delegateKey}}"
+         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}`
       },
diff --git a/routes/_components/status/StatusMediaAttachments.html b/routes/_components/status/StatusMediaAttachments.html
index 192d056c..50ddd3df 100644
--- a/routes/_components/status/StatusMediaAttachments.html
+++ b/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() {
diff --git a/routes/_components/status/StatusSpoiler.html b/routes/_components/status/StatusSpoiler.html
index f84a4c1d..901065e1 100644
--- a/routes/_components/status/StatusSpoiler.html
+++ b/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() {
diff --git a/routes/_components/status/StatusToolbar.html b/routes/_components/status/StatusToolbar.html
index 79ea6f01..3e48b9f1 100644
--- a/routes/_components/status/StatusToolbar.html
+++ b/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,
-      keyPrefix: (timelineType, timelineValue, statusId) => `${timelineType}-${timelineValue}-${statusId}`,
-      favoriteKey: (keyPrefix) => `${keyPrefix}-fav`,
-      reblogKey: (keyPrefix) => `${keyPrefix}-reblog`,
-      replyKey: (keyPrefix) => `${keyPrefix}-reply`,
-      optionsKey: (keyPrefix) => `${keyPrefix}-options`,
+      favoriteKey: (statusId) => `fav-${statusId}`,
+      reblogKey: (statusId) => `reblog-${statusId}`,
+      replyKey: (statusId) => `reply-${statusId}`,
+      optionsKey: (statusId) => `options-${statusId}`,
     }
   }
 </script>
\ No newline at end of file