From a4b0f6e2f2f6744d22a8a9d7ce09d28784e30a5c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 29 Jun 2021 19:49:42 +0200
Subject: [PATCH] add scroll to char for LibraryList

---
 .../scss/base/_bootstrap-overrides.scss       |  4 +-
 .../formItems/MultipleTagsSelect.vue          |  1 +
 src/messages/fr.json                          |  1 +
 src/pages/library/LibraryList.vue             |  4 +-
 src/pages/library/LibraryOptions.vue          | 40 +++++++++++++++++++
 5 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/assets/scss/base/_bootstrap-overrides.scss b/src/assets/scss/base/_bootstrap-overrides.scss
index 350e851..ea3f711 100644
--- a/src/assets/scss/base/_bootstrap-overrides.scss
+++ b/src/assets/scss/base/_bootstrap-overrides.scss
@@ -8,14 +8,14 @@ a:hover {
 }
 
 .dropdown-menu {
-  border: 0;
+  border: $line;
   padding: 0;
   margin-left: -#{$header-spacer-sm};
   margin-top: 10px;
 
   .dropdown-item {
     font-size: $font-size-sm;
-    padding: .25rem $header-spacer-sm;
+    padding: .25rem 1.25rem .25rem .5rem !important;
   }
 
   @include media-breakpoint-up($layout-bp) {
diff --git a/src/components/formItems/MultipleTagsSelect.vue b/src/components/formItems/MultipleTagsSelect.vue
index 6f7a6c3..e6b7f64 100644
--- a/src/components/formItems/MultipleTagsSelect.vue
+++ b/src/components/formItems/MultipleTagsSelect.vue
@@ -8,6 +8,7 @@
       <b-dropdown
         :text="buttonText"
         variant="outline-dark" class="tags-dropdown d-tb-block"
+        dropright
       >
         <b-dropdown-item-button
           v-for="tag in availableOptions" :key="tag"
diff --git a/src/messages/fr.json b/src/messages/fr.json
index 53d851d..243d61c 100644
--- a/src/messages/fr.json
+++ b/src/messages/fr.json
@@ -26,6 +26,7 @@
         "card-map": "Aléatoire",
         "card-list": "Alphabétique"
       },
+      "go-to-char": "Aller à la lettre",
       "shuffle": "Mélanger"
     },
     "filters": {
diff --git a/src/pages/library/LibraryList.vue b/src/pages/library/LibraryList.vue
index 127de1d..ec7e5f1 100644
--- a/src/pages/library/LibraryList.vue
+++ b/src/pages/library/LibraryList.vue
@@ -3,7 +3,9 @@
     <div class="library-list">
       <div class="library-list-container" @click="onContainerClick">
         <div v-for="([char, nodes]) in filteredNodes" :key="char">
-          <h3>{{ char }}</h3>
+          <h3 :id="char">
+            {{ char }}
+          </h3>
 
           <div class="library-list-nodes-group">
             <node-view
diff --git a/src/pages/library/LibraryOptions.vue b/src/pages/library/LibraryOptions.vue
index 0070215..3c87f5d 100644
--- a/src/pages/library/LibraryOptions.vue
+++ b/src/pages/library/LibraryOptions.vue
@@ -19,6 +19,21 @@
       >
         {{ $t('options.display.shuffle') }}
       </b-button>
+
+      <b-dropdown
+        v-if="activeMode === 'list'"
+        :text="$t('options.display.go-to-char')"
+        variant="outline-dark" class="char-select d-block mt-2"
+        dropright
+      >
+        <b-dropdown-item-button
+          class="text-center"
+          v-for="char in availableCharacters" :key="char"
+          @click="scrollToChar(char)"
+        >
+          {{ char }}
+        </b-dropdown-item-button>
+      </b-dropdown>
     </b-form-group>
 
     <!-- LIST + MAP ONLY -->
@@ -116,6 +131,7 @@ export default {
   computed: {
     ...mapGetters([
       'nodesDepartsOptions',
+      'orderedTextsDepart',
       'tagsOptions',
       'nodebook',
       'mode',
@@ -125,6 +141,11 @@ export default {
       'strangeness'
     ]),
 
+    availableCharacters () {
+      if (!this.orderedTextsDepart) return []
+      return this.orderedTextsDepart.map(group => group[0])
+    },
+
     activeNodeId: {
       get () { return this.nodeDepartId },
       set (value) {
@@ -173,6 +194,15 @@ export default {
     tagsIsActive () {
       this.$store.commit('UPDATE_TAGS', [])
     }
+  },
+
+  methods: {
+    scrollToChar (char) {
+      const h = document.querySelector(`h3[id=${char}]`)
+      if (h) {
+        h.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
   }
 }
 </script>
@@ -232,6 +262,16 @@ export default {
           color: $black;
         }
       }
+
+      .char-select {
+        line-height: 1;
+
+        .dropdown-menu {
+          max-height: 200px;
+          overflow: auto;
+          min-width: 3rem;
+        }
+      }
     }
 
     .filters-group {