From 212bca8d35db45eabcebdbe28083abcf62bea0eb Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sat, 24 Nov 2018 21:26:40 -0500 Subject: [PATCH] Progress so far converting a collection schema filled with single media entries into a gallery --- package-lock.json | 38 +++++++- package.json | 1 + src/components/FlameLinkCollectionGallery.js | 87 +++++++++++++++++++ .../FlameLinkCollectionGalleryContent.js | 37 ++++++++ src/components/FlameLinkImage.js | 2 +- src/components/Main.js | 27 +++++- src/css/{FlameLinkImage.css => FlameLink.css} | 2 +- src/pages/Home.js | 8 +- 8 files changed, 197 insertions(+), 5 deletions(-) create mode 100644 src/components/FlameLinkCollectionGallery.js create mode 100644 src/components/FlameLinkCollectionGalleryContent.js rename src/css/{FlameLinkImage.css => FlameLink.css} (96%) diff --git a/package-lock.json b/package-lock.json index d358b66..ab6693c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index c98fd28..3322cad 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js new file mode 100644 index 0000000..6d85244 --- /dev/null +++ b/src/components/FlameLinkCollectionGallery.js @@ -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 + } + + render() { + const { classes } = this.props; + + return( + + + {this.state.schemaDescription} + + {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} + {console.log('Gallery Images: ', global.galleryImages)} + + ); + } +} + +export default withStyles(styles)(FlameLinkCollectionGallery); \ No newline at end of file diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js new file mode 100644 index 0000000..99c60a4 --- /dev/null +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -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; \ No newline at end of file diff --git a/src/components/FlameLinkImage.js b/src/components/FlameLinkImage.js index 0a474f4..acad0e6 100644 --- a/src/components/FlameLinkImage.js +++ b/src/components/FlameLinkImage.js @@ -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() { diff --git a/src/components/Main.js b/src/components/Main.js index 1c3ae0e..0c3b38a 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -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 { + + + + + + {this.state.open2 ? : } + + + + this.nav('Easy-Quiz')}> + + + this.nav('Intermediate-Quiz')}> + + + this.nav('Advanced-Quiz')}> + + + + diff --git a/src/css/FlameLinkImage.css b/src/css/FlameLink.css similarity index 96% rename from src/css/FlameLinkImage.css rename to src/css/FlameLink.css index 7abf189..ab1877c 100644 --- a/src/css/FlameLinkImage.css +++ b/src/css/FlameLink.css @@ -1,4 +1,4 @@ .flamelinkImage { width: 100%; max-width: 500px; -} +} \ No newline at end of file diff --git a/src/pages/Home.js b/src/pages/Home.js index 02a2b29..1906b03 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -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 ( - + + + + ); } }