apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed/added description all documentation

Browse Source
This commit is contained in:
Макс Овсяников 2022-11-08 16:57:35 +03:00
parent e7182e684c
commit 366b918ca7
11 changed files with 803 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
View File

@ -6,11 +6,13 @@
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css" />
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
<link type="text/css" rel="stylesheet" href="styles/descriptionOptions.css" />
</head>
<body>
@ -81,6 +83,10 @@
selected: 'Выбранный элемент',
placeholder: '...',
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
styles: {
head: {
background: '...',
@ -89,6 +95,7 @@
chips: {...},
caret: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
@ -97,6 +104,79 @@
}</code></pre>
</div>
</article>
<h4>Описание всех параметров селекта</h4>
<section>
<ul class="descriptionOptions">
<li>
<strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
который задаеться при создании селекта.
</li>
<li>
<strong>selected</strong> - необязательный параметр, в который передается элемент
который будет выбран изначально в селекте.
</li>
<li>
<strong>placeholder</strong> - необязательный параметр, в который передается текст
плейсхолдера селекта.
</li>
<li>
<strong>items</strong> -
<strong
>*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
>, это массив елементов, которые будут отображаться в селекте при выборе.
</li>
<li>
<strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
</li>
<li>
<strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
по элеметам селекта.
</li>
<li>
<strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
селекте закрытия не происходит, и можно выбрать другой элемент по умолчанию,
closeOnSelect:true.
</li>
<li>
<strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию
некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
передав туда объект с полями для текста.
</li>
<li>
<strong>event</strong> - необязательный параметр, который отвечает за поведения
селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
открываться при наведении.
</li>
<li>
<strong>url</strong> -
<strong
>*обязательный параметр(эсли не указан другой способ получения данных
(items)),</strong
>
htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
</li>
<li>
<strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
отрисовываются как обычный текст, через запятую.
</li>
<li>
<strong>multiselectTag</strong> - необязательный параметр, который отвечает за
поведения селекта, для него,
<strong>***работает только в месте с подключением multiselect.</strong>
</li>
<li>
<strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
элементов.
</li>
</ul>
</section>
</section>
</div>
@ -121,6 +201,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -131,6 +213,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>

15
documentation/DropDown.html
View File

@ -22,7 +22,7 @@
<h2>
<span class="attribs"><span class="type-signature"></span></span>DropDown<span
class="signature"
>()</span
>(options)</span
><span class="type-signature"></span>
</h2>
@ -34,7 +34,8 @@
<h2>Constructor</h2>
<h4 class="name" id="DropDown">
<span class="type-signature"></span>new DropDown<span class="signature">()</span
<span class="type-signature"></span>new DropDown<span class="signature"
>(options)</span
><span class="type-signature"></span>
</h4>
@ -62,13 +63,6 @@
</dl>
</div>
<h3 class="subsection-title">Classes</h3>
<dl>
<dt><a href="DropDown.html">DropDown</a></dt>
<dd></dd>
</dl>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="indexes">
@ -131,6 +125,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -141,6 +137,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>

218
documentation/cg-dropdown.js.html
View File

@ -23,9 +23,11 @@
createSelected,
customStyles,
getFormatItem,
getSelectText,
customStylesFormat,
nativOptionMultiple,
nativOptionOrdinary,
clearSelect,
} from './components/utils';
import {
createBreadcrumb,
@ -33,6 +35,7 @@
createNativSelectOption,
createNativeSelect,
} from './components/create-element';
import { ru, en } from './language/language';
/**
* @class Описание класса DropDown
@ -110,6 +113,10 @@
selected: 'Выбранный элемент',
placeholder: '...',
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
styles: {
head: {
background: '...',
@ -118,6 +125,7 @@
chips: {...},
caret: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
@ -130,6 +138,7 @@
this.#init(options);
this.#render();
this.#initEvent();
this.#closeSelectClick();
}
/**
@ -246,6 +255,7 @@
* @method buttonControl
*/
buttonControl(button, method) {
this.btn = button;
button.addEventListener('click', () => {
if (method === 'open') {
this.#open(true);
@ -257,6 +267,29 @@
});
}
/**
* Метод экземпляра класса DropDown
* @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
* @method addLenguage
*/
addLenguage(lenguage) {
const { placeholder, textInListSearch } = lenguage;
const { searchMode } = this.#options;
if (searchMode &amp;&amp; searchMode == true) {
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.innerText = '';
textNoRezult.appendChild(textNode);
}
}
/**
* Приватный метод инициализации экземпляра класса DropDown
* @method #init
@ -279,6 +312,7 @@
'MAN',
'max',
],
darkTheme: true,
multiselect: true,
multiselectTag: true,
}
@ -295,13 +329,14 @@
this.#element = elem;
this.#element.addEventListener('click', () => {
this.#element.addEventListener('click', (e) => {
e.preventDefault();
this.#open();
});
this.#items = [];
if (multiselect) {
if (multiselect &amp;&amp; multiselect == true) {
this.#selectedItems = [];
}
@ -333,7 +368,7 @@
* @protected
*/
#initSelected(select) {
const { styles, selected, placeholder } = this.#options;
const { styles, selected, placeholder, lable } = this.#options;
if (selected) {
createSelected(this.#element, selected);
@ -343,13 +378,23 @@
createSelected(this.#element, 'Select...');
}
if (styles) {
customStyles(this.#element, styles);
}
if (select) {
createSelected(this.#element, select, styles);
}
if (lable) {
const lableItem = document.createElement('h1');
const textLable = document.createTextNode(lable);
lableItem.appendChild(textLable);
lableItem.classList.add('label');
this.#element.insertAdjacentElement('beforebegin', lableItem);
}
if (styles) {
customStyles(this.#element, styles);
}
}
/**
@ -360,7 +405,7 @@
* @description Рендер елементов в селекте.
*/
#render(select) {
const { styles, multiselect, searchMode } = this.#options;
const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
const random = Math.random().toString(36).substring(2, 10);
if (select || (select &amp;&amp; styles)) {
@ -371,16 +416,23 @@
}
const ulList = document.createElement('ul');
const intputSearch = createInputSearch(random);
this.random = random;
const nativSelect = createNativeSelect();
ulList.classList.add('list');
let intputSearch = '';
this.random = random;
if (searchMode) {
if (lenguage === 'ru') {
intputSearch = createInputSearch(random, ru.placeholder);
} else {
intputSearch = createInputSearch(random, en.placeholder);
}
ulList.appendChild(intputSearch);
}
ulList.classList.add('list');
if (styles) {
const { list } = styles;
customStylesFormat(list, ulList);
@ -398,12 +450,16 @@
liItem.classList.add('list__item');
strongItem.classList.add('category');
if (multiselect) {
if (multiselect &amp;&amp; multiselect == true) {
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
liItem.appendChild(checkBox);
if (multiselectTag &amp;&amp; multiselectTag == true) {
checkBox.classList.add('displayHide');
}
nativSelect.setAttribute('multiple', 'multiple');
}
@ -431,9 +487,45 @@
return item;
});
if (darkTheme == false) {
this.#checkTheme();
}
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
this.#addOptionsBehaviour();
}
/**
* Приватный метод рендера экземпляра класса DropDown
* @protected
* @method #checkTheme
* @description Изменяет цветовую схему с темной на светлую.
*/
#checkTheme() {
const { darkTheme, searchMode } = this.#options;
const select = this.#element.querySelector('.cg-select');
const caret = this.#element.querySelector('.caret');
const list = this.#element.querySelector('ul.list');
const search = this.#element.querySelector('.inputSearch');
if (darkTheme == false) {
select.classList.add('selectWhite');
caret.classList.add('caretWhite');
list.classList.add('listWhite');
if (searchMode == true) {
search.classList.add('inputWhite');
}
} else if (darkTheme == true || !darkTheme) {
return;
} else {
throw new Error('Styles error or invalid value entered!');
}
}
/**
* Приватный метод рендера экземпляра класса DropDown
*@protected
@ -441,7 +533,7 @@
* @description Рендер елементов в селекте переданных с URL и их настойка
*/
async #renderUrl() {
const { url, items, multiselect } = this.#options;
const { url, items, multiselect, multiselectTag } = this.#options;
if (items) {
return;
@ -468,9 +560,12 @@
const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title);
if (multiselect) {
if (multiselect &amp;&amp; multiselect == true) {
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
if (multiselectTag &amp;&amp; multiselectTag == true) {
checkBox.classList.add('displayHide');
}
checkBox.setAttribute('id', `chbox-${item.id}`);
nativSelect.setAttribute('multiple', 'multiple');
@ -509,9 +604,6 @@
* @method #open
*/
#open(oneClick) {
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
if (oneClick === true) {
this.#list.classList.add('open');
this.#caret.classList.add('caret_rotate');
@ -539,14 +631,23 @@
* @method #addOptionsBehaviour
*/
#addOptionsBehaviour() {
const { multiselect, placeholder, selected, multiselectTag, searchMode } = this.#options;
const {
multiselect,
placeholder,
selected,
multiselectTag,
searchMode,
closeOnSelect,
darkTheme,
} = this.#options;
const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected');
const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
const ulMultipul = document.createElement('ul');
if (multiselect) {
if (multiselect &amp;&amp; multiselect == true) {
ulMultipul.classList.add('multiselect-tag');
select.classList.add('overflow-hidden');
}
@ -557,12 +658,26 @@
options.forEach((option, index) => {
option.addEventListener('click', (event) => {
const dataSelectText = {
placeholder,
selected,
selectedItems: this.#selectedItems,
indexes: this.#indexes,
darkTheme,
multiselectTag,
};
const item = this.#items[index];
if (multiselect) {
if (closeOnSelect == false || (multiselect &amp;&amp; multiselect == true)) {
event.stopPropagation();
option.classList.toggle('active');
event.preventDefault();
}
const checkIndex = this.#indexes.indexOf(index);
if (multiselect &amp;&amp; multiselect == true) {
option.classList.toggle('active');
const checkBox = option.querySelector('input[type="checkbox"]');
if (checkBox) {
@ -570,16 +685,12 @@
checkBox.checked = !checkBox.checked;
}
const checkIndex = this.#indexes.indexOf(index);
if (checkIndex === -1) {
nativOptionMultiple(nativOption, item.title, true);
this.#indexes.push(index);
select.innerText = '';
if (multiselectTag) {
if (multiselectTag &amp;&amp; multiselectTag == true) {
this.#selectedItems.push(item);
select.appendChild(ulMultipul);
@ -596,25 +707,20 @@
select.innerText = this.#selectedItems;
}
} else {
if (multiselectTag) {
if (multiselectTag &amp;&amp; multiselectTag == true) {
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
ulMultipul.removeChild(tagItem);
}
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
nativOptionMultiple(nativOption, item.title, false);
}
if (!this.#selectedItems.length) {
if (placeholder) {
select.innerText = placeholder;
} else if (selected) {
select.innerText = selected;
getSelectText(dataSelectText, select);
} else {
select.innerText = 'Select...';
}
} else {
if (multiselectTag) {
if (multiselectTag &amp;&amp; multiselectTag == true) {
select.appendChild(ulMultipul);
} else {
select.innerText = this.#selectedItems;
@ -624,6 +730,7 @@
} else {
select.innerText = item.title;
this.#selectedItems = item;
nativOptionOrdinary(nativOption, item.title);
options.forEach((option) => {
@ -631,6 +738,8 @@
});
option.classList.add('active');
}
clearSelect(select, this.#element, dataSelectText);
});
});
}
@ -642,13 +751,22 @@
* @method #searchMode
*/
#searchMode(random) {
const { lenguage } = this.#options;
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...');
let textNode = '';
if (lenguage === 'ru') {
textNode = document.createTextNode(`${ru.textInListSearch}`);
} else {
textNode = document.createTextNode(`${en.textInListSearch}`);
}
result.appendChild(textNode);
result.classList.add('displayHide');
result.classList.add('noRezult');
input.parentElement.appendChild(result);
input.addEventListener('click', (e) => {
@ -699,6 +817,27 @@
}
}
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @description Закрывает список по клику вне элемента
* @method #closeSelectClick
*/
#closeSelectClick() {
const dropdown = document.querySelector(`${this.#options.selector}`);
document.addEventListener('click', (e) => {
const withinBoundaries = e.composedPath().includes(dropdown);
if (!withinBoundaries) {
if (this.btn) {
return;
} else {
this.#close();
}
}
});
}
}
</code></pre>
</article>
@ -726,6 +865,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -736,6 +877,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>

17
documentation/create-element.js.html
View File

@ -65,6 +65,7 @@
}
svgIcon.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
nativOptionMultiple(nativOption, title, false);
@ -100,7 +101,6 @@
export function createNativeSelect() {
const nativSelect = document.createElement('select');
nativSelect.setAttribute('form', 'data');
nativSelect.setAttribute('name', 'dataSelect');
nativSelect.classList.add('nativSelect');
return nativSelect;
@ -120,15 +120,25 @@
/**
* Метод который создает поиск элементов в селекте
* @param {string} random уникальное значение для input элемента.
* @param {string} lenguage текст на определенном языке переданный из файла language.js
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/
export function createInputSearch(random) {
export function createInputSearch(random, lenguage) {
const intputSearch = document.createElement('input');
intputSearch.type = 'text';
intputSearch.classList.add('inputSearch');
intputSearch.setAttribute('id', `searchSelect-${random}`);
if (lenguage) {
intputSearch.setAttribute('placeholder', `${lenguage}`);
} else {
intputSearch.setAttribute('placeholder', 'Search...');
}
intputSearch.addEventListener('click', (e) => {
e.preventDefault();
});
return intputSearch;
}
@ -158,6 +168,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -168,6 +180,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>

127
documentation/global.html
View File

@ -46,7 +46,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line232">line 232</a>
<a href="cg-dropdown.js.html#line272">line 272</a>
</li>
</ul>
</dd>
@ -68,6 +68,7 @@
'MAN',
'max',
],
darkTheme: true,
multiselect: true,
multiselectTag: true,
}</code></pre>
@ -92,7 +93,27 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line480">line 480</a>
<a href="cg-dropdown.js.html#line606">line 606</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="checkTheme">
<span class="type-signature">(protected) </span>#checkTheme<span class="signature"
>()</span
><span class="type-signature"></span>
</h4>
<div class="description">Изменяет цветовую схему с темной на светлую.</div>
<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#line479">line 479</a>
</li>
</ul>
</dd>
@ -111,7 +132,27 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line469">line 469</a>
<a href="cg-dropdown.js.html#line595">line 595</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="closeSelectClick">
<span class="type-signature">(protected) </span>#closeSelectClick<span class="signature"
>()</span
><span class="type-signature"></span>
</h4>
<div class="description">Закрывает список по клику вне элемента</div>
<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#line800">line 800</a>
</li>
</ul>
</dd>
@ -131,7 +172,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line575">line 575</a>
<a href="cg-dropdown.js.html#line776">line 776</a>
</li>
</ul>
</dd>
@ -179,7 +220,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line299">line 299</a>
<a href="cg-dropdown.js.html#line341">line 341</a>
</li>
</ul>
</dd>
@ -227,7 +268,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line449">line 449</a>
<a href="cg-dropdown.js.html#line578">line 578</a>
</li>
</ul>
</dd>
@ -275,7 +316,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line327">line 327</a>
<a href="cg-dropdown.js.html#line379">line 379</a>
</li>
</ul>
</dd>
@ -295,7 +336,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line393">line 393</a>
<a href="cg-dropdown.js.html#line508">line 508</a>
</li>
</ul>
</dd>
@ -341,7 +382,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line617">line 617</a>
<a href="cg-dropdown.js.html#line726">line 726</a>
</li>
</ul>
</dd>
@ -392,7 +433,58 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line107">line 107</a>
<a href="cg-dropdown.js.html#line123">line 123</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="addLenguage">
<span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</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>lenguage</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
объект в котором находятся поля для подключения языка имеет два обязательных поля
placeholder, textInListSearch
</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#line249">line 249</a>
</li>
</ul>
</dd>
@ -450,7 +542,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line213">line 213</a>
<a href="cg-dropdown.js.html#line229">line 229</a>
</li>
</ul>
</dd>
@ -498,7 +590,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line129">line 129</a>
<a href="cg-dropdown.js.html#line145">line 145</a>
</li>
</ul>
</dd>
@ -517,7 +609,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line147">line 147</a>
<a href="cg-dropdown.js.html#line163">line 163</a>
</li>
</ul>
</dd>
@ -564,7 +656,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line192">line 192</a>
<a href="cg-dropdown.js.html#line208">line 208</a>
</li>
</ul>
</dd>
@ -609,7 +701,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line179">line 179</a>
<a href="cg-dropdown.js.html#line195">line 195</a>
</li>
</ul>
</dd>
@ -667,7 +759,7 @@
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line157">line 157</a>
<a href="cg-dropdown.js.html#line173">line 173</a>
</li>
</ul>
</dd>
@ -697,6 +789,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -707,6 +801,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>

21
documentation/index.html
View File

@ -23,12 +23,30 @@
реализованны методы взаимодействия с селектом
</p>
<h5>Для создания компонета нужно:</h5>
<ul>
<li>Создать button елемент</li>
<li>Присвоить ему класс cg-dropdown</li>
<li>Присвоить ему уникальный класс, например(cg-dropdown_categories)</li>
<li>Создать новый экземпляр класса(new DropDown)</li>
<li>Передать все желаемые настройки как объект</li>
</ul>
<p>
<strong>*Все настройки можно посмореть в вкладке</strong>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса</a
>
</p>
<h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
<ul>
<li>Кнопка селекта</li>
<li>Список c элементами селекта</li>
<li>Placeholder</li>
<li>При режиме мультиселект доступна кастомизация chips(выбранных эл-ов)</li>
<li>Label элемента(если он был указан)</li>
<li>Переключение тем с темной на светлую</li>
</ul>
</section>
</div>
@ -54,6 +72,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -64,6 +84,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>

272
documentation/module-Utils.html
View File

@ -22,7 +22,10 @@
<article>
<div class="container-overview">
<div class="description">Utils module</div>
<div class="description">
В этом модуле представленны функции которые переиспользуются в классе селекта или в
других модулях. Он создан для лучшего понимания кода.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
@ -77,7 +80,7 @@
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line84">line 84</a>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line78">line 78</a>
</li>
</ul>
</dd>
@ -94,6 +97,71 @@
</dd>
</dl>
<h4 class="name" id=".clearSelect">
<span class="type-signature">(static) </span>clearSelect<span class="signature"
>(select, element, dataSelectText)</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>select</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">место в селекте которое будет переназначено на ''.</td>
</tr>
<tr>
<td class="name"><code>element</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">экземпляр класса DropDown.</td>
</tr>
<tr>
<td class="name"><code>dataSelectText</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">текст который отрисовывается в селекте.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line174">line 174</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id=".createSelected">
<span class="type-signature">(static) </span>createSelected<span class="signature"
>(element, content, styles)</span
@ -272,7 +340,7 @@
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line71">line 71</a>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line65">line 65</a>
</li>
</ul>
</dd>
@ -332,7 +400,7 @@
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line98">line 98</a>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line111">line 111</a>
</li>
</ul>
</dd>
@ -348,6 +416,198 @@
<span class="param-type">object</span>
</dd>
</dl>
<h4 class="name" id=".getSelectText">
<span class="type-signature">(static) </span>getSelectText<span class="signature"
>(data, select)</span
><span class="type-signature"> &rarr; {HTMLElement}</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>data</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">объект в котором находяться title селекта</td>
</tr>
<tr>
<td class="name"><code>select</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">елемент селекта, куда будет вставляться title</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line92">line 92</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">возвращает сформированный елемент селекта</div>
<dl>
<dt>Type</dt>
<dd>
<span class="param-type">HTMLElement</span>
</dd>
</dl>
<h4 class="name" id=".nativOptionMultiple">
<span class="type-signature">(static) </span>nativOptionMultiple<span class="signature"
>(element, item, condition)</span
><span class="type-signature"></span>
</h4>
<div class="description">
Поведение нативного(Multiple) селекта при выборе в кастомном
</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>element</code></td>
<td class="type">
<span class="param-type">NodeList</span>
</td>
<td class="description last">NodeList нативного селекта</td>
</tr>
<tr>
<td class="name"><code>item</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">выбранный элемент в кастомном селекте</td>
</tr>
<tr>
<td class="name"><code>condition</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">
специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line152">line 152</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id=".nativOptionOrdinary">
<span class="type-signature">(static) </span>nativOptionOrdinary<span class="signature"
>(element, item)</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>element</code></td>
<td class="type">
<span class="param-type">NodeList</span>
</td>
<td class="description last">NodeList нативного селекта</td>
</tr>
<tr>
<td class="name"><code>item</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">выбранный элемент в кастомном селекте</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line137">line 137</a>
</li>
</ul>
</dd>
</dl>
</article>
</section>
</div>
@ -373,6 +633,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -383,6 +645,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>
@ -392,7 +655,6 @@
<li><a href="global.html#selectIndex">selectIndex</a></li>
</ul>
</nav>
<br class="clear" />
<footer>

28
documentation/module-createElementChips.html
View File

@ -21,7 +21,12 @@
<header></header>
<article>
<div class="container-overview"></div>
<div class="container-overview">
<div class="description">
В этом модуле представленны функции используемые в классе селекта. Модуль предназначен
для выноса важной логики селекта и удобства использования.
</div>
</div>
<h3 class="subsection-title">Methods</h3>
@ -116,7 +121,7 @@
<h4 class="name" id=".createInputSearch">
<span class="type-signature">(static) </span>createInputSearch<span class="signature"
>(random)</span
>(random, lenguage)</span
><span class="type-signature"> &rarr; {HTMLInputElement}</span>
</h4>
@ -145,6 +150,18 @@
<td class="description last">уникальное значение для input элемента.</td>
</tr>
<tr>
<td class="name"><code>lenguage</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">
текст на определенном языке переданный из файла language.js
</td>
</tr>
</tbody>
</table>
@ -154,7 +171,7 @@
<ul class="dummy">
<li>
<a href="create-element.js.html">create-element.js</a>,
<a href="create-element.js.html#line102">line 102</a>
<a href="create-element.js.html#line103">line 103</a>
</li>
</ul>
</dd>
@ -185,7 +202,7 @@
<ul class="dummy">
<li>
<a href="create-element.js.html">create-element.js</a>,
<a href="create-element.js.html#line77">line 77</a>
<a href="create-element.js.html#line78">line 78</a>
</li>
</ul>
</dd>
@ -258,6 +275,8 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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>
@ -268,6 +287,7 @@
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</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>

3
documentation/styles/descriptionOptions.css Normal file
View File

@ -0,0 +1,3 @@
.descriptionOptions li {
margin-top: 15px;
}

89
documentation/utils.js.html
View File

@ -62,15 +62,16 @@
return;
}
const { head, caret, placeholder } = styles;
const { head, caret, placeholder, lable } = styles;
const cgSelect = element.querySelector('.cg-select');
const caretSelect = element.querySelector('.caret');
const placeholderSelect = element.querySelector('.selected');
const lableItem = element.parentElement.querySelector('h1.label');
customStylesFormat(head, cgSelect);
customStylesFormat(caret, caretSelect);
customStylesFormat(lable, lableItem);
if (placeholderSelect) {
customStylesFormat(placeholder, placeholderSelect);
@ -103,6 +104,25 @@
return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; item.hasOwnProperty('value');
}
/**
* Вставка изначального текста селекта(до выбора)
* @param {object} data объект в котором находяться title селекта
* @param {HTMLElement} select елемент селекта, куда будет вставляться title
* @returns {HTMLElement} возвращает сформированный елемент селекта
*/
export function getSelectText(data, select) {
const { placeholder, selected } = data;
if (placeholder) {
select.innerText = placeholder;
} else if (selected) {
select.innerText = selected;
} else {
select.innerText = 'Select...';
}
return select;
}
/**
* Преобразование каждого елемента полученного из поля Items;
* @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
@ -165,6 +185,67 @@
}
});
}
/**
* Создание кнопки отчиски селекта, при единичном выборе.
* @param {HTMLElement} select место в селекте которое будет переназначено на ''.
* @param {HTMLElement} element экземпляр класса DropDown.
* @param {object} dataSelectText текст который отрисовывается в селекте.
*/
export function clearSelect(select, element, dataSelectText) {
const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
const options = element.querySelectorAll('.list__item');
const ulMultiSelect = element.querySelector('.multiselect-tag');
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 &amp;&amp; multiselectTag == true) {
return;
}
if (darkTheme === true || !darkTheme) {
path1.classList.add('pathWhite');
path2.classList.add('pathWhite');
}
if (darkTheme === false) {
path1.classList.add('pathBlack');
path2.classList.add('pathBlack');
}
svgIcon.classList.add('svg-icon');
svgIcon.classList.add('svg-clear');
select.appendChild(svgIcon);
svgIcon.addEventListener('click', () => {
select.innerText = '';
if (Array.isArray(selectedItems)) {
selectedItems.splice(0);
indexes.splice(0);
}
checkBox.forEach((item) => {
item.checked = false;
});
getSelectText(dataSelectText, select);
options.forEach((option) => {
option.classList.remove('active');
});
});
}
</code></pre>
</article>
</section>
@ -191,15 +272,19 @@
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</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#addLenguage">addLenguage</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>

3
src/cg-dropdown.js
View File

@ -93,7 +93,9 @@ export class DropDown {
placeholder: '...',
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
styles: {
head: {
background: '...',
@ -289,6 +291,7 @@ export class DropDown {
'MAN',
'max',
],
darkTheme: true,
multiselect: true,
multiselectTag: true,
}