✨ Added logic to embed euromat in an iframe

README.md

@@ -6,6 +6,20 @@ A Vue.js powered, progressive web voting application for upcoming European elect
 
 The calculation model for voting has been defined by the German Federal Agency for Civic Education _(Bundeszentrale für politische Bildung)_. A good overview can be found in this PDF: [`resources/Rechenmodell des Wahl-O-Mat.pdf`](resources/Rechenmodell%20des%20Wahl-O-Mat.pdf).
 
+## Embedding Euromat
+
+It's possible to embed Euromat via an iframe and setting query parameters:
+
+```html
+<iframe
+  id="euromat-2019"
+  title="Euromat 2019"
+  width="500"
+  height="300"
+  src="https://euromat.info/de/theses?embedded=iframe">
+</iframe>
+```
+
 ## ⌨️ Development
 
 This is a Vue.js progressive web application, developed with [`@vue/cli`](https://github.com/vuejs/vue-cli).

src/app/app.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="app">
-    <header class="app-header">
+  <div id="app" :class="{ 'is-embedded': isEmbedded }">
+    <header v-if="!isEmbedded" class="app-header">
       <router-link :to="{ path: `/${$i18n.locale}/` }">
         <img class="header-logo"
           alt="EUROMAT Logo"
@@ -17,7 +17,7 @@
       <router-view />
     </main>
 
-    <footer>
+    <footer v-if="!isEmbedded">
       <app-footer :menu="subMenu" :social="socialMedia" />
     </footer>
 
@@ -105,6 +105,12 @@
             message: this.$t('meta.socialMedia.clipboard')
           }
         ]
+      },
+      isEmbedded () {
+        return (
+          this.$route.query.embedded &&
+          this.$route.query.embedded === 'iframe'
+        )
       }
     },
 
@@ -234,6 +240,10 @@
     justify-content: center;
     position: relative;
 
+    &.is-embedded {
+      padding-top: $small-gap;
+    }
+
     header {
       width: 100%;
     }

src/app/euromat/components/emphasis.vue

@@ -57,6 +57,15 @@
       }
     },
 
+    computed: {
+      isEmbedded () {
+        return (
+          this.$route.query.embedded &&
+          this.$route.query.embedded === 'iframe'
+        )
+      }
+    },
+
     created () {
       if (this.$browser.supports('sessionStorage')) {
         if (!sessionStorage.getItem('euromat-answers')) {
@@ -92,7 +101,8 @@
         }
 
         this.$router.push({
-          path: getTranslatedUrl('results', getTranslatedUrl('theses', null, true))
+          path: getTranslatedUrl('results', getTranslatedUrl('theses', null, true)),
+          query: this.isEmbedded ? { embedded: 'iframe' } : {}
         })
       }
     }

src/app/euromat/components/results.vue

@@ -62,7 +62,7 @@
       </li>
     </ul>
 
-    <div class="results-ctrls">
+    <div v-if="!isEmbedded" class="results-ctrls">
       <p>{{ $t('results.thanks') }}</p>
       <router-link tag="a"
         class="btn"
@@ -121,6 +121,12 @@
     computed: {
       startOverUrl () {
         return getTranslatedUrl('theses')
+      },
+      isEmbedded () {
+        return (
+          this.$route.query.embedded &&
+          this.$route.query.embedded === 'iframe'
+        )
       }
     },
 

src/app/euromat/components/theses.vue

@@ -70,6 +70,12 @@
     },
 
     computed: {
+      isEmbedded () {
+        return (
+          this.$route.query.embedded &&
+          this.$route.query.embedded === 'iframe'
+        )
+      },
       currentThesisStep () {
         return this.currentThesis + 1
       },
@@ -146,7 +152,8 @@
         }
 
         this.$router.push({
-          path: getTranslatedUrl('emphasis', getTranslatedUrl('theses', null, true))
+          path: getTranslatedUrl('emphasis', getTranslatedUrl('theses', null, true)),
+          query: this.isEmbedded ? { embedded: 'iframe' } : {}
         })
       }
     }

src/i18n/helper.js

@@ -1,8 +1,6 @@
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@/config'
 import i18n from './index'
 
-console.log('i18n', i18n)
-
 export const isLangSupported = lang =>
   SUPPORTED_LOCALES.some(([locale]) => locale === lang)