Merge pull request #27 from Tehsurfer/fullscreen-requests

Add ability to send fullscreen request without breaking toggling
ABI-Software · May 22, 2020 · 5b10592 · 5b10592
2 parents dce86bd + f193f22
commit 5b10592
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 28 deletions.
diff --git a/src/components/FloatingFlow.vue b/src/components/FloatingFlow.vue
@@ -167,8 +167,8 @@ export default {
         this.bringDialogToFront(id);
       }
     },
-    onFullscreen: function() {
-      this.$emit("onFullscreen");
+    onFullscreen: function(val) {
+      this.$emit("onFullscreen");	      this.$emit("onFullscreen", val);
     },
     dialogMaximise: function(id) {
       this.maximiseDialog(id);

diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
@@ -1,7 +1,7 @@
 <template>
     <div style="height: 100%;width:100%;z-index:1" ref="MapApp">
       <FloatingFlow @onFullscreen="onFullscreen" ref="flow"/> 
-      <tutorial :parentRefs="this.$refs" :fullscreen="isFullscreen"></tutorial>
+      <tutorial :parentRefs="this.$refs"></tutorial>
     </div>
 </template>
 
@@ -20,16 +20,32 @@ export default {
     FloatingFlow,
     Tutorial
   },
-  data: function(){
-    return{
-      isFullscreen: false
-    }
-  },
   methods: {
-    onFullscreen: function() {
-      let mapApp = this.$refs.MapApp;
-      if (document.fullscreenElement || document.webkitFullscreenElement ||
-        document.mozFullScreenElement || document.msFullscreenElement ) {
+    isFullscreen: function(){
+      return (document.fullscreenElement || document.webkitFullscreenElement ||
+        document.mozFullScreenElement || document.msFullscreenElement )
+    },
+    onFullscreen: function(fullscreenReq) {
+      //If a request is sent, try it
+      if (fullscreenReq !== undefined){
+        if (fullscreenReq && !this.isFullscreen()){
+          this.goFullscreen()
+        }
+        if(!fullscreenReq && this.isFullscreen()){
+          this.leaveFullscreen()
+        }
+      }
+      // Else we toggle fullscreen
+      else{
+        if(this.isFullscreen()){
+          this.leaveFullscreen()
+        } else {
+          this.goFullscreen()
+        }
+      }
+    },
+    leaveFullscreen: function(){
+      if (this.isFullscreen()) {
         if (document.exitFullscreen) {
           document.exitFullscreen();
         } else if (document.mozCancelFullScreen) { /* Firefox */
@@ -39,18 +55,19 @@ export default {
         } else if (document.msExitFullscreen) { /* IE/Edge */
           document.msExitFullscreen();
         }
-        this.isFullscreen = false;
-      } else {
-        if (mapApp.requestFullscreen) {
-          mapApp.requestFullscreen();
-        } else if (mapApp.mozRequestFullScreen) { /* Firefox */
-          mapApp.mozRequestFullScreen();
-        } else if (mapApp.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
-          mapApp.webkitRequestFullscreen();
-        } else if (parent.msRequestFullscreen) { /* IE/Edge */
-          mapApp.msRequestFullscreen();
-        }
-        this.isFullscreen = true;
+      }
+    
+    },
+    goFullscreen: function(){
+      let mapApp = this.$refs.MapApp;
+      if (mapApp.requestFullscreen) {
+        mapApp.requestFullscreen();
+      } else if (mapApp.mozRequestFullScreen) { /* Firefox */
+        mapApp.mozRequestFullScreen();
+      } else if (mapApp.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+        mapApp.webkitRequestFullscreen();
+      } else if (parent.msRequestFullscreen) { /* IE/Edge */
+        mapApp.msRequestFullscreen();
       }
     }
   }

diff --git a/src/components/Tutorial.vue b/src/components/Tutorial.vue
@@ -27,7 +27,7 @@ Vue.use(VueTour);
 
 export default {
   name: "Tutorial",
-  props: ['parentRefs', 'fullscreen'],
+  props: ['parentRefs'],
   methods: {
     /**
      * Callback when an action is performed (open new dialogs).
@@ -73,9 +73,7 @@ export default {
 
       // Step one goes to full screen
       if (currentStep === 1){
-        if (!this.fullscreen){
-          this.flow.onFullscreen();
-        }
+        this.flow.onFullscreen(true);
       }
 
       // Hack on step three to show tooltip for the heart