From 1c2e0fc88b8427c8de31b65b5b88074446c82242 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 22 Oct 2019 17:06:46 +0200
Subject: [PATCH] Add Thinglink block

---
 client/src/components/ContentBlock.vue        |  2 +
 .../content-blocks/ThinglinkBlock.vue         | 68 +++++++++++++++++++
 server/basicknowledge/models.py               |  3 +-
 server/books/blocks.py                        |  4 ++
 server/books/models/contentblock.py           |  4 +-
 5 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/content-blocks/ThinglinkBlock.vue

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 8cf7a973..335fe510 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -43,6 +43,7 @@
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import InfogramBlock from '@/components/content-blocks/InfogramBlock';
   import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
+  import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
   import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
   import ContentListBlock from '@/components/content-blocks/ContentListBlock';
   import Assignment from '@/components/content-blocks/assignment/Assignment';
@@ -86,6 +87,7 @@
       'document_block': DocumentBlock,
       'infogram_block': InfogramBlock,
       'genially_block': GeniallyBlock,
+      'thinglink_block': ThinglinkBlock,
       'subtitle': SubtitleBlock,
       'content_list': ContentListBlock,
       'module_room_slug': ModuleRoomSlug,
diff --git a/client/src/components/content-blocks/ThinglinkBlock.vue b/client/src/components/content-blocks/ThinglinkBlock.vue
new file mode 100644
index 00000000..9a1f2fba
--- /dev/null
+++ b/client/src/components/content-blocks/ThinglinkBlock.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="thinglink-block">
+    <div class="thinglink-block__wrapper">
+      <iframe class="thinglink-block__iframe"
+              frameborder="0"
+              width="800px"
+              height="600px"
+              :src="src"
+              type="text/html"
+              webkitallowfullscreen
+              mozallowfullscreen
+              scrolling="no"
+              allowscriptaccess="always"
+              allowfullscreen="true"
+              allownetworking="all"></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['value'],
+
+    computed: {
+      src() {
+        return `https://www.thinglink.com/card/${this.value.id}`;
+      }
+    },
+
+    methods: {
+      openFullscreen() {
+        this.$store.dispatch('showFullscreenInfographic', {
+          id: this.value.id,
+          type: 'thinglink-block'
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  // Styling and structure taken from original iframe
+  .thinglink-block {
+    width: 100%;
+    margin-bottom: $large-spacing;
+
+    &__wrapper {
+      position: relative;
+      padding-bottom: 75%;
+      padding-top: 0;
+      height: 0;
+    }
+
+    &__iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__link {
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/server/basicknowledge/models.py b/server/basicknowledge/models.py
index d7158ae0..8d320929 100644
--- a/server/basicknowledge/models.py
+++ b/server/basicknowledge/models.py
@@ -4,7 +4,7 @@ from wagtail.core.fields import StreamField
 from wagtail.images.blocks import ImageChooserBlock
 
 from books.blocks import LinkBlock, VideoBlock, DocumentBlock, SectionTitleBlock, InfogramBlock, \
-    GeniallyBlock, InstrumentTextBlock, SubtitleBlock
+    GeniallyBlock, InstrumentTextBlock, SubtitleBlock, ThinglinkBlock
 from core.wagtail_utils import StrictHierarchyPage
 
 
@@ -20,6 +20,7 @@ class BasicKnowledge(StrictHierarchyPage):
         ('section_title', SectionTitleBlock()),
         ('infogram_block', InfogramBlock()),
         ('genially_block', GeniallyBlock()),
+        ('thinglink_block', ThinglinkBlock()),
         ('subtitle', SubtitleBlock()),
     ], null=True, blank=True)
 
diff --git a/server/books/blocks.py b/server/books/blocks.py
index fb7b6df7..d01d4b11 100644
--- a/server/books/blocks.py
+++ b/server/books/blocks.py
@@ -84,6 +84,10 @@ class GeniallyBlock(blocks.StructBlock):
     id = blocks.TextBlock()
 
 
+class ThinglinkBlock(blocks.StructBlock):
+    id = blocks.TextBlock()
+
+
 class SectionTitleBlock(blocks.StructBlock):
     text = blocks.TextBlock()
 
diff --git a/server/books/models/contentblock.py b/server/books/models/contentblock.py
index f8e1ca3f..b00ace41 100644
--- a/server/books/models/contentblock.py
+++ b/server/books/models/contentblock.py
@@ -7,7 +7,8 @@ from wagtail.core.fields import StreamField
 from wagtail.images.blocks import ImageChooserBlock
 
 from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
-    ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock, SurveyBlock, ModuleRoomSlugBlock
+    ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock, SurveyBlock, ModuleRoomSlugBlock, \
+    ThinglinkBlock
 from books.utils import get_type_and_value
 from core.wagtail_utils import StrictHierarchyPage
 from surveys.models import Survey
@@ -50,6 +51,7 @@ class ContentBlock(StrictHierarchyPage):
         ('document_block', DocumentBlock()),
         ('infogram_block', InfogramBlock()),
         ('genially_block', GeniallyBlock()),
+        ('thinglink_block', ThinglinkBlock()),
         ('subtitle', SubtitleBlock()),
         ('module_room_slug', ModuleRoomSlugBlock())
     ]