From f75acf91c7f4cbc0cb0ede52a8a091002fa2ae23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no>
Date: Fri, 21 Feb 2020 13:28:33 +0100
Subject: [PATCH] ingen reload av siden
---
src/App.vue | 36 ++++++++++++++++++++++++++------
src/components/Article.vue | 11 +++++++---
src/components/CompoundList.vue | 9 +++++++-
src/components/DefElement.vue | 22 +++++++++++++++++--
src/components/Definition.vue | 7 ++++++-
src/components/Example.vue | 9 ++++++--
src/components/SearchResults.vue | 12 +++++++++--
src/components/SubArticle.vue | 9 ++++++--
8 files changed, 96 insertions(+), 19 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 417f1c4e..485f7134 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,8 +9,8 @@
<label for="radio_nno">Nynorsk</label>
</header>
<img id="spinner" :class="waiting ? 'show' : 'hide'" src="./assets/spinner.gif" alt="Venter på innhold" />
- <SearchResults :hits="search_results" :lang="lang" />
- <Article :article="article" />
+ <SearchResults :hits="search_results" :lang="lang" @search-hit-click="search_hit_click" />
+ <Article :article="article" @article-click="article_link_click" />
</main>
</template>
@@ -25,7 +25,8 @@ var api_endpoint = 'https://ordbok-dev.aws.uib.no/cache/article'
window.onpopstate = function (event) {
if (event.state) {
- app.__vue__._data.article = event.state
+ app.__vue__._data.article = event.state.article
+ app.__vue__._data.search_results = event.state.search_results
}
}
@@ -79,10 +80,33 @@ export default {
if(event._source){
this.search_results = []
this.article = event._source
- history.pushState(this.article, '', '/' + this.lang + '/' + event._id)
+ history.pushState({article: this.article, search_results: this.search_results}, '', '/' + this.lang + '/' + event._id)
}else{
- window.location.href = '/' + this.lang + "/search?q=" + event.q
+ var self = this
+ self.waiting = true
+ self.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
+ axios.get(api_endpoint + '/' + self.lang + '/_search?q=' + event.q)
+ .then(function(response){
+ self.search_results = response.data.hits.hits
+ history.pushState({article: self.article, search_results: self.search_results}, '', '/' + self.lang + '/_search?q=' + event.q)
+ self.waiting = false
+ })
}
+ },
+ article_link_click: function(item) {
+ var self = this
+ self.waiting = true
+ axios.get(api_endpoint + '/' + self.lang + '/' + item.article_id)
+ .then(function(response){
+ self.article = response.data._source
+ self.waiting = false
+ history.replaceState({article: self.article, search_results: self.search_results}, '')
+ })
+ },
+ search_hit_click: function(article){
+ this.search_results = []
+ this.article = article
+ history.replaceState({article: article, search_results: []}, '')
}
},
mounted: function(){
@@ -100,7 +124,7 @@ export default {
.then(function(response){
self.article = response.data._source
self.waiting = false
- history.replaceState(self.article, '')
+ history.replaceState({article: self.article, search_results: self.search_results}, '')
})
}
else {
diff --git a/src/components/Article.vue b/src/components/Article.vue
index e5de71e7..13ebab4f 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -4,19 +4,19 @@
<section v-if="article.body.pronunciation.length">
<h3>Uttale</h3>
<ul>
- <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' />
+ <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' @article-click="article_link_click" />
</ul>
</section>
<section v-if="article.body.etymology">
<h3>Etymologi</h3>
<ul>
- <DefElement v-for="(element, index) in article.body.etymology" :key="index" :body='element' />
+ <DefElement v-for="(element, index) in article.body.etymology" :key="index" :body='element' @article-click="article_link_click" />
</ul>
</section>
<section>
<h3>Definisjoner</h3>
<ol>
- <Definition v-for="(definition, index) in definitions" :key="index" :body='definition' />
+ <Definition v-for="definition in definitions" :key="definition.id" :body='definition' @article-click="article_link_click" />
</ol>
</section>
</article>
@@ -49,6 +49,11 @@ export default {
}
return defs
}
+ },
+ methods: {
+ article_link_click: function(item) {
+ this.$emit('article-click', item)
+ }
}
}
</script>
diff --git a/src/components/CompoundList.vue b/src/components/CompoundList.vue
index 3bb9c75a..5f727577 100644
--- a/src/components/CompoundList.vue
+++ b/src/components/CompoundList.vue
@@ -3,7 +3,9 @@
<ul>
<DefElement :body="body.intro" v-if="body.intro" />
<li :key="index" v-for="(item, index) in body.elements">
- <a :href="item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"> {{item.lemmas.join(',')}};</a>
+ <router-link :to="item.article_id + (item.definition_id ? '#def'+item.definition_id : '')" @click.native="article_link_click(item)">
+ {{item.lemmas.join(',')}};
+ </router-link>
</li>
</ul>
</li>
@@ -19,6 +21,11 @@ export default {
},
components: {
DefElement
+ },
+ methods: {
+ article_link_click: function(item) {
+ this.$emit('article-click', item)
+ }
}
}
</script>
diff --git a/src/components/DefElement.vue b/src/components/DefElement.vue
index d4f0fa30..9f43c7ed 100644
--- a/src/components/DefElement.vue
+++ b/src/components/DefElement.vue
@@ -1,6 +1,13 @@
<template>
<li :class="body.type_">
- <span v-for="(item, index) in assemble_text" :class="item.type_" :key="index" v-html="item.html"></span>
+ <span :is="item.type == 'article_ref' ? 'router-link' : 'span'"
+ v-for="(item, index) in assemble_text"
+ :class="item.type_"
+ :key="index"
+ :to="item.ref"
+ @click.native="article_link_click(item)"
+ v-html="item.html">
+ </span>
</li>
</template>
@@ -18,7 +25,13 @@ export default {
return this.body.items.map(
function(item){
if (item.type_ == 'usage') return {type: item.type_, html: item.text}
- else if (item.type_ == 'article_ref') return {type: item.type_, html: `<a href="${item.article_id}${item.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`}
+ else if (item.type_ == 'article_ref') return {
+ type: item.type_,
+ html: item.lemmas.join(','),
+ ref: item.article_id + (item.definition_id ? '#def' + item.definition_id : ''),
+ article_id: item.article_id,
+ definition_id: item.definition_id
+ }
else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
else if (item.id) return {type: item.type_, html: entities[item.id] || languages[item.id] || item.id}
else return {type: item.type_ || 'plain', html: item}
@@ -38,6 +51,11 @@ export default {
})
return new_parts
}
+ },
+ methods: {
+ article_link_click: function(item) {
+ this.$emit('article-click', item)
+ }
}
}
</script>
diff --git a/src/components/Definition.vue b/src/components/Definition.vue
index a42527c6..46a054ed 100644
--- a/src/components/Definition.vue
+++ b/src/components/Definition.vue
@@ -1,7 +1,7 @@
<template>
<li class="definition" :ref="'def' + body.id" :id="'def' + body.id">
<ul>
- <li :is="element_wrapper.template" :body="element_wrapper.element" v-for="(element_wrapper, index) in template_name_added" :key="index">{{element_wrapper.element}}</li>
+ <li :is="element_wrapper.template" :body="element_wrapper.element" v-for="(element_wrapper, index) in template_name_added" :key="index" @article-click="article_link_click">{{element_wrapper.element}}</li>
</ul>
</li>
</template>
@@ -47,6 +47,11 @@ var Definition = {
this.$refs[ref].scrollIntoView()
this.$refs[ref].classList.add('highlighted')
}
+ },
+ methods: {
+ article_link_click: function(item) {
+ this.$emit('article-click', item)
+ }
}
}
diff --git a/src/components/Example.vue b/src/components/Example.vue
index a887acfa..99a5acc3 100644
--- a/src/components/Example.vue
+++ b/src/components/Example.vue
@@ -1,8 +1,8 @@
<template>
<li class="example">
<ul>
- <DefElement :body="body.quote" :class="'quote'" />
- <DefElement :body="body.explanation" v-if="body.explanation" />
+ <DefElement :body="body.quote" :class="'quote'" @article-click="article_link_click" />
+ <DefElement :body="body.explanation" v-if="body.explanation" @article-click="article_link_click" />
</ul>
</li>
</template>
@@ -17,6 +17,11 @@ export default {
},
components: {
DefElement
+ },
+ methods: {
+ article_link_click: function(item) {
+ this.$emit('article-click', item)
+ }
}
}
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 0df2320a..d8dbecfe 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -3,7 +3,9 @@
<h2 v-if="hits.length">Søkeresultater</h2>
<ul>
<li v-for="(result, index) in extended_results" :key="index">
- <a :href="'/' + lang + '/' + result.id">{{result.label}}</a> ({{result.classification}})
+ <router-link :to="result.id" @click.native="article_link_click(result.article)">
+ {{result.label}};
+ </router-link>
</li>
</ul>
</section>
@@ -24,10 +26,16 @@ export default {
return {
id: hit._id,
label: hit._source.lemmas.map(x => x.lemma).join(', '),
- classification: helpers.group_list(hit._source.lemmas)
+ classification: helpers.group_list(hit._source.lemmas),
+ article: hit._source
}
})
}
+ },
+ methods: {
+ article_link_click: function(item) {
+ this.$emit('search-hit-click', item)
+ }
}
}
diff --git a/src/components/SubArticle.vue b/src/components/SubArticle.vue
index 642d7e2d..6a22f4c7 100644
--- a/src/components/SubArticle.vue
+++ b/src/components/SubArticle.vue
@@ -2,8 +2,8 @@
<li class="sub_article">
<span class="sub_article_header"><a :href="body.article_id">{{body.lemmas[0]}}</a></span>
<ul>
- <DefElement :body="body.intro" v-if="body.intro" />
- <Definition :body="body.article.body.definitions[0]" />
+ <DefElement :body="body.intro" v-if="body.intro" @article-click="article_link_click" />
+ <Definition :body="body.article.body.definitions[0]" @article-click="article_link_click" />
</ul>
</li>
</template>
@@ -21,6 +21,11 @@ export default {
},
beforeCreate: function () {
this.$options.components.Definition = require('./Definition.vue').default
+ },
+ methods: {
+ article_link_click: function(item) {
+ this.$emit('article-click', item)
+ }
}
}
--
GitLab