jgeorgi/GlModelViewer
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Disable hotspot buttons on hotspot hide

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-29 17:50:51 -07:00
parent 4f1ff35194
commit 11bac465d9
3 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
includes/GlModelTransformOutput.php
View File

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

5
modules/glmv.css
View File

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

11
modules/glmv.js
View File

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