return (items: I[]) => {
const chunks = Arr.chunk(items, numColumns);
return Arr.map(chunks, (c) => ({
dom: rowDom,
components: c
}));
};
const setContents = (comp, items) => {
const htmlLines = Arr.map(items, (item) => {
const textContent = spec.columns === 1 ? `<div class="tox-collection__item-label">${item.text}</div>` : '';
const iconContent = `<div class="tox-collection__item-icon">${item.icon}</div>`;
// Replacing the hyphens and underscores in collection items with spaces
// to ensure the screen readers pronounce the words correctly.
// This is only for aria purposes. Emoticon and Special Character names will still use _ and - for autocompletion.
const mapItemName = {
'_': ' ',
' - ': ' ',
'-': ' '
};
// Title attribute is added here to provide tooltips which might be helpful to sighted users.
// Using aria-label here overrides the Apple description of emojis and special characters in Mac/ MS description in Windows.
// But if only the title attribute is used instead, the names are read out twice. i.e., the description followed by the item.text.
const ariaLabel = item.text.replace(/\_| \- |\-/g, (match) => {
return mapItemName[match];
});
return `<div class="tox-collection__item" tabindex="-1" data-collection-item-value="${escapeAttribute(item.value)}" title="${ariaLabel}" aria-label="${ariaLabel}">${iconContent}${textContent}</div>`;
});
const chunks = spec.columns > 1 && spec.columns !== 'auto' ? Arr.chunk(htmlLines, spec.columns) : [ htmlLines ];
const html = Arr.map(chunks, (ch) => {
return `<div class="tox-collection__group">${ch.join('')}</div>`;
});
Html.set(comp.element(), html.join(''));
};