Add fullscreen framework

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

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, '<img class="awaiting-model" src="' . $gotoUrl . '"></image>'),
             Html::rawElement('div', $attrMenuButtonSlides, '<img class="awaiting-model" src="' . $slideUrl . '"></image>'),
             Html::rawElement('div', $attrMenuButtonNext, '<img class="awaiting-model" src="' . $gotoUrl . '"></image>'),
-            Html::rawElement('div', $attrMenuButtonHide, '<img class="awaiting-model" src="' . $hideUrl . '"></image>')
+            Html::rawElement('div', $attrMenuButtonHide, '<img class="awaiting-model" src="' . $hideUrl . '"></image>'),
+            Html::rawElement('div', $attrMenuButtonScreen, '<img class="awaiting-model full-hide" src="' . $screenUpUrl . '"></image><img class="awaiting-model full-show" src="' . $screenDownUrl . '"></image>')
         );
 
         return Html::rawElement('div', $attrMenu, $menuImg . implode($menuButtons));

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);

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()
+    }
 }