Finish working search
This commit is contained in:
parent
19a857280d
commit
482b3799d2
@ -127,6 +127,7 @@
|
||||
<li><a href="global.html#open">#open</a></li>
|
||||
<li><a href="global.html#render">#render</a></li>
|
||||
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#searchMode">#searchMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<ul>
|
||||
|
||||
@ -137,6 +137,7 @@
|
||||
<li><a href="global.html#open">#open</a></li>
|
||||
<li><a href="global.html#render">#render</a></li>
|
||||
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#searchMode">#searchMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<ul>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -21,75 +21,117 @@
|
||||
<article>
|
||||
<pre
|
||||
class="prettyprint source linenums"
|
||||
><code>import { customStylesFormat } from './utils';
|
||||
/**
|
||||
* @module createElementChips
|
||||
*/
|
||||
|
||||
/**
|
||||
* Метод который создает и отвечает за поведение chips
|
||||
* @param {object} data объект в котором содержатся настройки и элементы селекта
|
||||
* @param {string} title имя выбранного элемента для отрисовки chips
|
||||
* @param {number} index индекс выбранного элемента для отрисовки chips
|
||||
* @param {string} id уникальное id выбранного элемента
|
||||
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
|
||||
*/
|
||||
export function createBreadcrumb(data, title, index, id) {
|
||||
const { element, option, indexes, selectedItems } = data;
|
||||
const { placeholder, styles } = option;
|
||||
|
||||
const selected = element.querySelector('.selected');
|
||||
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.stopPropagation();
|
||||
|
||||
const deleteIcon = indexes.indexOf(index);
|
||||
|
||||
indexes.splice(deleteIcon, 1);
|
||||
selectedItems.splice(deleteIcon, 1);
|
||||
|
||||
let checkBox = '';
|
||||
|
||||
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;
|
||||
}
|
||||
><code>import { customStylesFormat, nativOptionMultiple } from './utils';
|
||||
/**
|
||||
* @module createBreadcrumb
|
||||
*/
|
||||
|
||||
/**
|
||||
* Метод который создает и отвечает за поведение chips
|
||||
* @param {object} data объект в котором содержатся настройки и элементы селекта
|
||||
* @param {string} title имя выбранного элемента для отрисовки chips
|
||||
* @param {number} index индекс выбранного элемента для отрисовки chips
|
||||
* @param {string} id уникальное id выбранного элемента
|
||||
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
|
||||
*/
|
||||
export function createBreadcrumb(data, title, index, id) {
|
||||
const { element, option, indexes, selectedItems } = data;
|
||||
const { placeholder, styles } = option;
|
||||
|
||||
const selected = element.querySelector('.selected');
|
||||
const nativOption = element.querySelectorAll('.nativSelect__nativOption');
|
||||
|
||||
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.stopPropagation();
|
||||
nativOptionMultiple(nativOption, 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод который создает нативный селект
|
||||
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
|
||||
*/
|
||||
export function createNativeSelect() {
|
||||
const nativSelect = document.createElement('select');
|
||||
|
||||
nativSelect.setAttribute('form', 'data');
|
||||
nativSelect.setAttribute('name', 'dataSelect');
|
||||
nativSelect.classList.add('nativSelect');
|
||||
return nativSelect;
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод который создает Options для нативного селекта
|
||||
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
|
||||
*/
|
||||
export function createNativSelectOption() {
|
||||
const nativOption = document.createElement('option');
|
||||
|
||||
nativOption.classList.add('nativSelect__nativOption');
|
||||
return nativOption;
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод который создает поиск элементов в селекте
|
||||
* @param {string} random уникальное значение для input элемента.
|
||||
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
|
||||
*/
|
||||
export function createInputSearch(random) {
|
||||
const intputSearch = document.createElement('input');
|
||||
|
||||
intputSearch.type = 'text';
|
||||
intputSearch.classList.add('inputSearch');
|
||||
intputSearch.setAttribute('id', `searchSelect-${random}`);
|
||||
intputSearch.setAttribute('placeholder', 'Search...');
|
||||
|
||||
return intputSearch;
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
@ -122,6 +164,7 @@ export function createBreadcrumb(data, title, index, id) {
|
||||
<li><a href="global.html#open">#open</a></li>
|
||||
<li><a href="global.html#render">#render</a></li>
|
||||
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#searchMode">#searchMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<ul>
|
||||
|
||||
@ -301,6 +301,52 @@
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="searchMode">
|
||||
<span class="type-signature">(protected) </span>#searchMode<span class="signature"
|
||||
>(random)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">Метод который реализует поиск элементов в селекте</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>random</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">уникальное значение для input элемента.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
|
||||
<a href="cg-dropdown.js.html#line617">line 617</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="addItem">
|
||||
<span class="type-signature"></span>addItem<span class="signature">(item)</span
|
||||
><span class="type-signature"></span>
|
||||
@ -657,6 +703,7 @@
|
||||
<li><a href="global.html#open">#open</a></li>
|
||||
<li><a href="global.html#render">#render</a></li>
|
||||
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#searchMode">#searchMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<ul>
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
<li><a href="global.html#open">#open</a></li>
|
||||
<li><a href="global.html#render">#render</a></li>
|
||||
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#searchMode">#searchMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<ul>
|
||||
|
||||
@ -379,6 +379,7 @@
|
||||
<li><a href="global.html#open">#open</a></li>
|
||||
<li><a href="global.html#render">#render</a></li>
|
||||
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#searchMode">#searchMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<ul>
|
||||
|
||||
@ -114,6 +114,63 @@
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".createInputSearch">
|
||||
<span class="type-signature">(static) </span>createInputSearch<span class="signature"
|
||||
>(random)</span
|
||||
><span class="type-signature"> → {HTMLInputElement}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">Метод который создает поиск элементов в селекте</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>random</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">уникальное значение для input элемента.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="create-element.js.html">create-element.js</a>,
|
||||
<a href="create-element.js.html#line102">line 102</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">Возвращает сформированный input елемент.</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">HTMLInputElement</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".createNativeSelect">
|
||||
<span class="type-signature">(static) </span>createNativeSelect<span class="signature"
|
||||
>()</span
|
||||
@ -192,21 +249,25 @@
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Module</h3>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-Utils.html">Utils</a></li>
|
||||
<li><a href="module-createElementChips.html">createElementChips</a></li>
|
||||
</ul>
|
||||
<h3>Global</h3>
|
||||
<h3>Private methods</h3>
|
||||
<ul>
|
||||
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
|
||||
<li><a href="global.html#close">#close</a></li>
|
||||
<li><a href="global.html#init">#init</a></li>
|
||||
<li><a href="global.html#initEvent">#initEvent</a></li>
|
||||
<li><a href="global.html#initSelected">#initSelected</a></li>
|
||||
<li><a href="global.html#open">#open</a></li>
|
||||
<li><a href="global.html#render">#render</a></li>
|
||||
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#searchMode">#searchMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<ul>
|
||||
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
|
||||
<li><a href="global.html##close">#close</a></li>
|
||||
<li><a href="global.html##init">#init</a></li>
|
||||
<li><a href="global.html##initEvent">#initEvent</a></li>
|
||||
<li><a href="global.html##initSelected">#initSelected</a></li>
|
||||
<li><a href="global.html##open">#open</a></li>
|
||||
<li><a href="global.html##render">#render</a></li>
|
||||
<li><a href="global.html##renderUrl">#renderUrl</a></li>
|
||||
<li><a href="global.html#addItem">addItem</a></li>
|
||||
<li><a href="global.html#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -20,122 +20,151 @@
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* Utils module
|
||||
* @module Utils;
|
||||
*/
|
||||
|
||||
/**
|
||||
* Создание кнопки выбора элементов
|
||||
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||
* @param {string} content placeholer передаваемый из настроек селекта
|
||||
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||
*/
|
||||
export function createSelected(element, content, styles) {
|
||||
if (content) {
|
||||
element.innerHTML = `
|
||||
<div class="cg-select">
|
||||
<p class="selected">${content}</p>
|
||||
<div class="caret"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (styles) {
|
||||
customStyles(element, styles);
|
||||
|
||||
element.innerHTML = `
|
||||
<div class="cg-select" style = "${styles}">
|
||||
<p class="selected" style = "${styles}">${content}</p>
|
||||
<div class="caret" style = "${styles}"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
|
||||
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||
*/
|
||||
export function customStyles(element, styles) {
|
||||
if (!styles) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { head, caret, placeholder } = styles;
|
||||
|
||||
const cgSelect = element.querySelector('.cg-select');
|
||||
const caretSelect = element.querySelector('.caret');
|
||||
const placeholderSelect = element.querySelector('.selected');
|
||||
|
||||
customStylesFormat(head, cgSelect);
|
||||
|
||||
customStylesFormat(caret, caretSelect);
|
||||
|
||||
if (placeholderSelect) {
|
||||
customStylesFormat(placeholder, placeholderSelect);
|
||||
}
|
||||
}
|
||||
|
||||
// export function customStylesFormat(elemOption, selector) {
|
||||
// if (elemOption) {
|
||||
// Object.entries(elemOption).forEach(([key, value]) => {
|
||||
// selector.style[key] = value;
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
/**
|
||||
* Универсальный метод для стилизации селекта
|
||||
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
|
||||
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
|
||||
*/
|
||||
exports.customStylesFormat = (elemOption, selector) => {
|
||||
if (elemOption) {
|
||||
Object.entries(elemOption).forEach(([key, value]) => {
|
||||
selector.style[key] = value;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Проверка содержит ли item указанные свойства,
|
||||
* @param {object} item проверяемый на определенную структуру элемент
|
||||
* @returns {boolean} возвращает true/false если item содержит указанные свойства
|
||||
*/
|
||||
export function checkItemStruct(item) {
|
||||
if (item && typeof item !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
|
||||
}
|
||||
|
||||
/**
|
||||
* Преобразование каждого елемента полученного из поля Items;
|
||||
* @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
|
||||
* @param {number} index индекс этого элемента
|
||||
* @returns {object} возвращает сформированный объект
|
||||
*/
|
||||
export function getFormatItem(dataItem, index) {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
let item = {};
|
||||
|
||||
if (checkItemStruct(dataItem)) {
|
||||
item = {
|
||||
id: dataItem.id,
|
||||
title: dataItem.title,
|
||||
value: index,
|
||||
};
|
||||
} else {
|
||||
item = {
|
||||
id: random,
|
||||
title: dataItem,
|
||||
value: index,
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
}
|
||||
* Utils module
|
||||
* @module Utils
|
||||
*/
|
||||
|
||||
/**
|
||||
* Создание кнопки выбора элементов
|
||||
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||
* @param {string} content placeholer передаваемый из настроек селекта
|
||||
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||
*/
|
||||
export function createSelected(element, content, styles) {
|
||||
if (content) {
|
||||
element.innerHTML = `
|
||||
<div class="cg-select">
|
||||
<p class="selected">${content}</p>
|
||||
<div class="caret"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (styles) {
|
||||
customStyles(element, styles);
|
||||
|
||||
element.innerHTML = `
|
||||
<div class="cg-select" style = "${styles}">
|
||||
<p class="selected" style = "${styles}">${content}</p>
|
||||
<div class="caret" style = "${styles}"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
|
||||
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||
*/
|
||||
export function customStyles(element, styles) {
|
||||
if (!styles) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { head, caret, placeholder } = styles;
|
||||
|
||||
const cgSelect = element.querySelector('.cg-select');
|
||||
const caretSelect = element.querySelector('.caret');
|
||||
const placeholderSelect = element.querySelector('.selected');
|
||||
|
||||
customStylesFormat(head, cgSelect);
|
||||
|
||||
customStylesFormat(caret, caretSelect);
|
||||
|
||||
if (placeholderSelect) {
|
||||
customStylesFormat(placeholder, placeholderSelect);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Универсальный метод для стилизации селекта
|
||||
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
|
||||
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
|
||||
*/
|
||||
export function customStylesFormat(elemOption, selector) {
|
||||
if (elemOption) {
|
||||
Object.entries(elemOption).forEach(([key, value]) => {
|
||||
selector.style[key] = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Проверка содержит ли item указанные свойства,
|
||||
* @param {object} item проверяемый на определенную структуру элемент
|
||||
* @returns {boolean} возвращает true/false если item содержит указанные свойства
|
||||
*/
|
||||
export function checkItemStruct(item) {
|
||||
if (item && typeof item !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
|
||||
}
|
||||
|
||||
/**
|
||||
* Преобразование каждого елемента полученного из поля Items;
|
||||
* @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
|
||||
* @param {number} index индекс этого элемента
|
||||
* @returns {object} возвращает сформированный объект
|
||||
*/
|
||||
export function getFormatItem(dataItem, index) {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
let item = {};
|
||||
|
||||
if (checkItemStruct(dataItem)) {
|
||||
item = {
|
||||
id: dataItem.id,
|
||||
title: dataItem.title,
|
||||
value: index,
|
||||
};
|
||||
} else {
|
||||
item = {
|
||||
id: random,
|
||||
title: dataItem,
|
||||
value: index,
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Поведение нативного(одинарного) селекта при выборе кастомного
|
||||
* @param {NodeList} element NodeList нативного селекта
|
||||
* @param {object} item выбранный элемент в кастомном селекте
|
||||
*/
|
||||
export function nativOptionOrdinary(element, item) {
|
||||
element.forEach((option) => {
|
||||
option.removeAttribute('selected');
|
||||
if (option.textContent === item) {
|
||||
option.setAttribute('selected', 'selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Поведение нативного(Multiple) селекта при выборе в кастомном
|
||||
* @param {NodeList} element NodeList нативного селекта
|
||||
* @param {object} item выбранный элемент в кастомном селекте
|
||||
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
|
||||
*/
|
||||
export function nativOptionMultiple(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;
|
||||
}
|
||||
});
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@ -340,6 +340,7 @@ export class DropDown {
|
||||
*/
|
||||
#render(select) {
|
||||
const { styles, multiselect, searchMode } = this.#options;
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
|
||||
if (select || (select && styles)) {
|
||||
this.#initSelected(select);
|
||||
@ -349,10 +350,8 @@ export class DropDown {
|
||||
}
|
||||
|
||||
const ulList = document.createElement('ul');
|
||||
const intputSearch = createInputSearch();
|
||||
// intputSearch.type = 'text';
|
||||
// intputSearch.setAttribute('id', 'searchSelect');
|
||||
// intputSearch.setAttribute('placeholder', 'Search...');
|
||||
const intputSearch = createInputSearch(random);
|
||||
this.random = random;
|
||||
|
||||
const nativSelect = createNativeSelect();
|
||||
|
||||
@ -532,7 +531,7 @@ export class DropDown {
|
||||
}
|
||||
|
||||
if (searchMode && searchMode === true) {
|
||||
this.searchMode();
|
||||
this.#searchMode(this.random);
|
||||
}
|
||||
|
||||
options.forEach((option, index) => {
|
||||
@ -615,8 +614,14 @@ export class DropDown {
|
||||
});
|
||||
}
|
||||
|
||||
searchMode() {
|
||||
const input = document.querySelector('#searchSelect');
|
||||
/**
|
||||
* Метод который реализует поиск элементов в селекте
|
||||
* @protected
|
||||
* @param {string} random уникальное значение для input элемента.
|
||||
* @method #searchMode
|
||||
*/
|
||||
#searchMode(random) {
|
||||
const input = this.#element.querySelector(`#searchSelect-${random}`);
|
||||
const searchSelect = this.#element.querySelectorAll('.list__item');
|
||||
const result = document.createElement('p');
|
||||
const textNode = document.createTextNode('No matches...');
|
||||
|
||||
@ -94,11 +94,17 @@ export function createNativSelectOption() {
|
||||
return nativOption;
|
||||
}
|
||||
|
||||
export function createInputSearch() {
|
||||
/**
|
||||
* Метод который создает поиск элементов в селекте
|
||||
* @param {string} random уникальное значение для input элемента.
|
||||
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
|
||||
*/
|
||||
export function createInputSearch(random) {
|
||||
const intputSearch = document.createElement('input');
|
||||
|
||||
intputSearch.type = 'text';
|
||||
intputSearch.setAttribute('id', 'searchSelect');
|
||||
intputSearch.classList.add('inputSearch');
|
||||
intputSearch.setAttribute('id', `searchSelect-${random}`);
|
||||
intputSearch.setAttribute('placeholder', 'Search...');
|
||||
|
||||
return intputSearch;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||
<!-- <input type="submit" form="data" value="Отправить" /> -->
|
||||
<!-- <button class="cg-dropdown cg-dropdown_three"></button> -->
|
||||
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||
|
||||
<button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
|
||||
</div>
|
||||
|
||||
28
src/index.js
28
src/index.js
@ -22,24 +22,26 @@ const dropdown = new DropDown({
|
||||
|
||||
// dropdown.disabled(false);
|
||||
// ------------------------------URL--------------------
|
||||
// const dropdown3 = new DropDown({
|
||||
// selector: '.cg-dropdown_three',
|
||||
// placeholder: 'URL',
|
||||
// url: 'http://jsonplaceholder.typicode.com/users',
|
||||
// styles: {
|
||||
// head: {
|
||||
// background: 'black',
|
||||
// width: '350px',
|
||||
// },
|
||||
// },
|
||||
// multiselect: true,
|
||||
// multiselectTag: true,
|
||||
// });
|
||||
const dropdown3 = new DropDown({
|
||||
selector: '.cg-dropdown_three',
|
||||
placeholder: 'URL',
|
||||
url: 'http://jsonplaceholder.typicode.com/users',
|
||||
searchMode: true,
|
||||
styles: {
|
||||
head: {
|
||||
background: 'black',
|
||||
width: '350px',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
});
|
||||
|
||||
// --------------------------------Категории--------------------------
|
||||
const dropdown4 = new DropDown({
|
||||
selector: '.cg-dropdown_button',
|
||||
placeholder: 'Выберите регион',
|
||||
searchMode: true,
|
||||
items: [
|
||||
{
|
||||
category: 'Russia',
|
||||
|
||||
@ -105,6 +105,18 @@ body {
|
||||
background: #8282822c;
|
||||
}
|
||||
}
|
||||
|
||||
.inputSearch {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid white;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-tag {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user