Improve photos page
This commit is contained in:
parent
7c714449f9
commit
fc87fabab5
|
@ -43,31 +43,6 @@ class AlbumPage extends Component {
|
|||
this.setActiveImage = this.setActiveImage.bind(this)
|
||||
|
||||
this.photoAmount = 1
|
||||
|
||||
this.keyDownEvent = e => {
|
||||
const activeImage = this.state.activeImage
|
||||
if (activeImage != -1) {
|
||||
if (e.key == 'ArrowRight') {
|
||||
this.setActiveImage((activeImage + 1) % this.photoAmount)
|
||||
}
|
||||
|
||||
if (e.key == 'ArrowLeft') {
|
||||
if (activeImage <= 0) {
|
||||
this.setActiveImage(this.photoAmount - 1)
|
||||
} else {
|
||||
this.setActiveImage(activeImage - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('keydown', this.keyDownEvent)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('keydown', this.keyDownEvent)
|
||||
}
|
||||
|
||||
setActiveImage(index, id) {
|
||||
|
|
|
@ -3,22 +3,43 @@ import Layout from '../../Layout'
|
|||
import gql from 'graphql-tag'
|
||||
import { Query } from 'react-apollo'
|
||||
import PhotoGallery from '../../PhotoGallery'
|
||||
import AlbumSidebar from '../AlbumPage/AlbumSidebar'
|
||||
|
||||
const photoQuery = gql`
|
||||
query allPhotosPage {
|
||||
myPhotos(orderBy: title_desc) {
|
||||
id
|
||||
myAlbums(orderBy: title_asc) {
|
||||
title
|
||||
thumbnail {
|
||||
url
|
||||
width
|
||||
height
|
||||
id
|
||||
photos(orderBy: title_desc) {
|
||||
id
|
||||
title
|
||||
thumbnail {
|
||||
url
|
||||
width
|
||||
height
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
class PhotosPage extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
activeAlbum: null,
|
||||
activeIndex: null,
|
||||
}
|
||||
}
|
||||
|
||||
setActiveImage(album, index) {
|
||||
this.setState({
|
||||
activeIndex: index,
|
||||
activeAlbum: album,
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Layout>
|
||||
|
@ -26,12 +47,40 @@ class PhotosPage extends Component {
|
|||
{({ loading, error, data }) => {
|
||||
if (error) return error
|
||||
|
||||
let galleryGroups = []
|
||||
|
||||
if (data.myAlbums) {
|
||||
galleryGroups = data.myAlbums.map(album => (
|
||||
<div key={album.id}>
|
||||
<h1>{album.title}</h1>
|
||||
<PhotoGallery
|
||||
onSelectImage={index => {
|
||||
this.setActiveImage(album.id, index)
|
||||
}}
|
||||
activeIndex={
|
||||
this.state.activeAlbum == album.id
|
||||
? this.state.activeIndex
|
||||
: -1
|
||||
}
|
||||
loading={loading}
|
||||
photos={album.photos}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
let activeImage = null
|
||||
if (this.state.activeAlbum) {
|
||||
activeImage = data.myAlbums.find(
|
||||
album => album.id == this.state.activeAlbum
|
||||
).photos[this.state.activeIndex].id
|
||||
}
|
||||
|
||||
return (
|
||||
<PhotoGallery
|
||||
loading={loading}
|
||||
title="All photos"
|
||||
photos={data.myPhotos}
|
||||
/>
|
||||
<div>
|
||||
{galleryGroups}
|
||||
<AlbumSidebar imageId={activeImage} />
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</Query>
|
||||
|
|
|
@ -18,7 +18,7 @@ const PhotoContainer = styled.div`
|
|||
position: relative;
|
||||
`
|
||||
|
||||
const Photo = photoProps => {
|
||||
const PhotoImg = photoProps => {
|
||||
const StyledPhoto = styled(animated.img)`
|
||||
height: 200px;
|
||||
min-width: 100%;
|
||||
|
@ -29,18 +29,30 @@ const Photo = photoProps => {
|
|||
const [props, set, stop] = useSpring(() => ({ opacity: 0 }))
|
||||
|
||||
return (
|
||||
<LazyLoad>
|
||||
<StyledPhoto
|
||||
{...photoProps}
|
||||
style={props}
|
||||
onLoad={() => {
|
||||
set({ opacity: 1 })
|
||||
}}
|
||||
/>
|
||||
</LazyLoad>
|
||||
<StyledPhoto
|
||||
{...photoProps}
|
||||
style={props}
|
||||
onLoad={() => {
|
||||
set({ opacity: 1 })
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
class Photo extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return nextProps.src != this.props.src
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<LazyLoad>
|
||||
<PhotoImg {...this.props} />
|
||||
</LazyLoad>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const PhotoOverlay = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -60,46 +72,81 @@ const PhotoFiller = styled.div`
|
|||
flex-grow: 999999;
|
||||
`
|
||||
|
||||
const PhotoGallery = ({ activeIndex = -1, photos, loading, onSelectImage }) => {
|
||||
let photoElements = null
|
||||
if (photos) {
|
||||
photoElements = photos.map((photo, index) => {
|
||||
const active = activeIndex == index
|
||||
class PhotoGallery extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
let minWidth = 100
|
||||
if (photo.thumbnail) {
|
||||
minWidth = Math.floor(
|
||||
(photo.thumbnail.width / photo.thumbnail.height) * 200
|
||||
)
|
||||
}
|
||||
// this.keyDownEvent = e => {
|
||||
// if (!this.props.onSelectImage) {
|
||||
// return
|
||||
// }
|
||||
|
||||
return (
|
||||
<PhotoContainer
|
||||
key={photo.id}
|
||||
style={{
|
||||
cursor: onSelectImage ? 'pointer' : null,
|
||||
minWidth: `${minWidth}px`,
|
||||
}}
|
||||
onClick={() => {
|
||||
onSelectImage && onSelectImage(index)
|
||||
}}
|
||||
>
|
||||
<Photo src={photo.thumbnail.url} />
|
||||
<PhotoOverlay active={active} />
|
||||
</PhotoContainer>
|
||||
)
|
||||
})
|
||||
// const activeImage = this.state.activeImage
|
||||
// if (activeImage != -1) {
|
||||
// if (e.key == 'ArrowRight') {
|
||||
// this.setActiveImage((activeImage + 1) % this.photoAmount)
|
||||
// }
|
||||
|
||||
// if (e.key == 'ArrowLeft') {
|
||||
// if (activeImage <= 0) {
|
||||
// this.setActiveImage(this.photoAmount - 1)
|
||||
// } else {
|
||||
// this.setActiveImage(activeImage - 1)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Gallery>
|
||||
<Loader active={loading}>Loading images</Loader>
|
||||
{photoElements}
|
||||
<PhotoFiller />
|
||||
</Gallery>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// componentDidMount() {
|
||||
// document.addEventListener('keydown', this.keyDownEvent)
|
||||
// }
|
||||
|
||||
// componentWillUnmount() {
|
||||
// document.removeEventListener('keydown', this.keyDownEvent)
|
||||
// }
|
||||
|
||||
render() {
|
||||
const { activeIndex = -1, photos, loading, onSelectImage } = this.props
|
||||
let photoElements = null
|
||||
if (photos) {
|
||||
photoElements = photos.map((photo, index) => {
|
||||
const active = activeIndex == index
|
||||
|
||||
let minWidth = 100
|
||||
if (photo.thumbnail) {
|
||||
minWidth = Math.floor(
|
||||
(photo.thumbnail.width / photo.thumbnail.height) * 200
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<PhotoContainer
|
||||
key={photo.id}
|
||||
style={{
|
||||
cursor: onSelectImage ? 'pointer' : null,
|
||||
minWidth: `${minWidth}px`,
|
||||
}}
|
||||
onClick={() => {
|
||||
onSelectImage && onSelectImage(index)
|
||||
}}
|
||||
>
|
||||
<Photo src={photo.thumbnail.url} />
|
||||
<PhotoOverlay active={active} />
|
||||
</PhotoContainer>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Gallery>
|
||||
<Loader active={loading}>Loading images</Loader>
|
||||
{photoElements}
|
||||
<PhotoFiller />
|
||||
</Gallery>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default PhotoGallery
|
||||
|
|
Loading…
Reference in New Issue