mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-06-21 12:04:27 -05:00
feat: generate locale list on the fly, minor style changes
This commit is contained in:
Ash Monty
Ash Gray
parent
d3958b8891
commit
49b5cf428d
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
.select-box .options-container {
|
||||
max-height: 0;
|
||||
width: fit-content;
|
||||
width: min(90vw, 240px);
|
||||
opacity: 0;
|
||||
transition: all 0.4s;
|
||||
overflow: hidden;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
.select-box .options-container.active {
|
||||
max-height: 240px;
|
||||
max-height: 320px;
|
||||
opacity: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
const util = require('../util');
|
||||
const database = require('../database');
|
||||
const fs = require('fs');
|
||||
const localeFileNames = fs.readdirSync(`${__dirname}/../../locales`);
|
||||
|
||||
async function renderDataMiddleware(request, response, next) {
|
||||
if (request.path.startsWith('/assets')) {
|
||||
|
|
@ -14,6 +16,62 @@ async function renderDataMiddleware(request, response, next) {
|
|||
const reqLocale = request.locale;
|
||||
const locale = util.getLocale(reqLocale.language, reqLocale.region);
|
||||
|
||||
let localeList = localeFileNames.map(locale => {
|
||||
const code = locale.replace('.json', '').replace('_', '-');
|
||||
|
||||
// Check if it's a real language code, or a custom one
|
||||
if (!code.includes('@')) {
|
||||
const enDisp = new Intl.DisplayNames([code], {
|
||||
type: 'language',
|
||||
languageDisplay: 'standard'
|
||||
});
|
||||
const languageName = enDisp.of(code);
|
||||
|
||||
return {
|
||||
code,
|
||||
languageName
|
||||
};
|
||||
} else {
|
||||
switch (code) {
|
||||
case 'en@uwu':
|
||||
return {
|
||||
code,
|
||||
languageName: 'English (lolcat)'
|
||||
};
|
||||
|
||||
default:
|
||||
return {
|
||||
code,
|
||||
languageName: 'Unknown'
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// sort the array alphabetically by languageName while making sure that objects with language codes starting with 'en' are at the top
|
||||
localeList = localeList.sort((a, b) => {
|
||||
if (a.code.startsWith('en') && !b.code.startsWith('en')) {
|
||||
return -1;
|
||||
} else if (!a.code.startsWith('en') && b.code.startsWith('en')) {
|
||||
return 1;
|
||||
} else {
|
||||
return a.languageName.localeCompare(b.languageName);
|
||||
}
|
||||
});
|
||||
|
||||
// move all the objects with language codes containing '@' to the end of the array
|
||||
localeList = localeList.sort((a, b) => {
|
||||
if (a.code.includes('@') && !b.code.includes('@')) {
|
||||
return 1;
|
||||
} else if (!a.code.includes('@') && b.code.includes('@')) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
response.locals.localeList = localeList;
|
||||
|
||||
response.locals.locale = locale;
|
||||
response.locals.localeString = reqLocale.toString();
|
||||
|
||||
|
|
|
|||
|
|
@ -208,141 +208,14 @@
|
|||
<!-- Ordered the locales in the same way Google orders them -->
|
||||
<div class="select-box locale-dropdown" data-dropdown>
|
||||
<div class="options-container">
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="en-US" name="category" />
|
||||
<label for="en-US">
|
||||
<div class="item"><span class="locale-names">English</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ast" name="category" />
|
||||
<label for="ast">
|
||||
<div class="item"><span class="locale-names">Asturianu</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ca-ES" name="category" />
|
||||
<label for="ca-ES">
|
||||
<div class="item"><span class="locale-names">Català</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="cs-CZ" name="category" />
|
||||
<label for="cs-CZ">
|
||||
<div class="item"><span class="locale-names">Čeština</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="de-DE" name="category" />
|
||||
<label for="de-DE">
|
||||
<div class="item"><span class="locale-names">Deutsch</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="es-ES" name="category" />
|
||||
<label for="es-ES">
|
||||
<div class="item"><span class="locale-names">Español</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="fr-FR" name="category" />
|
||||
<label for="fr-FR">
|
||||
<div class="item"><span class="locale-names">Français</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="it-IT" name="category" />
|
||||
<label for="it-IT">
|
||||
<div class="item"><span class="locale-names">Italiano</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="nl-NL" name="category" />
|
||||
<label for="nl-NL">
|
||||
<div class="item"><span class="locale-names">Nederlands</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="nb-NO" name="category" />
|
||||
<label for="nb-NO">
|
||||
<div class="item"><span class="locale-names">Norsk</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="pl-PL" name="category" />
|
||||
<label for="pl-PL">
|
||||
<div class="item"><span class="locale-names">Polski</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="pt-PT" name="category" />
|
||||
<label for="pt-PT">
|
||||
<div class="item"><span class="locale-names">Português</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="pt-BR" name="category" />
|
||||
<label for="pt-BR">
|
||||
<div class="item"><span class="locale-names">Português (Brasil)</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ro-RO" name="category" />
|
||||
<label for="ro-RO">
|
||||
<div class="item"><span class="locale-names">Română</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="tr-TR" name="category" />
|
||||
<label for="tr-TR">
|
||||
<div class="item"><span class="locale-names">Türkçe</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="kk-KZ" name="category" />
|
||||
<label for="kk-KZ">
|
||||
<div class="item"><span class="locale-names">қазақ тілі</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ru-RU" name="category" />
|
||||
<label for="ru-RU">
|
||||
<div class="item"><span class="locale-names">Pусский</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="uk-UA" name="category" />
|
||||
<label for="uk-UA">
|
||||
<div class="item"><span class="locale-names">Yкраї́нська</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ar-AR" name="category" />
|
||||
<label for="ar-AR">
|
||||
<div class="item"><span class="locale-names">اَلْعَرَبِيَّةُ</span></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="zh-CN" name="category" />
|
||||
<label for="zh-CN">
|
||||
<div class="item"><span class="locale-names">中文（简体）</span></div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="zh-Hant" name="category" />
|
||||
<label for="zh-Hant">
|
||||
<div class="item"><span class="locale-names">中文（繁體）</span></div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ja-JP" name="category" />
|
||||
<label for="ja-JP">
|
||||
<div class="item"><span class="locale-names">日本語</span></div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ko-KR" name="category" />
|
||||
<label for="ko-KR">
|
||||
<div class="item"><span class="locale-names">한국어</span></div>
|
||||
</label>
|
||||
</div>
|
||||
{{#each localeList}}
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="{{code}}" name="category" />
|
||||
<label for="{{code}}">
|
||||
<div class="item"><span class="locale-names">{{languageName}}</span></div>
|
||||
</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="locale-dropdown-toggle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user