892 lines
37 KiB
JavaScript
892 lines
37 KiB
JavaScript
|
require("./index.css");
|
||
|
|
|
||
|
|
function $parcel$defineInteropFlag(a) {
|
||
|
|
Object.defineProperty(a, '__esModule', {value: true, configurable: true});
|
||
|
|
}
|
||
|
|
function $parcel$export(e, n, v, s) {
|
||
|
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
||
|
|
}
|
||
|
|
|
||
|
|
$parcel$defineInteropFlag(module.exports);
|
||
|
|
|
||
|
|
$parcel$export(module.exports, "default", () => $43d7963e56408b24$export$2e2bcd8739ae039);
|
||
|
|
function $5aca7c389be45fd0$export$b2e1d36bc0be1b2f(dataItem, index) {
|
||
|
|
const random = Math.random().toString(36).substring(2, 10);
|
||
|
|
let item;
|
||
|
|
if ($5aca7c389be45fd0$export$5c0c8aabba12399d(dataItem)) return dataItem;
|
||
|
|
else {
|
||
|
|
item = {
|
||
|
|
id: random,
|
||
|
|
title: dataItem,
|
||
|
|
value: index
|
||
|
|
};
|
||
|
|
return item;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$11380eda3eb06ca9(data, select) {
|
||
|
|
const { placeholder: placeholder , selected: selected } = data;
|
||
|
|
if (placeholder) select.innerText = placeholder;
|
||
|
|
else if (selected) select.innerText = selected;
|
||
|
|
else select.innerText = "Select...";
|
||
|
|
return select;
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$5c0c8aabba12399d(item) {
|
||
|
|
if (item && typeof item !== "object") return false;
|
||
|
|
return item.hasOwnProperty("id") && item.hasOwnProperty("title") && item.hasOwnProperty("value");
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$31b5fa56cc6048cb(element, content, styles) {
|
||
|
|
const select = document.createElement("div");
|
||
|
|
const selected = document.createElement("p");
|
||
|
|
const caret = document.createElement("div");
|
||
|
|
select.classList.add("cg-select");
|
||
|
|
select.classList.add("classicSelect");
|
||
|
|
selected.classList.add("selected");
|
||
|
|
caret.classList.add("caret");
|
||
|
|
select.appendChild(selected);
|
||
|
|
select.appendChild(caret);
|
||
|
|
if (content) {
|
||
|
|
const text = document.createTextNode(content);
|
||
|
|
selected.appendChild(text);
|
||
|
|
element.innerHTML = "";
|
||
|
|
element?.insertAdjacentElement("afterbegin", select);
|
||
|
|
} else if (styles) {
|
||
|
|
$5aca7c389be45fd0$export$edf5b2501a573922(element, styles);
|
||
|
|
select.setAttribute("style", `${styles}`);
|
||
|
|
selected.setAttribute("style", `${styles}`);
|
||
|
|
caret.setAttribute("style", `${styles}`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$4474211a0591e3fe(select, element, dataSelectText) {
|
||
|
|
const { selectedItems: selectedItems , indexes: indexes , theme: theme , multiselectTag: multiselectTag } = dataSelectText;
|
||
|
|
const options = element.querySelectorAll(".list__item");
|
||
|
|
const nativeOption = element.querySelectorAll(".nativeSelect__nativeOption");
|
||
|
|
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");
|
||
|
|
const checkBox = element.querySelectorAll("li input");
|
||
|
|
svgIcon.setAttribute("viewBox", "0 0 10 10");
|
||
|
|
path1.setAttribute("d", "M2,8 L8,2");
|
||
|
|
path2.setAttribute("d", "M2,2 L8,8");
|
||
|
|
svgIcon.appendChild(path1);
|
||
|
|
svgIcon.appendChild(path2);
|
||
|
|
if (multiselectTag && multiselectTag == true) return;
|
||
|
|
switch(theme){
|
||
|
|
case "dark":
|
||
|
|
path1.classList.add("pathWhite");
|
||
|
|
path2.classList.add("pathWhite");
|
||
|
|
break;
|
||
|
|
case "white":
|
||
|
|
path1.classList.add("pathBlack");
|
||
|
|
path2.classList.add("pathBlack");
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
path1.classList.add("pathWhite");
|
||
|
|
path2.classList.add("pathWhite");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
svgIcon.classList.add("svg-icon");
|
||
|
|
svgIcon.classList.add("svg-clear");
|
||
|
|
select.appendChild(svgIcon);
|
||
|
|
svgIcon.addEventListener("click", (e)=>{
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
select.innerText = "";
|
||
|
|
nativeOption.forEach((option)=>{
|
||
|
|
option.removeAttribute("selected");
|
||
|
|
});
|
||
|
|
if (Array.isArray(selectedItems)) {
|
||
|
|
selectedItems.splice(0);
|
||
|
|
indexes.splice(0);
|
||
|
|
}
|
||
|
|
checkBox.forEach((item)=>{
|
||
|
|
if (item instanceof HTMLInputElement) item.checked = false;
|
||
|
|
});
|
||
|
|
$5aca7c389be45fd0$export$11380eda3eb06ca9(dataSelectText, select);
|
||
|
|
options.forEach((option)=>{
|
||
|
|
option.classList.remove("active");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$668f6560249913a1(element, item) {
|
||
|
|
element.forEach((option)=>{
|
||
|
|
option.removeAttribute("selected");
|
||
|
|
if (option.textContent === item) option.setAttribute("selected", "selected");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$a240606f327b3da2(element, item, condition) {
|
||
|
|
element.forEach((option)=>{
|
||
|
|
if (condition == true) {
|
||
|
|
if (option.textContent === item) option.setAttribute("selected", "selected");
|
||
|
|
} else if (condition == false) {
|
||
|
|
if (option.textContent === item) option.removeAttribute("selected");
|
||
|
|
} else return;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$edf5b2501a573922(element, styles) {
|
||
|
|
const cgSelect = element.querySelector(".cg-select");
|
||
|
|
const caretSelect = element.querySelector(".caret");
|
||
|
|
const placeholderSelect = element.querySelector(".selected");
|
||
|
|
const lableItem = element.parentElement.querySelector("h1.label");
|
||
|
|
$5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.head, cgSelect);
|
||
|
|
$5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.caret, caretSelect);
|
||
|
|
$5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.lable, lableItem);
|
||
|
|
if (placeholderSelect) $5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.placeholder, placeholderSelect);
|
||
|
|
}
|
||
|
|
function $5aca7c389be45fd0$export$5f8f940a0de3e7d(elemOption, selector) {
|
||
|
|
if (elemOption) Object.entries(elemOption).forEach(([key, value])=>{
|
||
|
|
selector.style[key] = value;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function $3e0e9117e5437319$export$dfb0baf35876628e() {
|
||
|
|
const nativeSelect = document.createElement("select");
|
||
|
|
nativeSelect.setAttribute("name", "dataSelect");
|
||
|
|
nativeSelect.classList.add("nativeSelect");
|
||
|
|
return nativeSelect;
|
||
|
|
}
|
||
|
|
function $3e0e9117e5437319$export$401096e4c8c5bfbe() {
|
||
|
|
const nativeOption = document.createElement("option");
|
||
|
|
nativeOption.classList.add("nativeSelect__nativeOption");
|
||
|
|
return nativeOption;
|
||
|
|
}
|
||
|
|
function $3e0e9117e5437319$export$94c1ad1d6db6a1d0(data, title, index, id) {
|
||
|
|
const { element: element , option: option , indexes: indexes , selectedItems: selectedItems } = data;
|
||
|
|
const { placeholder: placeholder , styles: styles } = option;
|
||
|
|
const selected = 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: chips } = styles;
|
||
|
|
(0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(chips, liChip);
|
||
|
|
}
|
||
|
|
svgIcon.addEventListener("click", (event)=>{
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
(0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, title, false);
|
||
|
|
const deleteIcon = indexes.indexOf(index);
|
||
|
|
let checkBox;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
function $3e0e9117e5437319$export$3ffa48e55176070e(random, lenguage) {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const $356528c60e5e24f4$export$cf48009033a0126b = {
|
||
|
|
selectPlaceholder: "Выберите элемент...",
|
||
|
|
placeholder: "Поиск...",
|
||
|
|
textInListSearch: "Совпадений нет..."
|
||
|
|
};
|
||
|
|
const $356528c60e5e24f4$export$84584c2a98eb6753 = {
|
||
|
|
selectPlaceholder: "Select element...",
|
||
|
|
placeholder: "Search...",
|
||
|
|
textInListSearch: "No matches..."
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function $e3e030f05caf96c0$export$e6eb54368342cb84(element, theme) {
|
||
|
|
const select = element.querySelector(".cg-select");
|
||
|
|
const caret = element.querySelector(".caret");
|
||
|
|
const list = element.querySelector("ul.list");
|
||
|
|
const search = element.querySelector(".inputSearch");
|
||
|
|
const path = element.querySelectorAll(".pathWhite");
|
||
|
|
const nativeSelect = element.querySelector(".nativeSelect");
|
||
|
|
select.classList.remove("classicSelect");
|
||
|
|
list.classList.remove("classicList");
|
||
|
|
path.forEach((elem)=>{
|
||
|
|
elem.classList.remove("pathBlack");
|
||
|
|
elem.classList.remove("pathWhite");
|
||
|
|
});
|
||
|
|
if (typeof theme === "string") switch(theme){
|
||
|
|
case "dark":
|
||
|
|
select.classList.add("selectDark");
|
||
|
|
list.classList.add("listDark");
|
||
|
|
nativeSelect?.classList.add("listDark");
|
||
|
|
path.forEach((elem)=>{
|
||
|
|
elem.classList.add("pathWhite");
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case "white":
|
||
|
|
select.classList.add("selectWhite");
|
||
|
|
caret.classList.add("caretWhite");
|
||
|
|
list.classList.add("listWhite");
|
||
|
|
nativeSelect?.classList.add("listWhite");
|
||
|
|
path.forEach((elem)=>{
|
||
|
|
elem.classList.add("pathBlack");
|
||
|
|
});
|
||
|
|
if (search) search.classList.add("inputWhite");
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
select.classList.add("classicSelect");
|
||
|
|
list.classList.add("classicList");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
select.classList.add(`${theme.styles.head}`);
|
||
|
|
list.classList.add(`${theme.styles.list}`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
class $adaec01e28cd9884$export$ba2c4ca7a0a16031 {
|
||
|
|
/**
|
||
|
|
* Array of indexes of selected elements.
|
||
|
|
* @type {number[]}
|
||
|
|
*/ indexes = [];
|
||
|
|
/**
|
||
|
|
* @param {ICgSelect} setting Object accepting select settings.
|
||
|
|
* @constructor ICgSelect class constructor.
|
||
|
|
* @description The constructor takes an object and renders the select.
|
||
|
|
* @example
|
||
|
|
* options = {
|
||
|
|
* selector: 'Unique selector',
|
||
|
|
selected: 'Selected item',
|
||
|
|
placeholder: '...',
|
||
|
|
label: '...'
|
||
|
|
items: [string|number|object],
|
||
|
|
theme: string,
|
||
|
|
searchMode: true/false,
|
||
|
|
closeOnSelect: true/false,
|
||
|
|
nativeSelectMode: true/false,
|
||
|
|
listDisplayMode: true/false,
|
||
|
|
language: 'ru/en',
|
||
|
|
styles: {
|
||
|
|
head: {
|
||
|
|
background: '...',
|
||
|
|
},
|
||
|
|
list: {...},
|
||
|
|
chips: {...},
|
||
|
|
carriage: {...},
|
||
|
|
placeholder: {...},
|
||
|
|
label: {..},
|
||
|
|
},
|
||
|
|
event: '...',
|
||
|
|
url: 'http/...',
|
||
|
|
multiselect: true/false,
|
||
|
|
multiselectTag: true/false,
|
||
|
|
* }
|
||
|
|
*/ constructor(setting){
|
||
|
|
this.init(setting);
|
||
|
|
this.render();
|
||
|
|
this.closeSelectClick();
|
||
|
|
this.initEvent();
|
||
|
|
}
|
||
|
|
//Getters
|
||
|
|
/**
|
||
|
|
* @returns {string[] | string} Returns the selected element(s) as an array / element / null.
|
||
|
|
* @description Getter returning the selected element(s) of the select.
|
||
|
|
*/ get value() {
|
||
|
|
return this.selectedItems ?? null;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @returns {number | number[]} Returns the indices of the selected element(s) as an array / empty array.
|
||
|
|
* @description A getter that returns the indexes of the selected element(s) of the select.
|
||
|
|
*/ get indexesOf() {
|
||
|
|
return this.indexes ?? [];
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Private method for initializing an instance of the ICgSelect class.
|
||
|
|
* @method init
|
||
|
|
* @member
|
||
|
|
* @private
|
||
|
|
* @param {ISgSelect} setting passed select settings.
|
||
|
|
* @description Private method. General initialization of the select. Obtaining tinctures and converting select elements.
|
||
|
|
* @example
|
||
|
|
* {
|
||
|
|
selector: '.cg-dropdown_one',
|
||
|
|
placeholder: 'Choose a car',
|
||
|
|
items: [
|
||
|
|
'BMW',
|
||
|
|
{
|
||
|
|
id: '213sade',
|
||
|
|
title: 'Opel',
|
||
|
|
value: 1,
|
||
|
|
},
|
||
|
|
'Mersedes',
|
||
|
|
'MAN',
|
||
|
|
'max',
|
||
|
|
],
|
||
|
|
multiselect: true,
|
||
|
|
multiselectTag: true,
|
||
|
|
}
|
||
|
|
*/ init(setting) {
|
||
|
|
const { items: items , multiselect: multiselect , multiselectTag: multiselectTag , url: url , selector: selector , listDisplayMode: listDisplayMode , nativeSelectMode: nativeSelectMode , searchMode: searchMode , language: language , styles: styles , label: label , event: event , selected: selected , placeholder: placeholder , theme: theme , } = setting;
|
||
|
|
this.options = setting;
|
||
|
|
this.multiselect = multiselect;
|
||
|
|
this.multiselectTag = multiselectTag;
|
||
|
|
this.url = url;
|
||
|
|
this.selector = selector;
|
||
|
|
this.items = items;
|
||
|
|
this.searchMode = searchMode;
|
||
|
|
this.language = language;
|
||
|
|
this.nativeSelectMode = nativeSelectMode;
|
||
|
|
this.listDisplayMode = listDisplayMode;
|
||
|
|
this.styles = styles;
|
||
|
|
this.label = label;
|
||
|
|
this.event = event;
|
||
|
|
this.selected = selected;
|
||
|
|
this.placeholder = placeholder;
|
||
|
|
this.theme = theme;
|
||
|
|
const elem = document.querySelector(this.selector);
|
||
|
|
this.element = elem;
|
||
|
|
this.element?.addEventListener("click", (e)=>{
|
||
|
|
e.preventDefault();
|
||
|
|
this.open();
|
||
|
|
});
|
||
|
|
this.items = [];
|
||
|
|
if (this.url && !items) {
|
||
|
|
this.renderUrl();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.label) {
|
||
|
|
const labelItem = document.createElement("h1");
|
||
|
|
const textLabel = document.createTextNode(this.label);
|
||
|
|
labelItem.appendChild(textLabel);
|
||
|
|
labelItem.classList.add("label");
|
||
|
|
this.element.insertAdjacentElement("beforebegin", labelItem);
|
||
|
|
}
|
||
|
|
items.forEach((dataItem, index)=>{
|
||
|
|
let itemInputs = {
|
||
|
|
ItemValue: dataItem,
|
||
|
|
category: dataItem.category,
|
||
|
|
categoryItems: dataItem.categoryItems
|
||
|
|
};
|
||
|
|
if (itemInputs.category && itemInputs.categoryItems) {
|
||
|
|
this.category = itemInputs.category;
|
||
|
|
this.items.push(this.category);
|
||
|
|
itemInputs.categoryItems.forEach((categoryItem, indexCategory)=>{
|
||
|
|
this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(categoryItem, indexCategory));
|
||
|
|
});
|
||
|
|
} else this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(itemInputs.ItemValue, index));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @method render
|
||
|
|
* @param {string} select optional element. Passed to the initSelected.
|
||
|
|
* @description Render elements in select.
|
||
|
|
*/ render(select) {
|
||
|
|
const random = Math.random().toString(36).substring(2, 10);
|
||
|
|
if (select || select && this.styles) {
|
||
|
|
this.initSelected(select);
|
||
|
|
(0, $5aca7c389be45fd0$export$edf5b2501a573922)(this.element, this.styles);
|
||
|
|
} else this.initSelected();
|
||
|
|
const ulList = document.createElement("ul");
|
||
|
|
const nativeSelect = (0, $3e0e9117e5437319$export$dfb0baf35876628e)();
|
||
|
|
let inputSearch;
|
||
|
|
let textNode;
|
||
|
|
this.randomId = random;
|
||
|
|
ulList.classList.add("list");
|
||
|
|
ulList.classList.add("classicList");
|
||
|
|
if (this.styles) (0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(this.styles.list, ulList);
|
||
|
|
if (this.searchMode) {
|
||
|
|
if (this.language === "ru") inputSearch = (0, $3e0e9117e5437319$export$3ffa48e55176070e)(random, (0, $356528c60e5e24f4$export$cf48009033a0126b).placeholder);
|
||
|
|
else inputSearch = (0, $3e0e9117e5437319$export$3ffa48e55176070e)(random, (0, $356528c60e5e24f4$export$84584c2a98eb6753).placeholder);
|
||
|
|
(0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(this.styles?.search, inputSearch);
|
||
|
|
ulList.appendChild(inputSearch);
|
||
|
|
}
|
||
|
|
this.element?.appendChild(ulList);
|
||
|
|
this.items.forEach((dataItem)=>{
|
||
|
|
this.element?.appendChild(nativeSelect);
|
||
|
|
const liItem = document.createElement("li");
|
||
|
|
const nativeOption = (0, $3e0e9117e5437319$export$401096e4c8c5bfbe)();
|
||
|
|
const strongItem = document.createElement("strong");
|
||
|
|
liItem.classList.add("list__item");
|
||
|
|
strongItem.classList.add("category");
|
||
|
|
if (this.multiselect) {
|
||
|
|
const checkBox = document.createElement("input");
|
||
|
|
checkBox.type = "checkbox";
|
||
|
|
checkBox.setAttribute("id", `chbox-${dataItem.id}`);
|
||
|
|
liItem.appendChild(checkBox);
|
||
|
|
if (this.multiselectTag) checkBox.classList.add("displayHide");
|
||
|
|
nativeSelect.setAttribute("multiple", "multiple");
|
||
|
|
}
|
||
|
|
if (dataItem.title) {
|
||
|
|
nativeOption.text = dataItem.title;
|
||
|
|
nativeOption.value = dataItem.title;
|
||
|
|
textNode = document.createTextNode(dataItem.title);
|
||
|
|
nativeSelect.appendChild(nativeOption);
|
||
|
|
liItem.appendChild(textNode);
|
||
|
|
ulList.appendChild(liItem);
|
||
|
|
} else {
|
||
|
|
// Для отрисовки категорий
|
||
|
|
textNode = document.createTextNode(dataItem);
|
||
|
|
strongItem.appendChild(textNode);
|
||
|
|
ulList.appendChild(strongItem);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.items.filter((item, index)=>{
|
||
|
|
if (typeof item !== "object") this.items.splice(index, 1);
|
||
|
|
return item;
|
||
|
|
});
|
||
|
|
this.list = this.element.querySelector(".list");
|
||
|
|
this.carriage = this.element.querySelector(".caret");
|
||
|
|
if (this.theme) (0, $e3e030f05caf96c0$export$e6eb54368342cb84)(this.element, this.theme);
|
||
|
|
if (this.nativeSelectMode === true) this.selectMode(this.nativeSelectMode);
|
||
|
|
if (this.listDisplayMode) this.displayMode(this.listDisplayMode);
|
||
|
|
this.addOptionsBehaviour();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @method renderUrl
|
||
|
|
* @description Rendering elements in the select passed from the URL and setting them up.
|
||
|
|
*/ async renderUrl() {
|
||
|
|
const response = await fetch(this.url);
|
||
|
|
const dataUrl = await response.json();
|
||
|
|
const nativeSelect = (0, $3e0e9117e5437319$export$dfb0baf35876628e)();
|
||
|
|
dataUrl.forEach((dataItem, index)=>{
|
||
|
|
const item = {
|
||
|
|
id: dataItem.id,
|
||
|
|
title: dataItem.title,
|
||
|
|
value: index
|
||
|
|
};
|
||
|
|
const ulUrl = this.element.querySelector(".list");
|
||
|
|
const nativeOption = (0, $3e0e9117e5437319$export$401096e4c8c5bfbe)();
|
||
|
|
const liUrl = document.createElement("li");
|
||
|
|
const textUrl = document.createTextNode(item.title);
|
||
|
|
if (this.multiselect) {
|
||
|
|
const checkBox = document.createElement("input");
|
||
|
|
checkBox.type = "checkbox";
|
||
|
|
if (this.multiselectTag) checkBox.classList.add("displayHide");
|
||
|
|
checkBox.setAttribute("id", `chbox-${item.id}`);
|
||
|
|
nativeSelect.setAttribute("multiple", "multiple");
|
||
|
|
liUrl.appendChild(checkBox);
|
||
|
|
}
|
||
|
|
liUrl.classList.add("list__item");
|
||
|
|
nativeOption.value = item.title;
|
||
|
|
nativeOption.text = item.title;
|
||
|
|
nativeSelect.appendChild(nativeOption);
|
||
|
|
liUrl.appendChild(textUrl);
|
||
|
|
ulUrl.appendChild(liUrl);
|
||
|
|
this.items.push(item);
|
||
|
|
});
|
||
|
|
this.element.appendChild(nativeSelect);
|
||
|
|
this.items.filter((item, index)=>{
|
||
|
|
if (typeof item !== "object") this.items.splice(index, 1);
|
||
|
|
return item;
|
||
|
|
});
|
||
|
|
this.addOptionsBehaviour();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @method initSelected
|
||
|
|
* @param {string} select optional element. Used in the selectedIndex method.
|
||
|
|
* @description Renders and styles the select.
|
||
|
|
* @private
|
||
|
|
*/ initSelected(select) {
|
||
|
|
if (this.selected) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, this.selected);
|
||
|
|
else if (this.placeholder) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, this.placeholder);
|
||
|
|
else if (this.language && this.language === "ru") (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, (0, $356528c60e5e24f4$export$cf48009033a0126b).selectPlaceholder);
|
||
|
|
else (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, (0, $356528c60e5e24f4$export$84584c2a98eb6753).selectPlaceholder);
|
||
|
|
if (select) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, select, this.styles);
|
||
|
|
if (this.styles) (0, $5aca7c389be45fd0$export$edf5b2501a573922)(this.element, this.styles);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @description Opens and closes the list by the passed event.
|
||
|
|
* @method initEvent
|
||
|
|
*/ initEvent() {
|
||
|
|
if (this.event) {
|
||
|
|
if (this.event === "mouseenter") {
|
||
|
|
this.element.addEventListener(this.event, ()=>{
|
||
|
|
this.open();
|
||
|
|
});
|
||
|
|
this.element.addEventListener("mouseleave", ()=>{
|
||
|
|
this.close();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @param {boolean} oneClick optional parameter passed from the buttonControl function.
|
||
|
|
* @description Opens a list to select an element.
|
||
|
|
* @method open
|
||
|
|
*/ open(oneClick) {
|
||
|
|
if (oneClick === true) {
|
||
|
|
this.list.classList.add("open");
|
||
|
|
this.carriage.classList.add("caret_rotate");
|
||
|
|
} else {
|
||
|
|
this.list.classList.toggle("open");
|
||
|
|
this.carriage.classList.toggle("caret_rotate");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @description Closes the list.
|
||
|
|
* @method close
|
||
|
|
*/ close() {
|
||
|
|
this.list?.classList.remove("open");
|
||
|
|
this.carriage?.classList.remove("caret_rotate");
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @description Closes the list on click outside of an element.
|
||
|
|
* @method closeSelectClick
|
||
|
|
*/ closeSelectClick() {
|
||
|
|
const dropdown = document.querySelector(`${this.options.selector}`);
|
||
|
|
document.addEventListener("click", (e)=>{
|
||
|
|
const withinBoundaries = e.composedPath().includes(dropdown);
|
||
|
|
if (!withinBoundaries) {
|
||
|
|
if (this.buttonAction) return;
|
||
|
|
else this.close();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @description A method that implements the selection of elements in different modes.
|
||
|
|
* @method addOptionsBehaviour
|
||
|
|
*/ addOptionsBehaviour() {
|
||
|
|
const options = this.element?.querySelectorAll(".list__item");
|
||
|
|
const select = this.element?.querySelector(".selected");
|
||
|
|
const nativeOption = this.element.querySelectorAll(".nativeSelect__nativeOption");
|
||
|
|
let selectedItemsClear = {
|
||
|
|
placeholder: this.placeholder,
|
||
|
|
selected: this.selected,
|
||
|
|
theme: this.theme
|
||
|
|
};
|
||
|
|
const ulMultipul = document.createElement("ul");
|
||
|
|
if (this.multiselect) {
|
||
|
|
this.selectedItems = [];
|
||
|
|
ulMultipul.classList.add("multiselect-tag");
|
||
|
|
select?.classList.add("overflow-hidden");
|
||
|
|
}
|
||
|
|
if (this.searchMode) this.searchModeSelect(this.randomId);
|
||
|
|
options?.forEach((option, index)=>{
|
||
|
|
option.addEventListener("click", (event)=>{
|
||
|
|
if (Array.isArray(this.selectedItems)) selectedItemsClear = {
|
||
|
|
placeholder: this.placeholder,
|
||
|
|
selected: this.selected,
|
||
|
|
selectedItems: this.selectedItems,
|
||
|
|
indexes: this.indexes,
|
||
|
|
multiselectTag: this.multiselectTag
|
||
|
|
};
|
||
|
|
const item = this.items[index];
|
||
|
|
const checkIndex = this.indexes.indexOf(index);
|
||
|
|
if (this.closeOnSelect == false || this.multiselect) {
|
||
|
|
event.stopPropagation();
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
if (this.multiselect) {
|
||
|
|
option.classList.toggle("active");
|
||
|
|
const checkBox = option.querySelector('input[type="checkbox"]');
|
||
|
|
if (checkBox) {
|
||
|
|
if (!(event.target instanceof HTMLInputElement)) checkBox.checked = !checkBox.checked;
|
||
|
|
if (checkIndex == -1) {
|
||
|
|
this.indexes.push(index);
|
||
|
|
(0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, item.title, true);
|
||
|
|
select.textContent = "";
|
||
|
|
if (this.multiselectTag) {
|
||
|
|
if (Array.isArray(this.selectedItems)) {
|
||
|
|
const dataBreadCrumb = {
|
||
|
|
option: this.options,
|
||
|
|
element: this.element,
|
||
|
|
indexes: this.indexes,
|
||
|
|
selectedItems: this.selectedItems
|
||
|
|
};
|
||
|
|
this.selectedItems.push(item.title);
|
||
|
|
select.appendChild(ulMultipul);
|
||
|
|
ulMultipul.appendChild((0, $3e0e9117e5437319$export$94c1ad1d6db6a1d0)(dataBreadCrumb, item.title, index, item.id));
|
||
|
|
}
|
||
|
|
} else if (Array.isArray(this.selectedItems)) {
|
||
|
|
this.selectedItems.push(item.title);
|
||
|
|
select.innerText = this.selectedItems.join(",");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (this.multiselectTag) {
|
||
|
|
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
|
||
|
|
ulMultipul.removeChild(tagItem);
|
||
|
|
}
|
||
|
|
if (Array.isArray(this.selectedItems)) {
|
||
|
|
this.selectedItems.splice(checkIndex, 1);
|
||
|
|
this.indexes.splice(checkIndex, 1);
|
||
|
|
(0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, item.title, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!this.selectedItems.length) (0, $5aca7c389be45fd0$export$11380eda3eb06ca9)(selectedItemsClear, select);
|
||
|
|
else {
|
||
|
|
if (this.multiselectTag) select.appendChild(ulMultipul);
|
||
|
|
else if (Array.isArray(this.selectedItems)) select.innerText = this.selectedItems.join(",");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
select.textContent = item.title;
|
||
|
|
this.selectedItems = item.title;
|
||
|
|
(0, $5aca7c389be45fd0$export$668f6560249913a1)(nativeOption, item.title);
|
||
|
|
options.forEach((option)=>{
|
||
|
|
option.classList.remove("active");
|
||
|
|
});
|
||
|
|
option.classList.add("active");
|
||
|
|
}
|
||
|
|
(0, $5aca7c389be45fd0$export$4474211a0591e3fe)(select, this.element, selectedItemsClear);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @param {boolean} nativeSelectMode parameter responsible for adding native select.
|
||
|
|
* @description Changes the display of the select on mobile devices.
|
||
|
|
* @method selectMode
|
||
|
|
*/ selectMode(nativeSelectMode) {
|
||
|
|
let win = window.outerWidth;
|
||
|
|
if (nativeSelectMode === true) {
|
||
|
|
const select = this.element.querySelector(".cg-select");
|
||
|
|
const list = this.element.querySelector(".list");
|
||
|
|
const nativeSelect = this.element.querySelector(".nativeSelect");
|
||
|
|
if (win < 576) {
|
||
|
|
select.classList.add("displayHide");
|
||
|
|
list.classList.add("displayHide");
|
||
|
|
nativeSelect.classList.add("nativeSelectActive");
|
||
|
|
} else if (win > 576) {
|
||
|
|
select.classList.remove("displayHide");
|
||
|
|
list.classList.remove("displayHide");
|
||
|
|
nativeSelect.classList.remove("nativeSelectActive");
|
||
|
|
nativeSelect.classList.add("displayHide");
|
||
|
|
}
|
||
|
|
} else return;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description The method that implements the search for elements in the select.
|
||
|
|
* @private
|
||
|
|
* @param {string} random unique value for input element.
|
||
|
|
* @method searchMode
|
||
|
|
*/ searchModeSelect(random) {
|
||
|
|
const input = this.element.querySelector(`#searchSelect-${random}`);
|
||
|
|
const searchSelect = this.element.querySelectorAll(".list__item");
|
||
|
|
const result = document.createElement("p");
|
||
|
|
let textNode;
|
||
|
|
if (this.language && this.language === "ru") textNode = document.createTextNode(`${(0, $356528c60e5e24f4$export$cf48009033a0126b).textInListSearch}`);
|
||
|
|
else textNode = document.createTextNode(`${(0, $356528c60e5e24f4$export$84584c2a98eb6753).textInListSearch}`);
|
||
|
|
result.appendChild(textNode);
|
||
|
|
result.classList.add("displayHide");
|
||
|
|
result.classList.add("noRezult");
|
||
|
|
input.parentElement.appendChild(result);
|
||
|
|
input.addEventListener("click", (e)=>{
|
||
|
|
e.stopPropagation();
|
||
|
|
});
|
||
|
|
if (input instanceof HTMLInputElement) input.oninput = function() {
|
||
|
|
let valueSearch = input.value.trim().toLowerCase();
|
||
|
|
let anyMatch = false;
|
||
|
|
if (valueSearch != "") {
|
||
|
|
searchSelect.forEach((elem)=>{
|
||
|
|
let isMatching = new RegExp(valueSearch, "gi").test(elem.textContent);
|
||
|
|
anyMatch = anyMatch || isMatching;
|
||
|
|
if (elem.textContent.toLowerCase().search(valueSearch) == -1) elem.classList.add("displayHide");
|
||
|
|
else elem.classList.remove("displayHide");
|
||
|
|
});
|
||
|
|
result.classList.toggle("displayHide", anyMatch);
|
||
|
|
} else searchSelect.forEach((elem)=>{
|
||
|
|
elem.classList.remove("displayHide");
|
||
|
|
result.classList.add("displayHide");
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @private
|
||
|
|
* @param {boolean} listDisplayMode parameter responsible for displaying the selection in the form of a modal window.
|
||
|
|
* @description Changes the display of a sheet with a selection as a modal window.
|
||
|
|
* @method displayMode
|
||
|
|
*/ displayMode(listDisplayMode) {
|
||
|
|
if (listDisplayMode) {
|
||
|
|
const modal = document.createElement("div");
|
||
|
|
const body = document.querySelector("body");
|
||
|
|
const list = this.list;
|
||
|
|
modal.appendChild(list);
|
||
|
|
this.element.appendChild(modal);
|
||
|
|
this.element.addEventListener("click", ()=>{
|
||
|
|
modal.classList.toggle("modal");
|
||
|
|
list.classList.toggle("listModal");
|
||
|
|
body.classList.toggle("overflowHide");
|
||
|
|
});
|
||
|
|
} else return;
|
||
|
|
}
|
||
|
|
// Public methods
|
||
|
|
/**
|
||
|
|
* @param {number} numberItem returned element number.
|
||
|
|
* @returns {HTMLElement} returns a reference to the selected HTML element.
|
||
|
|
* @method getElement
|
||
|
|
*/ getElement(numberItem) {
|
||
|
|
if (numberItem > this.items.length) return;
|
||
|
|
return this.items[numberItem];
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @param {ILanguage} language the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.
|
||
|
|
* @description a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.
|
||
|
|
* @method addLanguage
|
||
|
|
*/ addLanguage(language) {
|
||
|
|
const { placeholder: placeholder , textInListSearch: textInListSearch , selectPlaceholder: selectPlaceholder } = language;
|
||
|
|
const select = this.element.querySelector(".selected");
|
||
|
|
const textNodeSelect = document.createTextNode(selectPlaceholder);
|
||
|
|
select.appendChild(textNodeSelect);
|
||
|
|
if (this.searchMode) {
|
||
|
|
const search = this.element.querySelector(".inputSearch");
|
||
|
|
const textNoRezult = this.element.querySelector(".noRezult");
|
||
|
|
const textNode = document.createTextNode(textInListSearch);
|
||
|
|
search.setAttribute("placeholder", placeholder);
|
||
|
|
search.setAttribute("placeholder", placeholder);
|
||
|
|
textNoRezult.textContent = "";
|
||
|
|
textNoRezult.appendChild(textNode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @param {HTMLInputElement} button - HTML button.
|
||
|
|
* @param {string} method - open/close method.
|
||
|
|
* @description A method that allows you to open / close the select using buttons.
|
||
|
|
* @method buttonControl
|
||
|
|
*/ buttonControl(button, method) {
|
||
|
|
if (this.listDisplayMode) return;
|
||
|
|
this.buttonAction = button;
|
||
|
|
button.addEventListener("click", ()=>{
|
||
|
|
if (method.toLowerCase() === "open") this.open(true);
|
||
|
|
else if (method.toLowerCase() === "close") this.close();
|
||
|
|
else return;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @param {boolean} value - Passed parameter to add the disabled attribute.
|
||
|
|
* @description A method that allows you to toggle the state of the disabled select.
|
||
|
|
* @method disabled
|
||
|
|
*/ disabled(value) {
|
||
|
|
const select = this.element.querySelector(".cg-select");
|
||
|
|
const nativeSelect = this.element.querySelector(".nativeSelect");
|
||
|
|
if (value === true) {
|
||
|
|
this.element.setAttribute("disabled", "true");
|
||
|
|
nativeSelect.setAttribute("disabled", "true");
|
||
|
|
select.classList.add("disabled");
|
||
|
|
} else {
|
||
|
|
this.element.removeAttribute("disabled");
|
||
|
|
nativeSelect.removeAttribute("disabled");
|
||
|
|
select.classList.remove("disabled");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @param {string | IItems} item added element.
|
||
|
|
* @description adds the given element to the end of the list and redraws the list. Cannot be used when passing elements with categories.
|
||
|
|
* @method addItem
|
||
|
|
*/ addItem(item) {
|
||
|
|
if (this.category) {
|
||
|
|
console.log("can`t add item to category");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!item) return false;
|
||
|
|
const index = this.items.length;
|
||
|
|
this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(item, index));
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @param {number} index the index of the element to be removed.
|
||
|
|
* @description removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.
|
||
|
|
* @method deleteItem
|
||
|
|
*/ deleteItem(index) {
|
||
|
|
if (this.category) {
|
||
|
|
console.log("can`t add item to category");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const item = this.items[index];
|
||
|
|
this.items.splice(index, 1);
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description removes all elements from the list and redraws it.
|
||
|
|
* @method deleteItemAll
|
||
|
|
*/ deleteItemAll() {
|
||
|
|
this.items.splice(0, this.items.length);
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @param {number} index the index of the selected element.
|
||
|
|
* @description selects the element that will be initially rendered in the select.
|
||
|
|
* @method selectIndex
|
||
|
|
*/ selectIndex(index) {
|
||
|
|
if (this.category) {
|
||
|
|
console.log("can`t add item to category");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const options = this.element.querySelectorAll(".list__item");
|
||
|
|
if (index > options.length) return;
|
||
|
|
const select = options[index].innerText;
|
||
|
|
this.render(select);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Method for tracking the actions of the select, you can pass a callback
|
||
|
|
* @param state select state.
|
||
|
|
* @param callback
|
||
|
|
* @method on
|
||
|
|
*/ on(state, callback) {
|
||
|
|
const options = this.element?.querySelectorAll(".list__item");
|
||
|
|
let value = "";
|
||
|
|
switch(state){
|
||
|
|
case "select":
|
||
|
|
options?.forEach((option)=>{
|
||
|
|
option.addEventListener("click", ()=>{
|
||
|
|
console.log("option:select", option.textContent);
|
||
|
|
value = option.textContent;
|
||
|
|
callback(state, value);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case "close":
|
||
|
|
this.element.addEventListener("click", ()=>{
|
||
|
|
console.log("list:close", this.list.classList.contains("close"));
|
||
|
|
});
|
||
|
|
callback(state);
|
||
|
|
break;
|
||
|
|
case "open":
|
||
|
|
this.element.addEventListener("click", ()=>{
|
||
|
|
console.log("list:open", this.list.classList.contains("open"));
|
||
|
|
});
|
||
|
|
callback(state);
|
||
|
|
break;
|
||
|
|
case "clear":
|
||
|
|
this.element.addEventListener("click", ()=>{
|
||
|
|
const svgIcon = this.element?.querySelector(".svg-icon");
|
||
|
|
svgIcon?.addEventListener("click", ()=>{
|
||
|
|
console.log("list:clear", svgIcon.classList.contains("svg-clear"));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
callback(state);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var $43d7963e56408b24$export$2e2bcd8739ae039 = (0, $adaec01e28cd9884$export$ba2c4ca7a0a16031);
|
||
|
|
|
||
|
|
|
||
|
|
//# sourceMappingURL=index.js.map
|