zoom stuff

3 files changed, 48 insertions, 9 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index f976e8f..a32dd6a 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -73,7 +73,9 @@ body {
   width: 50vw;
 }
 .detail .content > div {
+  min-height: 100%;
   padding: 3rem 5rem 6rem 5rem;
+  background: rgba(0, 0, 0, 0.5);
 }
 .detail .media {
   padding: 3rem 5rem;
@@ -98,7 +100,7 @@ body {
   font-variant: small-caps;
 }
 .detail .title .index {
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 .detail .citation {
   font-size: 1rem;
diff --git a/src/graph.js b/src/graph.js
index 640b42e..f7afe27 100644
--- a/src/graph.js
+++ b/src/graph.js
@@ -102,9 +102,50 @@ export default function buildGraph(db, handlers) {
     })
     .onNodeClick(handlers.click);
 
+  const initialZoom = () => {
+    const distance = 20000;
+    let angle = 0;
+    graph.cameraPosition(
+      {
+        x: distance * Math.sin(angle),
+        z: distance * Math.cos(angle),
+      },
+      { x: 0, y: 0, z: 0 },
+      0
+    );
+    setTimeout(() => zoomOut(1000));
+  };
+
+  const zoomOut = (duration = 1000) => {
+    const distance = 415;
+    let angle = 0;
+    graph.cameraPosition(
+      {
+        x: distance * Math.sin(angle),
+        z: distance * Math.cos(angle),
+      },
+      { x: 0, y: 0, z: 0 },
+      duration
+    );
+  };
+
+  const zoomIn = () => {
+    const distance = 200;
+    let angle = 0;
+    graph.cameraPosition(
+      {
+        x: distance * Math.sin(angle),
+        z: distance * Math.cos(angle),
+      },
+      { x: 0, y: 0, z: 0 },
+      1000
+    );
+  };
+
   const handleSelect = (category) => {
     if (!category) {
       graph.graphData(data);
+      zoomOut();
       return;
     }
     const { nodes, links } = data;
@@ -128,17 +169,13 @@ export default function buildGraph(db, handlers) {
     });
     console.log(selectedData);
     graph.graphData(selectedData);
+    zoomIn();
   };
 
   // graph.d3Force("charge").strength(-150);
 
   // camera orbit
-  const distance = 415;
-  let angle = 0;
-  graph.cameraPosition({
-    x: distance * Math.sin(angle),
-    z: distance * Math.cos(angle),
-  });
+  initialZoom();
 
   return {
     onSelect: handleSelect,
diff --git a/src/views/Detail.js b/src/views/Detail.js
index 0a756c9..ec0f37c 100644
--- a/src/views/Detail.js
+++ b/src/views/Detail.js
@@ -38,8 +38,8 @@ export default function Detail({ node, visible, onClose }) {
         <div className="buttons close">
           <img src="/assets/img/close.svg" onClick={onClose} />
         </div>
-        {node.type === "video" ? (
-          "video"
+        {data.type === "video" ? (
+          "Video TBD"
         ) : (
           <Gallery images={data.images} visible={visible} />
         )}