From 836dbd2bbb66f5304537dd50d4a084725c890689 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 18 Feb 2019 16:59:47 +0100
Subject: [PATCH] Add Infogram block

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

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index e3aa0e5e..9b977e6f 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -37,6 +37,7 @@
   import VideoBlock from '@/components/content-blocks/VideoBlock';
   import LinkBlock from '@/components/content-blocks/LinkBlock';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+  import InfogramBlock from '@/components/content-blocks/InfogramBlock';
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Solution from '@/components/content-blocks/Solution';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
@@ -59,6 +60,7 @@
       'video_block': VideoBlock,
       'link_block': LinkBlock,
       'document_block': DocumentBlock,
+      'infogram_block': InfogramBlock,
       Solution,
       Assignment,
       Task,
diff --git a/client/src/components/content-blocks/InfogramBlock.vue b/client/src/components/content-blocks/InfogramBlock.vue
new file mode 100644
index 00000000..8f9cfe47
--- /dev/null
+++ b/client/src/components/content-blocks/InfogramBlock.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="infogram-block">
+    <iframe class="infogram-block__iframe" :src="src"
+            :title="title"
+            :height="height" scrolling="no" frameborder="0" style="border:none;"></iframe>
+
+    <a class="infogram-block__link" :href="href"
+       target="_blank">{{title}}</a>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['value'],
+
+    mounted() {
+      // from https://developers.infogr.am/oembed/
+      window.addEventListener('message', event => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.context === 'iframe.resize') {
+            this.height = data.height;
+          }
+        } catch (e) {
+          return false;
+        }
+      });
+    },
+
+    computed: {
+      src() {
+        return `https://e.infogram.com/${this.id}?src=embed`;
+      },
+      href() {
+        return `https://infogram.com/${this.id}`
+      },
+      id() {
+        return this.value.id;
+      },
+      title() {
+        return this.value.title || 'Infografik'
+      }
+    },
+
+    data() {
+      return {
+        height: 0,
+        // title: 'Zahlungsmittel'
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .infogram-block {
+    /*padding: 8px 0;*/
+    /*font-family: $sans-serif-font-family;*/
+    /*font-size: 13px !important;*/
+    /*line-height: 15px !important;*/
+    /*text-align: center;*/
+    /*border-top: 1px solid #dadada;*/
+    /*margin: 0 30px;*/
+
+    &__link {
+      /*color:#989898;*/
+      text-decoration: none;
+    }
+
+    &__iframe {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/server/books/blocks.py b/server/books/blocks.py
index 110c7fda..2b65e2ac 100644
--- a/server/books/blocks.py
+++ b/server/books/blocks.py
@@ -64,6 +64,11 @@ class DocumentBlock(blocks.StructBlock):
 
     url = blocks.URLBlock()
 
+
+class InfogramBlock(blocks.StructBlock):
+    id = blocks.TextBlock()
+    title = 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 8258f5d7..33dd79fc 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
+    ImageUrlBlock, AssignmentBlock, InfogramBlock
 from core.wagtail_utils import StrictHierarchyPage
 from users.models import SchoolClass
 
@@ -44,6 +44,7 @@ class ContentBlock(StrictHierarchyPage):
         ('solution', TextBlock(icon='tick')),
         ('video_block', VideoBlock()),
         ('document_block', DocumentBlock()),
+        ('infogram_block', InfogramBlock()),
     ], null=True, blank=True)
 
     type = models.CharField(