first draft of openenings content in html

assets/css/app.scss

@@ -31,4 +31,60 @@ header[role="banner"]{
 
 
 section[role="main-content"]{
+
+  #content{
+    position: absolute;
+    left: 0; top:0;
+    width: 100%; height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+
+    >.wrapper{
+      position: relative;
+      margin:5% 10%;
+      padding:1em;
+      overflow-y: hidden;
+      background-color: #fff;
+      border-radius: 5px;
+      height: 80%;
+      box-sizing:border-box;
+    }
+    >.wrapper{
+      display: flex;
+      flex-direction: column;
+      >header{
+        padding:0.5em 0;
+        h1{
+          font-size: 1.323em;
+          font-weight: normal;
+          margin: 0
+        }
+        .close-btn{
+          display: block;
+          width:1em; height:1em;
+          position: absolute;
+          top:1em; right:1em;
+          background-color: #1a1a1a;
+          cursor: pointer;
+          text-align: center;
+          border-radius: 5px;
+          font-weight: bold;
+          line-height: 1;
+          color: #fff;
+        }
+      }
+      >section{
+        overflow-y: auto;
+        div.text{
+          white-space: pre-wrap;
+          font-weight: 300;
+          line-height: 1.2;
+
+        }
+        img{
+          max-width:100%;
+        }
+      }
+    }
+
+  }
 }

src/App.vue

@@ -47,6 +47,7 @@
 
           </scene>
         </renderer>
+        <Content v-if="content_data" :data="content_data" @onClose="onCloseContent" />
       </div>
     </section>
     <footer />
@@ -66,6 +67,7 @@ import WaterFragment from 'assets/glsl/WaterFragment'
 import Ground from './components/objects/Ground'
 import Cube from './components/objects/Cube'
 import Project from './components/objects/Project'
+import Content from './components/Content'
 
 // const TWEEN = require('@tweenjs/tween.js')
 const _debug = false
@@ -80,7 +82,8 @@ export default {
   components: {
     Cube,
     Project,
-    Ground
+    Ground,
+    Content
   },
   mixins: [mixins],
   data () {
@@ -188,7 +191,9 @@ export default {
       interactive_objects: [],
       light_opts: {
         castShadow: true
-      }
+      },
+      opened_vnode: null,
+      content_data: null
     }
   },
   computed: {
@@ -267,10 +272,17 @@ export default {
       }
     },
     onDocMouseup (e) {
-      // console.log('onDocumentMouseup', e)
+      console.log('onDocumentMouseup', e)
       // CONTROLS
       this.controls.user_interact = false
 
+      // check if event is not a classic html link
+      if (e.target.className === 'close-btn') {
+        // console.log('close-btn: vnode', this.opened_vnode)
+        // this.opened_vnode.isOpened = false
+        return
+      }
+
       // INTERACTIONS
       this.updatedInteractiveObjects()
 
@@ -290,7 +302,19 @@ export default {
           // for (var i = 0; i < intersects.length; i++) {
           object = intersects[0].object
           vnode = object.userData.vnode
+          if (object.name === 'Content' && vnode.isOpened) {
+            this.content_data = vnode.data
+          }
+
+          // close precedent vnode
+          if (this.opened_vnode && this.opened_vnode.$options._componentTag === 'ContentBlock') {
+            // console.log('opened_vnode', this.opened_vnode)
+            this.opened_vnode.isOpened = false
+          }
+          // opene current vnode
           vnode.isOpened = true
+          // recorde vnode as precedent vnode
+          this.opened_vnode = vnode
 
           toPos = { ...object.position }
           if (object.name === 'Content') {
@@ -354,6 +378,9 @@ export default {
 
       // TWEENS
       TWEEN.update()
+    },
+    onCloseContent () {
+      this.content_data = null
     }
   }
 }

src/components/Content.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    id="content"
+    @click.prevent="close"
+    @keydown.enter.prevent="close"
+  >
+    <div class="wrapper">
+      <header>
+        <span class="close-btn"
+        @click.prevent="close"
+        @keydown.enter.prevent="close"
+        >x</span>
+        <h1>{{ data.Name }}</h1>
+      </header>
+      <section>
+        <div v-if="data.Text" class="text">
+          {{ data.Text }}
+        </div>
+        <ul v-if="data.Media && data.Media.length">
+          <li v-for="(item, index) in data.Media" :key="index">
+            <img :src="'https://api.anarchive-muntadas.figli.io'+item.url" alt="">
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Content',
+  props: {
+    data: Object
+  },
+  data: () => ({
+
+  }),
+  created () {
+    console.log('Content created', this.data)
+  },
+  methods: {
+    close () {
+      console.log('close content')
+      this.$emit('onClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>