clean up icon animations (#203)

routes/_components/IconButton.html

@@ -105,17 +105,6 @@
   import { store } from '../_store/store'
 
   export default {
-    oncreate () {
-      this.observe('animation', animation => {
-        let { reduceMotion } = this.store.get()
-        if (!animation || reduceMotion) {
-          return
-        }
-        let svg = this.refs.svg
-        let animations = animation.map(({properties, options}) => svg.animate(properties, options))
-        animations.forEach(anim => anim.play())
-      })
-    },
     store: () => store,
     computed: {
       computedClass: (pressable, pressed, big, muted, className) => {
@@ -128,6 +117,17 @@
           className
         )
       }
+    },
+    methods: {
+      animate (animation) {
+        let { reduceMotion } = this.store.get()
+        if (!animation || reduceMotion) {
+          return
+        }
+        let svg = this.refs.svg
+        let animations = animation.map(({properties, options}) => svg.animate(properties, options))
+        animations.forEach(anim => anim.play())
+      }
     }
   }
 </script>

routes/_components/profile/AccountProfileFollow.html

@@ -6,7 +6,7 @@
     pressed="{{following}}"
     big="true"
     on:click="onFollowButtonClick(event)"
-    animation="{{animateFollowButton && followButtonAnimation}}"
+    ref:icon
   />
 </div>
 <style>
@@ -38,7 +38,6 @@
           followRequested,
           blocking
         } = this.get()
-        this.set({animateFollowButton: true}) // TODO: this should be an event, not toggling a boolean
         if (blocking) { // unblock
           await setAccountBlocked(accountId, false)
         } else { // follow/unfollow
@@ -46,16 +45,14 @@
           if (!account.locked) { // be optimistic, show the user that it succeeded
             this.set({overrideFollowing: newFollowingValue})
           }
+          if (newFollowingValue) {
+            this.refs.icon.animate(FOLLOW_BUTTON_ANIMATION)
+          }
           await setAccountFollowed(accountId, newFollowingValue)
         }
-
-        this.set({animateFollowButton: false}) // let animation play next time
       }
     },
     store: () => store,
-    data: () => ({
-      followButtonAnimation: FOLLOW_BUTTON_ANIMATION
-    }),
     computed: {
       accountId: (account) => account.id,
       following: (relationship, overrideFollowing) => {

routes/_components/status/StatusToolbar.html

@@ -15,7 +15,7 @@
     disabled="{{reblogDisabled}}"
     href="{{reblogIcon}}"
     delegateKey="{{reblogKey}}"
-    animation="{{animateReblog && reblogAnimation}}"
+    ref:reblogIcon
   />
   <IconButton
     label="Favorite"
@@ -23,7 +23,7 @@
     pressed="{{favorited}}"
     href="#fa-star"
     delegateKey="{{favoriteKey}}"
-    animation="{{animateFavorite && favoriteAnimation}}"
+    ref:favoriteIcon
   />
   <IconButton
     label="Show more options"
@@ -77,15 +77,21 @@
         e.preventDefault()
         e.stopPropagation()
         let { originalStatusId, favorited } = this.get()
-        /* no await */ setFavorited(originalStatusId, !favorited)
+        let newFavoritedValue = !favorited
-        this.set({animateFavorite: !favorited})
+        /* no await */ setFavorited(originalStatusId, newFavoritedValue)
+        if (newFavoritedValue) {
+          this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
+        }
       },
       onReblogClick (e) {
         e.preventDefault()
         e.stopPropagation()
         let { originalStatusId, reblogged } = this.get()
-        /* no await */ setReblogged(originalStatusId, !reblogged)
+        let newRebloggedValue = !reblogged
-        this.set({animateReblog: !reblogged})
+        /* no await */ setReblogged(originalStatusId, newRebloggedValue)
+        if (newRebloggedValue) {
+          this.refs.reblogIcon.animate(REBLOG_ANIMATION)
+        }
       },
       onReplyClick (e) {
         e.preventDefault()