From af10dddefa34f5e114fa0f51796db7d8d90d1a70 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Mon, 20 Dec 2021 12:01:04 +0100
Subject: [PATCH] try maintaining focus when returning from article lookup
---
src/components/Article.vue | 5 +++--
src/components/Autocomplete.vue | 4 ++--
src/components/DictionaryView.vue | 4 ++--
src/components/Header.vue | 4 ++--
src/components/SearchResults.vue | 6 +++---
5 files changed, 12 insertions(+), 11 deletions(-)
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 691ce7ea..e62b5916 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,6 +1,6 @@
<template>
<article v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary, 'collapsable': collapsable, 'collapsed': collapsed}" v-if="article">
- <Header :article_number="article_number" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
+ <Header :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
<InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/>
<div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed">
@@ -76,7 +76,7 @@ export default {
props: {
article: Object,
articleLookup: Boolean,
- article_number: Number
+ title_id: String
},
data: function() {
@@ -186,6 +186,7 @@ export default {
this.$emit('article-click', item)
},
details_click: function(item) {
+ item.title_id = this.title_id
this.$emit('details-click', item)
}
}
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 7f83bb43..aca6190c 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -24,7 +24,7 @@
:dense="$vuetify.breakpoint.mobile"
>
<template v-slot:append>
- <a class="accessibility_link" href="#main_content_0">GÃ¥ videre til hovedinnholdet</a>
+ <a class="accessibility_link" href="#title_0">GÃ¥ videre til hovedinnholdet</a>
<a href="#top_menu" class="accessibility_link"
@click="$store.commit('toggle', 'menuOpen')"
@@ -179,7 +179,7 @@ import Menu from './Menu.vue'
}
},
mounted: function() {
- this.$refs.autocomplete.$refs.input.select()
+ if (! this.$route.hash) this.$refs.autocomplete.focus()
}
}
</script>
diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index 3d37915e..79e6e96f 100644
--- a/src/components/DictionaryView.vue
+++ b/src/components/DictionaryView.vue
@@ -437,7 +437,7 @@ export default {
}
},
details_click: function(item) {
- item.article.source = this.previous
+ item.article.source = this.previous.split('#')[0] + item.title_id
this.article = item.article
history.replaceState({article: this.article,
search_results: {},
@@ -596,7 +596,7 @@ div.welcome article {
margin: auto;
}
-#search_results, #spinner, #single_article_container, div.welcome, div.search_container, .error {
+#search_results, #spinner, #above_results, #single_article_container, div.welcome, div.search_container, .error {
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index bb99f839..1c218162 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -2,7 +2,7 @@
<template>
<div class = "header">
- <router-link tabindex="0" :id="'main_content_'+article_number" :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
+ <router-link tabindex="0" :id="title_id" :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
<span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO">{{hgno}}</span></router-link>
<span class="dict-label">{{dict_label}}</span>
<h2 class="secondary_header" v-if="secondary_header_text.length">{{secondary_header_text}}</h2>
@@ -45,7 +45,7 @@ export default {
lemmas: Array,
dictionary: String,
article_id: Number,
- article_number: Number
+ title_id: String
},
computed: {
header_text: function() {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 33fdde92..e8fae709 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -8,7 +8,7 @@
<li class="article_container" v-for="(result, index) in both_dicts" :key="index + both_hash">
<Article
:article="result"
- :article_number="index"
+ :title_id="'#title_' + (index + count_bm)"
@article-click="article_link_click"
@details-click="details_click">
</Article>
@@ -18,7 +18,7 @@
<li class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash">
<Article
:article="result"
- :article_number="index"
+ :title_id="'#title_' + (index + count_bm)"
@article-click="article_link_click"
@details-click="details_click">
</Article>
@@ -28,7 +28,7 @@
<li class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash">
<Article
:article="result"
- :article_number="index + count_bm"
+ :title_id="'#title_' + (index + count_bm)"
@article-click="article_link_click"
@details-click="details_click"
:class="right_col_class_name">
--
GitLab