From 2f819797064171a28c65cf89f33655700e3a726b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 1 Aug 2021 17:53:04 +0200
Subject: [PATCH] add LegendToggle component

---
 src/components/globals/ButtonZoom.vue   |  9 ++-
 src/components/globals/LegendToggle.vue | 96 +++++++++++++++++++++++++
 src/components/nodes/NodeView.vue       |  3 +-
 src/pages/library/LibraryList.vue       |  6 ++
 src/pages/library/LibraryMap.vue        |  6 ++
 src/pages/library/LibraryTree.vue       | 37 ++++++++++
 6 files changed, 154 insertions(+), 3 deletions(-)
 create mode 100644 src/components/globals/LegendToggle.vue

diff --git a/src/components/globals/ButtonZoom.vue b/src/components/globals/ButtonZoom.vue
index 32f4572..baf3894 100644
--- a/src/components/globals/ButtonZoom.vue
+++ b/src/components/globals/ButtonZoom.vue
@@ -36,8 +36,13 @@ export default {
 <style lang="scss" scoped>
 .btn-zoom {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  top: 9px;
+  right: 9px;
+
+  @include media-breakpoint-up($size-bp) {
+    top: 24px;
+    right: 24px;
+  }
 }
 
 .btn-zoom-item {
diff --git a/src/components/globals/LegendToggle.vue b/src/components/globals/LegendToggle.vue
new file mode 100644
index 0000000..11fa6d0
--- /dev/null
+++ b/src/components/globals/LegendToggle.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="legend-toggle">
+    <b-button
+      variant="dark"
+      class="btn-legend-toggle"
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      aria-controls="collapse-legend-toggle"
+      @click="onBtnClick"
+    >
+      <span>?</span>
+    </b-button>
+
+    <b-collapse id="collapse-legend-toggle" v-model="visible">
+      <div class="collapse-body" ref="body">
+        <slot name="default" />
+      </div>
+    </b-collapse>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LegendToggle',
+
+  data () {
+    return {
+      visible: false
+    }
+  },
+
+  methods: {
+    onBtnClick () {
+      this.visible = !this.visible
+      if (this.visible) {
+        document.addEventListener('mousedown', this.onDocumentClick, { capture: true })
+      }
+    },
+
+    onDocumentClick (e) {
+      if (this.$refs.body.contains(e.target)) return
+      document.removeEventListener('mousedown', this.onDocumentClick, { capture: true })
+      if (!e.target.classList.contains('btn')) {
+        this.visible = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.legend-toggle {
+  position: absolute;
+  z-index: 1;
+  top: 15px;
+  left: 15px;
+
+  @include media-breakpoint-up($size-bp) {
+    top: 30px;
+    left: 30px;
+  }
+}
+
+.btn-legend-toggle {
+  display: block;
+  width: $btn-size;
+  height: $btn-size;
+  padding: 0;
+  border: 0;
+  font-weight: $font-weight-bold;
+  // font-size: 1.7rem;
+  line-height: 1;
+
+  margin-bottom: 10px;
+
+  span {
+    pointer-events: none;
+  }
+}
+
+.collapse {
+  transition: none;
+}
+
+.collapse-body {
+  max-width: 500px;
+  margin-right: 15px;
+  border: $line;
+  background-color: $white;
+  padding: $node-card-spacer-y $node-card-spacer-x;
+
+  @include media-breakpoint-up($size-bp) {
+    margin-right: 30px;
+  }
+}
+</style>
diff --git a/src/components/nodes/NodeView.vue b/src/components/nodes/NodeView.vue
index 0c93f5d..4448ad3 100644
--- a/src/components/nodes/NodeView.vue
+++ b/src/components/nodes/NodeView.vue
@@ -68,7 +68,8 @@ export default {
 
   data () {
     return {
-      scrollValue: 0
+      scrollValue: 0,
+      h: 0
     }
   },
 
diff --git a/src/pages/library/LibraryList.vue b/src/pages/library/LibraryList.vue
index 10fb74a..13b93a3 100644
--- a/src/pages/library/LibraryList.vue
+++ b/src/pages/library/LibraryList.vue
@@ -1,6 +1,12 @@
 <template>
   <b-overlay :show="filteredNodes === undefined" class="h-100" z-index="0">
     <div class="library-list">
+      <legend-toggle>
+        <h6>Mode Alphabétique</h6>
+        <p>Ce mode vous permet de retrouver l'ensemble des textes de départ.</p>
+        <p>Pour naviguer plus rapidement vous pouvez <i>Aller à la lettre</i> dans le menu d'options.</p>
+      </legend-toggle>
+
       <div class="library-list-container" @click="onContainerClick">
         <div v-for="([char, nodes]) in filteredNodes" :key="char">
           <h3 :id="char">
diff --git a/src/pages/library/LibraryMap.vue b/src/pages/library/LibraryMap.vue
index c733029..cd2b681 100644
--- a/src/pages/library/LibraryMap.vue
+++ b/src/pages/library/LibraryMap.vue
@@ -1,5 +1,11 @@
 <template>
   <b-overlay :show="nodes === undefined" class="h-100" z-index="0">
+    <legend-toggle>
+      <h6>Mode Aléatoire</h6>
+      <p>Ce mode vous propose 3 textes de départ tirés aléatoirement ainsi que leurs textes produits et leurs textes rebonds.</p>
+      <p>Pour tirer aléatoirement 3 nouveaux textes, cliquez sur <i>Mélanger</i> dans le menu d'options.</p>
+    </legend-toggle>
+
     <map-zoom
       id="library-map" ref="map"
       :min-zoom="0.2" :max-zoom="2" :initial-zoom="0.5"
diff --git a/src/pages/library/LibraryTree.vue b/src/pages/library/LibraryTree.vue
index deb2f7c..85ea17c 100644
--- a/src/pages/library/LibraryTree.vue
+++ b/src/pages/library/LibraryTree.vue
@@ -51,6 +51,17 @@
       </g>
     </map-zoom>
 
+    <legend-toggle>
+      <h6>Mode Arborescent</h6>
+      <p>Ce mode vous permet d'observer l'arbre des relations d'un texte de départ.</p>
+
+      Types de relation :
+      <ul>
+        <li><span class="children" /> Textes produits</li>
+        <li><span class="siblings" /> Textes rebonds</li>
+      </ul>
+    </legend-toggle>
+
     <node-preview-zone v-model="previewNode" :nodes="dataNodes" @open-node="onPreviewNodeClick" />
   </b-overlay>
 </template>
@@ -210,4 +221,30 @@ foreignObject {
     margin: 0;
   }
 }
+
+.legend-toggle {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin-top: .5rem;
+
+    li {
+      font-style: italic;
+      margin-left: 1rem;
+    }
+  }
+
+  span {
+    display: inline-block;
+    height: 0px;
+    width: 15px;
+    margin-right: .5rem;
+  }
+  .children {
+    border-top: 3px dashed grey;
+  }
+  .siblings {
+    border-top: 3px solid grey;
+  }
+}
 </style>