refactor: refactor parent focus styles (#1036)

src/routes/_components/status/Notification.html

@@ -9,9 +9,7 @@
            aria-posinset={index}
            aria-setsize={length}
            aria-label={ariaLabel}
-           on:focus="onFocus()"
+           on:applyFocusStylesToParent="noop()"
-           on:blur="onBlur()"
-           ref:article
   >
     <StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
                   {account} {accountId} {uuid} isStatusInNotification="true" />
@@ -48,6 +46,8 @@
   import { goto } from '../../../../__sapper__/client'
   import { composeNewStatusMentioning } from '../../_actions/mention'
   import { classname } from '../../_utils/classname'
+  import { applyFocusStylesToParent } from '../../_utils/events'
+  import noop from 'lodash-es/noop'
 
   export default {
     components: {
@@ -80,6 +80,7 @@
       ))
     },
     methods: {
+      noop,
       openAuthorProfile () {
         let { accountId } = this.get()
         goto(`/accounts/${accountId}`)
@@ -87,14 +88,10 @@
       async mentionAuthor () {
         let { account } = this.get()
         await composeNewStatusMentioning(account)
-      },
-      // apply focus styles to parent rather than article because it shows up better
-      onFocus () {
-        this.refs.article.parentElement.classList.toggle('focus', true)
-      },
-      onBlur () {
-        this.refs.article.parentElement.classList.toggle('focus', false)
       }
+    },
+    events: {
+      applyFocusStylesToParent
     }
   }
 </script>

src/routes/_components/status/Status.html

@@ -5,9 +5,7 @@
          aria-setsize={length}
          aria-label={ariaLabel}
          on:recalculateHeight
-         on:focus="onFocus()"
+         on:applyFocusStylesToParent="noop()"
-         on:blur="onBlur()"
-         ref:article
 >
   {#if showHeader}
     <StatusHeader {...params} />
@@ -136,6 +134,8 @@
   import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
   import { absoluteDateFormatter } from '../../_utils/formatters'
   import { composeNewStatusMentioning } from '../../_actions/mention'
+  import { applyFocusStylesToParent } from '../../_utils/events'
+  import noop from 'lodash-es/noop'
 
   const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
   const isUserInputElement = node => INPUT_TAGS.has(node.localName)
@@ -181,6 +181,7 @@
     }),
     store: () => store,
     methods: {
+      noop,
       onClickOrKeydown (e) {
         let { type, keyCode, target } = e
 
@@ -214,13 +215,6 @@
       async mentionAuthor () {
         let { accountForShortcut } = this.get()
         await composeNewStatusMentioning(accountForShortcut)
-      },
-      // apply focus styles to parent rather than article because it shows up better
-      onFocus () {
-        this.refs.article.parentElement.classList.toggle('focus', true)
-      },
-      onBlur () {
-        this.refs.article.parentElement.classList.toggle('focus', false)
       }
     },
     computed: {
@@ -324,6 +318,9 @@
         absoluteFormattedDate,
         shortcutScope
       })
+    },
+    events: {
+      applyFocusStylesToParent
     }
   }
 </script>

src/routes/_utils/events.js

@@ -49,3 +49,25 @@ export function selectionChange (node, callback) {
     }
   }
 }
+
+// in some cases we apply focus styles to parent rather
+// than the node itself because it shows up better
+export function applyFocusStylesToParent (node) {
+  function onFocus () {
+    node.parentElement.classList.toggle('focus', true)
+  }
+
+  function onBlur () {
+    node.parentElement.classList.toggle('focus', false)
+  }
+
+  node.addEventListener('focus', onFocus)
+  node.addEventListener('blur', onBlur)
+
+  return {
+    destroy () {
+      node.removeEventListener('focus', onFocus)
+      node.removeEventListener('blur', onBlur)
+    }
+  }
+}