From 170bfda78c8a1a7dee337c3dcdcf2c9cfdc42ba5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 21 Feb 2019 14:28:38 +0100
Subject: [PATCH] Add genial.ly block to modal

---
 client/src/components/FullscreenInfographic.vue    |  4 +++-
 .../components/content-blocks/GeniallyBlock.vue    | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/components/FullscreenInfographic.vue b/client/src/components/FullscreenInfographic.vue
index 4fade4a6..7c951dc5 100644
--- a/client/src/components/FullscreenInfographic.vue
+++ b/client/src/components/FullscreenInfographic.vue
@@ -7,11 +7,13 @@
 <script>
   import Modal from '@/components/Modal';
   import InfogramBlock from '@/components/content-blocks/InfogramBlock';
+  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
 
   export default {
     components: {
       Modal,
-      InfogramBlock
+      InfogramBlock,
+      GeniallyBlock
     },
 
     computed: {
diff --git a/client/src/components/content-blocks/GeniallyBlock.vue b/client/src/components/content-blocks/GeniallyBlock.vue
index cdbfebc1..25a25377 100644
--- a/client/src/components/content-blocks/GeniallyBlock.vue
+++ b/client/src/components/content-blocks/GeniallyBlock.vue
@@ -12,6 +12,7 @@
               scrolling="yes"
               allownetworking="all"></iframe>
     </div>
+    <a class="genially-block__link" @click="openFullscreen">Fullscreen</a>
   </div>
 </template>
 
@@ -23,6 +24,15 @@
       src() {
         return `https://view.genial.ly/${this.value.id}`;
       }
+    },
+
+    methods: {
+      openFullscreen() {
+        this.$store.dispatch('showFullscreenInfographic', {
+          id: this.value.id,
+          type: 'genially-block'
+        });
+      }
     }
   }
 </script>
@@ -46,5 +56,9 @@
       width: 100%;
       height: 100%;
     }
+
+    &__link {
+      cursor: pointer;
+    }
   }
 </style>