From f80cb34d1894a4ab2798686d3e285b4577fd7e3a Mon Sep 17 00:00:00 2001
From: Marvin Heilemann <marvin.heilemann@googlemail.com>
Date: Fri, 10 Jan 2020 15:31:06 +0100
Subject: [PATCH] Added better footnoteref animations

---
 TODO.md                               |  2 +-
 content/projects/__demo__/index.md    | 11 +++++
 src/layouts/Article.jsx               | 64 ++++++++++++++++++++-------
 src/styles/_animations.scss           | 28 ++++++++++++
 src/styles/_base.scss                 | 39 +++++++++++++++-
 src/styles/app.scss                   |  2 +-
 src/styles/components/_animation.scss | 28 ------------
 src/styles/components/_footnote.scss  | 11 +++++
 src/styles/components/_list.scss      | 15 +------
 src/utils/animate.js                  | 24 ++++------
 src/utils/helper.js                   | 18 ++++++++
 11 files changed, 167 insertions(+), 75 deletions(-)
 create mode 100644 src/styles/_animations.scss
 delete mode 100644 src/styles/components/_animation.scss

diff --git a/TODO.md b/TODO.md
index c9ae58b..653f537 100644
--- a/TODO.md
+++ b/TODO.md
@@ -15,7 +15,7 @@
 - [x] add custom slug to all pages
 - [x] test `postcss-easing-gradients` with Scss loaded in `/src`
 - [ ] add md table of contents
-- [ ] new start page: https://labs.semplice.com/s5-vertical-grid
+- [x] new start page: https://labs.semplice.com/s5-vertical-grid
 - [x] test purgecss with classes from Markdown files
 - [ ] add NOW deployment
   - [ ] Setup Nameserver
diff --git a/content/projects/__demo__/index.md b/content/projects/__demo__/index.md
index 03d43a1..7066df8 100644
--- a/content/projects/__demo__/index.md
+++ b/content/projects/__demo__/index.md
@@ -165,6 +165,17 @@ ModuleNotFoundError: No module named 'flask'
 > cleaner yet i see a bird i stare at it i meow at it i do a <b>wiggle come
 > here, eat a plant, kill</b>
 
+<div class="container container--small">
+  <blockquote>
+    <p>
+      Sleep in the bathroom sink allways wanting food. Rub whiskers on bare skin act innocent intently sniff hand intrigued by the shower.
+    </p>
+    <footer>
+      Marvin Heilemann
+    </footer>
+  </blockquote>
+</div>
+
 ## Images
 
 ![Caption could be here](img-01.jpg)
diff --git a/src/layouts/Article.jsx b/src/layouts/Article.jsx
index 73e0957..c82419c 100644
--- a/src/layouts/Article.jsx
+++ b/src/layouts/Article.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { scrollTo } from '../utils/animate'
+import { updateLocationHash, getDocumentHeight } from '../utils/helper'
 import { prefersReducedMotion } from '../utils/accessibility'
 import Lightbox from '../scripts/lightbox'
 
@@ -10,30 +11,64 @@ class Article extends React.Component {
   componentDidMount() {
     Lightbox.init()
 
-    this.scrollElements = document.querySelectorAll(
-      '.footnote-backref, .footnote-ref, .toc a'
-    )
-    this.scrollElements.forEach(ref => {
-      ref.addEventListener('click', this.handleClick)
-    })
+    // TODO: put article blocks into separate components
+    if (!prefersReducedMotion()) {
+      this.scrollElements = document.querySelectorAll(
+        '.footnote-backref, .footnote-ref, .toc a'
+      )
+      this.scrollElements.forEach((ref) => {
+        ref.addEventListener('click', this.handleClick)
+      })
+    }
   }
 
   componentWillUnmount() {
     Lightbox.destroy()
 
-    this.scrollElements.forEach(ref => {
-      ref.removeEventListener('click', this.handleClick)
-    })
+    if (this.scrollElements.length > 0) {
+      this.scrollElements.forEach((ref) => {
+        ref.removeEventListener('click', this.handleClick)
+      })
+    }
   }
 
-  handleClick(event) {
-    if (prefersReducedMotion()) {
-      return
-    }
+  handleClick = (event) => {
     event.preventDefault()
     const target = document.getElementById(event.target.hash.substr(1))
     if (target) {
-      scrollTo(target)
+      const offsetPosition = scrollTo(target)
+
+      // highlight target element when reached
+      function onScrollEvent() {
+        if (
+          window.scrollY === offsetPosition || // reached element
+          window.scrollY === getDocumentHeight() - window.innerHeight || // reached document end
+          window.scrollY === 0 // reached document start
+        ) {
+          removeListeners()
+          updateLocationHash(target.id)
+
+          target.classList.add('highlight')
+          setTimeout(() => {
+            target.classList.remove('highlight')
+          }, 2400)
+        }
+      }
+
+      // remove event listeners when user interrupts `scrollTo` function
+      function detectScrollInterrupt() {
+        removeListeners()
+      }
+
+      function removeListeners() {
+        window.removeEventListener('scroll', onScrollEvent)
+        window.removeEventListener('wheel', detectScrollInterrupt)
+        window.removeEventListener('keyup', detectScrollInterrupt)
+      }
+
+      window.addEventListener('scroll', onScrollEvent)
+      window.addEventListener('wheel', detectScrollInterrupt)
+      window.addEventListener('keyup', detectScrollInterrupt)
     }
   }
 
@@ -48,7 +83,6 @@ class Article extends React.Component {
       <>
         <article
           id="article"
-          // className="container container--small"
           dangerouslySetInnerHTML={{
             __html: this.props.html || fallbackContent,
           }}
diff --git a/src/styles/_animations.scss b/src/styles/_animations.scss
new file mode 100644
index 0000000..dcb1444
--- /dev/null
+++ b/src/styles/_animations.scss
@@ -0,0 +1,28 @@
+// Pulsation
+@keyframes pulse {
+  0% {
+    transform: scale(0.3);
+  }
+  80%,
+  100% {
+    opacity: 0;
+  }
+}
+
+// // Pop-out effect
+// @keyframes seeMe {
+//   0% {
+//     transform: scale(1);
+//   }
+//   70% {
+//     transform: scale(2);
+//   }
+//   100% {
+//     transform: scale(1);
+//   }
+// }
+
+// .seeMe {
+//   // transition: transform 300ms ease-in-out;
+//   animation: seeMe 600ms cubic-bezier(0, 0.63, 0.49, 1.7);
+// }
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 987ab39..535da86 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -66,7 +66,7 @@ article {
   form,
   figure,
   table,
-  blockquote,
+  fieldset,
   p,
   ul,
   ol,
@@ -126,4 +126,41 @@ article {
       padding: var(--spacing-md);
     }
   }
+
+  blockquote {
+    position: relative;
+    margin: 0 0 var(--content-margin) 0;
+    padding: var(--spacing-xxl) var(--spacing-xxl)
+      calc(var(--spacing-xxl) - 5px);
+    background: var(--color-10);
+    font-family: var(--font-serif);
+    z-index: 0;
+    text-align: center;
+
+    &::before {
+      content: '"';
+      position: absolute;
+      top: 0px;
+      left: 20px;
+      font-size: 200px;
+      font-weight: var(--font-black);
+      font-family: var(--font-serif);
+      line-height: 1;
+      z-index: -1;
+      opacity: 0.1;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+
+    footer {
+      margin-top: var(--spacing-lg);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: var(--text-sm);
+      font-weight: var(--font-semi-bold);
+      font-family: var(--font-sans);
+    }
+  }
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 2b0992c..857cf1d 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -7,6 +7,7 @@
 @import 'mixins';
 @import 'reset';
 @import 'base';
+@import 'animations';
 
 // ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
 // Themes
@@ -36,7 +37,6 @@
 // ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
 // Components
 
-@import 'components/animation';
 @import 'components/backdrop';
 @import 'components/button';
 @import 'components/code';
diff --git a/src/styles/components/_animation.scss b/src/styles/components/_animation.scss
deleted file mode 100644
index e55f5d3..0000000
--- a/src/styles/components/_animation.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Pop-out effect
-@keyframes seeMe {
-  0% {
-    transform: scale(1);
-  }
-  70% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-.seeMe {
-  // transition: transform 300ms ease-in-out;
-  animation: seeMe 600ms cubic-bezier(0, 0.63, 0.49, 1.7);
-}
-
-// Pulsation
-@keyframes pulse {
-  0% {
-    transform: scale(0.3);
-  }
-  80%,
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/src/styles/components/_footnote.scss b/src/styles/components/_footnote.scss
index dad146c..2bac354 100644
--- a/src/styles/components/_footnote.scss
+++ b/src/styles/components/_footnote.scss
@@ -15,7 +15,18 @@ article {
 }
 
 .footnotes {
+  @extend .container;
+  @extend .container--small;
+
   a {
     text-decoration: none;
   }
+
+  li {
+    transition: background 240ms linear;
+  }
+
+  .highlight {
+    background: var(--color-10);
+  }
 }
diff --git a/src/styles/components/_list.scss b/src/styles/components/_list.scss
index ab9345a..0bd95e0 100644
--- a/src/styles/components/_list.scss
+++ b/src/styles/components/_list.scss
@@ -41,19 +41,6 @@ article {
         justify-content: center;
         opacity: 0.6;
       }
-
-      // &:nth-child(1n)::before {
-      //   content: '♡';
-      // }
-      // &:nth-child(2n)::before {
-      //   content: '♢';
-      // }
-      // &:nth-child(3n)::before {
-      //   content: '♤';
-      // }
-      // &:nth-child(4n)::before {
-      //   content: '♧';
-      // }
     }
   }
 
@@ -66,7 +53,7 @@ article {
       &::before {
         content: counter(counter) '.';
         left: 0;
-        top: 8px;
+        top: 7px;
         width: 13px;
         height: 13px;
         font-size: var(--text-sm);
diff --git a/src/utils/animate.js b/src/utils/animate.js
index f4efe4d..fc17b43 100644
--- a/src/utils/animate.js
+++ b/src/utils/animate.js
@@ -1,28 +1,22 @@
-import { updateLocationHash } from './helper'
-
+/**
+ * Scroll to a HTML element by target.
+ *
+ * @param {HTMLElement} target HTML element to scroll to
+ *
+ * @returns {number} Y position of target element
+ */
 export function scrollTo(target) {
   const offset = 50
 
-  target.classList.remove('seeMe')
   const scrollY = window.scrollY || window.pageYOffset
   const headerHeight = document.getElementById('header').offsetHeight
   const elementPosition = target.getBoundingClientRect().top + scrollY
   const offsetPosition = Math.round(elementPosition - headerHeight - offset)
 
-  window.addEventListener('scroll', function onScrollEvent() {
-    if (
-      window.scrollY === offsetPosition || // reached element
-      window.scrollY === document.body.scrollHeight - window.innerHeight || // reached document end
-      window.scrollY === 0 // reached document start
-    ) {
-      window.removeEventListener('scroll', onScrollEvent)
-      target.classList.add('seeMe')
-      updateLocationHash(target.id)
-    }
-  })
-
   window.scrollTo({
     top: offsetPosition,
     behavior: 'smooth',
   })
+
+  return offsetPosition
 }
diff --git a/src/utils/helper.js b/src/utils/helper.js
index d08760d..644ca4c 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -21,6 +21,24 @@ export function getRandomDate(
   return dayjs(+start + Math.random() * (end - start))
 }
 
+/**
+ * Get documents real height.
+ */
+export function getDocumentHeight() {
+  const body = document.body
+  const html = document.documentElement
+
+  let height = Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    html.clientHeight,
+    html.scrollHeight,
+    html.offsetHeight
+  )
+
+  return height
+}
+
 /**
  * Returns a random number between min (inclusive) and max (exclusive)
  *