Add hotpot navigation and slideshow

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

modules/glmv.css

@@ -74,14 +74,51 @@
     overflow: hidden;
     height: 32px;
     width: 32px;
-    text-align: center;
     font-weight: bold;
     border-radius: 6px;
     transition: width .75s;
     position: absolute;
     bottom: 50px;
     left: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
     &:hover {
-        width: 100%
+        width: auto;
+
+        & .glmv-menu-image {
+            transform: rotate(180deg);
+        }
     }
+  }
+
+  .glmv-menu-image {
+    width: 32px;
+    height: 32px;
+    position: relative;
+    transition: transform .75s;
+    flex: 0 0 32px;
+  }
+
+  .glmv-menu-button {
+    width: 28px;
+    height: 28px;
+    position: relative;
+    margin: 2px;
+    flex: 0 0 28px;
+
+    & img {
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    &[toggled] {
+        background: #00000033;
+    }
+  }
+
+  .prev-hs img {
+    transform: scaleX(-1);
   }

modules/glmv.js

@@ -1,3 +1,5 @@
+let slideShowInterval = null
+
 /**
  * Sets listener and attributes on model-viewer to
  * allow for click registering of a new hotspot
@@ -151,5 +153,10 @@ prevAnnotation = function(mView) {
  * @return {intervalID} ID of the created interval timer
  */
 slideshowAnnotations = function(mView, slideDuration = 5000) {
-    return setInterval(nextAnnotation, slideDuration, mView)
+    if (slideShowInterval) {
+        clearInterval(slideShowInterval)
+    } else {
+        nextAnnotation(mView)
+        slideShowInterval = setInterval(nextAnnotation, slideDuration, mView)
+    }
 }