|
@@ -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 {
|