From 11bac465d90afbced6edcdf9d3b3d8b4c06c4936 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Tue, 29 Oct 2024 17:50:51 -0700
Subject: [PATCH] Disable hotspot buttons on hotspot hide

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 includes/GlModelTransformOutput.php |  6 +++---
 modules/glmv.css                    |  5 +++++
 modules/glmv.js                     | 11 ++++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php
index 33f74d9..5c044f5 100644
--- a/includes/GlModelTransformOutput.php
+++ b/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()'
diff --git a/modules/glmv.css b/modules/glmv.css
index f02343d..61e03b9 100644
--- a/modules/glmv.css
+++ b/modules/glmv.css
@@ -126,6 +126,11 @@
     &[toggled] {
         background: #00000033;
     }
+
+    &[disabled] {
+        pointer-events: none;
+        opacity: .3;
+    }
   }
 
   .prev-hs img {
diff --git a/modules/glmv.js b/modules/glmv.js
index a697e1e..9d49db9 100644
--- a/modules/glmv.js
+++ b/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')
+    })
 }
 
 /**