From 4f72f804c62d82eff17a3507c2f9d56309a64c1e Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 21 Feb 2019 09:55:41 +0100
Subject: [PATCH] Add genial.ly block

---
 client/src/components/ContentBlock.vue        |  2 +
 .../content-blocks/GeniallyBlock.vue          | 50 +++++++++++++++++++
 server/books/blocks.py                        |  4 ++
 server/books/models/contentblock.py           |  3 +-
 4 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/content-blocks/GeniallyBlock.vue

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 9b977e6f..4699cec6 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -38,6 +38,7 @@
   import LinkBlock from '@/components/content-blocks/LinkBlock';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import InfogramBlock from '@/components/content-blocks/InfogramBlock';
+  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Solution from '@/components/content-blocks/Solution';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
@@ -61,6 +62,7 @@
       'link_block': LinkBlock,
       'document_block': DocumentBlock,
       'infogram_block': InfogramBlock,
+      'genially_block': GeniallyBlock,
       Solution,
       Assignment,
       Task,
diff --git a/client/src/components/content-blocks/GeniallyBlock.vue b/client/src/components/content-blocks/GeniallyBlock.vue
new file mode 100644
index 00000000..cdbfebc1
--- /dev/null
+++ b/client/src/components/content-blocks/GeniallyBlock.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="genially-block">
+    <div class="genially-block__wrapper">
+      <iframe class="genially-block__iframe"
+              frameborder="0"
+              width="800px"
+              height="600px"
+              :src="src"
+              type="text/html"
+              allowscriptaccess="always"
+              allowfullscreen="true"
+              scrolling="yes"
+              allownetworking="all"></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['value'],
+
+    computed: {
+      src() {
+        return `https://view.genial.ly/${this.value.id}`;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  // Styling and structure taken from original iframe
+  .genially-block {
+    width: 100%;
+
+    &__wrapper {
+      position: relative;
+      padding-bottom: 75%;
+      padding-top: 0;
+      height: 0;
+    }
+
+    &__iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/server/books/blocks.py b/server/books/blocks.py
index 2b65e2ac..a394c383 100644
--- a/server/books/blocks.py
+++ b/server/books/blocks.py
@@ -69,6 +69,10 @@ class InfogramBlock(blocks.StructBlock):
     id = blocks.TextBlock()
     title = blocks.TextBlock()
 
+
+class GeniallyBlock(blocks.StructBlock):
+    id = blocks.TextBlock()
+
 # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
 #
 # url = blocks.URLBlock()
diff --git a/server/books/models/contentblock.py b/server/books/models/contentblock.py
index 33dd79fc..8bb89a5d 100644
--- a/server/books/models/contentblock.py
+++ b/server/books/models/contentblock.py
@@ -6,7 +6,7 @@ from wagtail.core.fields import StreamField
 from wagtail.images.blocks import ImageChooserBlock
 
 from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
-    ImageUrlBlock, AssignmentBlock, InfogramBlock
+    ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock
 from core.wagtail_utils import StrictHierarchyPage
 from users.models import SchoolClass
 
@@ -45,6 +45,7 @@ class ContentBlock(StrictHierarchyPage):
         ('video_block', VideoBlock()),
         ('document_block', DocumentBlock()),
         ('infogram_block', InfogramBlock()),
+        ('genially_block', GeniallyBlock()),
     ], null=True, blank=True)
 
     type = models.CharField(