Simplify click delegate implementation

routes/_components/status/Media.html

@@ -107,11 +107,11 @@
   import { store } from '../../_store/store'
   import LazyImage from '../LazyImage.html'
   import AutoplayVideo from '../AutoplayVideo.html'
-  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
+  import { registerClickDelegate } from '../../_utils/delegate'
 
   export default {
     oncreate() {
-      registerClickDelegate(this.get('delegateKey'), () => {
+      registerClickDelegate(this, this.get('delegateKey'), () => {
         if (this.get('media').type === 'video') {
           this.onClickPlayVideoButton()
         } else {
@@ -119,9 +119,6 @@
         }
       })
     },
-    ondestroy() {
-      unregisterClickDelegate(this.get('delegateKey'))
-    },
     computed: {
       // width/height to show inline
       inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,

routes/_components/status/Status.html

@@ -111,7 +111,7 @@
   import StatusComposeBox from './StatusComposeBox.html'
   import { store } from '../../_store/store'
   import { goto } from 'sapper/runtime.js'
-  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
+  import { registerClickDelegate } from '../../_utils/delegate'
   import { classname } from '../../_utils/classname'
   import { checkDomAncestors } from '../../_utils/checkDomAncestors'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
@@ -126,7 +126,7 @@
       let delegateKey = this.get('delegateKey')
       if (!this.get('isStatusInOwnThread')) {
         // the whole <article> is clickable in this case
-        registerClickDelegate(delegateKey, (e) => this.onClickOrKeydown(e))
+        registerClickDelegate(this, delegateKey, (e) => this.onClickOrKeydown(e))
       }
       if (!this.get('showContent')) {
         scheduleIdleTask(() => {
@@ -136,12 +136,6 @@
         })
       }
     },
-    ondestroy() {
-      let delegateKey = this.get('delegateKey')
-      if (!this.get('isStatusInOwnThread')) {
-        unregisterClickDelegate(delegateKey)
-      }
-    },
     components: {
       StatusSidebar,
       StatusHeader,

routes/_components/status/StatusMediaAttachments.html

@@ -126,14 +126,11 @@
 <script>
   import MediaAttachments from './MediaAttachments.html'
   import { store } from '../../_store/store'
-  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
+  import { registerClickDelegate } from '../../_utils/delegate'
 
   export default {
     oncreate() {
-      registerClickDelegate(this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
+      registerClickDelegate(this, this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
-    },
-    ondestroy() {
-      unregisterClickDelegate(this.get('delegateKey'))
     },
     components: {
       MediaAttachments

routes/_components/status/StatusSpoiler.html

@@ -46,17 +46,14 @@
 </style>
 <script>
   import { store } from '../../_store/store'
-  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
+  import { registerClickDelegate } from '../../_utils/delegate'
   import { mark, stop } from '../../_utils/marks'
   import { emojifyText } from '../../_utils/emojifyText'
   import escapeHtml from 'escape-html'
 
   export default {
     oncreate() {
-      registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
+      registerClickDelegate(this, this.get('delegateKey'), () => this.onClickSpoilerButton())
-    },
-    ondestroy() {
-      unregisterClickDelegate(this.get('delegateKey'))
     },
     store: () => store,
     computed: {

routes/_components/status/StatusToolbar.html

@@ -44,7 +44,7 @@
 <script>
   import IconButton from '../IconButton.html'
   import { store } from '../../_store/store'
-  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
+  import { registerClickDelegates } from '../../_utils/delegate'
   import { setFavorited } from '../../_actions/favorite'
   import { setReblogged } from '../../_actions/reblog'
   import { importDialogs } from '../../_utils/asyncModules'
@@ -54,18 +54,14 @@
 
   export default {
     oncreate() {
-      registerClickDelegate(this.get('favoriteKey'), (e) => this.onFavoriteClick(e))
+      registerClickDelegates(this, {
-      registerClickDelegate(this.get('reblogKey'), (e) => this.onReblogClick(e))
+        [this.get('favoriteKey')]: (e) => this.onFavoriteClick(e),
-      registerClickDelegate(this.get('replyKey'), (e) => this.onReplyClick(e))
+        [this.get('reblogKey')]: (e) => this.onReblogClick(e),
-      registerClickDelegate(this.get('optionsKey'), (e) => this.onOptionsClick(e))
+        [this.get('replyKey')]: (e) => this.onReplyClick(e),
+        [this.get('optionsKey')]: (e) => this.onOptionsClick(e)
+      })
       on('postedStatus', this, this.onPostedStatus)
     },
-    ondestroy() {
-      unregisterClickDelegate(this.get('favoriteKey'))
-      unregisterClickDelegate(this.get('reblogKey'))
-      unregisterClickDelegate(this.get('replyKey'))
-      unregisterClickDelegate(this.get('optionsKey'))
-    },
     components: {
       IconButton
     },

routes/_utils/delegate.js

@@ -29,12 +29,18 @@ function onEvent (e) {
   stop('delegate onEvent')
 }
 
-export function registerClickDelegate (key, callback) {
+export function registerClickDelegates (component, delegates) {
-  callbacks[key] = callback
+  Object.assign(callbacks, delegates)
+
+  component.on('destroy', () => {
+    Object.keys(delegates).forEach(key => {
+      delete callbacks[key]
+    })
+  })
 }
 
-export function unregisterClickDelegate (key) {
+export function registerClickDelegate (component, key, callback) {
-  delete callbacks[key]
+  registerClickDelegates(component, {[key]: callback})
 }
 
 if (process.browser) {