diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php index c169e85..524178a 100644 --- a/includes/GlModelTransformOutput.php +++ b/includes/GlModelTransformOutput.php @@ -1,6 +1,7 @@ " tag, if there is such a tag + * preview Boolean, render is being called from a preview page * * @return string HTML */ @@ -117,10 +119,25 @@ class GlModelTransformOutput extends MediaTransformOutput { } //Set viewer configurations or use basic default if none defined + $interactButton = ''; if (isset($metadata['viewerConfig']) && isset($metadata['viewerConfig'][$view])) { - $attrModelView = $metadata['viewerConfig'][$view]; + $attrModelView = $metadata['viewerConfig'][$view]; + if (isset($attrModelView['poster'])) { + $posterFile = MediaWikiServices::getInstance()->getRepoGroup()->findFile(`File:` . $attrModelView['poster']); + if ($posterFile) { + $attrModelView['poster'] = $posterFile->getFullUrl(); + $attrModelView['reveal'] = 'manual'; + $mainConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'main' ); + $interactUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/interact.svg'; + $attrInteractButton = array ( + 'class' => 'glmv-act-button', + 'onclick' => 'this.style.display = "none"; this.parentElement.querySelector("model-viewer").dismissPoster()', + ); + $interactButton = Html::rawElement('div', $attrInteractButton, ''); + } + } } else { - $attrModelView = array('camera-controls' => true); + $attrModelView = array('camera-controls' => true); } //Add important additional attributes and render model-viewer with hotspots @@ -140,7 +157,7 @@ class GlModelTransformOutput extends MediaTransformOutput { 'ontouchstart' => 'clearAnnotations()' ); - return Html::rawElement('div', $attrContainer, $elModel . $elMenu); + return Html::rawElement('div', $attrContainer, $elModel . $elMenu . $interactButton); } /** diff --git a/modules/glmv.css b/modules/glmv.css index bee3cef..cb300fa 100644 --- a/modules/glmv.css +++ b/modules/glmv.css @@ -143,6 +143,26 @@ } } +.glmv-act-button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 52px; + height: 52px; + padding: 6px; + background: #FFFFFF90; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + & img { + pointer-events: none; + } +} + .prev-hs img { transform: scaleX(-1); } diff --git a/resources/interact.svg b/resources/interact.svg new file mode 100644 index 0000000..137b6e9 --- /dev/null +++ b/resources/interact.svg @@ -0,0 +1 @@ + \ No newline at end of file