From 189fdd7fdda48d81ee45663053ceac69022ba3aa Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 9 Jul 2021 12:11:05 +0200
Subject: [PATCH] add creation iframe

---
 src/api/fragments/NodePartial.gql   |  6 ++-
 src/components/layouts/SideView.vue |  6 ---
 src/pages/Gallery.vue               | 59 ++++++++++++++++++++++++++++-
 src/pages/gallery/GalleryView.vue   |  6 +--
 4 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/api/fragments/NodePartial.gql b/src/api/fragments/NodePartial.gql
index 9243534..f6819ee 100644
--- a/src/api/fragments/NodePartial.gql
+++ b/src/api/fragments/NodePartial.gql
@@ -29,7 +29,11 @@ fragment NodePartial on MapItemInterface {
   }
 
   ... on Creation {
-    content: texte
+    content: texte,
+    piece: oeuvre {
+      url,
+      title
+    }
   }
 
   # For debug
diff --git a/src/components/layouts/SideView.vue b/src/components/layouts/SideView.vue
index 2d07690..9b67f58 100644
--- a/src/components/layouts/SideView.vue
+++ b/src/components/layouts/SideView.vue
@@ -5,7 +5,6 @@
     no-header
     :id="id"
     :body-class="{ paddings: !noCross }"
-    backdrop backdrop-variant="light"
   >
     <template #default="{ hide, visible }">
       <div v-if="!noCross" class="btn-close-wrapper">
@@ -35,7 +34,6 @@ export default {
   ::v-deep {
     .b-sidebar {
       position: absolute;
-      background-color: red;
       width: auto;
 
       @media (orientation: portrait) {
@@ -61,10 +59,6 @@ export default {
         padding: $node-view-spacer-y $node-view-spacer-x;
       }
     }
-
-    .b-sidebar-backdrop {
-      opacity: 0.3;
-    }
   }
 
   .btn-close-wrapper {
diff --git a/src/pages/Gallery.vue b/src/pages/Gallery.vue
index d08a950..f446c18 100644
--- a/src/pages/Gallery.vue
+++ b/src/pages/Gallery.vue
@@ -7,7 +7,7 @@
     <side-view id="gallery-map-side">
       <template #default="{ hide, visible }">
         <gallery-map
-          v-if="creations"
+          v-if="creations && creation"
           :nodes="creations" :node="creation"
           :visible="visible"
           @open-creation="openCreation($event, hide)"
@@ -40,6 +40,19 @@
       </template>
     </side-view>
 
+
+    <b-modal
+      v-if="creation && creation.piece.url"
+      :id="'modal-creation' + creation.id"
+      class="modal-creation"
+      static hide-footer hide-header
+    >
+      <template #default="{ hide }">
+        <button-expand expanded @click="hide()" />
+        <iframe :src="creation.piece.url" width="100%" height="100%" />
+      </template>
+    </b-modal>
+
     <b-overlay
       :show="!creation"
       spinner-variant="creation"
@@ -161,4 +174,48 @@ export default {
     font-family: $font-family-text;
   }
 }
+
+.modal-creation {
+  z-index: 1100 !important;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  ::v-deep .modal {
+    position: absolute;
+    background-color: transparent;
+    width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+
+    &-dialog {
+      max-width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+
+    &-content {
+      height: 100%;
+      border: 0;
+    }
+
+    &-body {
+      padding: 0;
+    }
+
+    &-backdrop {
+      display: none;
+    }
+
+    iframe {
+      border: 0;
+    }
+
+    .btn-expand {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+}
 </style>
diff --git a/src/pages/gallery/GalleryView.vue b/src/pages/gallery/GalleryView.vue
index 95b6cba..1419b1b 100644
--- a/src/pages/gallery/GalleryView.vue
+++ b/src/pages/gallery/GalleryView.vue
@@ -7,7 +7,7 @@
         <div class="node-view-img-wrapper">
           <img :src="node.image.url" :alt="node.image.alt">
 
-          <button-expand @click="$emit('view-creation')" v-b-modal="'modal-creation' + node.id" class="center" />
+          <button-expand v-if="node.piece.url" v-b-modal="'modal-creation' + node.id" class="center" />
 
           <div class="btns-artwork">
             <b-button variant="depart" class="btn-shadow btn-artwork mr-2" @click="$emit('view-origin')">
@@ -191,10 +191,10 @@ export default {
   }
 
   .node-view {
-    height: 100%;
+    min-height: 100%;
 
     &-wrapper {
-      height: 100%;
+      min-height: 100%;
     }
   }
 }