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 {
|
||||
code: string;
|
||||
walsCode: string | null;
|
||||
name: string;
|
||||
url: string;
|
||||
published: boolean;
|
||||
@ -9,6 +10,7 @@ export class LocaleDescription {
|
||||
|
||||
constructor(
|
||||
code: string,
|
||||
walsCode: string | null,
|
||||
name: string,
|
||||
url: string,
|
||||
published: boolean,
|
||||
@ -17,6 +19,7 @@ export class LocaleDescription {
|
||||
extra: string | null = null,
|
||||
) {
|
||||
this.code = code;
|
||||
this.walsCode = walsCode;
|
||||
this.name = name;
|
||||
this.url = url;
|
||||
this.published = published;
|
||||
@ -26,34 +29,33 @@ export class LocaleDescription {
|
||||
}
|
||||
}
|
||||
|
||||
/* eslint-disable */
|
||||
export default [
|
||||
new LocaleDescription('de', 'Deutsch', 'https://de.pronouns.page', true, 'ß', 'germanic'),
|
||||
new LocaleDescription('es', 'Español', 'https://pronombr.es', true, 'ñ', 'romance'),
|
||||
new LocaleDescription('eo', 'Esperanto', 'https://eo.pronouns.page', false, 'ĥ', 'constructed'),
|
||||
new LocaleDescription('en', 'English', 'https://en.pronouns.page', true, 'þ', 'germanic'),
|
||||
new LocaleDescription('et', 'Eesti keel', 'https://et.pronouns.page', true, 'õ', 'finnish'),
|
||||
new LocaleDescription('fr', 'Français', 'https://pronoms.fr', true, 'ç', 'romance'),
|
||||
// symbol duplicate with spanish
|
||||
new LocaleDescription('gl', 'Galego', 'https://gl.pronouns.page', false, 'ñ', 'romance'),
|
||||
// not entirely sure about the languange family
|
||||
new LocaleDescription('he', 'עברית', 'https://he.pronouns.page', false, 'ע', 'semitic'),
|
||||
new LocaleDescription('it', 'Italiano', 'https://it.pronouns.page', false, 'à', 'romance'),
|
||||
new LocaleDescription('lad', 'Ladino', 'https://lad.pronouns.page', true, 'ny', 'romance', 'Djudezmo'),
|
||||
new LocaleDescription('nl', 'Nederlands', 'https://nl.pronouns.page', true, 'ij', 'germanic'),
|
||||
// å might be better, but it's used for swedish
|
||||
new LocaleDescription('no', 'Norsk', 'https://no.pronouns.page', true, 'æ', 'germanic', 'Bokmål'),
|
||||
new LocaleDescription('pl', 'Polski', 'https://zaimki.pl', true, 'ą', 'slavic'),
|
||||
new LocaleDescription('pt', 'Português', 'https://pt.pronouns.page', true, 'ã', 'romance'),
|
||||
new LocaleDescription('ro', 'Română', 'https://ro.pronouns.page', true, 'ă', 'romance'),
|
||||
new LocaleDescription('sv', 'Svenska', 'https://sv.pronouns.page', true, 'å', 'germanic'),
|
||||
new LocaleDescription('tr', 'Türkçe', 'https://tr.pronouns.page', false, 'ş', 'turkic'),
|
||||
new LocaleDescription('vi', 'Tiếng Việt', 'https://vi.pronouns.page', true, 'ớ', 'vietic'),
|
||||
new LocaleDescription('ar', 'العربية', 'https://ar.pronouns.page', true, 'ش', 'semitic', 'الفصحى'),
|
||||
new LocaleDescription('ru', 'Русский', 'https://ru.pronouns.page', true, 'й', 'slavic'),
|
||||
new LocaleDescription('ua', 'Українська', 'https://ua.pronouns.page', true, 'ї', 'slavic'),
|
||||
new LocaleDescription('ja', '日本語', 'https://ja.pronouns.page', true, 'の', 'japonic'),
|
||||
new LocaleDescription('ko', '한국어', 'https://ko.pronouns.page', false, '인', 'koreanic'),
|
||||
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'),
|
||||
new LocaleDescription('de', 'ger', 'Deutsch', 'https://de.pronouns.page', true, 'ß', 'germanic'),
|
||||
new LocaleDescription('es', 'spa', 'Español', 'https://pronombr.es', true, 'ñ', 'romance'),
|
||||
new LocaleDescription('eo', null, 'Esperanto', 'https://eo.pronouns.page', false, 'ĥ', 'constructed'),
|
||||
new LocaleDescription('en', 'eng', 'English', 'https://en.pronouns.page', true, 'þ', 'germanic'),
|
||||
new LocaleDescription('et', 'est', 'Eesti keel', 'https://et.pronouns.page', true, 'õ', 'finnish'),
|
||||
new LocaleDescription('fr', 'fre', 'Français', 'https://pronoms.fr', true, 'ç', 'romance'),
|
||||
new LocaleDescription('gl', 'glc', 'Galego', 'https://gl.pronouns.page', false, 'ñ', 'romance'), // symbol duplicate with spanish
|
||||
new LocaleDescription('he', 'heb', 'עברית', 'https://he.pronouns.page', false, 'ע', 'semitic'), // // not entirely sure about the languange family
|
||||
new LocaleDescription('it', 'ita', 'Italiano', 'https://it.pronouns.page', false, 'à', 'romance'),
|
||||
new LocaleDescription('lad','lno', 'Ladino', 'https://lad.pronouns.page', true, 'ny', 'romance', 'Djudezmo'),
|
||||
new LocaleDescription('nl', 'dut', 'Nederlands', 'https://nl.pronouns.page', true, 'ij', 'germanic'),
|
||||
new LocaleDescription('no', 'nor', 'Norsk', 'https://no.pronouns.page', true, 'æ', 'germanic', 'Bokmål'), // å might be better, but it's used for swedish
|
||||
new LocaleDescription('pl', 'pol', 'Polski', 'https://zaimki.pl', true, 'ą', 'slavic'),
|
||||
new LocaleDescription('pt', 'por', 'Português', 'https://pt.pronouns.page', true, 'ã', 'romance'),
|
||||
new LocaleDescription('ro', 'rom', 'Română', 'https://ro.pronouns.page', true, 'ă', 'romance'),
|
||||
new LocaleDescription('sv', 'swe', 'Svenska', 'https://sv.pronouns.page', true, 'å', 'germanic'),
|
||||
new LocaleDescription('tr', 'tur', 'Türkçe', 'https://tr.pronouns.page', false, 'ğ', 'turkic'),
|
||||
new LocaleDescription('vi', 'vie', 'Tiếng Việt', 'https://vi.pronouns.page', true, 'ớ', 'vietic'),
|
||||
new LocaleDescription('ar', 'ams', 'العربية', 'https://ar.pronouns.page', true, 'ش', 'semitic', 'الفصحى'),
|
||||
new LocaleDescription('ru', 'rus', 'Русский', 'https://ru.pronouns.page', true, 'й', 'slavic'),
|
||||
new LocaleDescription('ua', 'ukr', 'Українська', 'https://ua.pronouns.page', true, 'ї', 'slavic'),
|
||||
new LocaleDescription('ja', 'jpn', '日本語', 'https://ja.pronouns.page', true, 'の', 'japonic'),
|
||||
new LocaleDescription('ko', 'kor', '한국어', 'https://ko.pronouns.page', false, '인', 'koreanic'),
|
||||
new LocaleDescription('yi', 'ydd', 'ייִדיש', 'https://yi.pronouns.page', false, 'ש', 'germanic'),
|
||||
new LocaleDescription('zh', 'mnd', '中文', 'https://zh.pronouns.page', true, '人', ''),
|
||||
new LocaleDescription('tok', null, '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;
|
||||
$locales: Record<string, LocaleDescription>;
|
||||
$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 {
|
||||
Settings.defaultLocale = app.$config.intlLocale || app.$config.locale;
|
||||
DateTime.now().toFormat('y-MM-dd HH:mm'); // test if locale is supported by luxon
|
||||
|
||||
@ -1,18 +1,25 @@
|
||||
<template>
|
||||
<Page>
|
||||
<div class="list-group mt-md-5 py-md-5">
|
||||
<a
|
||||
v-for="(options, locale) in $locales"
|
||||
:key="locale"
|
||||
:href="options.url"
|
||||
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 class="row flex-md-row-reverse">
|
||||
<div class="col-12 col-md-6">
|
||||
<LanguageMap class="my-4"/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="list-group my-4">
|
||||
<a
|
||||
v-for="(options, locale) in $locales"
|
||||
:key="locale"
|
||||
:href="options.url"
|
||||
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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
@ -28,3 +35,5 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user