mirror of
https://github.com/welpo/tabi.git
synced 2025-10-11 15:56:15 +02:00
pluralize search result strings
This commit is contained in:
welpo
parent
de3a2d7b21
commit
a2d01ff8da
3 changed files with 83 additions and 22 deletions
|
|
@ -2575,13 +2575,28 @@ window.onload = function () {
|
|||
return;
|
||||
}
|
||||
|
||||
const results = document.getElementById('results');
|
||||
const lang = document.documentElement.lang;
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const searchModal = document.getElementById('searchModal');
|
||||
const searchButton = document.getElementById('search-button');
|
||||
const nResultsSpan = document.getElementById('n-results');
|
||||
const clearSearchButton = document.getElementById('clear-search');
|
||||
const resultsContainer = document.getElementById('results-container');
|
||||
const results = document.getElementById('results');
|
||||
// Get all spans holding the translated strings, even if they are only used on one language.
|
||||
const zeroResultsSpan = document.getElementById('zero_results');
|
||||
const oneResultsSpan = document.getElementById('one_results');
|
||||
const twoResultsSpan = document.getElementById('two_results');
|
||||
const fewResultsSpan = document.getElementById('few_results');
|
||||
const manyResultsSpan = document.getElementById('many_results');
|
||||
|
||||
// Static mapping of keys to spans.
|
||||
const resultSpans = {
|
||||
zero_results: zeroResultsSpan,
|
||||
one_results: oneResultsSpan,
|
||||
two_results: twoResultsSpan,
|
||||
few_results: fewResultsSpan,
|
||||
many_results: manyResultsSpan,
|
||||
};
|
||||
|
||||
// Replace $SHORTCUT in search icon title with actual OS-specific shortcut.
|
||||
function getShortcut() {
|
||||
|
|
@ -2658,7 +2673,6 @@ window.onload = function () {
|
|||
function clearSearch() {
|
||||
searchInput.value = '';
|
||||
results.innerHTML = '';
|
||||
nResultsSpan.textContent = '0';
|
||||
resultsContainer.style.display = 'none';
|
||||
searchInput.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
|
|
@ -3006,21 +3020,68 @@ window.onload = function () {
|
|||
);
|
||||
|
||||
function updateResultText(count) {
|
||||
const nResultsSpan = document.getElementById('n-results');
|
||||
nResultsSpan.textContent = count.toString();
|
||||
// Determine the correct pluralization key based on count and language.
|
||||
const pluralizationKey = getPluralizationKey(count, lang);
|
||||
|
||||
const singular = document.getElementById('result-text-singular');
|
||||
const plural = document.getElementById('result-text-plural');
|
||||
// Hide all result text spans.
|
||||
Object.values(resultSpans).forEach((span) => {
|
||||
if (span) span.style.display = 'none';
|
||||
});
|
||||
|
||||
if (count === 1) {
|
||||
singular.style.display = 'inline';
|
||||
plural.style.display = 'none';
|
||||
} else {
|
||||
singular.style.display = 'none';
|
||||
plural.style.display = 'inline';
|
||||
// Show the relevant result text span, replacing $NUMBER with the actual count.
|
||||
const activeSpan = resultSpans[pluralizationKey];
|
||||
if (activeSpan) {
|
||||
activeSpan.style.display = 'inline';
|
||||
activeSpan.textContent = activeSpan.textContent.replace(
|
||||
'$NUMBER',
|
||||
count.toString()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getPluralizationKey(count, lang) {
|
||||
let key = '';
|
||||
const slavicLangs = ['uk', 'be', 'bs', 'hr', 'ru', 'sr'];
|
||||
|
||||
// Common cases: zero, one.
|
||||
if (count === 0) {
|
||||
key = 'zero_results';
|
||||
} else if (count === 1) {
|
||||
key = 'one_results';
|
||||
} else {
|
||||
// Arabic.
|
||||
if (lang === 'ar') {
|
||||
let modulo = count % 100;
|
||||
if (count === 2) {
|
||||
key = 'two_results';
|
||||
} else if (modulo >= 3 && modulo <= 10) {
|
||||
key = 'few_results';
|
||||
} else {
|
||||
key = 'many_results';
|
||||
}
|
||||
} else if (slavicLangs.includes(lang)) {
|
||||
// Slavic languages.
|
||||
let modulo10 = count % 10;
|
||||
let modulo100 = count % 100;
|
||||
if (modulo10 === 1 && modulo100 !== 11) {
|
||||
key = 'one_results';
|
||||
} else if (
|
||||
modulo10 >= 2 &&
|
||||
modulo10 <= 4 &&
|
||||
!(modulo100 >= 12 && modulo100 <= 14)
|
||||
) {
|
||||
key = 'few_results';
|
||||
} else {
|
||||
key = 'many_results';
|
||||
}
|
||||
} else {
|
||||
key = 'many_results'; // Default plural.
|
||||
}
|
||||
}
|
||||
|
||||
return key;
|
||||
}
|
||||
|
||||
function setupTouchEvents() {
|
||||
const resultDivs = document.querySelectorAll('#results > div');
|
||||
resultDivs.forEach((div) => {
|
||||
|
|
|
|||
2
static/js/searchElasticlunr.min.js
vendored
2
static/js/searchElasticlunr.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -15,15 +15,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="results-container">
|
||||
<!--
|
||||
#TODO(@welpo): This the javascript section I think
|
||||
so I'll leave it for you to handle.
|
||||
#NOTE(@welpo): The `key` is "results" for all
|
||||
(take a look at `i18n/en.toml` in the `results` section)
|
||||
-->
|
||||
<div id="results-info">
|
||||
<span id="n-results">0</span> <span id="result-text-singular">{{ macros_translate::translate(key='result', default='result', language_strings=language_strings) }}</span>
|
||||
<span id="result-text-plural">{{ macros_translate::translate(key='results', default='results', language_strings=language_strings) }}</span>
|
||||
{#- Add the strings here so JavaScript can grab them -#}
|
||||
{#- These are used in all languages -#}
|
||||
<span id="zero_results"> {{ macros_translate::translate(key='results', number=0, default='No results', language_strings=language_strings, replace=false) }}</span>
|
||||
<span id="one_results"> {{ macros_translate::translate(key='results', number=1, default='1 result', language_strings=language_strings, replace=false) }}</span>
|
||||
<span id="many_results"> {{ macros_translate::translate(key='results', number=11, default='$NUMBER results', language_strings=language_strings, replace=false) }}</span>
|
||||
{#- Strings for specific languages -#}
|
||||
<span id="two_results"> {{ macros_translate::translate(key='results', number=2, default='$NUMBER results', language_strings=language_strings, replace=false) }}</span>
|
||||
<span id="few_results"> {{ macros_translate::translate(key='results', number=2, default='$NUMBER results', language_strings=language_strings, replace=false) }}</span>
|
||||
</div>
|
||||
<div id="results" role="listbox"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue