Progress so far converting a collection schema filled with single media entries into a gallery
This commit is contained in:
ajmaley
parent
559e7debfe
commit
212bca8d35
|
|
@ -3961,6 +3961,11 @@
|
|||
"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
|
||||
"integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
|
||||
},
|
||||
"detect-passive-events": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz",
|
||||
"integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo="
|
||||
},
|
||||
"detect-port-alt": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
|
||||
|
|
@ -5651,7 +5656,7 @@
|
|||
},
|
||||
"core-js": {
|
||||
"version": "2.5.5",
|
||||
"resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
|
||||
"integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
|
||||
},
|
||||
"firebase": {
|
||||
|
|
@ -9686,6 +9691,11 @@
|
|||
"lodash._reinterpolate": "~3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
|
||||
},
|
||||
"lodash.uniq": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
|
||||
|
|
@ -12550,6 +12560,18 @@
|
|||
"resolved": "https://registry.npmjs.org/react-flow-types/-/react-flow-types-0.2.0-beta.6.tgz",
|
||||
"integrity": "sha512-I4f8oJFGxVJYrJLxG4sCPW7vWedNB8Eee1U2v+xBzRPlF7X5IBelqaDIKxBDLzDFb++AzpoU+uu1jFaKy1QssQ=="
|
||||
},
|
||||
"react-image-gallery": {
|
||||
"version": "0.8.12",
|
||||
"resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-0.8.12.tgz",
|
||||
"integrity": "sha512-jkrsEhRZ3JPxFhLznrwPyAVy/n6HiM204tKBJ1W5z1a8QnWLVVi+j/UXsMETvks4rnSIkAQbW3WPHbrS19nNMQ==",
|
||||
"requires": {
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"prop-types": "^15.5.8",
|
||||
"react-swipeable": "^4.2.2",
|
||||
"resize-observer-polyfill": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"react-jss": {
|
||||
"version": "8.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
|
||||
|
|
@ -12695,6 +12717,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-swipeable": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-4.3.0.tgz",
|
||||
"integrity": "sha512-L21VMbcDvG+AOVF4ZIbQ8sICGIgiKB/plGKWBMw6dkxt5neS7x74ZlTbJ39U8slz798MZBv/uIoE9Vzgp3PODQ==",
|
||||
"requires": {
|
||||
"detect-passive-events": "^1.0.4",
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
|
||||
|
|
@ -13277,6 +13308,11 @@
|
|||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
|
||||
"integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"moment": "^2.22.2",
|
||||
"react": "^16.5.1",
|
||||
"react-dom": "^16.5.1",
|
||||
"react-image-gallery": "^0.8.12",
|
||||
"react-quiz-component": "0.2.0",
|
||||
"react-router": "^4.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
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 flamelinkApp from '../flamelink.js';
|
||||
import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent';
|
||||
import "react-image-gallery/styles/css/image-gallery.css";
|
||||
import '../css/FlameLink.css';
|
||||
|
||||
const styles = theme => ({
|
||||
flamelinkItem: {
|
||||
marginRight: 20,
|
||||
marginLeft: 20,
|
||||
marginTop: 20,
|
||||
},
|
||||
});
|
||||
|
||||
class FlameLinkCollectionGallery extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
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'] })
|
||||
.then(result => this.setState({
|
||||
schemaDetails: result
|
||||
}))
|
||||
|
||||
flamelinkApp.content.get(global.galleryName)
|
||||
.then(result => this.setState({
|
||||
schemaContent: result
|
||||
}))
|
||||
|
||||
flamelinkApp.schemas.get(global.galleryName)
|
||||
.then(result => this.setState({
|
||||
schemaDescription: result.title
|
||||
}))
|
||||
}
|
||||
|
||||
getGalleryInfo(schemaDetails, schemaContent){
|
||||
var key;
|
||||
var mediaNums = []
|
||||
for (var val in schemaDetails){
|
||||
key = schemaDetails[val].key
|
||||
}
|
||||
for (var val1 in schemaContent){
|
||||
for (var val2 in schemaContent[val1][key]){
|
||||
global.mediaIDs.push(schemaContent[val1][key][val2]);
|
||||
}
|
||||
}
|
||||
console.log('Global Media IDs: ', global.mediaIDs)
|
||||
for (var val3 in global.mediaIDs){
|
||||
mediaNums.push(val3)
|
||||
}
|
||||
return mediaNums.map(this.createGallery);
|
||||
}
|
||||
|
||||
createGallery(num){
|
||||
return <FlameLinkCollectionGalleryContent num={num} key={global.mediaIDs[num]}/>
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
return(
|
||||
<Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkItem}>
|
||||
<Typography variant='display3'>
|
||||
{this.state.schemaDescription}
|
||||
</Typography>
|
||||
{this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)}
|
||||
{console.log('Gallery Images: ', global.galleryImages)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(FlameLinkCollectionGallery);
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import { Component } from 'react';
|
||||
import flamelinkApp from '../flamelink.js';
|
||||
import '../css/FlameLink.css';
|
||||
|
||||
class FlameLinkCollectionGalleryContent extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
mediaURL: '',
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
flamelinkApp.storage.getURL(global.mediaIDs[this.props.num])
|
||||
.then(url => this.setState({
|
||||
mediaURL: url
|
||||
}))
|
||||
}
|
||||
|
||||
addURLs(){
|
||||
if(this.state.mediaURL === ''){
|
||||
}
|
||||
else{
|
||||
var element = {}
|
||||
element.original = this.state.mediaURL;
|
||||
global.galleryImages.push(element);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.addURLs();
|
||||
}
|
||||
}
|
||||
|
||||
export default FlameLinkCollectionGalleryContent;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import flamelinkApp from '../flamelink.js';
|
||||
import '../css/FlameLinkImage.css';
|
||||
import '../css/FlameLink.css';
|
||||
|
||||
class FlameLinkImage extends Component {
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@ class ResponsiveDrawer extends React.Component {
|
|||
state = {
|
||||
mobileOpen: false,
|
||||
key: 'Home',
|
||||
open: false
|
||||
open: false,
|
||||
open2: false,
|
||||
};
|
||||
|
||||
handleDrawerToggle = () => {
|
||||
|
|
@ -82,6 +83,10 @@ class ResponsiveDrawer extends React.Component {
|
|||
this.setState(state => ({ open: !state.open }));
|
||||
}
|
||||
|
||||
handleClick2 = () => {
|
||||
this.setState(state => ({ open2: !state.open2 }));
|
||||
}
|
||||
|
||||
nav = (text) => {
|
||||
this.setState({
|
||||
key: text
|
||||
|
|
@ -136,6 +141,26 @@ class ResponsiveDrawer extends React.Component {
|
|||
</ListItem>
|
||||
</List>
|
||||
</Collapse>
|
||||
<ListItem button onClick={this.handleClick2}>
|
||||
<ListItemIcon>
|
||||
<SlideshowIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText inset primary="Galleries" />
|
||||
{this.state.open2 ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItem>
|
||||
<Collapse in={this.state.open2} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
|
||||
<ListItemText inset primary="Gallery1" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Intermediate-Quiz')}>
|
||||
<ListItemText inset primary="Gallery2" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Advanced-Quiz')}>
|
||||
<ListItemText inset primary="Gallery3" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Collapse>
|
||||
</List>
|
||||
<Divider />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.flamelinkImage {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
import React, { Component } from 'react';
|
||||
import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
|
||||
import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
|
||||
import flamelinkApp from '../flamelink';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
|
||||
class Home extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
global.schemaName = 'martenHome';
|
||||
global.galleryName = 'martenGallery';
|
||||
|
||||
this.state = {
|
||||
schemaDetails: '',
|
||||
|
|
@ -30,7 +33,10 @@ class Home extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
|
||||
<Grid container>
|
||||
<FlameLinkCollectionGallery />
|
||||
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue