Demo toggle fullscreen

Author: Guillaume Chau

demo-src/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "highlight.js": "^9.7.0",
+    "screenfull": "^3.3.2",
     "v-tooltip": "^2.0.0-beta.9",
     "vue": "^2.1.0",
     "vue-router": "^3.0.1"

demo-src/src/App.vue

@@ -29,6 +29,7 @@
 @import "~style/imports";
 
 body {
+  background: white;
   margin: 0;
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

demo-src/src/PageHome.vue

@@ -13,6 +13,7 @@
       </router-link>
       <a href="https://github.com/Akryum/v-tooltip#usage">Documentation</a>
       <a href="https://github.com/Akryum/v-tooltip/issues">Report an issue</a>
+      <a @click="toggleFullscreen">Toggle fullscreen</a>
     </section>
 
     <section class="demo">
@@ -96,6 +97,8 @@
 </template>
 
 <script>
+import screenfull from 'screenfull'
+
 import CodeSnippet from './CodeSnippet.vue'
 import Collapse from './Collapse.vue'
 import ExampleComponent from './ExampleComponent.vue'
@@ -288,11 +291,13 @@ const styleSnippet3 = `
 
 export default {
   name: 'Home',
+
   components: {
     CodeSnippet,
     Collapse,
     ExampleComponent,
   },
+
   data () {
     return {
       msg: `This is a button.`,
@@ -305,5 +310,13 @@ export default {
       styleSnippet3,
     }
   },
+
+  methods: {
+    toggleFullscreen (event) {
+      if (screenfull.enabled) {
+        screenfull.toggle(document.documentElement)
+      }
+    },
+  },
 }
 </script>

demo-src/yarn.lock

@@ -3816,6 +3816,10 @@ sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+screenfull@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-3.3.2.tgz#a6adf3b3f5556da812725385880600f5b39fbf25"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"