diff --git a/src/components/Article.vue b/src/components/Article.vue index 453666af1797e63493c5f0629abfa8e1cc376119..b32b07b01693a08e0677588c0cb49c9f74f5a331 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 :title_id="title_id" :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" @toggle-collapse = "toggle_collapse"/> <InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/> <div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed"> @@ -81,23 +81,48 @@ export default { }, data: function() { return { - collapsed: this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2) + is_collapsed: true } }, - - computed: { - snippet: function() { - if (this.article.body.definitions) { - return this.parse_definitions(this.article.body.definitions) + computed: { + collapsable: function() { + if (this.$parent.$options.name != 'SearchResults') { + this.is_collapsed = false + return false + } + let collapsable = this.$store.state.collapseArticles + if (collapsable == 'never') { + this.is_collapsed = false + } + if (collapsable == 'always') { + this.is_collapsed = true + } + if (collapsable == 'auto') { + this.is_collapsed = this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2) } - return null - - + return this.$store.state.collapseArticles == 'always' || this.is_collapsed//getters.collapsable(this.$parent.$options.name, this.$parent.results_bm.length + this.$parent.results_nn.length) }, - collapsable: function() { - return this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2) - + collapsed: { + get() { + if (this.$parent.$options.name != 'SearchResults') { + return false + } + if (!this.collapsable) { + this.is_collapsed = false + } + return this.is_collapsed + }, + set(value) { + this.is_collapsed = value + } + }, + snippet: function() { + if (this.collapsable && this.article.body.definitions) { + return this.parse_definitions(this.article.body.definitions) + } + return null + }, link_to_self: function() { return { @@ -190,14 +215,11 @@ export default { return definitions }, - expand: function() { - if (this.collapsed) { - this.collapsed = false - } - }, - collapse: function() { - this.collapsed = true + toggle_collapse: function() { + console.log("toggle", this.collapsed) + this.collapsed = !this.collapsed }, + article_link_click: function(item) { this.$emit('article-click', item) }, diff --git a/src/components/Header.vue b/src/components/Header.vue index 2c6fc9563c085f912359e85a277b261c40716631..b792a13f54756a93453dd750cc546765b1f24cc8 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -58,13 +58,13 @@ <v-btn class="expand_icon" v-if="$parent.collapsed" text small - @click="$parent.collapsed=false"> + @click="$emit('toggle-collapse')"> Vis artikkel <v-icon small right>expand_more</v-icon></v-btn> <v-btn class="expand_icon" v-else text small - @click="$parent.collapsed=true"> + @click="$emit('toggle-collapse')"> <v-icon small>expand_less</v-icon></v-btn> </span> diff --git a/src/components/Settings.vue b/src/components/Settings.vue index 9c0e4a70cfcfdd45b4e582e1e9b50468787b071d..1399035caea48a5c8fe4af8d31b25fe62f9b2484 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -17,9 +17,9 @@ </v-list-item> <v-list-item> - <v-radio-group mandatory two-line v-model="updateLocale" label="Velg når artiklene i søkeresultatene skal forkortes"> - <v-radio value="auto" label="Forkort i søk med to eller flere resultater"></v-radio> - <v-radio value="always" label="Vis bare forkortede artikler"></v-radio> + <v-radio-group mandatory two-line v-model="updateCollapse" label="Velg om søkeresultatene skal inneholde utdrag eller fullstendige artikler."> + <v-radio value="auto" label="Automatisk (hvis mer enn 2 resultater)"></v-radio> + <v-radio value="always" label="Vis bare utdrag"></v-radio> <v-radio value="never" label="Vis bare fullstendige artikler"></v-radio> </v-radio-group> </v-list-item> @@ -42,11 +42,12 @@ export default { set () { this.$store.commit("toggle", "showInflectionNo") } }, - toggleCollapse: { + updateCollapse: { get () { return this.$store.state.collapseArticles}, - set () { this.$store.commit("toggle", "collapseArticles") - } - } + set(value) { + this.$store.commit("setCollapse", value) + } + }, }, } </script> diff --git a/src/main.js b/src/main.js index 18159b08b7cd2b5e0bc5814279c5842cd44f8e98..6bf28755c67d26fd1a01d8b29e832d7859c3b386 100644 --- a/src/main.js +++ b/src/main.js @@ -102,7 +102,7 @@ const store = new Vuex.Store({ state.showInflectionNo = localStorage.getItem('showInflectionNo') || false state.currentLocale = localStorage.getItem('currentLocale') state.defaultDict = localStorage.getItem('defaultDict') || 'bm,nn' - state.collapseArticles = localStorage.getItem('collapseArticles') || window.innerWidth < 700 + state.collapseArticles = localStorage.getItem('collapseArticles') || 'auto' state.noMouse = window.matchMedia('(hover: none)').matches @@ -118,6 +118,10 @@ const store = new Vuex.Store({ payload.i18n.locale = payload.value localStorage.setItem("currentLocale", payload.value); }, + setCollapse(state, value) { + localStorage.setItem("collapseArticles", value) + state.collapseArticles = value + }, toggle(state, setting) { let value = !state[setting] state[setting] = value