diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php index 2572244..2801d12 100644 --- a/includes/GlModelTransformOutput.php +++ b/includes/GlModelTransformOutput.php @@ -110,14 +110,16 @@ class GlModelTransformOutput extends MediaTransformOutput { $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : ''; $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml); + $elMenu = self::buildViewMenu(); //Render and return container element with model-viewer $attrContainer = array( - 'style' => 'width: ' . $this->width . 'px; height: ' . $this->height . 'px;', - 'onmousedown' => 'clearAnnotations()', - 'ontouchstart' => 'clearAnnotations()' + 'class' => 'glmv-container', + 'style' => 'width: ' . $this->width . 'px; height: ' . $this->height . 'px;', + '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'; } + /** + * 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 * diff --git a/modules/glmv.css b/modules/glmv.css index 5cc9608..b9ad33b 100644 --- a/modules/glmv.css +++ b/modules/glmv.css @@ -63,4 +63,25 @@ .gallerybox .gallerytext div:has(model-viewer) { 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% + } } \ No newline at end of file