mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-22 12:03:25 -04:00
<LanguageMap>
This commit is contained in:
Andrea Vos
parent
9bf1a47a3b
commit
bd5f953792
2663
assets/languages.csv
Normal file
2663
assets/languages.csv
Normal file
File diff suppressed because it is too large
Load Diff
83
components/LanguageMap.vue
Normal file
83
components/LanguageMap.vue
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="map"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";
|
||||||
|
import walsLanguages from "../assets/languages.csv"
|
||||||
|
import locales from "../locale/locales.ts";
|
||||||
|
import { clearUrl } from "~/src/helpers.ts";
|
||||||
|
|
||||||
|
const localesByWalsCode = locales.reduce((acc, language) => {
|
||||||
|
if (language.walsCode) {
|
||||||
|
acc[language.walsCode] = language;
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
async mounted() {
|
||||||
|
await this.$loadStylesheet(
|
||||||
|
'leaflet',
|
||||||
|
'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
|
||||||
|
);
|
||||||
|
await this.$loadScript(
|
||||||
|
'leaflet',
|
||||||
|
'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
|
||||||
|
);
|
||||||
|
await this.$loadScript(
|
||||||
|
'tinyworldmap',
|
||||||
|
'https://tinyworldmap.com/dist/v3/tiny-world-borders.js',
|
||||||
|
);
|
||||||
|
|
||||||
|
var map = L.map('map').setView([45, 15], 3);
|
||||||
|
|
||||||
|
// alternatively, for full-width map:
|
||||||
|
// typeof(window) !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT
|
||||||
|
// ? [45, 15]
|
||||||
|
// : [40, 65],
|
||||||
|
|
||||||
|
L.control.attribution({ position: 'bottomright'})
|
||||||
|
.addAttribution('© <a href="https://doi.org/10.5281/zenodo.7385533" title="Dryer, Matthew S. & Haspelmath, Martin (eds.) 2013. The World Atlas of Language Structures Online. Leipzig: Max Planck Institute for Evolutionary Anthropology.">WALS</a>')
|
||||||
|
.addAttribution('<a href="https://wals.info">wals.info</a>')
|
||||||
|
.addTo(map);
|
||||||
|
|
||||||
|
new L.GridLayer.TinyWorld({maxZoom: 19}).addTo(map);
|
||||||
|
|
||||||
|
for (const walsLanguage of walsLanguages) {
|
||||||
|
if (!localesByWalsCode.hasOwnProperty(walsLanguage.id)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const locale = localesByWalsCode[walsLanguage.id];
|
||||||
|
|
||||||
|
const circle = L.circle([walsLanguage.latitude, walsLanguage.longitude], {
|
||||||
|
color: '#971064',
|
||||||
|
fillColor: '#c71585',
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
radius: 200000,
|
||||||
|
}).addTo(map);
|
||||||
|
circle.bindTooltip(`<strong>${locale.name}</strong><br/>${clearUrl(locale.url)}`);
|
||||||
|
circle.on('click', () => {
|
||||||
|
window.open(locale.url, '_blank');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// attribution gets added twice somehow, remove the duplicate
|
||||||
|
// TODO proper fix
|
||||||
|
const attribution = this.$el.querySelectorAll('.leaflet-control-attribution');
|
||||||
|
if (attribution.length > 1) {
|
||||||
|
attribution[1].remove();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#map {
|
||||||
|
height: 500px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
export class LocaleDescription {
|
export class LocaleDescription {
|
||||||
code: string;
|
code: string;
|
||||||
|
walsCode: string | null;
|
||||||
name: string;
|
name: string;
|
||||||
url: string;
|
url: string;
|
||||||
published: boolean;
|
published: boolean;
|
||||||
@ -9,6 +10,7 @@ export class LocaleDescription {
|
|||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
code: string,
|
code: string,
|
||||||
|
walsCode: string | null,
|
||||||
name: string,
|
name: string,
|
||||||
url: string,
|
url: string,
|
||||||
published: boolean,
|
published: boolean,
|
||||||
@ -17,6 +19,7 @@ export class LocaleDescription {
|
|||||||
extra: string | null = null,
|
extra: string | null = null,
|
||||||
) {
|
) {
|
||||||
this.code = code;
|
this.code = code;
|
||||||
|
this.walsCode = walsCode;
|
||||||
this.name = name;
|
this.name = name;
|
||||||
this.url = url;
|
this.url = url;
|
||||||
this.published = published;
|
this.published = published;
|
||||||
@ -26,34 +29,33 @@ export class LocaleDescription {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* eslint-disable */
|
||||||
export default [
|
export default [
|
||||||
new LocaleDescription('de', 'Deutsch', 'https://de.pronouns.page', true, 'ß', 'germanic'),
|
new LocaleDescription('de', 'ger', 'Deutsch', 'https://de.pronouns.page', true, 'ß', 'germanic'),
|
||||||
new LocaleDescription('es', 'Español', 'https://pronombr.es', true, 'ñ', 'romance'),
|
new LocaleDescription('es', 'spa', 'Español', 'https://pronombr.es', true, 'ñ', 'romance'),
|
||||||
new LocaleDescription('eo', 'Esperanto', 'https://eo.pronouns.page', false, 'ĥ', 'constructed'),
|
new LocaleDescription('eo', null, 'Esperanto', 'https://eo.pronouns.page', false, 'ĥ', 'constructed'),
|
||||||
new LocaleDescription('en', 'English', 'https://en.pronouns.page', true, 'þ', 'germanic'),
|
new LocaleDescription('en', 'eng', 'English', 'https://en.pronouns.page', true, 'þ', 'germanic'),
|
||||||
new LocaleDescription('et', 'Eesti keel', 'https://et.pronouns.page', true, 'õ', 'finnish'),
|
new LocaleDescription('et', 'est', 'Eesti keel', 'https://et.pronouns.page', true, 'õ', 'finnish'),
|
||||||
new LocaleDescription('fr', 'Français', 'https://pronoms.fr', true, 'ç', 'romance'),
|
new LocaleDescription('fr', 'fre', 'Français', 'https://pronoms.fr', true, 'ç', 'romance'),
|
||||||
// symbol duplicate with spanish
|
new LocaleDescription('gl', 'glc', 'Galego', 'https://gl.pronouns.page', false, 'ñ', 'romance'), // symbol duplicate with spanish
|
||||||
new LocaleDescription('gl', 'Galego', 'https://gl.pronouns.page', false, 'ñ', 'romance'),
|
new LocaleDescription('he', 'heb', 'עברית', 'https://he.pronouns.page', false, 'ע', 'semitic'), // // not entirely sure about the languange family
|
||||||
// not entirely sure about the languange family
|
new LocaleDescription('it', 'ita', 'Italiano', 'https://it.pronouns.page', false, 'à', 'romance'),
|
||||||
new LocaleDescription('he', 'עברית', 'https://he.pronouns.page', false, 'ע', 'semitic'),
|
new LocaleDescription('lad','lno', 'Ladino', 'https://lad.pronouns.page', true, 'ny', 'romance', 'Djudezmo'),
|
||||||
new LocaleDescription('it', 'Italiano', 'https://it.pronouns.page', false, 'à', 'romance'),
|
new LocaleDescription('nl', 'dut', 'Nederlands', 'https://nl.pronouns.page', true, 'ij', 'germanic'),
|
||||||
new LocaleDescription('lad', 'Ladino', 'https://lad.pronouns.page', true, 'ny', 'romance', 'Djudezmo'),
|
new LocaleDescription('no', 'nor', 'Norsk', 'https://no.pronouns.page', true, 'æ', 'germanic', 'Bokmål'), // å might be better, but it's used for swedish
|
||||||
new LocaleDescription('nl', 'Nederlands', 'https://nl.pronouns.page', true, 'ij', 'germanic'),
|
new LocaleDescription('pl', 'pol', 'Polski', 'https://zaimki.pl', true, 'ą', 'slavic'),
|
||||||
// å might be better, but it's used for swedish
|
new LocaleDescription('pt', 'por', 'Português', 'https://pt.pronouns.page', true, 'ã', 'romance'),
|
||||||
new LocaleDescription('no', 'Norsk', 'https://no.pronouns.page', true, 'æ', 'germanic', 'Bokmål'),
|
new LocaleDescription('ro', 'rom', 'Română', 'https://ro.pronouns.page', true, 'ă', 'romance'),
|
||||||
new LocaleDescription('pl', 'Polski', 'https://zaimki.pl', true, 'ą', 'slavic'),
|
new LocaleDescription('sv', 'swe', 'Svenska', 'https://sv.pronouns.page', true, 'å', 'germanic'),
|
||||||
new LocaleDescription('pt', 'Português', 'https://pt.pronouns.page', true, 'ã', 'romance'),
|
new LocaleDescription('tr', 'tur', 'Türkçe', 'https://tr.pronouns.page', false, 'ğ', 'turkic'),
|
||||||
new LocaleDescription('ro', 'Română', 'https://ro.pronouns.page', true, 'ă', 'romance'),
|
new LocaleDescription('vi', 'vie', 'Tiếng Việt', 'https://vi.pronouns.page', true, 'ớ', 'vietic'),
|
||||||
new LocaleDescription('sv', 'Svenska', 'https://sv.pronouns.page', true, 'å', 'germanic'),
|
new LocaleDescription('ar', 'ams', 'العربية', 'https://ar.pronouns.page', true, 'ش', 'semitic', 'الفصحى'),
|
||||||
new LocaleDescription('tr', 'Türkçe', 'https://tr.pronouns.page', false, 'ş', 'turkic'),
|
new LocaleDescription('ru', 'rus', 'Русский', 'https://ru.pronouns.page', true, 'й', 'slavic'),
|
||||||
new LocaleDescription('vi', 'Tiếng Việt', 'https://vi.pronouns.page', true, 'ớ', 'vietic'),
|
new LocaleDescription('ua', 'ukr', 'Українська', 'https://ua.pronouns.page', true, 'ї', 'slavic'),
|
||||||
new LocaleDescription('ar', 'العربية', 'https://ar.pronouns.page', true, 'ش', 'semitic', 'الفصحى'),
|
new LocaleDescription('ja', 'jpn', '日本語', 'https://ja.pronouns.page', true, 'の', 'japonic'),
|
||||||
new LocaleDescription('ru', 'Русский', 'https://ru.pronouns.page', true, 'й', 'slavic'),
|
new LocaleDescription('ko', 'kor', '한국어', 'https://ko.pronouns.page', false, '인', 'koreanic'),
|
||||||
new LocaleDescription('ua', 'Українська', 'https://ua.pronouns.page', true, 'ї', 'slavic'),
|
new LocaleDescription('yi', 'ydd', 'ייִדיש', 'https://yi.pronouns.page', false, 'ש', 'germanic'),
|
||||||
new LocaleDescription('ja', '日本語', 'https://ja.pronouns.page', true, 'の', 'japonic'),
|
new LocaleDescription('zh', 'mnd', '中文', 'https://zh.pronouns.page', true, '人', ''),
|
||||||
new LocaleDescription('ko', '한국어', 'https://ko.pronouns.page', false, '인', 'koreanic'),
|
new LocaleDescription('tok', null, 'toki pona', 'https://tok.pronouns.page', false, '⊡', 'constructed'),
|
||||||
new LocaleDescription('yi', 'ייִדיש', 'https://yi.pronouns.page', false, 'ש', 'germanic'),
|
|
||||||
new LocaleDescription('zh', '中文', 'https://zh.pronouns.page', true, '人', ''),
|
|
||||||
new LocaleDescription('tok', 'toki pona', 'https://tok.pronouns.page', false, '⊡', 'constructed'),
|
|
||||||
];
|
];
|
||||||
|
/* eslint-enable */
|
||||||
|
|||||||
@ -33,6 +33,7 @@ declare module 'vue/types/vue' {
|
|||||||
$translateForPronoun(str: string, pronoun: Pronoun | null): string;
|
$translateForPronoun(str: string, pronoun: Pronoun | null): string;
|
||||||
$locales: Record<string, LocaleDescription>;
|
$locales: Record<string, LocaleDescription>;
|
||||||
$loadScript(name: string, src: string, nonce?: string): Promise<unknown>;
|
$loadScript(name: string, src: string, nonce?: string): Promise<unknown>;
|
||||||
|
$loadStylesheet(name: string, src: string): Promise<unknown>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -102,6 +103,29 @@ const plugin: Plugin = ({ app, store }, inject) => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
inject('loadStylesheet', (name: string, src: string, nonce: string | undefined = undefined): Promise<void> => {
|
||||||
|
// <link rel="stylesheet" href="h"
|
||||||
|
|
||||||
|
if (!process.client || document.querySelectorAll(`link.${name}-stylesheet`).length > 0) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const link = document.createElement('link');
|
||||||
|
link.setAttribute('rel', 'stylesheet');
|
||||||
|
link.setAttribute('href', src);
|
||||||
|
link.classList.add(`${name}-stylesheet`);
|
||||||
|
// script.crossOrigin = 'true'; TODO proper fix (adding it breaks publift)
|
||||||
|
link.addEventListener('load', () => resolve());
|
||||||
|
link.addEventListener('error', (event) => {
|
||||||
|
reject(new LoadScriptError(name, src, typeof event === 'string' ? event : event.type));
|
||||||
|
});
|
||||||
|
document.body.appendChild(link);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
Settings.defaultLocale = app.$config.intlLocale || app.$config.locale;
|
Settings.defaultLocale = app.$config.intlLocale || app.$config.locale;
|
||||||
DateTime.now().toFormat('y-MM-dd HH:mm'); // test if locale is supported by luxon
|
DateTime.now().toFormat('y-MM-dd HH:mm'); // test if locale is supported by luxon
|
||||||
|
|||||||
@ -1,18 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page>
|
||||||
<div class="list-group mt-md-5 py-md-5">
|
<div class="row flex-md-row-reverse">
|
||||||
<a
|
<div class="col-12 col-md-6">
|
||||||
v-for="(options, locale) in $locales"
|
<LanguageMap class="my-4"/>
|
||||||
:key="locale"
|
</div>
|
||||||
:href="options.url"
|
<div class="col-12 col-md-6">
|
||||||
class="list-group-item list-group-item-action list-group-item-hoverable"
|
<div class="list-group my-4">
|
||||||
>
|
<a
|
||||||
<div class="h3">
|
v-for="(options, locale) in $locales"
|
||||||
<LocaleIcon :locale="options" class="mx-2" />
|
:key="locale"
|
||||||
{{ options.name }}
|
:href="options.url"
|
||||||
<small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
|
class="list-group-item list-group-item-action list-group-item-hoverable"
|
||||||
|
>
|
||||||
|
<div class="h3">
|
||||||
|
<LocaleIcon :locale="options" class="mx-2" />
|
||||||
|
{{ options.name }}
|
||||||
|
<small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
@ -28,3 +35,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user