1 files changed, 39 insertions, 6 deletions

diff --git a/client/index.js b/client/index.js
index 5c8bc880..10ed8563 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,12 +2,13 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 import { Provider } from 'react-redux'
+import 'waypoints/lib/noframework.waypoints.min.js';
 
 import { toArray } from './util'
 import Applet from './applet'
 import { store } from './store'
-import appendTable from './tables'
 import appendMap from './map'
+import { ModalImage } from './modalImage'
 
 function appendReactApplet(el, payload) {
   ReactDOM.render(
@@ -19,6 +20,13 @@ function appendReactApplet(el, payload) {
   )
 }
 
+function appendModalImage() {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  ReactDOM.render(<ModalImage />, el)
+  console.log(el)
+}
+
 function fetchDataset(payload) {
   if (payload.command === 'face_analysis') return new Promise(resolve => resolve())
   if (payload.dataset === 'info') return new Promise(resolve => resolve())
@@ -33,7 +41,8 @@ function appendApplets(applets) {
       case 'citations':
       case 'load_file':
         el.parentNode.classList.add('wide')
-        appendTable(el, payload)
+        appendReactApplet(el, payload)
+        el.classList.add('loaded')
         break
       case 'map':
         el.parentNode.classList.add('wide')
@@ -65,14 +74,17 @@ function runApplets() {
     let opt = null
     payload.cmd = cmd
     payload.partz = cmdPartz
+    if (payload.cmd === 'load_file') {
+      payload.url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + cmdPartz.shift()
+      return [el, payload]
+    }
+
     if (payload.partz.length) {
       opt = payload.partz.shift().trim()
       if (opt.indexOf('http') === 0) {
         dataset = null
         url = opt
       } else if (opt.indexOf('assets') === 0) {
-        let pathname = window.location.pathname.replace('index.html', '')
-        url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + pathname + opt
         dataset = null
         // console.log(url)
       } else {
@@ -87,14 +99,15 @@ function runApplets() {
         if (dataset === 'index.html') {
           dataset = path.pop()
         }
-        console.log('dataset from path:', dataset)
+        // console.log('dataset from path:', dataset)
       } else {
-        console.log('not on a dataset page')
+        // console.log('not on a dataset page')
         return [el, payload]
       }
     }
     payload.dataset = dataset
     payload.url = url
+    console.log(payload)
     return [el, payload]
   }).filter(a => !!a)
   const withDataset = applets.map(a => a[1].dataset ? a[1] : null).filter(a => !!a)
@@ -108,6 +121,24 @@ function runApplets() {
   }
 }
 
+function buildWaypoints() {
+  const element = document.querySelector('.content section:nth-child(2)')
+  if (element) {
+    var waypoint = new Waypoint({
+      element,
+      handler: function(direction) {
+        if (direction === 'down') {
+          document.body.classList.add('scrolled')
+        } else {
+          document.body.classList.remove('scrolled')
+        }
+        // console.log(direction)
+        // console.log('Scrolled to waypoint!')
+      }
+    })
+  }
+}
+
 function main() {
   const paras = document.querySelectorAll('section p')
   // if (paras.length) {
@@ -119,6 +150,8 @@ function main() {
     }
   })
   runApplets()
+  buildWaypoints()
+  appendModalImage()
 }
 
 main()