m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-02-14 21:10:41 +01:00
Code Releases Activity

more reliable project nav scroll into view

Browse Source 
* use refs instead if IDs
* fire on mounting too
* consolidate component
This commit is contained in:
Matthias Kretschmann 2018-06-12 10:42:45 +02:00
parent 542dc58244
commit 8182120ea4
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/molecules/ProjectNav.jsx
View File

@ -5,22 +5,15 @@ import Img from 'gatsby-image'
import FullWidth from '../atoms/FullWidth' import FullWidth from '../atoms/FullWidth'
import styles from './ProjectNav.module.scss' import styles from './ProjectNav.module.scss'
const ProjectItem = ({ title, slug, img, current }) => (
<div className={styles.item} id={current ? 'current' : null}>
<Link className={styles.link} to={slug}>
<Img
className={styles.image}
sizes={img.childImageSharp.sizes}
alt={title}
/>
<h1 className={styles.title}>{title}</h1>
</Link>
</div>
)
class ProjectNav extends Component { class ProjectNav extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.scrollToCurrent = this.scrollToCurrent.bind(this)
}
componentDidMount() {
this.scrollToCurrent()
} }
componentDidUpdate() { componentDidUpdate() {
@ -28,13 +21,12 @@ class ProjectNav extends Component {
} }
scrollToCurrent = () => { scrollToCurrent = () => {
const container = window.document.getElementById('scrollContainer') const current = this.currentItem
const current = window.document.getElementById('current')
const currentLeft = current.getBoundingClientRect().left const currentLeft = current.getBoundingClientRect().left
const currentWidth = current.clientWidth const currentWidth = current.clientWidth
const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2 const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
container.scrollLeft = finalPosition this.scrollContainer.scrollLeft = finalPosition
} }
render() { render() {
@ -42,18 +34,32 @@ class ProjectNav extends Component {
return ( return (
<FullWidth> <FullWidth>
<nav className={styles.projectNav} id="scrollContainer"> <nav
className={styles.projectNav}
ref={node => {
this.scrollContainer = node
}}
>
{projects.map(({ node }) => { {projects.map(({ node }) => {
const current = node.slug === project.slug const current = node.slug === project.slug
return ( return (
<ProjectItem <div
className={styles.item}
key={node.slug} key={node.slug}
title={node.title} ref={node => {
current={current} if (current) this.currentItem = node
slug={node.slug} }}
img={node.img} >
/> <Link className={styles.link} to={node.slug}>
<Img
className={styles.image}
sizes={node.img.childImageSharp.sizes}
alt={node.title}
/>
<h1 className={styles.title}>{node.title}</h1>
</Link>
</div>
) )
})} })}
</nav> </nav>
@ -62,13 +68,6 @@ class ProjectNav extends Component {
} }
} }
ProjectItem.propTypes = {
current: PropTypes.bool,
title: PropTypes.string,
slug: PropTypes.string,
img: PropTypes.object
}
ProjectNav.propTypes = { ProjectNav.propTypes = {
projects: PropTypes.array, projects: PropTypes.array,
project: PropTypes.object project: PropTypes.object