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

Fix button and img visibility before model

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-11-01 11:33:45 -07:00
parent df11f0c54b
commit b786964a89
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
includes/GlModelTransformOutput.php
View File

@@ -100,7 +100,8 @@ class GlModelTransformOutput extends MediaTransformOutput {
foreach($annotations as $label => $an) { foreach($annotations as $label => $an) {
$elAnnot = Html::rawElement('div',['class' => 'HotspotAnnotation HiddenAnnotation'],$label); $elAnnot = Html::rawElement('div',['class' => 'HotspotAnnotation HiddenAnnotation'],$label);
$hsDefault = array( $hsDefault = array(
'class' => 'Hotspot', 'class' => 'Hotspot awaiting-model',
'style' => 'display: none;',
'slot' => 'hotspot-'.(count($hotspots) +1), 'slot' => 'hotspot-'.(count($hotspots) +1),
'ontouchstart' => 'event.stopPropagation()', 'ontouchstart' => 'event.stopPropagation()',
'onclick' => 'onAnnotation(event)' 'onclick' => 'onAnnotation(event)'
@@ -125,6 +126,7 @@ class GlModelTransformOutput extends MediaTransformOutput {
//Add important additional attributes and render model-viewer with hotspots //Add important additional attributes and render model-viewer with hotspots
$attrModelView = array_merge(['src' => $srcUrl, 'class' => 'mv-model', 'interpolation-decay' => '100', 'interaction-prompt' => 'none'], $attrModelView); $attrModelView = array_merge(['src' => $srcUrl, 'class' => 'mv-model', 'interpolation-decay' => '100', 'interaction-prompt' => 'none'], $attrModelView);
$attrModelView['style'] = 'width: 100%; height: 100%;'; $attrModelView['style'] = 'width: 100%; height: 100%;';
$attrModelView['onload'] = 'modelLoaded()';
$hotspotHtml = (isset($hotspots)) ? implode($hotspots) : ''; $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : '';
$elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml); $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml);
@@ -148,7 +150,8 @@ class GlModelTransformOutput extends MediaTransformOutput {
*/ */
private static function buildViewMenu() { private static function buildViewMenu() {
$attrMenu = array( $attrMenu = array(
'class' => 'glmv-menu' 'class' => 'glmv-menu awaiting-model',
'style' => 'display: none;'
); );
$mainConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'main' ); $mainConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'main' );
$menuUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/menu_arrow.svg'; $menuUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/menu_arrow.svg';
@@ -188,10 +191,10 @@ class GlModelTransformOutput extends MediaTransformOutput {
'ontouchstart' => 'event.stopPropagation()' 'ontouchstart' => 'event.stopPropagation()'
); );
$menuButtons = array( $menuButtons = array(
Html::rawElement('div', $attrMenuButtonPrev, '<img src="' . $gotoUrl . '"></image>'), Html::rawElement('div', $attrMenuButtonPrev, '<img class="awaiting-model" src="' . $gotoUrl . '"></image>'),
Html::rawElement('div', $attrMenuButtonSlides, '<img src="' . $slideUrl . '"></image>'), Html::rawElement('div', $attrMenuButtonSlides, '<img class="awaiting-model" src="' . $slideUrl . '"></image>'),
Html::rawElement('div', $attrMenuButtonNext, '<img src="' . $gotoUrl . '"></image>'), Html::rawElement('div', $attrMenuButtonNext, '<img class="awaiting-model" src="' . $gotoUrl . '"></image>'),
Html::rawElement('div', $attrMenuButtonHide, '<img src="' . $hideUrl . '"></image>') Html::rawElement('div', $attrMenuButtonHide, '<img class="awaiting-model" src="' . $hideUrl . '"></image>')
); );
return Html::rawElement('div', $attrMenu, $menuImg . implode($menuButtons)); return Html::rawElement('div', $attrMenu, $menuImg . implode($menuButtons));

4
modules/glmv.js
View File

@@ -1,6 +1,10 @@
let slideShowInterval = null let slideShowInterval = null
let grabHotspot = null let grabHotspot = null
modelLoaded = function() {
$('.awaiting-model').css('display', 'flex').removeClass('awaiting-model')
}
/** /**
* Sets listener and attributes on model-viewer to * Sets listener and attributes on model-viewer to
* allow for click registering of a new hotspot * allow for click registering of a new hotspot