mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-24 21:46:22 -04:00
#239 split pronouns from the homepage
This commit is contained in:
Andrea Vos
parent
1a2529734c
commit
b091c1309e
@ -134,9 +134,19 @@
|
||||
icon: 'home',
|
||||
text: this.$t('home.header'),
|
||||
textLong: this.$t('home.headerLong'),
|
||||
extra: ['all', '/' + this.config.pronouns.any, this.config.pronouns.avoiding ? '/' + this.config.pronouns.avoiding : null ],
|
||||
extra: ['all'],
|
||||
});
|
||||
|
||||
if (this.config.pronouns.enabled) {
|
||||
links.push({
|
||||
link: '/' + this.config.pronouns.route,
|
||||
icon: 'tags',
|
||||
text: this.$t('pronouns.header'),
|
||||
textLong: this.$t('pronouns.headerLong'),
|
||||
extra: ['/' + this.config.pronouns.any, this.config.pronouns.avoiding ? '/' + this.config.pronouns.avoiding : null],
|
||||
});
|
||||
}
|
||||
|
||||
if (this.config.sources.enabled) {
|
||||
links.push({
|
||||
link: '/' + this.config.sources.route,
|
||||
|
||||
@ -4,6 +4,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'pronomen'
|
||||
default: 'er'
|
||||
any: 'beliebige'
|
||||
plurals: true
|
||||
|
||||
@ -55,6 +55,8 @@ home:
|
||||
reden, nicht ihr Geschlecht annehmen und sie nicht aus irgendeinem Grund ausschließen.
|
||||
|
||||
pronouns:
|
||||
header: 'Pronomen'
|
||||
headerLong: 'Pronomen'
|
||||
examples: 'Beispiel-Nutzung in Sätzen'
|
||||
plural: 'Plural'
|
||||
intro: 'Meine Pronomen sind'
|
||||
|
||||
@ -4,6 +4,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'pronouns'
|
||||
default: 'he'
|
||||
any: 'any'
|
||||
plurals: true
|
||||
|
||||
@ -56,6 +56,8 @@ home:
|
||||
we don't assume their gender and don't exclude them for any reason.
|
||||
|
||||
pronouns:
|
||||
header: 'Pronouns'
|
||||
headerLong: 'Pronouns'
|
||||
examples: 'Example usage in sentences'
|
||||
plural: 'Plural'
|
||||
intro: 'My pronouns are'
|
||||
|
||||
@ -4,6 +4,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'pronombres'
|
||||
default: 'él'
|
||||
any: 'any'
|
||||
plurals: false
|
||||
|
||||
@ -58,6 +58,8 @@ home:
|
||||
|
||||
|
||||
pronouns:
|
||||
header: 'Pronombres'
|
||||
headerLong: 'Pronombres'
|
||||
examples: 'Ejemplos de uso en oraciones'
|
||||
plural: 'Plural'
|
||||
intro: 'Mis pronombres son'
|
||||
|
||||
@ -4,6 +4,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'pronoms'
|
||||
default: 'il'
|
||||
any: 'any'
|
||||
plurals: true
|
||||
|
||||
@ -55,6 +55,8 @@ home:
|
||||
nous ne devinions pas et n'excluons pas leur genre(s).
|
||||
|
||||
pronouns:
|
||||
header: 'Pronoms'
|
||||
headerLong: 'Pronoms'
|
||||
examples: 'Exemple d’usage dans des phrases'
|
||||
plural: 'Pluriel'
|
||||
intro: 'Mes pronoms sont'
|
||||
|
||||
@ -4,6 +4,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'voornaamwoorden'
|
||||
default: 'hij'
|
||||
any: 'elk'
|
||||
plurals: true
|
||||
|
||||
@ -57,6 +57,8 @@ home:
|
||||
we don't assume their gender and don't exclude them for any reason.
|
||||
|
||||
pronouns:
|
||||
header: 'Voornaamwoorden'
|
||||
headerLong: 'Voornaamwoorden'
|
||||
examples: 'Gebruiksvoorbeelden in zinnen'
|
||||
plural: 'Meervoud'
|
||||
intro: 'Mijn voornaamwoorden zijn'
|
||||
|
||||
@ -7,6 +7,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'Pronomen'
|
||||
default: 'on'
|
||||
any: 'dowolne'
|
||||
plurals: true
|
||||
|
||||
@ -68,6 +68,8 @@ home:
|
||||
nie zakładać ich płci i {/slowniki/inkluzywny=nie wykluczać}.
|
||||
|
||||
pronouns:
|
||||
header: 'Zaimki'
|
||||
headerLong: 'Niebinarne zaimki i inne formy'
|
||||
examples: 'Przykłady użycia w zdaniu'
|
||||
plural: 'Liczba mnoga'
|
||||
intro: 'Moje zaimki to'
|
||||
|
||||
@ -4,6 +4,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'pronomes'
|
||||
default: 'ele'
|
||||
any: 'any'
|
||||
plurals: false
|
||||
|
||||
@ -57,6 +57,8 @@ home:
|
||||
não estamos assumindo gênero delus e não estamos excluindo elus por qualquer razão.
|
||||
|
||||
pronouns:
|
||||
header: 'Pronomes'
|
||||
headerLong: 'Pronomes'
|
||||
examples: 'Exemplos de uso em frases'
|
||||
plural: 'Plural'
|
||||
intro: 'Meus pronomes são'
|
||||
|
||||
@ -5,6 +5,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
routes: 'pronouns'
|
||||
default: 'ער'
|
||||
any: 'any'
|
||||
plurals: true
|
||||
|
||||
@ -57,6 +57,8 @@ home:
|
||||
we don't assume their gender and don't exclude them for any reason.
|
||||
|
||||
pronouns:
|
||||
header: 'פּראָנאָמען'
|
||||
headerLong: 'פּראָנאָמען'
|
||||
examples: 'Example usage in sentences'
|
||||
plural: 'מערצאָל'
|
||||
intro: 'מײַנע פּראָנאָמען זענען'
|
||||
@ -538,7 +540,7 @@ error:
|
||||
generic: 'Something went wrong, please try again…'
|
||||
|
||||
mode:
|
||||
dark: 'טונקלמאָדוס'
|
||||
dark: 'טונקלמאָדוס'
|
||||
light: 'ליכטמאָדוס'
|
||||
|
||||
# TODO
|
||||
|
||||
@ -4,6 +4,7 @@ header: true
|
||||
|
||||
pronouns:
|
||||
enabled: true
|
||||
route: 'pronouns'
|
||||
default: '他'
|
||||
any: 'any'
|
||||
plurals: true
|
||||
|
||||
@ -54,6 +54,8 @@ home:
|
||||
不會以任何理由假設其性別或排斥他們。
|
||||
|
||||
pronouns:
|
||||
header: '代詞'
|
||||
headerLong: '代詞'
|
||||
examples: '例句用法'
|
||||
plural: '複數'
|
||||
intro: '我的代詞是'
|
||||
@ -316,7 +318,7 @@ contact:
|
||||
authors: '網站的作者'
|
||||
team:
|
||||
name: '中立語推行委員會'
|
||||
description:
|
||||
description:
|
||||
- >
|
||||
{https://pronouns.page=Pronouns.page} 及相關舉措
|
||||
由“中立語推行委員會”集體創建。
|
||||
|
||||
@ -160,6 +160,10 @@ export default {
|
||||
},
|
||||
router: {
|
||||
extendRoutes(routes, resolve) {
|
||||
if (config.pronouns.enabled) {
|
||||
routes.push({ path: '/' + config.pronouns.route, component: resolve(__dirname, 'routes/pronouns.vue') });
|
||||
}
|
||||
|
||||
if (config.sources.enabled) {
|
||||
routes.push({ path: '/' + config.sources.route, component: resolve(__dirname, 'routes/sources.vue') });
|
||||
}
|
||||
|
||||
@ -23,196 +23,6 @@
|
||||
<Share/>
|
||||
</section>
|
||||
|
||||
<Separator icon="link"/>
|
||||
|
||||
<section>
|
||||
<Suggested/>
|
||||
|
||||
<ul class="list-group mt-4">
|
||||
<li v-for="[group, groupPronouns] in pronounLibrary.split()" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="group.name"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="group.description">
|
||||
<Icon v="info-circle"/>
|
||||
<LinkedText :text="group.description"/>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="groupPronouns"/>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p class="h5">
|
||||
<T>home.generator.header</T>
|
||||
</p>
|
||||
<p>
|
||||
<T>home.generator.description</T>
|
||||
</p>
|
||||
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary w-100">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>home.generator.button</T>
|
||||
</a>
|
||||
<div v-else class="card mb-5">
|
||||
<div class="card-header">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>home.generator.header2</T>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title border-bottom pb-3">
|
||||
<ul class="list-inline d-inline mb-0">
|
||||
<li class="list-inline-item pt-1 h5">
|
||||
<T>home.generator.base</T>:
|
||||
</li>
|
||||
<li class="list-inline-item" v-for="(pronoun, pronounName) in pronouns">
|
||||
<button :class="['btn', pronoun.name(glue) === selectedPronoun.name(glue) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
||||
@click="selectedPronoun = pronouns[pronounName].clone()"
|
||||
>
|
||||
<Spelling :text="pronoun.name(glue)"/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-primary">
|
||||
<p class="h3 mb-0 text-center">
|
||||
<Spelling :text="selectedPronoun.name(glue)"/>
|
||||
<br/>
|
||||
<input v-model="selectedPronoun.description"
|
||||
class="form-control form-input p-0 form-control-sm"
|
||||
:size="selectedPronoun.description.length + 3"
|
||||
maxlength="64"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<T>pronouns.examples</T>:
|
||||
</p>
|
||||
<template v-for="isHonorific in [false, true]" v-if="examples.filter(e => e.isHonorific === isHonorific).length">
|
||||
<ul>
|
||||
<li v-for="example in examples" v-if="example.isHonorific === isHonorific">
|
||||
<span v-for="part in clearExampleParts(example[(isHonorific ? selectedPronoun.isPluralHonorific() : selectedPronoun.isPlural()) ? 'pluralParts' : 'singularParts'])">
|
||||
<input v-if="part.variable" v-model="selectedPronoun.morphemes[part.str]"
|
||||
:class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
|
||||
:size="selectedPronoun.morphemes[part.str] ? selectedPronoun.morphemes[part.str].length : 0"
|
||||
maxlength="24"
|
||||
@focus="selectedMorpheme = part.str"
|
||||
@blur="selectedMorpheme = ''"
|
||||
/>
|
||||
<span v-else><Spelling :text="part.str"/></span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="my-3">
|
||||
<div class="custom-control custom-switch" v-if="isHonorific">
|
||||
<input type="checkbox" class="custom-control-input" id="pluralHonorific" v-model="selectedPronoun.pluralHonorific[0]">
|
||||
<label class="custom-control-label" for="pluralHonorific"><T>pronouns.plural</T> <Icon v="level-up"/></label>
|
||||
</div>
|
||||
<div class="custom-control custom-switch" v-else>
|
||||
<input type="checkbox" class="custom-control-input" id="plural" v-model="selectedPronoun.plural[0]">
|
||||
<label class="custom-control-label" for="plural"><T>pronouns.plural</T> <Icon v="level-up"/></label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<p class="small">
|
||||
<Icon v="info-circle"/>
|
||||
<T>home.generator.alt</T>
|
||||
</p>
|
||||
<!-- TODO #136
|
||||
<p class="small" v-if="config.pronunciation.enabled">
|
||||
<Icon v="info-circle"/>
|
||||
<T>home.generator.pronunciation</T>
|
||||
</p>
|
||||
-->
|
||||
<div v-if="!usedBaseEquals" class="alert alert-warning">
|
||||
<Icon v="exclamation-triangle"/>
|
||||
<T>pronouns.generated</T>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" v-if="link">
|
||||
<LinkInput :link="link"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="config.pronouns.multiple !== false" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="config.pronouns.multiple.name"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="config.pronouns.multiple.description">
|
||||
<Icon v="info-circle"/>
|
||||
<em v-html="config.pronouns.multiple.description"></em>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="config.pronouns.multiple.examples" class="mb-3"/>
|
||||
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary w-100">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>pronouns.alt.button</T>
|
||||
</a>
|
||||
<div v-else class="card">
|
||||
<div class="card-header">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>pronouns.alt.header</T>:
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">
|
||||
<ul class="list-inline d-inline mb-0">
|
||||
<li class="list-inline-item" v-for="(pronoun, pronounName) in pronouns">
|
||||
<button :class="['btn', multiple.includes(pronounName) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
||||
@click="toggleMultiple(pronounName)"
|
||||
>
|
||||
<Spelling :text="pronoun.name()"/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" v-if="linkMultiple">
|
||||
<LinkInput :link="linkMultiple"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="config.pronouns.null !== false" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="config.pronouns.null.description"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="config.pronouns.null.history">
|
||||
<Icon v="info-circle"/>
|
||||
<LinkedText :text="config.pronouns.null.history"/>
|
||||
</div>
|
||||
<div class="small my-1">
|
||||
<LinkedText :text="config.pronouns.null.template"/>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="config.pronouns.null.examples" class="mb-3"/>
|
||||
</li>
|
||||
<li v-if="config.pronouns.emoji !== false" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="config.pronouns.emoji.description"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="config.pronouns.emoji.history">
|
||||
<Icon v="info-circle"/>
|
||||
<LinkedText :text="config.pronouns.emoji.history"/>
|
||||
</div>
|
||||
<div class="small my-1">
|
||||
<LinkedText :text="config.pronouns.emoji.template"/>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="config.pronouns.emoji.examples" class="mb-3"/>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p class="h5">
|
||||
<nuxt-link :to="'/' + config.pronouns.any"><T>pronouns.any.header</T></nuxt-link>
|
||||
</p>
|
||||
<p>
|
||||
<T>pronouns.any.description</T>
|
||||
</p>
|
||||
</li>
|
||||
<li v-if="config.pronouns.avoiding" class="list-group-item">
|
||||
<p class="h5">
|
||||
<nuxt-link :to="'/' + config.pronouns.avoiding"><T>pronouns.avoiding.header</T></nuxt-link>
|
||||
</p>
|
||||
<p>
|
||||
<T>pronouns.avoiding.description</T>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<Separator icon="fist-raised"/>
|
||||
|
||||
<Mission/>
|
||||
@ -220,132 +30,27 @@
|
||||
<Separator icon="bookmark"/>
|
||||
|
||||
<section>
|
||||
<Media/>
|
||||
<Socials/>
|
||||
<LanguageVersions/>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<Socials/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<LanguageVersions/>
|
||||
</div>
|
||||
</div>
|
||||
<Support/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { examples, pronouns, pronounLibrary } from "~/src/data";
|
||||
import { ExamplePart } from "~/src/classes";
|
||||
import Compressor from "../src/compressor";
|
||||
import MORPHEMES from '../data/pronouns/morphemes';
|
||||
import {mapState} from "vuex";
|
||||
import Suggested from "../data/pronouns/Suggested";
|
||||
|
||||
export default {
|
||||
components: { Suggested },
|
||||
data() {
|
||||
return {
|
||||
examples,
|
||||
pronouns,
|
||||
pronounLibrary,
|
||||
|
||||
selectedPronoun: pronouns[this.config.pronouns.default].clone(),
|
||||
selectedMorpheme: '',
|
||||
|
||||
customiseMultiple: false,
|
||||
multiple: this.config.pronouns.multiple.examples[0].split('&'),
|
||||
|
||||
customise: false,
|
||||
|
||||
glue: ' ' + this.$t('pronouns.or') + ' ',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'user',
|
||||
]),
|
||||
usedBase() {
|
||||
const name = this.selectedPronoun.name(this.glue);
|
||||
for (let key in this.pronouns) {
|
||||
if (this.pronouns.hasOwnProperty(key)) {
|
||||
if (key === name) {
|
||||
return key;
|
||||
}
|
||||
for (let alias of this.pronouns[key].aliases) {
|
||||
if (alias === name) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
usedBaseEquals() {
|
||||
return this.usedBase && this.pronouns[this.usedBase].equals(this.selectedPronoun);
|
||||
},
|
||||
longLink() {
|
||||
const base = this.pronouns[this.selectedPronoun.morphemes[MORPHEMES[0]]];
|
||||
|
||||
return base
|
||||
? Compressor.compress(
|
||||
this.selectedPronoun.toArray().map(x => x.split('|')[0]),
|
||||
base.toArray().map(x => x.split('|')[0])
|
||||
).join(',')
|
||||
: this.selectedPronoun.toString();
|
||||
},
|
||||
link() {
|
||||
if (!this.selectedPronoun.pronoun()) {
|
||||
return null;
|
||||
}
|
||||
return this.addSlash(this.$base + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink));
|
||||
},
|
||||
linkMultiple() {
|
||||
if (!this.multiple.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.addSlash(this.$base + '/' + this.multiple.join('&'));
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleMultiple(name) {
|
||||
const index = this.multiple.indexOf(name);
|
||||
if (index > -1) {
|
||||
this.multiple.splice(index, 1);
|
||||
} else {
|
||||
this.multiple.push(name);
|
||||
}
|
||||
},
|
||||
addSlash(link) {
|
||||
return link + (['*', `'`].includes(link.substr(link.length - 1)) ? '/' : '');
|
||||
},
|
||||
clearExampleParts(parts) {
|
||||
return parts.map(p => new ExamplePart(p.variable, p.str.replace(/^'/, '')));
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../assets/style";
|
||||
|
||||
.form-input {
|
||||
text-align: center;
|
||||
&.active {
|
||||
/*@include alert-variant(
|
||||
theme-color-level('primary', $alert-bg-level),
|
||||
theme-color-level('primary', $alert-border-level),
|
||||
theme-color-level('primary', $alert-color-level)
|
||||
);FIXME*/
|
||||
}
|
||||
&.form-control {
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
&[size="0"] {
|
||||
width: .5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*@include media-breakpoint-up('md', $grid-breakpoints) {
|
||||
.btn-md-lg {
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
}*/
|
||||
</style>
|
||||
|
||||
324
routes/pronouns.vue
Normal file
324
routes/pronouns.vue
Normal file
@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div>
|
||||
<section>
|
||||
<Suggested/>
|
||||
|
||||
<ul class="list-group mt-4">
|
||||
<li v-for="[group, groupPronouns] in pronounLibrary.split()" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="group.name"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="group.description">
|
||||
<Icon v="info-circle"/>
|
||||
<LinkedText :text="group.description"/>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="groupPronouns"/>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p class="h5">
|
||||
<T>home.generator.header</T>
|
||||
</p>
|
||||
<p>
|
||||
<T>home.generator.description</T>
|
||||
</p>
|
||||
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary w-100">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>home.generator.button</T>
|
||||
</a>
|
||||
<div v-else class="card mb-5">
|
||||
<div class="card-header">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>home.generator.header2</T>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title border-bottom pb-3">
|
||||
<ul class="list-inline d-inline mb-0">
|
||||
<li class="list-inline-item pt-1 h5">
|
||||
<T>home.generator.base</T>:
|
||||
</li>
|
||||
<li class="list-inline-item" v-for="(pronoun, pronounName) in pronouns">
|
||||
<button :class="['btn', pronoun.name(glue) === selectedPronoun.name(glue) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
||||
@click="selectedPronoun = pronouns[pronounName].clone()"
|
||||
>
|
||||
<Spelling :text="pronoun.name(glue)"/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-primary">
|
||||
<p class="h3 mb-0 text-center">
|
||||
<Spelling :text="selectedPronoun.name(glue)"/>
|
||||
<br/>
|
||||
<input v-model="selectedPronoun.description"
|
||||
class="form-control form-input p-0 form-control-sm"
|
||||
:size="selectedPronoun.description.length + 3"
|
||||
maxlength="64"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<T>pronouns.examples</T>:
|
||||
</p>
|
||||
<template v-for="isHonorific in [false, true]" v-if="examples.filter(e => e.isHonorific === isHonorific).length">
|
||||
<ul>
|
||||
<li v-for="example in examples" v-if="example.isHonorific === isHonorific">
|
||||
<span v-for="part in clearExampleParts(example[(isHonorific ? selectedPronoun.isPluralHonorific() : selectedPronoun.isPlural()) ? 'pluralParts' : 'singularParts'])">
|
||||
<input v-if="part.variable" v-model="selectedPronoun.morphemes[part.str]"
|
||||
:class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
|
||||
:size="selectedPronoun.morphemes[part.str] ? selectedPronoun.morphemes[part.str].length : 0"
|
||||
maxlength="24"
|
||||
@focus="selectedMorpheme = part.str"
|
||||
@blur="selectedMorpheme = ''"
|
||||
/>
|
||||
<span v-else><Spelling :text="part.str"/></span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="my-3">
|
||||
<div class="custom-control custom-switch" v-if="isHonorific">
|
||||
<input type="checkbox" class="custom-control-input" id="pluralHonorific" v-model="selectedPronoun.pluralHonorific[0]">
|
||||
<label class="custom-control-label" for="pluralHonorific"><T>pronouns.plural</T> <Icon v="level-up"/></label>
|
||||
</div>
|
||||
<div class="custom-control custom-switch" v-else>
|
||||
<input type="checkbox" class="custom-control-input" id="plural" v-model="selectedPronoun.plural[0]">
|
||||
<label class="custom-control-label" for="plural"><T>pronouns.plural</T> <Icon v="level-up"/></label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<p class="small">
|
||||
<Icon v="info-circle"/>
|
||||
<T>home.generator.alt</T>
|
||||
</p>
|
||||
<!-- TODO #136
|
||||
<p class="small" v-if="config.pronunciation.enabled">
|
||||
<Icon v="info-circle"/>
|
||||
<T>home.generator.pronunciation</T>
|
||||
</p>
|
||||
-->
|
||||
<div v-if="!usedBaseEquals" class="alert alert-warning">
|
||||
<Icon v="exclamation-triangle"/>
|
||||
<T>pronouns.generated</T>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" v-if="link">
|
||||
<LinkInput :link="link"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="config.pronouns.multiple !== false" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="config.pronouns.multiple.name"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="config.pronouns.multiple.description">
|
||||
<Icon v="info-circle"/>
|
||||
<em v-html="config.pronouns.multiple.description"></em>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="config.pronouns.multiple.examples" class="mb-3"/>
|
||||
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary w-100">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>pronouns.alt.button</T>
|
||||
</a>
|
||||
<div v-else class="card">
|
||||
<div class="card-header">
|
||||
<Icon v="sliders-h-square"/>
|
||||
<T>pronouns.alt.header</T>:
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">
|
||||
<ul class="list-inline d-inline mb-0">
|
||||
<li class="list-inline-item" v-for="(pronoun, pronounName) in pronouns">
|
||||
<button :class="['btn', multiple.includes(pronounName) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
||||
@click="toggleMultiple(pronounName)"
|
||||
>
|
||||
<Spelling :text="pronoun.name()"/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" v-if="linkMultiple">
|
||||
<LinkInput :link="linkMultiple"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="config.pronouns.null !== false" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="config.pronouns.null.description"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="config.pronouns.null.history">
|
||||
<Icon v="info-circle"/>
|
||||
<LinkedText :text="config.pronouns.null.history"/>
|
||||
</div>
|
||||
<div class="small my-1">
|
||||
<LinkedText :text="config.pronouns.null.template"/>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="config.pronouns.null.examples" class="mb-3"/>
|
||||
</li>
|
||||
<li v-if="config.pronouns.emoji !== false" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="config.pronouns.emoji.description"/>
|
||||
</p>
|
||||
<div class="small my-1" v-if="config.pronouns.emoji.history">
|
||||
<Icon v="info-circle"/>
|
||||
<LinkedText :text="config.pronouns.emoji.history"/>
|
||||
</div>
|
||||
<div class="small my-1">
|
||||
<LinkedText :text="config.pronouns.emoji.template"/>
|
||||
</div>
|
||||
<SimplePronounList :pronouns="config.pronouns.emoji.examples" class="mb-3"/>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p class="h5">
|
||||
<nuxt-link :to="'/' + config.pronouns.any"><T>pronouns.any.header</T></nuxt-link>
|
||||
</p>
|
||||
<p>
|
||||
<T>pronouns.any.description</T>
|
||||
</p>
|
||||
</li>
|
||||
<li v-if="config.pronouns.avoiding" class="list-group-item">
|
||||
<p class="h5">
|
||||
<nuxt-link :to="'/' + config.pronouns.avoiding"><T>pronouns.avoiding.header</T></nuxt-link>
|
||||
</p>
|
||||
<p>
|
||||
<T>pronouns.avoiding.description</T>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<Separator icon="fist-raised"/>
|
||||
|
||||
<Mission/>
|
||||
|
||||
<Separator icon="bookmark"/>
|
||||
|
||||
<Support/>
|
||||
<section>
|
||||
<Share/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { examples, pronouns, pronounLibrary } from "~/src/data";
|
||||
import { ExamplePart } from "~/src/classes";
|
||||
import Compressor from "../src/compressor";
|
||||
import MORPHEMES from '../data/pronouns/morphemes';
|
||||
import {mapState} from "vuex";
|
||||
import Suggested from "../data/pronouns/Suggested";
|
||||
|
||||
export default {
|
||||
components: { Suggested },
|
||||
data() {
|
||||
return {
|
||||
examples,
|
||||
pronouns,
|
||||
pronounLibrary,
|
||||
|
||||
selectedPronoun: pronouns[this.config.pronouns.default].clone(),
|
||||
selectedMorpheme: '',
|
||||
|
||||
customiseMultiple: false,
|
||||
multiple: this.config.pronouns.multiple.examples[0].split('&'),
|
||||
|
||||
customise: false,
|
||||
|
||||
glue: ' ' + this.$t('pronouns.or') + ' ',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'user',
|
||||
]),
|
||||
usedBase() {
|
||||
const name = this.selectedPronoun.name(this.glue);
|
||||
for (let key in this.pronouns) {
|
||||
if (this.pronouns.hasOwnProperty(key)) {
|
||||
if (key === name) {
|
||||
return key;
|
||||
}
|
||||
for (let alias of this.pronouns[key].aliases) {
|
||||
if (alias === name) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
usedBaseEquals() {
|
||||
return this.usedBase && this.pronouns[this.usedBase].equals(this.selectedPronoun);
|
||||
},
|
||||
longLink() {
|
||||
const base = this.pronouns[this.selectedPronoun.morphemes[MORPHEMES[0]]];
|
||||
|
||||
return base
|
||||
? Compressor.compress(
|
||||
this.selectedPronoun.toArray().map(x => x.split('|')[0]),
|
||||
base.toArray().map(x => x.split('|')[0])
|
||||
).join(',')
|
||||
: this.selectedPronoun.toString();
|
||||
},
|
||||
link() {
|
||||
if (!this.selectedPronoun.pronoun()) {
|
||||
return null;
|
||||
}
|
||||
return this.addSlash(this.$base + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink));
|
||||
},
|
||||
linkMultiple() {
|
||||
if (!this.multiple.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.addSlash(this.$base + '/' + this.multiple.join('&'));
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleMultiple(name) {
|
||||
const index = this.multiple.indexOf(name);
|
||||
if (index > -1) {
|
||||
this.multiple.splice(index, 1);
|
||||
} else {
|
||||
this.multiple.push(name);
|
||||
}
|
||||
},
|
||||
addSlash(link) {
|
||||
return link + (['*', `'`].includes(link.substr(link.length - 1)) ? '/' : '');
|
||||
},
|
||||
clearExampleParts(parts) {
|
||||
return parts.map(p => new ExamplePart(p.variable, p.str.replace(/^'/, '')));
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../assets/style";
|
||||
|
||||
.form-input {
|
||||
text-align: center;
|
||||
&.active {
|
||||
/*@include alert-variant(
|
||||
theme-color-level('primary', $alert-bg-level),
|
||||
theme-color-level('primary', $alert-border-level),
|
||||
theme-color-level('primary', $alert-color-level)
|
||||
);FIXME*/
|
||||
}
|
||||
&.form-control {
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
&[size="0"] {
|
||||
width: .5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*@include media-breakpoint-up('md', $grid-breakpoints) {
|
||||
.btn-md-lg {
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
}*/
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user