added elevator

src/components/objects/Project.vue

@@ -39,13 +39,49 @@
         :prtId="id"
         :data="item"
         />
+      <div class="elevator">
+        <ul>
+          <li :class="{ active: levelVisibles }">
+            <a
+              class="btn-level"
+              href="#visibles"
+              @click.stop="onClickLevel('visibles', $event)"
+              @keyup.enter="onClickLevel('visibles')"
+            >Visibles</a>
+          </li>
+          <li :class="{ active: levelContexts }">
+            <a
+              class="btn-level"
+              href="#contexts"
+              @click.stop="onClickLevel('contexts', $event)"
+              @keyup.enter="onClickLevel('contexts')"
+            >Contexts</a>
+          </li>
+          <li :class="{ active: levelProcesses }">
+            <a
+              class="btn-level"
+              href="#processes"
+              @click.stop="onClickLevel('processes', $event)"
+              @keyup.enter="onClickLevel('processes')"
+            >Processes</a>
+          </li>
+          <li :class="{ active: levelConcepts }">
+            <a
+              class="btn-level"
+              href="#concepts"
+              @click.stop="onClickLevel('concepts', $event)"
+              @keyup.enter="onClickLevel('concepts')"
+            >Concepts</a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 
-import { mapInstanceState, mapInstanceActions } from '@urbn/vuex-helpers'
+import { mapInstanceState, mapInstanceActions, mapInstanceMutations } from '@urbn/vuex-helpers'
 
 import * as THREE from 'three'
 // import { ThreeBSP } from 'three-js-csg-es6'
@@ -102,7 +138,8 @@ export default {
       floorPos: state => state.floorPos,
       levels3dObj: state => state.levels3dObj,
       levelsPos: state => state.levelsPos,
-      contents: state => state.contents
+      contents: state => state.contents,
+      activeLevel: state => state.activeLevel
     }),
     label_texture_opts () {
       return {
@@ -111,6 +148,18 @@ export default {
         wrapS: THREE.ClampToEdgeWrapping,
         wrapT: THREE.ClampToEdgeWrapping
       }
+    },
+    levelVisibles () {
+      return this.activeLevel === 'visibles'
+    },
+    levelContexts () {
+      return this.activeLevel === 'contexts'
+    },
+    levelProcesses () {
+      return this.activeLevel === 'processes'
+    },
+    levelConcepts () {
+      return this.activeLevel === 'concepts'
     }
   },
   created () {
@@ -132,9 +181,36 @@ export default {
     ...mapInstanceActions(getModuleName, {
       loadContents: 'loadContents'
     }),
+    ...mapInstanceMutations(getModuleName, {
+      setActiveLevel: 'setActiveLevel'
+    }),
     open () {
-      this.isOpened = true
-      this.loadContents()
+      if (!this.isOpened) {
+        this.isOpened = true
+        this.loadContents()
+      }
+    },
+    onClickLevel (level, e) {
+      // e.stopPropagation()
+      e.preventDefault()
+      console.log('onclickLevel', level)
+      this.setActiveLevel(level)
+      let toPos = { ...this.position }
+      switch (level) {
+        case 'visibles':
+          toPos.y = 2
+          break
+        case 'contexts':
+          toPos.y = -1 * this.size.y * 0.25 + 2
+          break
+        case 'processes':
+          toPos.y = -2 * this.size.y * 0.25 + 2
+          break
+        case 'concepts':
+          toPos.y = -3 * this.size.y * 0.25 + 2
+          break
+      }
+      this.$emit('lift', toPos)
     }
   }
 }