2018-06-11 23:54:16 +02:00
|
|
|
import React, { Component } from 'react'
|
2018-04-16 22:32:30 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2018-06-21 21:06:53 +02:00
|
|
|
import { Link } from 'gatsby'
|
2018-05-04 01:58:43 +02:00
|
|
|
import Img from 'gatsby-image'
|
2018-06-11 19:48:38 +02:00
|
|
|
import styles from './ProjectNav.module.scss'
|
2018-04-16 22:32:30 +02:00
|
|
|
|
2018-06-12 11:16:17 +02:00
|
|
|
const ProjectLink = ({ node }) => (
|
|
|
|
<Link className={styles.link} to={node.slug}>
|
|
|
|
<Img
|
|
|
|
className={styles.image}
|
2018-06-19 22:48:33 +02:00
|
|
|
fluid={node.img.childImageSharp.fluid}
|
2018-06-12 11:16:17 +02:00
|
|
|
alt={node.title}
|
|
|
|
/>
|
|
|
|
<h1 className={styles.title}>{node.title}</h1>
|
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
|
2018-06-11 23:54:16 +02:00
|
|
|
class ProjectNav extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
2018-06-12 10:42:45 +02:00
|
|
|
|
|
|
|
this.scrollToCurrent = this.scrollToCurrent.bind(this)
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.scrollToCurrent()
|
2018-06-11 23:54:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
this.scrollToCurrent()
|
|
|
|
}
|
|
|
|
|
|
|
|
scrollToCurrent = () => {
|
2018-06-12 10:42:45 +02:00
|
|
|
const current = this.currentItem
|
2018-06-11 23:54:16 +02:00
|
|
|
const currentLeft = current.getBoundingClientRect().left
|
|
|
|
const currentWidth = current.clientWidth
|
|
|
|
const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
|
|
|
|
|
2018-06-12 10:42:45 +02:00
|
|
|
this.scrollContainer.scrollLeft = finalPosition
|
2018-06-11 23:54:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { projects, project } = this.props
|
|
|
|
|
|
|
|
return (
|
2018-06-12 11:16:17 +02:00
|
|
|
<nav
|
|
|
|
className={styles.projectNav}
|
|
|
|
ref={node => {
|
|
|
|
this.scrollContainer = node
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{projects.map(({ node }) => {
|
|
|
|
const current = node.slug === project.slug
|
2018-06-11 23:54:16 +02:00
|
|
|
|
2018-06-12 11:16:17 +02:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={styles.item}
|
|
|
|
key={node.slug}
|
|
|
|
ref={node => {
|
|
|
|
if (current) this.currentItem = node
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<ProjectLink node={node} />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</nav>
|
2018-06-11 23:54:16 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-06-12 11:16:17 +02:00
|
|
|
ProjectLink.propTypes = {
|
|
|
|
node: PropTypes.object
|
|
|
|
}
|
|
|
|
|
2018-04-16 22:32:30 +02:00
|
|
|
ProjectNav.propTypes = {
|
2018-06-11 23:54:16 +02:00
|
|
|
projects: PropTypes.array,
|
|
|
|
project: PropTypes.object
|
2018-04-16 22:32:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export default ProjectNav
|