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

Setup menu bar for viewer actions

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-27 20:42:28 -07:00
parent 3b5c2e993d
commit 2163f9158a
2 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
includes/GlModelTransformOutput.php
View File

@@ -110,14 +110,16 @@ class GlModelTransformOutput extends MediaTransformOutput {
$hotspotHtml = (isset($hotspots)) ? implode($hotspots) : ''; $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : '';
$elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml); $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml);
$elMenu = self::buildViewMenu();
//Render and return container element with model-viewer //Render and return container element with model-viewer
$attrContainer = array( $attrContainer = array(
'style' => 'width: ' . $this->width . 'px; height: ' . $this->height . 'px;', 'class' => 'glmv-container',
'onmousedown' => 'clearAnnotations()', 'style' => 'width: ' . $this->width . 'px; height: ' . $this->height . 'px;',
'ontouchstart' => 'clearAnnotations()' 'onmousedown' => 'clearAnnotations()',
'ontouchstart' => 'clearAnnotations()'
); );
return Html::rawElement('div', $attrContainer, $elModel); return Html::rawElement('div', $attrContainer, $elModel . $elMenu);
} }
/** /**
@@ -146,6 +148,19 @@ class GlModelTransformOutput extends MediaTransformOutput {
return ($extractInfo[1]) ? $extractInfo[1] : 'default'; return ($extractInfo[1]) ? $extractInfo[1] : 'default';
} }
/**
* Build the button menu used for viewer actions
*
* @return string
*/
private static function buildViewMenu() {
$attrMenu = array(
'class' => 'glmv-menu'
);
return Html::rawElement('div', $attrMenu, '>');
}
/** /**
* Small helper function to display information on the browser console * Small helper function to display information on the browser console
* *

21
modules/glmv.css
View File

@@ -63,4 +63,25 @@
.gallerybox .gallerytext div:has(model-viewer) { .gallerybox .gallerytext div:has(model-viewer) {
display: none; display: none;
}
.glmv-container {
position: relative;
}
.glmv-menu {
border: solid 2px #0000008F;
overflow: hidden;
height: 32px;
width: 32px;
text-align: center;
font-weight: bold;
border-radius: 6px;
transition: width .75s;
position: absolute;
bottom: 50px;
left: 0;
&:hover {
width: 100%
}
} }