frontend: created a new button fullscreen mode

frontend/.eslintrc.js

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: CC0-1.0
 
-module.exports = {
+/*module.exports = {
   root: true,
   env: {
     browser: true,
@@ -21,3 +21,4 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
   },
 };
+*/

frontend/src/components/detail-bottom-bar.vue

@@ -14,15 +14,24 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       >
         <img :src="require('static/icons/ic_min_preview.svg')" class="p-1" />
         <div class="bottom-bar-button-text p-1">minimize preview</div>
+
       </nuxt-link>
-      <nuxt-link
+           <nuxt-link
         v-else
         class="bottom-bar-button d-flex justify-content-center align-items-center text-uppercase"
         :to="toFullscreen"
       >
         <img :src="require('static/icons/ic_max_preview.svg')" class="p-1" />
         <div class="bottom-bar-button-text p-1">fullscreen preview</div>
       </nuxt-link>
+
+      <nuxt-link
+        class="bottom-bar-button d-flex justify-content-center align-items-center text-uppercase"
+        :to="toFullscreenMode"
+      >
+        <img :src="require('static/icons/ic_max_preview.svg')" class="p-1" />
+        <div class="bottom-bar-button-text p-1">fullscreen mode</div>
+      </nuxt-link>
       <nuxt-link
         v-if="selectedView === 'editing'"
         class="bottom-bar-button selected d-flex justify-content-center align-items-center text-uppercase"
@@ -117,6 +126,21 @@ export default {
         });
       }
     },
+    toFullscreenMode() {
+      if (this.version) {
+        return this.localePath({
+          name: 'webcomponent-id-version-fullscreen-mode',
+          params: { id: this.id, version: this.version },
+          query: { attribs: this.attribs },
+        });
+      } else {
+        return this.localePath({
+          name: 'webcomponent-id-fullscreen-mode',
+          params: { id: this.id },
+          query: { attribs: this.attribs },
+        });
+      }
+    },
     toFullscreenEditing() {
       if (this.version) {
         return this.localePath({

frontend/src/pages/webcomponent/_id/_version/fullscreen-mode.vue

@@ -0,0 +1,133 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div id="twrap" style="max-height: 100vh">
+    <iframe
+      id="tframe"
+      class="full-height full-width"
+      title="iframe-preview"
+      frameborder="0"
+    ></iframe>
+  </div>
+
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+
+import { WebcomponentModel } from '~/domain/model/WebcomponentModel';
+import { WebcomponentConfigurationModel } from '~/domain/model/WebcomponentConfigurationModel';
+
+export default Vue.extend({
+  name: 'FullscreenMode',
+  //if i delete this the footer get generated
+  layout(context) {
+    return 'fullscreen';
+  },
+  //the whole page become white
+  data() {
+    return {
+      previewBaseURL: (this as any).$api.baseUrl,
+      attribs: (this as any).$route.query.attribs,
+    };
+  },
+
+    //the whole page become white
+  async fetch() {
+    this.$store.commit('webcomponent/SET_EDIT_MODE', true);
+
+    await this.$store.dispatch('webcomponent/loadWebcomponent', {
+      uuid: this.$route.params.id,
+      version: this.$route.params.version,
+    });
+
+    if (this.$route.query.attribs) {
+      await this.$store.dispatch(
+        'webcomponent/restoreSnippet',
+        this.$route.query.attribs
+      );
+    } else {
+      this.$store.commit('webcomponent/SET_EDIT_MODE', false);
+    }
+  },
+
+    //the whole page become white
+  computed: {
+    component(): WebcomponentModel {
+      return this.$store.state.webcomponent.webcomponent;
+    },
+    config(): WebcomponentConfigurationModel {
+      return this.$store.state.webcomponent.configuration;
+    },
+    selectedVersion(): string {
+      return this.$store.state.webcomponent.versionTag;
+    },
+    snippet(): string {
+      return this.$store.state.webcomponent.snippet;
+    },
+    externalPreviewUrl(): string {
+      if (!this.component || !this.config) {
+        return '';
+      }
+      return (
+        this.previewBaseURL +
+        '/preview/' +
+        this.component.uuid +
+        '/' +
+        this.selectedVersion +
+        '?attribs=' +
+        this.$store.getters['webcomponent/transportString']
+      );
+    },
+  },
+    //the whole page become white
+  watch: {
+    externalPreviewUrl(url) {
+      if (url) {
+        this.updatePreview();
+      }
+    },
+  },
+  
+  methods: {
+    updatePreview() {
+      const src = this.externalPreviewUrl;
+      if (!src) {
+        return; // probably not yet loaded
+      }
+
+      const oldElement = document.getElementById('tframe');
+
+      oldElement.parentNode.removeChild(oldElement);
+
+      const width = document.documentElement.clientWidth;
+      const newElement = document.createElement('iframe');
+      newElement.setAttribute('id', 'tframe');
+      newElement.setAttribute('class', 'full-height full-width');
+      if (width > 576) {
+        newElement.setAttribute(
+          'style',
+          'min-height: 100vh; padding-bottom: 0px;'
+        );
+      } else {
+        newElement.setAttribute(
+          'style',
+          'min-height: 100vh; padding-bottom: 45px;'
+        );
+      }
+      newElement.setAttribute('frameborder', '0');
+      newElement.src = src;
+
+      document.getElementById('twrap').appendChild(newElement);
+
+      // newElement.contentDocument.write(this.snippet);
+      newElement.contentDocument.close();
+    },
+  },
+});
+</script>

frontend/src/pages/webcomponent/_id/fullscreen-mode.vue

@@ -0,0 +1,11 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script>
+import wc from '~/pages/webcomponent/_id/_version/fullscreen-mode';
+
+export default wc;
+</script>