Merge pull request #30 from visual-heuristics/feat_plugin

Feat plugin

Author: invincibleyolk

src/components/navigationBar/navigationBar.js

@@ -39,7 +39,7 @@ const nav = {
     problem: '/problem',
     vfg: '/vfg',
     manual: 'https://planimation.github.io/documentation/ ',
-    demo: '/demo',
+    demo: 'https://www.youtube.com/watch?v=Cj2rWdt1YQU',
     home: '/'
 };
 
@@ -51,8 +51,11 @@ function NavigationBar() {
     const handleClick = (url) => {
         setUrl(url);
         if(url==='manual'){
-          window.location.href(nav[url])
-        }else{
+          // window.location.href(nav[url])
+        }else if(url==='demo'){
+          // window.location.href(nav[url])
+        }
+        else{
           history.push(nav[url]);
 
         }
@@ -75,7 +78,7 @@ function NavigationBar() {
           <a href={'https://planimation.github.io/documentation/'} target='_blank' rel="noreferrer" className={classes.alink}>User Manual</a>
         </Link>
         <Link variant="button" color="inherit" onClick={()=>handleClick('demo')} className={classes.link}>
-          Demo
+        <a href={'https://www.youtube.com/watch?v=Cj2rWdt1YQU'} target='_blank' rel="noreferrer" className={classes.alink}>Demo</a>
         </Link>
       </nav>
       <Button color="inherit" variant="outlined"onClick={()=>handleClick('home')}  className={classes.link} >

src/pages/HomePage/home.js

@@ -150,7 +150,7 @@ export default function Home() {
         window.open('https://planimation.github.io/documentation/')
         break;
       case 4:
-        history.push('/demo');
+        window.open('https://www.youtube.com/watch?v=Cj2rWdt1YQU')
         break;
       default: return;
     }
@@ -199,7 +199,7 @@ export default function Home() {
                   </div> */}
                   <ul className={classes.itemTitle}>
                     {tier.description.map((line) => (
-                      <Typography component="li" variant="subtitle1" align="center" key={line}>
+                      <Typography variant="subtitle1" align="center" key={line}>
                         {line}
                       </Typography>
                     ))}

src/pages/PageFour/dataUtils.js

@@ -5,24 +5,24 @@ if(content) {
     contentObject = JSON.parse(content);
 }
 
-function getAllStages() {
+export function getAllStages() {
     const visualStages = contentObject.visualStages || [];
     const stages = visualStages.map(stage => {
         return stage.visualSprites;
     })
     return stages;
 }
 
-function getSteps() {
+export function getSteps() {
     return contentObject.visualStages ? contentObject.visualStages.map((s =>s.stageName)) : [];
 }
 
-function getStepInfo() {
+export function getStepInfo() {
     return contentObject.visualStages ? contentObject.visualStages.map((s =>s.stageInfo)) : [];
 }
 
 
-function getSubGoal() {
+export function getSubGoal() {
     if( !contentObject.subgoalMap) {
         return {};
     }
@@ -46,7 +46,7 @@ function getSubGoal() {
     return map;
 }
 
-function getStepSubgoalMap() {
+export function getStepSubgoalMap() {
     if( !contentObject.subgoalMap) {
         return {};
     }

src/pages/PageFour/index.js

@@ -1,7 +1,8 @@
 import React from "react";
 import {Stage, Text, Sprite} from '@inlet/react-pixi';
 import {utils} from 'pixi.js';
-import {subGoal, stepInfo, allStages, steps, stepSubgoalMap, vfg, textContent} from './dataUtils';
+import {subGoal, stepInfo, allStages, steps, stepSubgoalMap, vfg, textContent,
+        getAllStages, getSteps, getStepInfo, getSubGoal, getStepSubgoalMap} from './dataUtils';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
@@ -51,6 +52,7 @@ class PageFour extends React.Component {
         // in this class needs to bind like this:
         this.handleOnClick = this.handleOnClick.bind(this);
         this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+        this.receiveMessageFromPlugin = this.receiveMessageFromPlugin.bind(this);
     }
 
     updateWindowDimensions() {
@@ -82,7 +84,38 @@ class PageFour extends React.Component {
 
     componentDidMount() {
         this.updateWindowDimensions();
-        window.addEventListener('resize', this.updateWindowDimensions);
+        this.refDom.addEventListener('resize', this.updateWindowDimensions);
+        // this.data = {
+        //     action: 'loadfile'
+        // }
+        // window.parent && window.parent.postMessage(this.data, '*')
+        // window.addEventListener("message", this.receiveMessageFromPlugin, false)
+
+    }
+
+    receiveMessageFromPlugin ( event ) {
+        if(event.origin!= "http://localhost:3000"){
+            console.log( 'iframe is working:', event.origin );
+        let contentObject = {};
+
+        const content = localStorage.getItem('fileContent');
+        if(content) {
+            contentObject = JSON.parse(content);
+            allStages = getAllStages();
+            steps = getSteps();
+            stepInfo =  getStepInfo();
+            subGoal = getSubGoal();
+            stepSubgoalMap = getStepSubgoalMap();
+            vfg = contentObject;
+            textContent = content
+
+            this.stepItem = {};
+            steps.forEach((step, i) => {
+                this.stepItem[i] = React.createRef();
+            })
+            this.setState({drawSprites: allStages[0]})
+        }
+        }
     }
 
     highlight(index) {
@@ -380,6 +413,7 @@ class PageFour extends React.Component {
             clearInterval(this.handlerPlay);
         }
         this.refDom.removeEventListener('resize', this.updateWindowDimensions);
+        // window.removeEventListener("message", this.receiveMessageFromPlugin, false);
     }
 
     render() {

src/pages/PageFour/index.less

@@ -10,7 +10,7 @@
 
 .left {
   // flex-grow: 1;
-  max-width: 300px;
+  width: 300px;
 }
 
 .left_upper {
@@ -29,7 +29,7 @@
 
 .right {
   // flex-grow: 1;
-  width: 250px;
+  width: 220px;
 }
 
 .stage_item {

src/pages/PageOne/index.js

@@ -12,6 +12,7 @@ class PageOne extends React.Component {
         super(props);
         this.state = {url:'',fineUrl:'',alertURL:false, alertMessage: ''};
         this.handleOnClick = this.handleOnClick.bind(this);
+        this.handleSendURL = this.handleSendURL.bind(this);
     }
 
     handleOnClick() {
@@ -32,7 +33,8 @@ class PageOne extends React.Component {
     handleSendURL = () => {
         const state = {...this.state};
         const url = state.url;
-        const pattern = new RegExp('^(https?:\\/\\/)?','i');
+        const pattern = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[/\?\:]?.*$/;
+
         if (!!pattern.test(url)){
             state['fineUrl'] = url;
         this.setState(state);