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/pages/index.vue

378 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="container">
<h1>
<Icon v="tags"/>
Zaimki.pl
</h1>
<section>
<About/>
<p>
<nuxt-link to="/literatura" class="btn btn-outline-primary">
<Icon v="books"/>
Niebinarna polszczyzna w tekstach kultury
</nuxt-link>
</p>
<p>
<nuxt-link to="/neutratywy" class="btn btn-outline-primary">
<Icon v="atom-alt"/>
Słownik neutratywów
</nuxt-link>
tutaj zbieramy neutralne formy rzeczowników
</p>
</section>
<Separator icon="link"/>
<section>
<ul class="list-group">
<li v-for="[group, groupTemplates] in templateLibrary.split()" class="list-group-item">
<p class="h5">
{{ group.name }}
</p>
<div class="small my-1" v-if="group.description">
<Icon v="info-circle"/>
<em>{{ group.description }}</em>
</div>
<ul class="list-unstyled">
<li v-for="template in groupTemplates" :key="template.canonicalName">
<nuxt-link v-if="typeof template === 'string'" :to="'/' + template">
<strong>{{template.replace(/&/g, ' lub ')}}</strong>
</nuxt-link>
<nuxt-link v-else :to="addSlash('/' + template.canonicalName)">
<strong>{{template.name()}}</strong>
<small>{{template.description}}</small>
</nuxt-link>
</li>
</ul>
</li>
<li class="list-group-item">
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary btn-block">
<Icon v="sliders-h-square"/>
Wygeneruj link do form wymiennych
</a>
<div v-else class="card">
<div class="card-header">
<Icon v="sliders-h-square"/>
Formy wymienne:
</div>
<div class="card-body">
<div class="card-title">
<ul class="list-inline d-inline mb-0">
<li class="list-inline-item" v-for="(template, pronoun) in templates">
<button :class="['btn', multiple.includes(pronoun) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
@click="toggleMultiple(pronoun)"
>
{{template.name()}}
</button>
</li>
</ul>
</div>
</div>
<div class="card-footer" v-if="linkMultiple">
<LinkInput :link="linkMultiple"/>
</div>
</div>
</li>
<li class="list-group-item">
<p class="h5">
Generator form
</p>
<p>
Możesz także użyć poniższego narzędzia, w którym uzupełnisz luki w zdaniach
zgodnie z formami, których używasz, by wygenerować gotowy do udostępniania innym link.
</p>
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary btn-block">
<Icon v="sliders-h-square"/>
Pokaż generator
</a>
<div v-else class="card mb-5">
<div class="card-header">
<Icon v="sliders-h-square"/>
Wygeneruj link
</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">
Na podstawie:
</li>
<li class="list-inline-item" v-for="(template, pronoun) in templates">
<button :class="['btn', template.name() === selectedTemplate.name() ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
@click="selectedTemplate = templates[pronoun].clone()"
>
{{template.name()}}
</button>
</li>
</ul>
</div>
<div class="alert alert-primary">
<p class="h3 mb-0 text-center">
{{ selectedTemplate.name() }}
<br/>
<input v-model="selectedTemplate.description"
class="form-control form-input p-0 form-control-sm"
:size="selectedTemplate.description.length + 3"
maxlength="48"
/>
</p>
</div>
<p>
Przykłady użycia w zdaniu:
</p>
<template v-for="isHonorific in [false, true]">
<ul>
<li v-for="example in examples" v-if="example.isHonorific === isHonorific">
<span v-for="part in example[(isHonorific ? selectedTemplate.pluralHonorific : selectedTemplate.plural) ? 'pluralParts' : 'singularParts']">
<input v-if="part.variable" v-model="selectedTemplate.morphemes[part.str]"
:class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
:size="selectedTemplate.morphemes[part.str] ? selectedTemplate.morphemes[part.str].length : 0"
maxlength="12"
@focus="selectedMorpheme = part.str"
@blur="selectedMorpheme = ''"
/>
<span v-else>{{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="selectedTemplate.pluralHonorific">
<label class="custom-control-label" for="pluralHonorific">Liczba mnoga <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="selectedTemplate.plural">
<label class="custom-control-label" for="plural">Liczba mnoga <Icon v="level-up"/></label>
</div>
</div>
</template>
<p class="small">
<Icon v="info-circle"/>
Możesz tu również wpisać formy wymienne w każdym polu z osobna, np. <code>jego&jej</code> = „jego” lub „jej”.
</p>
<div class="alert alert-warning">
<p class="mb-0 small">
<Icon v="exclamation-triangle"/>
Strona jest w wersji βeta!
Przykłady, formy gramatyczne i linki mogą się jeszcze mocno zmienić!
Jeśli masz jakieś sugestie lub uwagi, daj mi proszę znać
<a href="https://twitter.com/AvrisIT" target="_blank" rel="noopener">na Twitterze</a>
lub
<a href="mailto:andrea@avris.it" target="_blank" rel="noopener">przez maila</a>.
</p>
</div>
</div>
<div class="card-footer" v-if="link">
<LinkInput :link="link"/>
</div>
<div class="card-body border-top" v-if="Object.keys(sources).length">
<Literature :sources="sources"/>
</div>
</div>
</li>
</ul>
</section>
<Separator icon="bookmark"/>
<section>
<h2 class="h3 mb-3">
<Icon v="bookmark"/>
Dodatkowe materiały:
</h2>
<ul class="list-unstyled">
<li class="my-2">
<Icon v="globe-europe"/>
<a href="https://pronoun.is/" target="_blank" rel="noopener">
Pronoun.is
</a>
anglojęzyczna inspiracja dla tej strony.
</li>
<li class="my-2">
<Icon v="comment-alt-edit"/>
<a href="https://avris.it/blog/czemu-ka%C5%BCdy-powinien-mie%C4%87-zaimki-w-bio" target="_blank" rel="noopener">
Czemu KAŻDY powinien mieć zaimki w bio
</a>
</li>
<li class="my-2">
<Icon v="comment-alt-edit"/>
<a href="https://avris.it/blog/genderneutralizacja-polszczyzny" target="_blank" rel="noopener">
Genderneutralizacja polszczyzny?
</a>
artykuł opisujący, dlaczego język neutralny płciowo jest ważny,
i zbierający pomysły na stworzenie takiego.
</li>
<li class="my-2">
<Icon v="comment-alt-edit"/>
<a href="https://www.przemyslenia-maniaka.pl/2019/11/maniak-marudzi-27-niebinarne-tumaczenia.html" target="_blank" rel="noopener">
Maniak marudzi #27: Niebinarne tłumaczenia
</a>
artykuł pokazujący, że „nie da się przetłumaczyć they/them na polski” to tylko wymówka.
</li>
<li class="my-2">
<Icon v="comment-alt-edit"/>
<a href="http://wasowska.net/2020/09/rowni-wobec-jezyka-o-jezyku-neutralnym-plciowo/" target="_blank" rel="noopener">
Równi wobec języka o języku neutralnym płciowo
</a>
artykuł Agnieszki Wąsowskiej
</li>
<li class="my-2">
<Icon v="play-circle"/>
<a href="https://www.youtube.com/watch?v=YOEB6Ixp048" target="_blank" rel="noopener">
Nie-binarny język polski seminarium naukowe (Queer UW)
</a>
</li>
<li class="my-2">
<Icon v="facebook" set="b"/>
<a href="https://facebook.com/neutratywy" target="_blank" rel="noopener">
Słownik Neutratywów Języka Polskiego
</a>
</li>
<li class="my-2">
<Icon v="facebook" set="b"/>
<a href="https://facebook.com/slownikempatyczny" target="_blank" rel="noopener">
Słownik Empatyczny Języka Polskiego
</a>
</li>
</ul>
<h2 class="h3 mb-3 mt-5">
<Icon v="tv"/>
Zaimki.pl w mediach
</h2>
<ul class="list-unstyled">
<li class="my-2">
<Icon v="newspaper"/>
<a href="https://queer.pl/artykul/204685/zaimkipl-strona-jezyk-polski-niebinarnosc" target="_blank" rel="noopener">
Zaimki.pl: powstała strona ułatwiająca dostosowanie języka polskiego osobom niebinarnym.
Rozmawialiśmy z jej twórcą i twórczynium
<strong>Queer.pl</strong>
</a>
</li>
<li class="my-2">
<Icon v="radio"/>
<a href="https://pod.co/haloradio/joanna-frejus-2020-08-23-17-00" target="_blank" rel="noopener">
Osoby redaktorskie Słownika Neutratywów u Joanny Frejus w <strong>Halo.Radio</strong>
</a>
</li>
</ul>
</section>
<ScrollButton/>
</div>
</template>
<script>
import { examples, templates, getSources, templateLibrary } from "~/src/data";
import Compressor from "../src/compressor";
import { getTemplate } from "../src/buildTemplate";
export default {
data() {
return {
examples: examples,
templates: templates,
getTemplate: getTemplate,
templateLibrary: templateLibrary,
selectedTemplate: templates['on'].clone(),
selectedMorpheme: '',
customiseMultiple: false,
multiple: ['on', 'ona'],
customise: false,
}
},
computed: {
usedBase() {
const name = this.selectedTemplate.name();
for (let key in this.templates) {
if (this.templates.hasOwnProperty(key)) {
if (key === name) {
return key;
}
for (let alias of this.templates[key].aliases) {
if (alias === name) {
return key;
}
}
}
}
return null;
},
usedBaseEquals() {
return this.usedBase && this.templates[this.usedBase].equals(this.selectedTemplate);
},
longLink() {
const base = this.templates[this.selectedTemplate.morphemes.pronoun_n];
return base
? Compressor.compress(this.selectedTemplate.toArray(), base.toArray()).join(',')
: this.selectedTemplate.toString();
},
link() {
if (!this.selectedTemplate.pronoun()) {
return null;
}
return this.addSlash(process.env.baseUrl + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink));
},
linkMultiple() {
if (!this.multiple.length) {
return null;
}
return this.addSlash(process.env.baseUrl + '/' + this.multiple.join('&'));
},
sources() {
return getSources(this.selectedTemplate);
},
},
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 + (link.substr(link.length - 1) === '*' ? '/' : '');
}
},
}
</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)
);
}
&.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>