Setup menu bar for viewer actions

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

includes/GlModelTransformOutput.php

@@ -110,14 +110,16 @@ class GlModelTransformOutput extends MediaTransformOutput {
     $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : '';
  
     $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml);
+    $elMenu = self::buildViewMenu();
 
     //Render and return container element with model-viewer
     $attrContainer = array(
-      'style' => 'width: ' .  $this->width . 'px; height: ' . $this->height . 'px;',
-      'onmousedown' => 'clearAnnotations()',
-      'ontouchstart' => 'clearAnnotations()'
+        'class' => 'glmv-container',
+        'style' => 'width: ' .  $this->width . 'px; height: ' . $this->height . 'px;',
+        'onmousedown' => 'clearAnnotations()',
+        'ontouchstart' => 'clearAnnotations()'
     );
-    return Html::rawElement('div', $attrContainer, $elModel);
+    return Html::rawElement('div', $attrContainer, $elModel . $elMenu);
   }
 
   /**
@@ -146,6 +148,19 @@ class GlModelTransformOutput extends MediaTransformOutput {
     return ($extractInfo[1]) ? $extractInfo[1] : 'default';
   }
 
+  /**
+   * Build the button menu used for viewer actions
+   * 
+   * @return string
+   */
+  private static function buildViewMenu() {
+    $attrMenu = array(
+        'class' => 'glmv-menu'
+    );
+
+    return Html::rawElement('div', $attrMenu, '>');
+  }
+
   /**
    * Small helper function to display information on the browser console
    * 

modules/glmv.css

@@ -63,4 +63,25 @@
 
   .gallerybox .gallerytext div:has(model-viewer) {
     display: none;
+  }
+
+  .glmv-container {
+    position: relative;
+  }
+
+  .glmv-menu {
+    border: solid 2px #0000008F;
+    overflow: hidden;
+    height: 32px;
+    width: 32px;
+    text-align: center;
+    font-weight: bold;
+    border-radius: 6px;
+    transition: width .75s;
+    position: absolute;
+    bottom: 50px;
+    left: 0;
+    &:hover {
+        width: 100%
+    }
   }