399 lines
9.7 KiB
Vue
399 lines
9.7 KiB
Vue
<template>
|
|
<section>
|
|
<div class="CharacterTab">
|
|
<div class="columns">
|
|
<div class="column is-6 entry-display">
|
|
<div
|
|
class="character-display clickable font-han"
|
|
@click="(evt) => openContext(evt, entry)"
|
|
@contextmenu.prevent="(evt) => openContext(evt, entry)"
|
|
>
|
|
{{ entry.entry }}
|
|
</div>
|
|
|
|
<div class="buttons has-addons">
|
|
<button
|
|
class="button"
|
|
:disabled="i < 1"
|
|
@click="i--"
|
|
@keypress="i--"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
class="button"
|
|
:disabled="i > entries.length - 2"
|
|
@click="i++"
|
|
@keypress="i++"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="entry.tag.length" class="mb-4">
|
|
Tags:
|
|
<b-taglist style="display: inline-flex">
|
|
<b-tag v-for="t in tag.slice(0, 5)" :key="t" type="is-info">
|
|
{{ t }}
|
|
</b-tag>
|
|
</b-taglist>
|
|
</div>
|
|
|
|
<div v-if="entry.level <= 60" class="mb-4">
|
|
<b-taglist attached>
|
|
<b-tag type="is-dark">Level</b-tag>
|
|
<b-tag type="is-primary">
|
|
{{ entry.level }}
|
|
</b-tag>
|
|
</b-taglist>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-6">
|
|
<b-collapse class="card" animation="slide" :open="false">
|
|
<div
|
|
slot="trigger"
|
|
slot-scope="props"
|
|
class="card-header"
|
|
role="button"
|
|
>
|
|
<h2 class="card-header-title">Reading</h2>
|
|
<a role="button" class="card-header-icon">
|
|
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
{{ entry.reading.join(' / ') }}
|
|
</div>
|
|
</b-collapse>
|
|
|
|
<b-collapse
|
|
class="card"
|
|
animation="slide"
|
|
:open="!!entry.translation.length"
|
|
>
|
|
<div
|
|
slot="trigger"
|
|
slot-scope="props"
|
|
class="card-header"
|
|
role="button"
|
|
>
|
|
<h2 class="card-header-title">Translation</h2>
|
|
<a role="button" class="card-header-icon">
|
|
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
{{ entry.translation.join(' / ') }}
|
|
</div>
|
|
</b-collapse>
|
|
|
|
<b-collapse
|
|
v-if="!!entry.sub.length"
|
|
class="card"
|
|
animation="slide"
|
|
:open="!!entry.sub.length"
|
|
>
|
|
<div
|
|
slot="trigger"
|
|
slot-scope="props"
|
|
class="card-header"
|
|
role="button"
|
|
>
|
|
<h2 class="card-header-title">Subcompositions</h2>
|
|
<a role="button" class="card-header-icon">
|
|
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<span
|
|
v-for="h in entry.sub"
|
|
:key="h"
|
|
class="font-han clickable"
|
|
@click="
|
|
(evt) => openContext(evt, { entry: h, type: 'character' })
|
|
"
|
|
@contextmenu.prevent="
|
|
(evt) => openContext(evt, { entry: h, type: 'character' })
|
|
"
|
|
>
|
|
{{ h }}
|
|
</span>
|
|
</div>
|
|
</b-collapse>
|
|
|
|
<b-collapse
|
|
v-if="!!entry.sub.length"
|
|
class="card"
|
|
animation="slide"
|
|
:open="!!entry.sup.length"
|
|
>
|
|
<div
|
|
slot="trigger"
|
|
slot-scope="props"
|
|
class="card-header"
|
|
role="button"
|
|
>
|
|
<h2 class="card-header-title">Supercompositions</h2>
|
|
<a role="button" class="card-header-icon">
|
|
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<span
|
|
v-for="h in entry.sup"
|
|
:key="h"
|
|
class="font-han clickable"
|
|
@click="
|
|
(evt) => openContext(evt, { entry: h, type: 'character' })
|
|
"
|
|
@contextmenu.prevent="
|
|
(evt) => openContext(evt, { entry: h, type: 'character' })
|
|
"
|
|
>
|
|
{{ h }}
|
|
</span>
|
|
</div>
|
|
</b-collapse>
|
|
|
|
<b-collapse
|
|
v-if="!!entry.variant.length"
|
|
class="card"
|
|
animation="slide"
|
|
:open="!!entry.variant.length"
|
|
>
|
|
<div
|
|
slot="trigger"
|
|
slot-scope="props"
|
|
class="card-header"
|
|
role="button"
|
|
>
|
|
<h2 class="card-header-title">Variants</h2>
|
|
<a role="button" class="card-header-icon">
|
|
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<span
|
|
v-for="h in entry.variant"
|
|
:key="h"
|
|
class="font-han clickable"
|
|
@click="
|
|
(evt) => openContext(evt, { entry: h, type: 'character' })
|
|
"
|
|
@contextmenu.prevent="
|
|
(evt) => openContext(evt, { entry: h, type: 'character' })
|
|
"
|
|
>
|
|
{{ h }}
|
|
</span>
|
|
</div>
|
|
</b-collapse>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ContextMenu
|
|
ref="context"
|
|
:entry="selected.entry"
|
|
:audio="selected.audio"
|
|
:type="selected.type"
|
|
:additional="additionalContext"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Ref, Vue } from 'nuxt-property-decorator'
|
|
import ContextMenu from '@/components/ContextMenu.vue'
|
|
import { api, IDictionaryLookup, IEntryLookup, IType } from '~/assets/api'
|
|
|
|
type ILookupEntry = Omit<IDictionaryLookup, 'id'> & IEntryLookup
|
|
|
|
const makeLookupEntry = (
|
|
entry = '',
|
|
type: IType = 'vocabulary'
|
|
): ILookupEntry => {
|
|
return {
|
|
entry,
|
|
list: [],
|
|
type,
|
|
reading: [],
|
|
translation: [],
|
|
audio: [],
|
|
description: '',
|
|
tag: [],
|
|
sub: [],
|
|
sup: [],
|
|
variant: [],
|
|
visual: [],
|
|
amalgamation: [],
|
|
component: [],
|
|
}
|
|
}
|
|
|
|
@Component<DictionaryTab>({
|
|
components: {
|
|
ContextMenu,
|
|
},
|
|
async created() {
|
|
this.$emit('title', `${this.query.entry} - ${this.query.type}`)
|
|
this.loadComponents()
|
|
this.loadVocabularies()
|
|
this.loadSentences()
|
|
},
|
|
})
|
|
export default class DictionaryTab extends Vue {
|
|
@Prop() query!: {
|
|
entry: string
|
|
type: IType
|
|
}
|
|
|
|
@Ref() context!: ContextMenu
|
|
|
|
entry = makeLookupEntry(this.query.entry, this.query.type)
|
|
|
|
lookup: Record<IType, IDictionaryLookup[]> = {
|
|
character: [],
|
|
vocabulary: [],
|
|
sentence: [],
|
|
}
|
|
|
|
selected: {
|
|
entry: string
|
|
type: string
|
|
audio?: ILookupEntry['audio']
|
|
} = {
|
|
entry: '',
|
|
type: '',
|
|
}
|
|
|
|
openContext(evt: MouseEvent, entry = this.selected) {
|
|
this.selected = entry
|
|
this.context.open(evt)
|
|
}
|
|
|
|
async loadComponents() {
|
|
const [comp, dict] = await Promise.all([
|
|
api.all_getComponent({
|
|
entry: this.query.entry,
|
|
type: this.query.type,
|
|
}),
|
|
api
|
|
.all_getLookup({
|
|
entry: this.query.entry,
|
|
type: this.query.type,
|
|
limit: 1,
|
|
})
|
|
.then(({ result: [r] }) => r),
|
|
])
|
|
|
|
this.entry = {
|
|
...this.query,
|
|
...(dict || {
|
|
list: [],
|
|
reading: [],
|
|
translation: [],
|
|
audio: [],
|
|
description: '',
|
|
tag: [],
|
|
}),
|
|
...(comp || {
|
|
sub: [],
|
|
sup: [],
|
|
variant: [],
|
|
visual: [],
|
|
amalgamation: [],
|
|
component: [],
|
|
}),
|
|
}
|
|
}
|
|
|
|
async loadVocabularies() {
|
|
if (this.query.type === 'character') {
|
|
if (!/^\p{sc=Han}$/u.test(this.query.entry)) {
|
|
this.lookup.vocabulary = []
|
|
return
|
|
}
|
|
|
|
this.lookup.vocabulary = await api
|
|
.character_getVocabulary({
|
|
entry: this.query.entry,
|
|
distinct: 'id',
|
|
})
|
|
.then((r) => r.result)
|
|
} else {
|
|
this.lookup.vocabulary = await api
|
|
.vocabulary_getVocabulary({
|
|
entry: this.query.entry,
|
|
distinct: 'id',
|
|
})
|
|
.then((r) => r.result)
|
|
}
|
|
}
|
|
|
|
async loadSentences() {
|
|
if (this.query.type === 'character') {
|
|
if (!/^\p{sc=Han}$/u.test(this.query.entry)) {
|
|
this.lookup.sentence = []
|
|
return
|
|
}
|
|
|
|
this.lookup.sentence = await api
|
|
.character_getSentence({
|
|
entry: this.query.entry,
|
|
distinct: 'id',
|
|
})
|
|
.then((r) => r.result)
|
|
} else {
|
|
this.lookup.sentence = await api
|
|
.vocabulary_getSentence({
|
|
entry: this.query.entry,
|
|
distinct: 'id',
|
|
})
|
|
.then((r) => r.result)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.entry-display {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.entry-display .clickable {
|
|
min-height: 1.5em;
|
|
display: block;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card-content {
|
|
max-height: 250px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.card-content .font-han {
|
|
font-size: 50px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.long-item > span + span {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.long-item > .pinyin {
|
|
min-width: 8rem;
|
|
}
|
|
</style>
|