This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Zaimki/routes/homepage.vue

335 lines
15 KiB
Vue
Raw Normal View History

2020-10-28 08:22:29 -07:00
<template>
<div>
2020-10-28 08:22:29 -07:00
<h2>
<Icon v="tags"/>
<T>home.why</T>
</h2>
<section>
<T>home.about</T>
</section>
<section>
<Share/>
</section>
<Separator icon="link"/>
<section>
<h2>
<Icon v="tags"/>
<T>home.pronouns</T>
2020-10-28 08:22:29 -07:00
</h2>
<ul class="list-group mt-4">
<li v-for="[group, groupPronouns] in pronounLibrary.split()" class="list-group-item">
2020-10-28 08:22:29 -07:00
<p class="h5">
2021-02-01 12:03:30 -08:00
<Spelling>{{ group.name }}</Spelling>
2020-10-28 08:22:29 -07:00
</p>
<div class="small my-1" v-if="group.description">
<Icon v="info-circle"/>
2020-11-15 05:13:14 -08:00
<LinkedText :text="group.description"/>
2020-10-28 08:22:29 -07:00
</div>
2020-11-15 05:13:14 -08:00
<SimplePronounList :pronouns="groupPronouns"/>
2020-10-28 08:22:29 -07:00
</li>
2020-11-15 05:13:14 -08:00
<li v-if="config.pronouns.multiple !== false" class="list-group-item">
<p class="h5">
2021-02-01 12:03:30 -08:00
<Spelling>{{ config.pronouns.multiple.name }}</Spelling>
2020-11-15 05:13:14 -08:00
</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"/>
2021-01-22 14:54:24 -08:00
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary w-100">
2020-10-28 08:22:29 -07:00
<Icon v="sliders-h-square"/>
<T>pronouns.alt.button</T>
2020-10-28 08:22:29 -07:00
</a>
<div v-else class="card">
<div class="card-header">
<Icon v="sliders-h-square"/>
<T>pronouns.alt.header</T>:
2020-10-28 08:22:29 -07:00
</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)"
2020-10-28 08:22:29 -07:00
>
2021-02-01 12:03:30 -08:00
<Spelling>{{pronoun.name()}}</Spelling>
2020-10-28 08:22:29 -07:00
</button>
</li>
</ul>
</div>
</div>
<div class="card-footer" v-if="linkMultiple">
<LinkInput :link="linkMultiple"/>
</div>
</div>
</li>
2020-11-15 05:13:14 -08:00
<li v-if="config.pronouns.null !== false" class="list-group-item">
<p class="h5">
2021-02-01 12:03:30 -08:00
<Spelling>{{ config.pronouns.null.description }}</Spelling>
2020-11-15 05:13:14 -08:00
</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">
2021-02-01 12:03:30 -08:00
<Spelling>{{ config.pronouns.emoji.description }}</Spelling>
2020-11-15 05:13:14 -08:00
</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>
2020-10-28 08:22:29 -07:00
<li class="list-group-item">
<p class="h5">
<T>home.generator.header</T>
</p>
<p>
<T>home.generator.description</T>
</p>
2021-01-22 14:54:24 -08:00
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary w-100">
2020-10-28 08:22:29 -07:00
<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()"
2020-10-28 08:22:29 -07:00
>
2021-02-01 12:03:30 -08:00
<Spelling>{{pronoun.name(glue)}}</Spelling>
2020-10-28 08:22:29 -07:00
</button>
</li>
</ul>
</div>
<div class="alert alert-primary">
<p class="h3 mb-0 text-center">
2021-02-01 12:03:30 -08:00
<Spelling>{{ selectedPronoun.name(glue) }}</Spelling>
2020-10-28 08:22:29 -07:00
<br/>
<input v-model="selectedPronoun.description"
2020-10-28 08:22:29 -07:00
class="form-control form-input p-0 form-control-sm"
:size="selectedPronoun.description.length + 3"
2020-10-28 08:22:29 -07:00
maxlength="48"
/>
</p>
</div>
<p>
<T>pronouns.examples</T>:
2020-10-28 08:22:29 -07:00
</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]"
2020-10-28 08:22:29 -07:00
:class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
:size="selectedPronoun.morphemes[part.str] ? selectedPronoun.morphemes[part.str].length : 0"
2020-11-28 07:52:48 -08:00
maxlength="24"
2020-10-28 08:22:29 -07:00
@focus="selectedMorpheme = part.str"
@blur="selectedMorpheme = ''"
/>
2021-02-01 12:03:30 -08:00
<span v-else><Spelling>{{part.str}}</Spelling></span>
2020-10-28 08:22:29 -07:00
</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>
2020-10-28 08:22:29 -07:00
</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>
2020-10-28 08:22:29 -07:00
</div>
</div>
</template>
<p class="small">
<Icon v="info-circle"/>
<T>home.generator.alt</T>
</p>
<!-- TODO #136
2020-11-28 07:52:48 -08:00
<p class="small" v-if="config.pronunciation.enabled">
<Icon v="info-circle"/>
<T>home.generator.pronunciation</T>
</p>
-->
2020-12-25 07:05:28 -08:00
<div v-if="!usedBaseEquals" class="alert alert-warning">
<Icon v="exclamation-triangle"/>
<T>pronouns.generated</T>
</div>
2020-10-28 08:22:29 -07:00
</div>
<div class="card-footer" v-if="link">
<LinkInput :link="link"/>
</div>
</div>
</li>
<li class="list-group-item">
<p class="h5">
2020-11-15 07:10:03 -08:00
<nuxt-link :to="'/' + config.pronouns.any"><T>pronouns.any.header</T></nuxt-link>
2020-10-28 08:22:29 -07:00
</p>
<p>
<T>pronouns.any.description</T>
2020-10-28 08:22:29 -07:00
</p>
</li>
2020-11-29 02:03:01 -08:00
<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>
2020-10-28 08:22:29 -07:00
</ul>
</section>
<Separator icon="bookmark"/>
<section>
<Media/>
<Socials/>
<LanguageVersions/>
2021-01-27 05:24:25 -08:00
<Support/>
2020-10-28 08:22:29 -07:00
</section>
</div>
</template>
<script>
2020-12-04 13:09:57 -08:00
import { examples, pronouns, pronounLibrary } from "~/src/data";
2020-10-28 08:22:29 -07:00
import { ExamplePart } from "~/src/classes";
import Compressor from "../src/compressor";
import MORPHEMES from '../data/pronouns/morphemes';
2020-10-28 08:22:29 -07:00
export default {
data() {
return {
examples,
pronouns,
pronounLibrary,
2020-10-28 08:22:29 -07:00
selectedPronoun: pronouns[this.config.pronouns.default].clone(),
2020-10-28 08:22:29 -07:00
selectedMorpheme: '',
customiseMultiple: false,
multiple: this.config.pronouns.multiple.examples[0].split('&'),
2020-10-28 08:22:29 -07:00
customise: false,
glue: ' ' + this.$t('pronouns.or') + ' ',
2020-10-28 08:22:29 -07:00
}
},
computed: {
usedBase() {
const name = this.selectedPronoun.name(this.glue);
for (let key in this.pronouns) {
if (this.pronouns.hasOwnProperty(key)) {
2020-10-28 08:22:29 -07:00
if (key === name) {
return key;
}
for (let alias of this.pronouns[key].aliases) {
2020-10-28 08:22:29 -07:00
if (alias === name) {
return key;
}
}
}
}
return null;
},
usedBaseEquals() {
return this.usedBase && this.pronouns[this.usedBase].equals(this.selectedPronoun);
2020-10-28 08:22:29 -07:00
},
longLink() {
const base = this.pronouns[this.selectedPronoun.morphemes[MORPHEMES[0]]];
2020-10-28 08:22:29 -07:00
return base
? Compressor.compress(
this.selectedPronoun.toArray().map(x => x.split('|')[0]),
base.toArray().map(x => x.split('|')[0])
).join(',')
: this.selectedPronoun.toString();
2020-10-28 08:22:29 -07:00
},
link() {
if (!this.selectedPronoun.pronoun()) {
2020-10-28 08:22:29 -07:00
return null;
}
2020-11-10 14:41:56 -08:00
return this.addSlash(this.$base + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink));
2020-10-28 08:22:29 -07:00
},
linkMultiple() {
if (!this.multiple.length) {
return null;
}
2020-11-10 14:41:56 -08:00
return this.addSlash(this.$base + '/' + this.multiple.join('&'));
2020-10-28 08:22:29 -07:00
},
},
methods: {
toggleMultiple(name) {
const index = this.multiple.indexOf(name);
if (index > -1) {
this.multiple.splice(index, 1);
2020-10-28 08:22:29 -07:00
} else {
this.multiple.push(name);
}
},
addSlash(link) {
return link + (['*', `'`].includes(link.substr(link.length - 1)) ? '/' : '');
2020-10-28 08:22:29 -07:00
},
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 {
2021-01-22 14:54:24 -08:00
/*@include alert-variant(
2020-10-28 08:22:29 -07:00
theme-color-level('primary', $alert-bg-level),
theme-color-level('primary', $alert-border-level),
theme-color-level('primary', $alert-color-level)
2021-01-22 14:54:24 -08:00
);FIXME*/
2020-10-28 08:22:29 -07:00
}
&.form-control {
width: auto;
display: inline;
}
&[size="0"] {
width: .5rem !important;
}
}
2021-01-22 14:54:24 -08:00
/*@include media-breakpoint-up('md', $grid-breakpoints) {
2020-10-28 08:22:29 -07:00
.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);
}
2021-01-22 14:54:24 -08:00
}*/
2020-10-28 08:22:29 -07:00
</style>