1 files changed, 29 insertions, 0 deletions
diff --git a/client/index.js b/client/index.js
index 5e36d341..10ed8563 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,11 +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 appendMap from './map'
+import { ModalImage } from './modalImage'
 
 function appendReactApplet(el, payload) {
   ReactDOM.render(
@@ -18,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())
@@ -112,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) {
@@ -123,6 +150,8 @@ function main() {
     }
   })
   runApplets()
+  buildWaypoints()
+  appendModalImage()
 }
 
 main()