diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php
index 524178a..e8a325a 100644
--- a/includes/GlModelTransformOutput.php
+++ b/includes/GlModelTransformOutput.php
@@ -154,7 +154,8 @@ class GlModelTransformOutput extends MediaTransformOutput {
'class' => 'glmv-container',
'style' => 'width: ' . $this->width . 'px; height: ' . $this->height . 'px;',
'onmousedown' => 'clearAnnotations()',
- 'ontouchstart' => 'clearAnnotations()'
+ 'ontouchstart' => 'clearAnnotations()',
+ 'onfullscreenchange' => 'toggleFullScreen(event)'
);
return Html::rawElement('div', $attrContainer, $elModel . $elMenu . $interactButton);
@@ -207,11 +208,22 @@ class GlModelTransformOutput extends MediaTransformOutput {
'onmousedown' => 'event.stopPropagation()',
'ontouchstart' => 'event.stopPropagation()'
);
+
+ $screenDownUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/hs_slideshow.svg';
+ $screenUpUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/hs_hide.svg';
+ $attrMenuButtonScreen = array (
+ 'class' => 'glmv-menu-button',
+ 'onclick' => 'toggleFullScreen(this.parentNode.parentNode)',
+ 'onmousedown' => 'event.stopPropagation()',
+ 'ontouchstart' => 'event.stopPropagation()'
+ );
+
$menuButtons = array(
Html::rawElement('div', $attrMenuButtonPrev, '
'),
Html::rawElement('div', $attrMenuButtonSlides, '
'),
Html::rawElement('div', $attrMenuButtonNext, '
'),
- Html::rawElement('div', $attrMenuButtonHide, '
')
+ Html::rawElement('div', $attrMenuButtonHide, '
'),
+ Html::rawElement('div', $attrMenuButtonScreen, '
')
);
return Html::rawElement('div', $attrMenu, $menuImg . implode($menuButtons));
diff --git a/modules/glmv.css b/modules/glmv.css
index cb300fa..1d30c74 100644
--- a/modules/glmv.css
+++ b/modules/glmv.css
@@ -84,6 +84,18 @@
.glmv-container {
position: relative;
+
+ & .full-show {
+ display: none !important;
+ }
+
+ &:fullscreen .full-hide {
+ display: none !important;
+ }
+
+ &:fullscreen .full-show {
+ display: flex !important;
+ }
}
.glmv-menu {
@@ -103,7 +115,7 @@
justify-content: flex-start;
&:hover {
- width: 160px;
+ width: 196px;
& .glmv-menu-image {
transform: rotate(180deg);
diff --git a/modules/glmv.js b/modules/glmv.js
index c5900fc..741deb1 100644
--- a/modules/glmv.js
+++ b/modules/glmv.js
@@ -413,4 +413,17 @@ downloadImage = function(defName) {
.then(imgBlob => {
reader.readAsDataURL(imgBlob)
})
+}
+
+/**
+ * Respond to full screen changes on the gl container
+ *
+ * @param {Element} glCont container element to enlarge or reduce
+ */
+toggleFullScreen = function(glCont) {
+ if (document.fullscreenElement) {
+ document.exitFullscreen()
+ } else {
+ glCont.requestFullscreen()
+ }
}
\ No newline at end of file