From 488e87bda1559d96afeb442c6d00495853b5acb1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 24 Sep 2019 00:28:40 -0700
Subject: [PATCH] fix: reduce motion disables nav indicator animation (#1523)

fixes #1521
---
 src/routes/_components/NavItem.html | 60 ++++++++++++++++-------------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html
index 89a2acff..b0242295 100644
--- a/src/routes/_components/NavItem.html
+++ b/src/routes/_components/NavItem.html
@@ -107,36 +107,19 @@
 
   export default {
     oncreate () {
-      const { name } = this.get()
-      const indicator = this.refs.indicator
       on('animateNavPart1', this, ({ fromPage, toPage }) => {
-        if (fromPage !== name) {
-          return
+        const { name } = this.get()
+        const { reduceMotion } = this.store.get()
+        if (fromPage === name && !reduceMotion) {
+          this.animatePart1({ toPage })
         }
-        mark('animateNavPart1 gBCR')
-        const fromRect = indicator.getBoundingClientRect()
-        stop('animateNavPart1 gBCR')
-        emit('animateNavPart2', { fromRect, fromPage, toPage })
       })
-      on('animateNavPart2', this, ({ fromPage, fromRect, toPage }) => {
-        if (toPage !== name) {
-          return
+      on('animateNavPart2', this, ({ toPage, fromRect }) => {
+        const { name } = this.get()
+        const { reduceMotion } = this.store.get()
+        if (toPage === name && !reduceMotion) {
+          this.animatePart2({ fromRect })
         }
-        mark('animateNavPart2 gBCR')
-        const toRect = indicator.getBoundingClientRect()
-        stop('animateNavPart2 gBCR')
-        const translateX = fromRect.left - toRect.left
-        const scaleX = fromRect.width / toRect.width
-        indicator.style.transform = `translateX(${translateX}px) scaleX(${scaleX})`
-        const onTransitionEnd = () => {
-          indicator.removeEventListener('transitionend', onTransitionEnd)
-          indicator.classList.remove('animate')
-        }
-        indicator.addEventListener('transitionend', onTransitionEnd)
-        doubleRAF(() => {
-          indicator.classList.add('animate')
-          indicator.style.transform = ''
-        })
       })
     },
     store: () => store,
@@ -175,6 +158,31 @@
           e.preventDefault()
           e.stopPropagation()
         }
+      },
+      animatePart1 ({ toPage }) {
+        const indicator = this.refs.indicator
+        mark('animateNavPart1 gBCR')
+        const fromRect = indicator.getBoundingClientRect()
+        stop('animateNavPart1 gBCR')
+        emit('animateNavPart2', { fromRect, toPage })
+      },
+      animatePart2 ({ fromRect }) {
+        const indicator = this.refs.indicator
+        mark('animateNavPart2 gBCR')
+        const toRect = indicator.getBoundingClientRect()
+        stop('animateNavPart2 gBCR')
+        const translateX = fromRect.left - toRect.left
+        const scaleX = fromRect.width / toRect.width
+        indicator.style.transform = `translateX(${translateX}px) scaleX(${scaleX})`
+        const onTransitionEnd = () => {
+          indicator.removeEventListener('transitionend', onTransitionEnd)
+          indicator.classList.remove('animate')
+        }
+        indicator.addEventListener('transitionend', onTransitionEnd)
+        doubleRAF(() => {
+          indicator.classList.add('animate')
+          indicator.style.transform = ''
+        })
       }
     },
     components: {