125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
import { customStylesFormat, nativeOptionMultiple } from '../utils/utils';
|
|
import { ICreateBreadCrumb } from './create-element.interface';
|
|
|
|
/**
|
|
* The method that creates the native select.
|
|
* @returns {HTMLSelectElement} Returns the created native select.
|
|
*/
|
|
export function createNativeSelect(): HTMLSelectElement {
|
|
const nativeSelect = document.createElement('select');
|
|
|
|
nativeSelect.setAttribute('name', 'dataSelect');
|
|
nativeSelect.classList.add('nativeSelect');
|
|
return nativeSelect;
|
|
}
|
|
|
|
/**
|
|
* The method that creates Options for the native select.
|
|
* @returns {HTMLOptionElement} Returns the generated Options of the native select.
|
|
*/
|
|
export function createNativeSelectOption(): HTMLOptionElement {
|
|
const nativeOption = document.createElement('option');
|
|
|
|
nativeOption.classList.add('nativeSelect__nativeOption');
|
|
return nativeOption;
|
|
}
|
|
|
|
/**
|
|
* The method that creates and is responsible for the behavior of the chips.
|
|
* @param {ICreateBreadCrumb} data an object that contains settings and select elements.
|
|
* @param {string} title the name of the selected element to draw chips.
|
|
* @param {number} index index of the selected item to draw chips.
|
|
* @param {string} id unique id of the selected element.
|
|
* @returns {HTMLElement} returns the generated HTMLElement chips item.
|
|
*/
|
|
export function createBreadCrumb(
|
|
data: ICreateBreadCrumb,
|
|
title: string,
|
|
index: number,
|
|
id: string,
|
|
): HTMLLIElement {
|
|
const { element, option, indexes, selectedItems } = data;
|
|
const { placeholder, styles } = option;
|
|
|
|
const selected: HTMLElement | null | undefined = element?.querySelector('.selected');
|
|
const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
|
|
|
|
const liChip = document.createElement('li');
|
|
const textNode = document.createTextNode(title);
|
|
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
|
|
svgIcon.setAttribute('viewBox', '0 0 10 10');
|
|
path1.setAttribute('d', 'M3,7 L7,3');
|
|
path2.setAttribute('d', 'M3,3 L7,7');
|
|
liChip.setAttribute('id', `tag-${index}-${id}`);
|
|
|
|
svgIcon.classList.add('svg-icon');
|
|
|
|
svgIcon.appendChild(path1);
|
|
svgIcon.appendChild(path2);
|
|
liChip.appendChild(textNode);
|
|
liChip.appendChild(svgIcon);
|
|
|
|
if (styles) {
|
|
const { chips } = styles;
|
|
customStylesFormat(chips!, liChip);
|
|
}
|
|
|
|
svgIcon.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
nativeOptionMultiple(nativeOption, title, false);
|
|
|
|
const deleteIcon = indexes.indexOf(index);
|
|
let checkBox: any;
|
|
|
|
indexes.splice(deleteIcon, 1);
|
|
selectedItems.splice(deleteIcon, 1);
|
|
|
|
if (id) {
|
|
checkBox = document.getElementById(`chbox-${id}`);
|
|
} else {
|
|
checkBox = document.getElementById(`chbox-${index}`);
|
|
}
|
|
|
|
checkBox.checked = false;
|
|
checkBox.parentElement.classList.remove('active');
|
|
|
|
if (!selectedItems.length) {
|
|
selected!.innerText = placeholder!;
|
|
}
|
|
|
|
liChip.parentElement!.removeChild(liChip);
|
|
});
|
|
|
|
return liChip;
|
|
}
|
|
|
|
/**
|
|
* The method that creates a search for elements in the select.
|
|
* @param {string} random unique value for input element.
|
|
* @param {string} lenguage text in specific language passed from language.ts file
|
|
* @returns {HTMLInputElement} Returns the rendered input element.
|
|
*/
|
|
export function createInputSearch(random: string, lenguage: string): HTMLInputElement {
|
|
const inputSearch = document.createElement('input');
|
|
|
|
inputSearch.type = 'text';
|
|
inputSearch.classList.add('inputSearch');
|
|
inputSearch.setAttribute('id', `searchSelect-${random}`);
|
|
|
|
if (lenguage) {
|
|
inputSearch.setAttribute('placeholder', `${lenguage}`);
|
|
} else {
|
|
inputSearch.setAttribute('placeholder', 'Search...');
|
|
}
|
|
|
|
inputSearch.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
return inputSearch;
|
|
}
|