From 00a3566decfb8e4b1e91e1d9331efd3bf43df9ab Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sun, 25 Nov 2018 11:28:23 -0500 Subject: [PATCH] Set up Galleries to use flamelink images. Set up to use collection schema type only. There is one bug I need to address. Gallery doesn't render when the webpage is loaded but works otherwise. --- src/components/FlameLinkCollectionGallery.js | 49 ++++++++----------- .../FlameLinkCollectionGalleryContent.js | 10 ++-- src/components/Main.js | 13 +++-- src/components/RenderGallery.js | 40 +++++++++++++++ src/pages/Home.js | 3 +- 5 files changed, 75 insertions(+), 40 deletions(-) create mode 100644 src/components/RenderGallery.js diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 62aa835..0756c23 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import { withStyles } from '@material-ui/core/styles'; -import ImageGallery from 'react-image-gallery'; +import RenderGallery from './RenderGallery'; import flamelinkApp from '../flamelink.js'; import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent'; import "react-image-gallery/styles/css/image-gallery.css"; @@ -14,35 +14,38 @@ const styles = theme => ({ marginLeft: 20, marginTop: 20, }, + + flamelinkGallery: { + marginRight: "auto", + marginLeft: "auto", + marginTop: 20, + }, }); class FlameLinkCollectionGallery extends Component { - constructor() { - super(); + constructor(props) { + super(props); global.mediaURLs = []; global.mediaIDs = []; - global.galleryImages = []; this.state = { schemaDetails: '', schemaContent: '', schemaDescription: '', - showThumbnails: false, - showIndex: true, } - flamelinkApp.schemas.getFields(global.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) + flamelinkApp.schemas.getFields(this.props.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) .then(result => this.setState({ schemaDetails: result })) - flamelinkApp.content.get(global.galleryName) + flamelinkApp.content.get(this.props.galleryName) .then(result => this.setState({ schemaContent: result })) - flamelinkApp.schemas.get(global.galleryName) + flamelinkApp.schemas.get(this.props.galleryName) .then(result => this.setState({ schemaDescription: result.title })) @@ -73,29 +76,17 @@ class FlameLinkCollectionGallery extends Component { render() { const { classes } = this.props; - const images = [ - { - original: 'http://lorempixel.com/1000/600/nature/1/', - thumbnail: 'http://lorempixel.com/250/150/nature/1/', - }, - { - original: 'http://lorempixel.com/1000/600/nature/2/', - thumbnail: 'http://lorempixel.com/250/150/nature/2/' - }, - { - original: 'http://lorempixel.com/1000/600/nature/3/', - thumbnail: 'http://lorempixel.com/250/150/nature/3/' - } - ] - return( - - + + {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} + {this.state.schemaDescription} - {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} - {console.log('Gallery Images: ', global.galleryImages)} - + + + + + ); } diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js index 99c60a4..4222da8 100644 --- a/src/components/FlameLinkCollectionGalleryContent.js +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -3,20 +3,20 @@ import flamelinkApp from '../flamelink.js'; import '../css/FlameLink.css'; class FlameLinkCollectionGalleryContent extends Component { - constructor() { - super(); + constructor(props) { + super(props); + + global.galleryImages = []; this.state = { mediaURL: '', } - } - componentDidMount(){ flamelinkApp.storage.getURL(global.mediaIDs[this.props.num]) .then(url => this.setState({ mediaURL: url })) - } + } addURLs(){ if(this.state.mediaURL === ''){ diff --git a/src/components/Main.js b/src/components/Main.js index 0c3b38a..d757123 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -14,6 +14,7 @@ import Hidden from '@material-ui/core/Hidden'; import Divider from '@material-ui/core/Divider'; import MenuIcon from '@material-ui/icons/Menu'; import HomeIcon from '@material-ui/icons/Home'; +import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary'; import AssignmentIcon from '@material-ui/icons/Assignment'; import MapIcon from '@material-ui/icons/Map'; import InfoIcon from '@material-ui/icons/Info'; @@ -29,6 +30,7 @@ import CssBaseline from '@material-ui/core/CssBaseline'; import ExpandLess from '@material-ui/icons/ExpandLess'; import ExpandMore from '@material-ui/icons/ExpandMore'; import Collapse from '@material-ui/core/Collapse'; +import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery'; const drawerWidth = 240; @@ -143,20 +145,20 @@ class ResponsiveDrawer extends React.Component { - + {this.state.open2 ? : } - this.nav('Easy-Quiz')}> + this.nav('Gallery1')}> - this.nav('Intermediate-Quiz')}> + this.nav('Gallery2')}> - this.nav('Advanced-Quiz')}> + this.nav('Gallery3')}> @@ -224,6 +226,9 @@ class ResponsiveDrawer extends React.Component { {this.state.key === 'Easy-Quiz' && } {this.state.key === 'Intermediate-Quiz' && } {this.state.key === 'Advanced-Quiz' && } + {this.state.key === 'Gallery1' && } + {this.state.key === 'Gallery2' && } + {this.state.key === 'Gallery3' && } ); diff --git a/src/components/RenderGallery.js b/src/components/RenderGallery.js new file mode 100644 index 0000000..19c8af6 --- /dev/null +++ b/src/components/RenderGallery.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import ImageGallery from 'react-image-gallery'; +import "react-image-gallery/styles/css/image-gallery.css"; +import '../css/FlameLink.css'; + +class RenderGallery extends Component { + constructor() { + super(); + + this.state = { + showThumbnails: false, + showIndex: true, + showBullets: true, + mounted: false, + } + } + + componentDidMount(){ + this.setState({mounted: true}) + } + + _onImageLoad(event) { + console.debug('loaded image', event.target.src); + } + + render() { + + return( + + ); + } +} + +export default RenderGallery; \ No newline at end of file diff --git a/src/pages/Home.js b/src/pages/Home.js index 1906b03..7e249a8 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -9,7 +9,6 @@ class Home extends Component { super(); global.schemaName = 'martenHome'; - global.galleryName = 'martenGallery'; this.state = { schemaDetails: '', @@ -34,7 +33,7 @@ class Home extends Component { render() { return ( - + );