♻️ change the way to enable / disable the fullscreen

JAGFx · Oct 18, 2020 · 0428b31 · 0428b31
1 parent 336f31b
commit 0428b31
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -152,11 +152,6 @@ If you want to use a fake file data instead of the data from the SCS API, set th
 VUE_APP_USE_FAKE_DATA=true
 ```
 
-If you wan to disable the fullscreen for development, set to `false`:
-```dotenv
-VUE_APP_ENABLE_FULLSCREEN=false
-```
-
 ### Resources
 I provide all resources what i'm use to develop this dashboard. Such as svg, AI file for svg or others element who can be need to contribute too.
 

diff --git a/public/index.html b/public/index.html
@@ -17,49 +17,49 @@
 
 	</body>
 	<script>
-		$( function () {
-			var noSleep = new NoSleep();
-			
-			$( 'html' ).on( 'click', '#overlay', function () {
-				//console.log( 'Plop' );
-				var elem = document.querySelector( 'html' );
-				
-				/* View in fullscreen */
-				function openFullscreen() {
-					if ( elem.requestFullscreen ) {
-						elem.requestFullscreen();
-					} else if ( elem.mozRequestFullScreen ) { /* Firefox */
-						elem.mozRequestFullScreen();
-					} else if ( elem.webkitRequestFullscreen ) { /* Chrome, Safari and Opera */
-						elem.webkitRequestFullscreen();
-					} else if ( elem.msRequestFullscreen ) { /* IE/Edge */
-						elem.msRequestFullscreen();
-					}
-					
-					noSleep.enable();
-				}
-				
-				/* Close fullscreen */
-				function closeFullscreen() {
-					if ( document.exitFullscreen ) {
-						document.exitFullscreen();
-					} else if ( document.mozCancelFullScreen ) { /* Firefox */
-						document.mozCancelFullScreen();
-					} else if ( document.webkitExitFullscreen ) { /* Chrome, Safari and Opera */
-						document.webkitExitFullscreen();
-					} else if ( document.msExitFullscreen ) { /* IE/Edge */
-						document.msExitFullscreen();
-					}
-					
-					noSleep.disable();
-				}
-				
-				if ( !document.webkitIsFullScreen ) {
-					openFullscreen();
-				} else {
-					closeFullscreen();
-				}
-			} );
-		} );
+		/*$( function () {
+		 var noSleep = new NoSleep();
+
+		 $( 'html' ).on( 'click', '#overlay', function () {
+		 //console.log( 'Plop' );
+		 var elem = document.querySelector( 'html' );
+
+		 /!* View in fullscreen *!/
+		 function openFullscreen() {
+		 if ( elem.requestFullscreen ) {
+		 elem.requestFullscreen();
+		 } else if ( elem.mozRequestFullScreen ) { /!* Firefox *!/
+		 elem.mozRequestFullScreen();
+		 } else if ( elem.webkitRequestFullscreen ) { /!* Chrome, Safari and Opera *!/
+		 elem.webkitRequestFullscreen();
+		 } else if ( elem.msRequestFullscreen ) { /!* IE/Edge *!/
+		 elem.msRequestFullscreen();
+		 }
+
+		 noSleep.enable();
+		 }
+
+		 /!* Close fullscreen *!/
+		 function closeFullscreen() {
+		 if ( document.exitFullscreen ) {
+		 document.exitFullscreen();
+		 } else if ( document.mozCancelFullScreen ) { /!* Firefox *!/
+		 document.mozCancelFullScreen();
+		 } else if ( document.webkitExitFullscreen ) { /!* Chrome, Safari and Opera *!/
+		 document.webkitExitFullscreen();
+		 } else if ( document.msExitFullscreen ) { /!* IE/Edge *!/
+		 document.msExitFullscreen();
+		 }
+
+		 noSleep.disable();
+		 }
+
+		 if ( !document.webkitIsFullScreen ) {
+		 openFullscreen();
+		 } else {
+		 closeFullscreen();
+		 }
+		 } );
+		 } );*/
 	</script>
 </html>
diff --git a/src/assets/scss/game/game.scss b/src/assets/scss/game/game.scss
@@ -28,8 +28,8 @@
 		li {
 			list-style: none;
 			padding: 0.5rem 1rem;
-			min-width: 9rem;
-			max-width: 9rem;
+			//min-width: 9rem;
+			//max-width: 9rem;
 
 			span {
 				padding: .2rem .5rem;

diff --git a/src/components/Elements/Dashboard.vue b/src/components/Elements/Dashboard.vue
@@ -1,6 +1,5 @@
 <template>
 	<div :class="telemetry.truck.brand.id">
-		<div id="overlay" v-show="enabledFullScreen()"></div>
 		<slot v-bind="{ skinData: skinData() }"></slot>
 	</div>
 </template>
@@ -11,9 +10,6 @@ import { mapGetters } from 'vuex';
 export default {
   name:     'Dashboard',
   methods:  {
-    enabledFullScreen() {
-      return process.env.VUE_APP_ENABLE_FULLSCREEN === 'true';
-    },
     skinData() {
       return this.currentSkin;
     }

diff --git a/src/components/Zone/Game/Game.vue b/src/components/Zone/Game/Game.vue
@@ -1,18 +1,8 @@
 <template>
   <nav class="game">
     <ul class="w-100">
-      <li><span>Game</span>{{ telemetry.game.game.name.toUpperCase() }}</li>
+      <!--      <li><span>Game</span>{{ telemetry.game.game.name.toUpperCase() }}</li>-->
       <li><span>API</span>v{{ telemetry.game.telemetryVersion }}</li>
-      <!--<li><span>Uptime</span>{{formatedTimestamp()}}</li>-->
-    </ul>
-    <div class="game-time">
-      <span>{{ $gameTime() | $dateTimeLocalized( DATE_FORMAT_LONG, TIME_FORMAT_FULL ) }}</span>
-    </div>
-    <ul class="w-100">
-      <li @click="onClickGear()">
-        <span v-show="!menuIsDisplayed">Menu <i class="fas fa-bars"></i>️</span>
-        <span v-show="menuIsDisplayed">Close <i class="fas fa-times"></i>️</span>
-      </li>
       <li v-if="!isOnDevEnvironment()">JAGFx - {{ getVersion() }}<span>&copy;</span></li>
       <li v-else>
         <select v-model="event" class="w-100" @change="onEventChange">
@@ -54,13 +44,21 @@
           </optgroup>
         </select>
       </li>
+      <!--<li><span>Uptime</span>{{formatedTimestamp()}}</li>-->
+    </ul>
+    <div class="game-time">
+      <span>{{ $gameTime() | $dateTimeLocalized( DATE_FORMAT_LONG, TIME_FORMAT_FULL ) }}</span>
+    </div>
+    <ul class="w-100">
+      <li @click="onClickFullscreen()">
+        <span v-show="!fullscreen"><i class="fas fa-expand"></i></span>
+        <span v-show="fullscreen"><i class="fas fa-compress"></i></span>
+      </li>
+      <li @click="onClickGear()">
+        <span v-show="!menuIsDisplayed">Menu <i class="fas fa-bars"></i>️</span>
+        <span v-show="menuIsDisplayed">Close <i class="fas fa-times"></i>️</span>
+      </li>
     </ul>
-
-    <!--<div><span>Game:</span><span>{{telemetry.game.name.toUpperCase()}}</span></div>
-    <div><span>Telemetry version:</span><span>{{telemetryVersion}}</span></div>
-    &lt;!&ndash;<div><span>Paused:</span><span>{{paused ? "YES" : "NO"}}</span></div>&ndash;&gt;
-    <div><span>Uptime:</span><span>{{formatedTimestamp()}}</span></div>
-    <div><span>Game time:</span><span>{{formatedTime()}}</span></div>-->
   </nav>
 </template>
 
@@ -73,7 +71,8 @@ export default {
   name:     'Game',
   data() {
     return {
-      event: ''
+      event:      '',
+      fullscreen: false
     };
   },
   methods:  {
@@ -89,7 +88,7 @@ export default {
 
       this.$updateEvent( {
         eventName: this.event,
-        rawData: { ...rawData }
+        rawData:   { ...rawData }
       } );
       /*this.$store.dispatch( 'events/emitEvent', {
        eventName: this.event,
@@ -100,6 +99,46 @@ export default {
     },
     onClickGear() {
       this.$store.dispatch( 'menu/toggle' );
+    },
+    onClickFullscreen() {
+      const elem = document.querySelector( 'html' );
+
+      if ( !this.fullscreen ) {
+        // Enable fullscreen
+
+        if ( elem.requestFullscreen )
+          elem.requestFullscreen();
+
+        else if ( elem.mozRequestFullScreen )
+          elem.mozRequestFullScreen();
+
+        else if ( elem.webkitRequestFullscreen )
+          elem.webkitRequestFullscreen();
+
+        else if ( elem.msRequestFullscreen )
+          elem.msRequestFullscreen();
+
+        this.$NoSleep.enable();
+
+      } else {
+        // Disable fullscreen
+
+        if ( document.exitFullscreen )
+          document.exitFullscreen();
+
+        else if ( document.mozCancelFullScreen )
+          document.mozCancelFullScreen();
+
+        else if ( document.webkitExitFullscreen )
+          document.webkitExitFullscreen();
+
+        else if ( document.msExitFullscreen )
+          document.msExitFullscreen();
+
+        this.$NoSleep.disable();
+      }
+
+      this.fullscreen = !this.fullscreen;
     }
   },
   computed: {

diff --git a/src/main.js b/src/main.js
@@ -3,17 +3,20 @@ import 'animate.css';
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import 'bootstrap/dist/js/bootstrap.bundle';
+import NoSleep                       from 'nosleep.js';
 import Vue                           from 'vue';
 import VueClipboard                  from 'vue-clipboard2';
 import VueSocketIO                   from 'vue-socket.io';
 import App                           from './App.vue';
-import TelemetryPlugin               from './plugins/telemetry.plugin';
 import EventPlugin                   from './plugins/event.plugin';
+import TelemetryPlugin               from './plugins/telemetry.plugin';
 import store                         from './store';
 
-window.$       = require( 'jquery' );
-window.JQuery  = require( 'jquery' );
-window.NoSleep = require( 'nosleep.js' );
+//window.$      = require( 'jquery' );
+//window.JQuery = require( 'jquery' );
+//window.NoSleep = require( 'nosleep.js' );
+
+Vue.prototype.$NoSleep = new NoSleep();
 
 Vue.use( BootstrapVue );
 Vue.use( IconsPlugin );