availability component tweaks

data/meta.json

@@ -10,7 +10,11 @@
     "GitHub": "https://github.com/kremalicious",
     "Dribbble": "https://dribbble.com/kremalicious"
   },
-  "availability": true,
+  "availability": {
+    "status": true,
+    "available": "👔 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Let’s talk</a>!",
+    "unavailable": "Not available for new projects."
+  },
   "typekit": "dtg3zui",
   "googleanalytics": "UA-1441794-4"
 }

src/components/atoms/Animations.js

@@ -11,3 +11,13 @@ export const FadeIn = props => (
     {...props}
   />
 )
+
+export const MoveIn = props => (
+  <CSSTransition
+    classNames="movein"
+    appear={true}
+    in={true}
+    timeout={{ enter: 300, exit: 200, appear: 300 }}
+    {...props}
+  />
+)

src/components/atoms/Animations.scss

@@ -1,18 +1,11 @@
-.fadein-appear {
-    opacity: .01;
-
-    &.fadein-appear-active {
-        opacity: 1;
-        transition: 400ms ease-in;
-    }
-}
-
+.fadein-appear,
 .fadein-enter {
     opacity: .01;
 
+    &.fadein-appear-active,
     &.fadein-enter-active {
         opacity: 1;
-        transition: 300ms ease-out;
+        transition: 400ms ease-in;
     }
 }
 
@@ -24,3 +17,27 @@
         opacity: .01;
     }
 }
+
+.movein-appear,
+.movein-enter {
+    opacity: .01;
+    transform: translate3d(0, 3rem, 0);
+
+    &.movein-appear-active,
+    &.movein-enter-active {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition: 300ms ease-out;
+    }
+}
+
+.movein-exit {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: 100ms ease-out;
+
+    &.movein-exit-active {
+        opacity: .01;
+        transform: translate3d(0, 3rem, 0);
+    }
+}

src/components/molecules/Availability.js

@@ -1,37 +1,82 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, Component } from 'react'
 import PropTypes from 'prop-types'
-import { FadeIn } from '../atoms/Animations'
+import { MoveIn } from '../atoms/Animations'
 import './Availability.scss'
 
-const Availability = ({ meta, hide }) => {
-  const { availability, social } = meta
+class Availability extends Component {
+  constructor(props) {
+    super(props)
+    this.handleScroll = this.handleScroll.bind(this)
+  }
 
-  const available = `👔 Available for new projects. <a href="${
-    social.Email
-  }">Let’s talk</a>!`
-  const unavailable = 'Not available for new projects.'
+  componentDidMount() {
+    if (this.props.meta.availability.status === true) {
+      let supportsPassive = false
 
-  return (
-    <Fragment>
-      {!hide && (
-        <FadeIn>
-          <aside
-            className={
-              availability
-                ? 'availability available'
-                : 'availability unavailable'
-            }
-          >
-            <p
-              dangerouslySetInnerHTML={{
-                __html: availability ? available : unavailable,
-              }}
-            />
-          </aside>
-        </FadeIn>
-      )}
-    </Fragment>
-  )
+      try {
+        const opts = Object.defineProperty({}, 'passive', {
+          get: function() {
+            supportsPassive = true
+          },
+        })
+        window.addEventListener('test', null, opts)
+      } catch (e) {
+        return e
+      }
+
+      window.addEventListener('scroll', this.handleScroll, supportsPassive ? { passive: true } : false)
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll() {
+    let timeout
+    const footer = document.getElementsByClassName('footer')[0]
+    const availability = document.getElementsByClassName('availability')[0]
+
+    if (!timeout) {
+      timeout = setTimeout(function() {
+        timeout = null
+
+        if (footer.getBoundingClientRect().top <= window.innerHeight) {
+          availability.style.opacity = 0
+          window.removeEventListener('scroll', this.handleScroll)
+        } else {
+          availability.style.opacity = 1
+        }
+      }, 300)
+    }
+  }
+
+  render() {
+    const { availability } = this.props.meta
+    const { status, available, unavailable } = availability
+
+    return (
+      <Fragment>
+        {!this.props.hide && (
+          <MoveIn>
+            <aside
+              className={
+                status
+                  ? 'availability available'
+                  : 'availability unavailable'
+              }
+            >
+              <p
+                dangerouslySetInnerHTML={{
+                  __html: status ? available : unavailable,
+                }}
+              />
+            </aside>
+          </MoveIn>
+        )}
+      </Fragment>
+    )
+  }
 }
 
 Availability.propTypes = {

src/components/molecules/Availability.scss

@@ -9,6 +9,7 @@
     z-index: 2;
     padding: $spacer / 2;
     display: block;
+    transition: opacity .2s ease-out;
 
     p { margin-bottom: 0; }
 
@@ -17,4 +18,8 @@
         position: fixed;
         bottom: $spacer;
     }
+
+    a {
+        border-bottom: 1px solid rgba($brand-cyan, .4);
+    }
 }

src/components/organisms/Header.js

@@ -23,7 +23,7 @@ const Header = ({ meta, isHomepage }) => {
       </FadeIn>
 
       <Social meta={meta} hide={!isHomepage} />
-      <Availability meta={meta} hide={!isHomepage} />
+      <Availability meta={meta} hide={!isHomepage && !meta.availability.status} />
     </header>
   )
 }

src/layouts/index.js

@@ -73,7 +73,11 @@ export const query = graphql`
         GitHub
         Dribbble
       }
-      availability
+      availability {
+        status
+        available
+        unavailable
+      }
       typekit
       googleanalytics
     }