Add hotspot enhancements and improed styles

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

includes/GlModelTransformOutput.php

@@ -194,11 +194,22 @@ class GlModelTransformOutput extends MediaTransformOutput {
         'onmousedown' => 'event.stopPropagation()',
         'ontouchstart' => 'event.stopPropagation()'
     );
-    $buttonPrev = Html::rawElement('div', $attrMenuButtonPrev, '<img src="' . $gotoUrl . '"></image>');
-    $buttonNext = Html::rawElement('div', $attrMenuButtonNext, '<img src="' . $gotoUrl . '"></image>');
-    $buttonSlides = Html::rawElement('div', $attrMenuButtonSlides, '<img src="' . $slideUrl . '"></image>');
 
-    return Html::rawElement('div', $attrMenu, $menuImg . $buttonPrev . $buttonSlides . $buttonNext);
+    $hideUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/hs_hide.svg';
+    $attrMenuButtonHide = array (
+        'class' => 'glmv-menu-button',
+        'onclick' => 'event.target.toggleAttribute("toggled"); toggleAnnotations(event.target.closest(".glmv-container").querySelector("model-viewer"))',
+        'onmousedown' => 'event.stopPropagation()',
+        'ontouchstart' => 'event.stopPropagation()'
+    );
+    $menuButtons = array(
+        Html::rawElement('div', $attrMenuButtonPrev, '<img src="' . $gotoUrl . '"></image>'),
+        Html::rawElement('div', $attrMenuButtonSlides, '<img src="' . $slideUrl . '"></image>'),
+        Html::rawElement('div', $attrMenuButtonNext, '<img src="' . $gotoUrl . '"></image>'),
+        Html::rawElement('div', $attrMenuButtonHide, '<img src="' . $hideUrl . '"></image>')
+    );
+
+    return Html::rawElement('div', $attrMenu, $menuImg . implode($menuButtons));
   }
 
   /**

modules/glmv.css

@@ -10,11 +10,18 @@
     box-sizing: border-box;
     color: #FFFFFF;
     cursor: pointer;
+    font-weight: bold;
+    font-size: 16px;
+    padding-top: 2px;
     height: 24px;
     position: relative;
     text-align: center;
     transition: opacity 0.3s;
     width: 24px;
+
+    & [hidden] {
+        display: none;
+    }
   }
   
   .HotspotAnnotation{
@@ -86,7 +93,7 @@
     justify-content: flex-start;
 
     &:hover {
-        width: 128px;
+        width: 160px;
 
         & .glmv-menu-image {
             transform: rotate(180deg);

modules/glmv.js

@@ -160,6 +160,17 @@ slideshowAnnotations = function(mView, slideDuration = 5000) {
     }
 }
 
+/**
+ * Toggle visibility of all annotations
+ * 
+ * @param {ModelViewer} mView 
+ */
+toggleAnnotations = function(mView) {
+    [...mView.querySelectorAll('button')].forEach( hs => {
+        hs.toggleAttribute('hidden')
+    })
+}
+
 /**
  * Prepare to drag a hotspot
  * 

resources/hs_hide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#5f6368"><path d="M805.67-59 712-152.67Q662.33-118 603.83-99T480-80q-84.33 0-157.33-30.83-73-30.84-127-84.84t-84.84-127Q80-395.67 80-480q0-65.33 19-123.83T152.67-712L59-805.67l47.67-47.66 746.66 746.66L805.67-59ZM480-146.67q51 0 97.17-14 46.16-14 86.83-40L200.67-664q-26 40.67-40 86.83-14 46.17-14 97.17 0 141 96.16 237.17Q339-146.67 480-146.67ZM807.33-248l-48-48q26-40.67 40-86.83 14-46.17 14-97.17 0-141-96.16-237.17Q621-813.33 480-813.33q-51 0-97.17 14-46.16 14-86.83 40l-48-48Q297.67-842 356.17-861T480-880q83.67 0 156.67 31.17 73 31.16 127 85.16t85.16 127Q880-563.67 880-480q0 65.33-19 123.83T807.33-248ZM527.67-527.67Zm-95.34 95.34Z"/></svg>