Something went wrong on our end
-
Henrik Askjer authoredHenrik Askjer authored
DictionaryView.vue 23.35 KiB
<template>
<main>
<div class="search_container" v-if="!article && $route.name != 'lookup'">
<Autocomplete v-on:submit="select_result" :api="get_search_endpoint" v-on:update-lang-form="update_lang_form">
</Autocomplete>
<SearchToolbar @updatePos="update_pos" @updateScope="update_scope"/>
</div>
<div id="above_results" v-if="$route.name" :class="$vuetify.breakpoint.name">
<div id="suggestions" v-if="!article && !no_results">
<div class="search_notification" v-if="inflection_suggestions && inflection_suggestions.length"><v-icon left color="primary">info</v-icon><em>{{$route.query.q}}</em> er en bøyd form av
<span v-for="(item,index) in inflection_suggestions" :key="index"><router-link :to="generate_path(item[0])" @click.native="suggestion_link(item[0])">{{item[0]}}</router-link>{{index == inflection_suggestions.length-1? '.' : ', '}}</span>
</div>
<div class="search_notification" v-if="lang=='bm,nn' && similar && similar.length > 0 && (search_results.nn && search_results.nn.length == 0)"><v-icon left color="primary">info</v-icon>Legg til lignende treff fra Nynorskordboka:
<span v-for="(item,index) in similar" :key="index"><router-link :to="generate_path($route.query.q+'|'+item[0])" @click.native="suggestion_link($route.query.q+'|'+item[0])">{{item[0]}}</router-link>{{index == similar.length-1? '.' : ', '}}</span>
</div>
<div class="search_notification" v-if="lang=='bm,nn' && similar && similar.length > 0 && (search_results.bm && search_results.bm.length == 0)"><v-icon left color="primary">info</v-icon>Legg til lignende treff fra Bokmålsordboka:
<span v-for="(item,index) in similar" :key="index"><router-link :to="generate_path($route.query.q+'|'+item[0])" @click.native="suggestion_link($route.query.q+'|'+item[0])">{{item[0]}}</router-link>{{index == similar.length-1? '.' : ', '}}</span>
</div>
</div>
<div id="return_to_results" v-if="article">
<router-link id="return_link" v-if="$store.state.searchRoute" :to="$store.state.searchRoute" @click.native="return_to_results()">
<v-icon left class="nav_arrow">chevron_left</v-icon>{{$t("back_to_results")}}
</router-link>
<a id="return_link" v-if="!$store.state.searchRoute" href="/">
<v-icon left class="nav_arrow">search</v-icon>Søk i ordbøkene
</a>
</div>
</div>
<SearchResults :results_bm="search_results.bm || []"
:results_nn="search_results.nn || []"
:lang="lang"
@article-click="article_link_click"
@details-click="details_click"
@update-page="update_page"
v-if="$route.name && !waiting && !article && !error && !no_results" />
<div id="spinner" v-if="waiting">
<v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
</div>
<div id="single_article_container" v-if="article">
<Article :key="article_key"
:article="article"
title_id="result0"
@article-click="article_link_click"
@details-click="details_click"/>
</div>
<div class="welcome" v-show="$route.name=='/' || !$route.name">
<div class="monthly" :class="$vuetify.breakpoint.name">
<div>
<Article :article="monthly_bm"
title_id="result0"
@article-click="article_link_click"
@details-click="details_click" />
</div>
<div>
<Article :article="monthly_nn"
title_id="result1"
@article-click="article_link_click"
@details-click="details_click"/>
</div>
</div>
</div>
<div class="error" v-if="error">
<div>
<h1 tabindex="0" id="result0">{{error.title}}</h1>
<p>{{error.description}}</p>
</div>
</div>
<div class="no_results" v-if="no_results && !error">
<div>
<p><v-icon left color=primary>error</v-icon> Ingen treff <span v-if="pos_selected"> i søk på {{$t('pos_plural.'+pos_selected)}}</span></p>
<p v-if="!article && !no_results && inflection_suggestions && inflection_suggestions.length"><em>{{$route.query.q}}</em> er en bøyd form av
<span v-for="(item,index) in inflection_suggestions" :key="index"><router-link :to="generate_path(item[0])" @click.native="suggestion_link(item[0])">{{item[0]}}</router-link>{{index == inflection_suggestions.length-1? '.' : ', '}}</span>
<p class="suggest_lang" v-if="lang=='bm'">Har du søkt i feil ordbok?<br>Prøv å søke i <router-link :to="generate_path($route.query.q, {lang: 'nn'})" @click.native="language_link('nn')">Nynorskordboka</router-link></p>
<p class="suggest_lang" v-if="lang=='nn'">Har du søkt i feil ordbok?<br>Prøv å søke i <router-link :to="generate_path($route.query.q, {lang: 'nn'})" @click.native="language_link('bm')">Bokmålsordboka</router-link></p>
<article v-if="similar && similar.length" :class="'v-sheet v-card rounded-xl did_you_mean ' + $vuetify.breakpoint.name">
<span class="dict-label">Mente du:</span>
<v-list>
<v-list-item v-for="(item, index) in similar" :key="index">
<router-link :to="generate_path(item[0])" @click.native="suggestion_link(item[0])">{{item[0]}}</router-link><span v-if="lang=='bm,nn'" > <em>({{["bm","nn","bm, nn"][item[1]-1]}})</em></span>
</v-list-item>
</v-list>
</article>
</div>
</div>
</main>
</template>
<script>
import axios from "axios"
import entities from '../utils/entities.js'
import Article from './Article.vue'
import SearchResults from './SearchResults.vue'
import Autocomplete from './Autocomplete.vue'
import SearchToolbar from './SearchToolbar.vue'
import { setup } from 'axios-cache-adapter'
const SEARCH_ENDPOINT = process.env.VUE_APP_SEARCH_ENDPOINT
const ARTICLE_ENDPOINT= process.env.VUE_APP_ARTICLE_ENDPOINT
const api = setup({
baseURL: SEARCH_ENDPOINT,
cache: {
maxAge: 15 * 60 * 1000,
exclude: {
query: false,
paths: ["articles"] // Disable caching for articles
}
}
})
function navigate_to_article(self, origin) {
self.article = null
self.waiting_for_articles = true
const lang = self.$route.params.lang
axios.get(ARTICLE_ENDPOINT + lang + '/article/' + self.$route.params.id + ".json")
.then(function(response){
self.article = Object.assign(response.data, {'dictionary': lang, results: self.search_results})
self.error = null
})
.catch(function(error){
console.log(error)
self.handle_error(error, true)
})
.then(function(response){
self.waiting_for_articles = false
self.replace_history()
if (origin) {
self.$plausible.trackEvent('internal link incoming', {props: {origin}})
}
})
}
function load_articles(self, query, offset, n, dict) {
let article_IDs = self.article_info.articles[dict]
if (article_IDs)
{
if (offset > article_IDs.length) {
n = 0
}
else if (offset + n > article_IDs.length) {
n = article_IDs.length % n
}
if (n > 0 && (self.lang == dict || self.lang == "bm,nn")) {
article_IDs = article_IDs.slice(offset, offset + n)
return Promise.all(article_IDs.map((article_id) => {
return axios.get(`${ARTICLE_ENDPOINT}${dict}/article/${article_id}.json`)
}))
.then((response) => {
let results = response.map((element, index) => {
return Object.assign(element.data, {
dictionary: dict
})
})
self.article = null
self.search_results[dict] = results
})
.catch(error => {
self.waiting_for_articles = false
self.handle_error(error)
})
}
else {
self.search_results[dict] = []
}
}
return Promise.resolve()
}
function navigate_to_query(self, word) {
self.error = null
self.waiting_for_articles = true
if (!self.event) {
self.event = {match: word}
}
let query = self.event
self.inflection_suggestions = (self.event && query.inflection_suggestions) || []
// Get article IDs
let params = {w: query.match, dict: self.lang, scope: self.scope, meta: 'y'}
let offset = 0
if (self.page) {
offset = self.perPage * (self.page -1)
}
if (self.pos_selected) params.wc = self.pos_selected
api.get('articles?', {params}).then((response) => {
self.article_info = response.data
self.search_results = {}
let bm_length = response.data.articles.bm ? response.data.articles.bm.length : 0
let nn_length = response.data.articles.nn ? response.data.articles.nn.length : 0
if (self.lang == 'bm,nn' && (bm_length == 0 || nn_length == 0)) {
let missing_lang = bm_length == 0? 1 : 2
let similar = (self.event && query.similar) || []
self.similar = similar.filter((item, index) => {
return item[1] == missing_lang || item[1] == 3
})
}
else {
self.similar = []
}
if (bm_length + nn_length == 0) {
self.similar = (self.event && query.similar) || []
self.waiting_for_articles = false
self.no_results = true
self.replace_history() // fixes routing bug when going back from suggested search
}
else {
self.no_results = null
Promise.all([
load_articles(self, query, offset, self.perPage, "bm"),
load_articles(self, query, offset, self.perPage, "nn")
])
.then(() => {
// Show inflection suggestions if they are not among the first results
/*
if (self.event && self.event.inflection_suggestions) {
self.inflection_suggestions = self.event.inflection_suggestions.filter((item) => {
if ((item[1] == 1 || item[1] == 3) && self.search_results.bm) {
if (!self.search_results.bm[0]) {
console.log("SUGGEST ERROR: no bm results")
}
else return !self.search_results.bm[0].suggest.includes(item[0])
}
if ((item[1] == 2 || item[1] == 3) && self.search_results.nn) {
if (!self.search_results.nn[0]) {
console.log("SUGGEST ERROR: no nn results")
}
else return !self.search_results.nn[0].suggest.includes(item[0])
}
})
} else {
self.inflection_suggestions = []
}
*/
self.waiting_for_articles = false
self.$store.commit('setSearchRoute', self.$route.fullPath)
self.replace_history()
})
}
}).catch(error =>{
self.waiting_for_articles = false
console.log(error)
self.handle_error(error)
self.replace_history()
})
}
export default {
name: 'DictionaryView',
data: function() {
return {
article_key: 0,
search_results: {},
lang: this.$store.state.defaultDict,
waiting_for_articles: true,
waiting_for_metadata: true,
article: null,
error: null,
no_results: null,
monthly_bm: null,
monthly_nn: null,
event: null,
scope: "wb",
pos_selected: "ALL",
article_info: null,
page: 1,
perPage: 10,
inflection_suggestions: null,
similar: null,
selected: null
}
},
computed: {
waiting: function() {
return (this.waiting_for_articles || this.waiting_for_metadata) && this.$route.name != 'root'
},
get_search_endpoint: function() {
return api
}
},
components: {
Article,
Autocomplete,
SearchResults,
SearchToolbar
},
methods: {
replace_history: function() {
history.replaceState({article: this.article,
search_results: this.search_results,
article_info: this.article_info,
lang: this.lang,
error: this.error,
no_results: this.no_results,
pos_selected: this.pos_selected,
scope: this.scope,
article_info: this.article_info,
page: this.page,
perPage: this.perPage,
selected: this.selected,
inflection_suggestions: this.inflection_suggestions,
similar: this.similar}, '')
},
total_results: function() {
if (this.article_info) {
let total = 0
if (this.article_info.articles.bm) {
total += this.article_info.articles.bm.length
}
if (this.article_info.articles.nn) {
total += this.article_info.articles.nn.length
}
return total
}
},
load_monthly_bm: function() {
let self = this
axios.get(ARTICLE_ENDPOINT + 'bm/article/5607.json').then(function(response){
self.monthly_bm = Object.assign(response.data, {dictionary: 'bm'})
})
},
load_monthly_nn: function() {
let self = this
axios.get(ARTICLE_ENDPOINT + 'nn/article/78569.json').then(function(response){
self.monthly_nn = Object.assign(response.data, {dictionary: 'nn'})
})
},
handle_error: function(error, article) {
this.search_results = {}
console.log(error)
if (error.message == "Network Error") {
this.error = {title: this.$t('error.network.title'), description: this.$t('error.network.description'), article}
}
else if (error.response) {
if (error.response.status == 404) {
if (article) {
this.error = {title: this.$t('error.404.title'), description: this.$t('error.no_article', {id: this.$route.params.id}), article: true}
}
else {
this.error = {title: this.$t('error.404.title'), description: this.$t('error.404.description'), article}
}
}
else if (error.response.status == 503) {
this.error = {title: this.$t('error.503.title'), description: this.$t('error.503.description'), article}
}
else if (String(error.response.status)[0] == "5") {
this.error = {title: this.$t('error.server.title'), description: this.$t('error.server.description', {code: error.response.status}), article}
}
else {
this.error = {title: this.$t('error.generic_code.title'), description: this.$t('error.generic_code.description', {code: error.response.status}), article}
}
} else {
this.error = {title: this.$t('error.generic.title'), description: this.$t('error.generic.description'), article}
}
},
suggestion_link: function (word) {
this.pos_selected = null
this.event = null
this.inflection_suggestions = null
navigate_to_query(this, word)
},
language_link: function (lang) {
let word = this.$route.query.q
this.pos_selected = null
this.event = null
this.inflection_suggestions = null
this.lang = lang
navigate_to_query(this, word)
},
select_result: function (event) {
this.event = event
let path = `/${this.lang}/search`
let pos = this.pos_param()
let query = {q: event.match || event.q}
if (pos) query["pos"] = pos
if (this.scope) query["scope"] = this.scope
this.$router.push({path, query})
navigate_to_query(this)
// Tracking
let track_props = {query: event.q}
if (event.match) track_props.match = event.match
this.$plausible.trackEvent(event.update_lang ? "language" : 'dropdown selection', {
props: track_props
})
},
pos_param: function() {
if (this.pos_selected) return this.pos_selected.toLowerCase()
return null
},
update_page: function() {
let q = (this.$route.query || this.$route.params).q
let path = `/${this.lang}/search`
let pos = this.pos_param()
let query = {q: q, page: this.page}
if (pos != 'all') query.pos = pos
if (this.scope) query.scope = this.scope
this.$router.push({path, query})
let offset = 0
if (this.page) {
offset = this.perPage * (this.page -1)
}
let self = this
Promise.all([
load_articles(this, query, offset, this.perPage, "bm"),
load_articles(this, query, offset, this.perPage, "nn")]).then(() => {
self.replace_history()
self.$forceUpdate()
}
).then(() => {
this.$store.commit('setSearchRoute', this.$route.fullPath)
})
},
generate_path: function(q, params) {
if (q) {
let path = `/${(params && params.lang) || this.lang}/search?q=${q}`
if (this.scope) path += "&scope=" + this.scope
return path
}
},
reload_params: function() {
let q = (this.$route.query || this.$route.params).q
if (q) {
let path = `/${this.lang}/search`
let pos = this.pos_param()
let query = {q: q}
if (pos) query.pos = pos
if (this.scope) query.scope = this.scope
this.$router.push({path, query})
navigate_to_query(this, q)
}
},
update_lang_form: function (lang) {
this.lang = lang
this.page = 1
},
update_scope: function(scope) {
this.scope = scope
this.page = 1
this.reload_params()
},
update_pos: function (pos) {
this.pos_selected = pos
this.page = 1
this.reload_params()
},
article_link_click: function(item) {
if (this.article && this.article.article_id == item.article_id){
this.article_key++
this.replace_history()
if (!this.$route.hash) {
window.scrollTo(0,0)
}
}else{
navigate_to_article(this, item.source)
if (!this.$route.hash) {
window.scrollTo(0,0)
}
}
},
details_click: function(item) {
this.article = item.article
this.replace_history()
},
return_to_results: function() {
this.article = null
}
},
mounted: function(){
let self = this
self.lang = self.$route.params.lang || this.$store.state.defaultDict
if (self.$route.query.pos) {
self.pos_selected = self.$route.query.pos.toUpperCase()
} else self.pos_selected = null
if (self.$route.query.scope) {
self.scope = self.$route.query.scope
}
if (self.$route.query.page) self.page = parseInt(self.$route.query.page)
if (self.$route.query.perPage) self.perPage = self.$route.query.perPage
Promise.all([
axios.get(ARTICLE_ENDPOINT + 'bm/concepts.json').then(function(response){
let concepts = response.data.concepts
entities.bm = concepts
}),
axios.get(ARTICLE_ENDPOINT + 'nn/concepts.json').then(function(response){
let concepts = response.data.concepts
entities.nn = concepts
})
]).then(function(_) {
self.waiting_for_metadata = false
if (self.$route.name == 'query') {
navigate_to_query(self, self.$route.query.q)
}
else if(self.$route.name == 'search') {
navigate_to_query(self, self.$route.params.query)
}
else if(self.$route.name == 'word') {
navigate_to_query(self, self.$route.params.query)
}
else if(self.$route.name == 'lookup'){
navigate_to_article(self, self.$route.path)
}
else {
self.waiting_for_articles = false
self.replace_history()
self.load_monthly_bm()
self.load_monthly_nn()
}
}).catch(function(error){
if (error.message == "Network Error") {
self.error = self.$t('error.network')
}
else if (error.response) {
self.error = self.$t('error.server', {code: error.response.status})
}
else {
self.error = self.$t('error.generic')
}
self.waiting_for_metadata = false
self.waiting_for_articles = false
})
},
watch: {
$route(to, from) {
if (to.fullPath == "/") {
this.load_monthly_bm()
this.load_monthly_nn()
}
if (to.name == 'lookup' && from.fullPath == '/') {
this.$store.commit('setSearchRoute', null)
}
}
},
created: function() {
let self = this
window.onpopstate = function (event) {
if (event.state) {
self.article = event.state.article
self.search_results = event.state.search_results
self.article_info = event.state.article_info
self.lang = event.state.lang
self.pos_selected = event.state.pos_selected
self.scope = event.state.scope
self.error = event.state.error
self.no_results = event.state.no_results
self.page = event.state.page,
self.perPage = event.state.perPage
self.selected = event.state.selected
self.inflection_suggestions = event.state.inflection_suggestions,
self.similar = event.state.similar
}
}
}
}
</script>
<style>
main {
flex: 1 0 auto;
background-color: var(--v-tertiary-base);
display: flex;
flex-direction: column;
}
div.welcome {
padding-top: 10px;
margin-top: 10px;
flex-grow: 10;
background-image: url('../assets/books.jpg');
background-repeat: no-repeat;
background-position-x: center;
}
div.welcome article {
border-style: none;
}
.search_container {
background-color: var(--v-tertiary-base);
padding-top: 10px;
}
#spinner {
margin: auto;
}
#search_results, #spinner, #above_results, #single_article_container, div.welcome, div.search_container, .error, .no_results {
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
}
#above_results .search_notification {
padding-top: 24px;
padding-bottom: 0px;
margin-left: 10px;
font-size: 18px;
}
#above_results.sm .search_notification, #above_results.xs .search_notification {
padding-top: 10px;
}
#suggestions {
padding-left: 10px;
}
.error p, .no_results p {
margin-left: 15px;
}
.no_results {
padding-top: 24px;
}
.error div{
padding: 10px;
padding-top: 24px;
}
#spinner {
padding-top: 40px;
}
div.monthly {
display: flex;
width: 100%;
}
div.monthly > div {
flex: 50%;
}
div.monthly.sm, div.monthly.xs {
flex-direction: column;
}
div.monthly article.bm .dict-label::before {
content: "fra ";
}
div.monthly article.nn .dict-label::before {
content: "frå ";
}
div.monthly details, div.monthly h3 {
display: none;
}
.v-label span {
color: var(--v-primary-base);
}
.lang_select_container {
padding-left: 10px;
}
.pos_select_container {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-top: 10px;
}
li.suggestion {
font-weight: bold;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
border: 0px;
background-image: none;
}
::selection {
background: var(--v-secondary-base);
color: white;
}
#return_to_results {
padding-left: 10px;
padding-top: 10px;
display: table-cell;
}
#return_to_results a {
color: var(--v-text-base) !important;
text-decoration: none;
}
.nav_arrow {
color: var(--v-primary-base) !important;
}
.col {
padding: 10px;
}
.suggest_lang {
padding-left: 10px;
}
.did_you_mean.md, .did_you_mean.lg, .did_you_mean.xl {
max-width: 40%;
}
</style>