mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +02:00
Allow overriding language string for removing an item
This commit is contained in:
parent
cbaf43232c
commit
bf705a186e
|
@ -129,6 +129,7 @@ Or include Choices directly:
|
|||
loadingText: 'Loading...',
|
||||
noResultsText: 'No results found',
|
||||
noChoicesText: 'No choices to choose from',
|
||||
removeItemText: 'Remove item',
|
||||
itemSelectText: 'Press to select',
|
||||
addItemText: (value) => {
|
||||
return `Press Enter to add <b>"${value}"</b>`;
|
||||
|
|
|
@ -981,7 +981,12 @@ class Choices {
|
|||
|
||||
const addItemToFragment = (item: Item): void => {
|
||||
// Create new list element
|
||||
const listItem = this._getTemplate('item', item, removeItemButton);
|
||||
const listItem = this._getTemplate(
|
||||
'item',
|
||||
item,
|
||||
removeItemButton,
|
||||
this.config.removeItemText,
|
||||
);
|
||||
// Append it to list
|
||||
fragment.appendChild(listItem);
|
||||
};
|
||||
|
|
|
@ -69,6 +69,7 @@ export const DEFAULT_CONFIG: Options = {
|
|||
loadingText: 'Loading...',
|
||||
noResultsText: 'No results found',
|
||||
noChoicesText: 'No choices to choose from',
|
||||
removeItemText: 'Remove item',
|
||||
itemSelectText: 'Press to select',
|
||||
uniqueItemText: 'Only unique values can be added',
|
||||
customAddItemText: 'Only values matching specific conditions can be added',
|
||||
|
|
|
@ -631,6 +631,15 @@ export interface Options {
|
|||
*/
|
||||
noChoicesText: string | Types.stringFunction;
|
||||
|
||||
/**
|
||||
* The text that is used in the aria-label of the remove button.
|
||||
*
|
||||
* **Input types affected:** select-multiple
|
||||
*
|
||||
* @default 'Remove item'
|
||||
*/
|
||||
removeItemText: string | Types.stringFunction;
|
||||
|
||||
/**
|
||||
* The text that is shown when a user hovers over a selectable choice.
|
||||
*
|
||||
|
|
|
@ -94,6 +94,7 @@ const templates = {
|
|||
placeholder: isPlaceholder,
|
||||
}: Item,
|
||||
removeItemButton: boolean,
|
||||
removeItemText: string,
|
||||
): HTMLDivElement {
|
||||
const div = Object.assign(document.createElement('div'), {
|
||||
className: item,
|
||||
|
@ -126,17 +127,13 @@ const templates = {
|
|||
div.classList.remove(itemSelectable);
|
||||
}
|
||||
div.dataset.deletable = '';
|
||||
/** @todo This MUST be localizable, not hardcoded! */
|
||||
const REMOVE_ITEM_TEXT = 'Remove item';
|
||||
|
||||
const removeButton = Object.assign(document.createElement('button'), {
|
||||
type: 'button',
|
||||
className: button,
|
||||
innerHTML: REMOVE_ITEM_TEXT,
|
||||
innerHTML: removeItemText,
|
||||
});
|
||||
removeButton.setAttribute(
|
||||
'aria-label',
|
||||
`${REMOVE_ITEM_TEXT}: '${value}'`,
|
||||
);
|
||||
removeButton.setAttribute('aria-label', `${removeItemText}: '${value}'`);
|
||||
removeButton.dataset.button = '';
|
||||
div.appendChild(removeButton);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue