Disable hotspot buttons on hotspot hide

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

includes/GlModelTransformOutput.php

@@ -178,13 +178,13 @@ class GlModelTransformOutput extends MediaTransformOutput {
 
         $gotoUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/goto_hs.svg';
         $attrMenuButtonPrev = array (
-            'class' => 'glmv-menu-button prev-hs',
+            'class' => 'glmv-menu-button prev-hs disable-on-hide',
             'onclick' => 'prevAnnotation(event.target.closest(".glmv-container").querySelector("model-viewer"))',
             'onmousedown' => 'event.stopPropagation()',
             'ontouchstart' => 'event.stopPropagation()'
         );
         $attrMenuButtonNext = array (
-            'class' => 'glmv-menu-button next-hs',
+            'class' => 'glmv-menu-button next-hs disable-on-hide',
             'onclick' => 'nextAnnotation(event.target.closest(".glmv-container").querySelector("model-viewer"))',
             'onmousedown' => 'event.stopPropagation()',
             'ontouchstart' => 'event.stopPropagation()'
@@ -192,7 +192,7 @@ class GlModelTransformOutput extends MediaTransformOutput {
 
         $slideUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/hs_slideshow.svg';
         $attrMenuButtonSlides = array (
-            'class' => 'glmv-menu-button',
+            'class' => 'glmv-menu-button disable-on-hide',
             'onclick' => 'event.target.toggleAttribute("toggled"); slideshowAnnotations(event.target.closest(".glmv-container").querySelector("model-viewer"))',
             'onmousedown' => 'event.stopPropagation()',
             'ontouchstart' => 'event.stopPropagation()'

modules/glmv.css

@@ -126,6 +126,11 @@
     &[toggled] {
         background: #00000033;
     }
+
+    &[disabled] {
+        pointer-events: none;
+        opacity: .3;
+    }
   }
 
   .prev-hs img {

modules/glmv.js

@@ -151,7 +151,7 @@ prevAnnotation = function(mView) {
  * 
  * @return {intervalID} ID of the created interval timer
  */
-slideshowAnnotations = function(mView, slideDuration = 5000) {
+slideshowAnnotations = function(mView, slideDuration = 3000) {
     if (slideShowInterval) {
         clearInterval(slideShowInterval)
     } else {
@@ -166,9 +166,18 @@ slideshowAnnotations = function(mView, slideDuration = 5000) {
  * @param {ModelViewer} mView 
  */
 toggleAnnotations = function(mView) {
+    if (slideShowInterval) {
+        clearInterval(slideShowInterval)
+        const slideButton = mView.parentElement.querySelector('[toggled]')
+        if (slideButton) slideButton.toggleAttribute('toggled')
+    }
     [...mView.querySelectorAll('button')].forEach( hs => {
         hs.toggleAttribute('hidden')
     })
+    const hsButtons = [...mView.parentElement.querySelectorAll('.disable-on-hide')]
+    hsButtons.forEach( mb => {
+        mb.toggleAttribute('disabled')
+    })
 }
 
 /**