ui_elements_userLocale.mjs
/**
Exports the default userLocale element method as mapp.ui.elements.userLocale().
@module ui/elements/userLocale
*/
/**
@function userLocale
@description
Returns a panel with an input field to define the userlocale name and buttons to either put (create or overwrite) a stored userlocale or delete a stored userlocale.
The panel will be disabled during the transaction to save or remove a user locale.
@param {Object} params The userLocale config from the locale.
@param {Object} mapview The mapview object.
@returns {HTMLElement} The panel element containing the userLocale interface.
*/
export default function userLocale(params, mapview) {
params.localeInput = mapp.utils.html.node`<input
type="text" value="${decodeURIComponent(mapview.locale.name) || mapview.locale.key}">`;
params.ulLocales = mapp.utils.html.node`<div class="user-locales">`;
params.panel = mapp.utils.html.node`
<div>
<p>${mapp.dictionary.user_locale_specific}</p>
<p>${mapp.dictionary.user_locale_context}</p>
<br>
<h3>${mapp.dictionary.user_locale_save}</h3>
<div style="display:flex;">${params.localeInput}
<button style="font-size: 1.5em;"
onclick=${async () => await saveLocale(params, mapview)}>
<span class="material-symbols-outlined">save</span>
</button>
</div>
<h3>${mapp.dictionary.user_locale_desc}</h3>
${params.ulLocales}`;
// Call the listLocales method to render the list of userlocales.
listLocales(params, mapview);
// Return the panel as content to be displayed.
return params.panel;
}
/**
@function removeLocale
@description
The removeLocale method removes the userlocale from the mapview and calls the listLocales method to update the list of userlocales.
@param {Object} params The userLocale config from the locale.
@param {Object} mapview The mapview object.
@param {string} locale_name The name of the userlocale to be removed.
*/
async function removeLocale(params, mapview, locale_name) {
params.panel.classList.add('disabled');
mapview.locale.name = locale_name;
await mapp.utils.userLocale.remove(mapview.locale);
listLocales(params, mapview);
params.panel.classList.remove('disabled');
}
/**
@function saveLocale
@description
The saveLocale method saves the userlocale to the mapview and calls the listLocales method to update the list of userlocales.
*/
async function saveLocale(params, mapview) {
params.panel.classList.add('disabled');
mapview.locale.name = encodeURIComponent(params.localeInput.value);
const response = await mapp.utils.userLocale.putLocale(mapview);
if (response === mapview.locale.name) {
listLocales(params, mapview);
params.panel.classList.remove('disabled');
}
}
/**
@function listLocales
@description
The listlocales method requests an array of userlocales keys and names from the userLocale.list utility method and renders a list of links for these userLocale.
The list includes a delete button for each userLocale, which when clicked will remove the userLocale from the mapview and update the list of userlocales.
*/
async function listLocales(params, mapview) {
const locales = await mapp.utils.userLocale.list(mapview.locale.workspace);
const list = locales.map((locale) => {
const href = `${mapp.host}?locale=${locale.key}&userlocale=${encodeURIComponent(locale.name)}`;
const removeBtn = mapp.utils.html`<button
onclick=${async (e) => await removeLocale(params, mapview, locale.name)}>
<span class="material-symbols-outlined">delete</span>
</button>`;
return mapp.utils
.html`<li>${removeBtn}<a href=${href}>${decodeURIComponent(locale.name)}`;
});
mapp.utils.render(params.ulLocales, mapp.utils.html`<ul>${list}`);
}