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

Merge pull request #24 from apuc/fix-all-documentation

Browse Source 
Fixed/added description all documentation
This commit is contained in:
MaxOvs19
2022-11-09 12:23:34 +03:00
committed by GitHub
parent e7182e684c 366b918ca7
commit 44f8c1a65b
11 changed files with 803 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
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/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script> <script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css" /> <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/jsdoc-default.css" />
<link type="text/css" rel="stylesheet" href="styles/descriptionOptions.css" />
</head> </head>
<body> <body>
@@ -77,10 +79,14 @@
<h5>Example</h5> <h5>Example</h5>
<pre class="prettyprint"><code>options = { <pre class="prettyprint"><code>options = {
selector: 'Уникальный селектор', selector: 'Уникальный селектор',
selected: 'Выбранный элемент', selected: 'Выбранный элемент',
placeholder: '...', placeholder: '...',
items: [string|number|object], items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
styles: { styles: {
head: { head: {
background: '...', background: '...',
@@ -89,6 +95,7 @@
chips: {...}, chips: {...},
caret: {...}, caret: {...},
placeholder: {...}, placeholder: {...},
lable: {..},
}, },
event: '...', event: '...',
url: 'http/...', url: 'http/...',
@@ -97,6 +104,79 @@
}</code></pre> }</code></pre>
</div> </div>
</article> </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> </section>
</div> </div>
@@ -121,6 +201,8 @@
<ul> <ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li> <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</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#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</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#initSelected">#initSelected</a></li>
@@ -131,6 +213,7 @@
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addItem">addItem</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#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

15
documentation/DropDown.html
View File

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

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

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

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

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

127
documentation/global.html
View File

@@ -46,7 +46,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -68,6 +68,7 @@
'MAN', 'MAN',
'max', 'max',
], ],
darkTheme: true,
multiselect: true, multiselect: true,
multiselectTag: true, multiselectTag: true,
}</code></pre> }</code></pre>
@@ -92,7 +93,27 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -111,7 +132,27 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -131,7 +172,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -179,7 +220,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -227,7 +268,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -275,7 +316,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -295,7 +336,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -341,7 +382,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -392,7 +433,58 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -450,7 +542,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -498,7 +590,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -517,7 +609,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -564,7 +656,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -609,7 +701,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -667,7 +759,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -697,6 +789,8 @@
<ul> <ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li> <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</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#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</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#initSelected">#initSelected</a></li>
@@ -707,6 +801,7 @@
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addItem">addItem</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#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

21
documentation/index.html
View File

@@ -23,12 +23,30 @@
реализованны методы взаимодействия с селектом реализованны методы взаимодействия с селектом
</p> </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> <h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
<ul> <ul>
<li>Кнопка селекта</li> <li>Кнопка селекта</li>
<li>Список c элементами селекта</li> <li>Список c элементами селекта</li>
<li>Placeholder</li> <li>Placeholder</li>
<li>При режиме мультиселект доступна кастомизация chips(выбранных эл-ов)</li> <li>При режиме мультиселект доступна кастомизация chips(выбранных эл-ов)</li>
<li>Label элемента(если он был указан)</li>
<li>Переключение тем с темной на светлую</li>
</ul> </ul>
</section> </section>
</div> </div>
@@ -54,6 +72,8 @@
<ul> <ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li> <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</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#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</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#initSelected">#initSelected</a></li>
@@ -64,6 +84,7 @@
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addItem">addItem</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#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

272
documentation/module-Utils.html
View File

@@ -22,7 +22,10 @@
<article> <article>
<div class="container-overview"> <div class="container-overview">
<div class="description">Utils module</div> <div class="description">
В этом модуле представленны функции которые переиспользуются в классе селекта или в
других модулях. Он создан для лучшего понимания кода.
</div>
<dl class="details"> <dl class="details">
<dt class="tag-source">Source:</dt> <dt class="tag-source">Source:</dt>
@@ -77,7 +80,7 @@
<dd class="tag-source"> <dd class="tag-source">
<ul class="dummy"> <ul class="dummy">
<li> <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> </li>
</ul> </ul>
</dd> </dd>
@@ -94,6 +97,71 @@
</dd> </dd>
</dl> </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"> <h4 class="name" id=".createSelected">
<span class="type-signature">(static) </span>createSelected<span class="signature" <span class="type-signature">(static) </span>createSelected<span class="signature"
>(element, content, styles)</span >(element, content, styles)</span
@@ -272,7 +340,7 @@
<dd class="tag-source"> <dd class="tag-source">
<ul class="dummy"> <ul class="dummy">
<li> <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> </li>
</ul> </ul>
</dd> </dd>
@@ -332,7 +400,7 @@
<dd class="tag-source"> <dd class="tag-source">
<ul class="dummy"> <ul class="dummy">
<li> <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> </li>
</ul> </ul>
</dd> </dd>
@@ -348,6 +416,198 @@
<span class="param-type">object</span> <span class="param-type">object</span>
</dd> </dd>
</dl> </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> </article>
</section> </section>
</div> </div>
@@ -373,6 +633,8 @@
<ul> <ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li> <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</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#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</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#initSelected">#initSelected</a></li>
@@ -383,6 +645,7 @@
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addItem">addItem</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#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>
@@ -392,7 +655,6 @@
<li><a href="global.html#selectIndex">selectIndex</a></li> <li><a href="global.html#selectIndex">selectIndex</a></li>
</ul> </ul>
</nav> </nav>
<br class="clear" /> <br class="clear" />
<footer> <footer>

28
documentation/module-createElementChips.html
View File

@@ -21,7 +21,12 @@
<header></header> <header></header>
<article> <article>
<div class="container-overview"></div> <div class="container-overview">
<div class="description">
В этом модуле представленны функции используемые в классе селекта. Модуль предназначен
для выноса важной логики селекта и удобства использования.
</div>
</div>
<h3 class="subsection-title">Methods</h3> <h3 class="subsection-title">Methods</h3>
@@ -116,7 +121,7 @@
<h4 class="name" id=".createInputSearch"> <h4 class="name" id=".createInputSearch">
<span class="type-signature">(static) </span>createInputSearch<span class="signature" <span class="type-signature">(static) </span>createInputSearch<span class="signature"
>(random)</span >(random, lenguage)</span
><span class="type-signature"> &rarr; {HTMLInputElement}</span> ><span class="type-signature"> &rarr; {HTMLInputElement}</span>
</h4> </h4>
@@ -145,6 +150,18 @@
<td class="description last">уникальное значение для input элемента.</td> <td class="description last">уникальное значение для input элемента.</td>
</tr> </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> </tbody>
</table> </table>
@@ -154,7 +171,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="create-element.js.html">create-element.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -185,7 +202,7 @@
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="create-element.js.html">create-element.js</a>, <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> </li>
</ul> </ul>
</dd> </dd>
@@ -258,6 +275,8 @@
<ul> <ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li> <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</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#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</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#initSelected">#initSelected</a></li>
@@ -268,6 +287,7 @@
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addItem">addItem</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#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</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; return;
} }
const { head, caret, placeholder } = styles; const { head, caret, placeholder, lable } = styles;
const cgSelect = element.querySelector('.cg-select'); const cgSelect = element.querySelector('.cg-select');
const caretSelect = element.querySelector('.caret'); const caretSelect = element.querySelector('.caret');
const placeholderSelect = element.querySelector('.selected'); const placeholderSelect = element.querySelector('.selected');
const lableItem = element.parentElement.querySelector('h1.label');
customStylesFormat(head, cgSelect); customStylesFormat(head, cgSelect);
customStylesFormat(caret, caretSelect); customStylesFormat(caret, caretSelect);
customStylesFormat(lable, lableItem);
if (placeholderSelect) { if (placeholderSelect) {
customStylesFormat(placeholder, placeholderSelect); customStylesFormat(placeholder, placeholderSelect);
@@ -103,6 +104,25 @@
return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; item.hasOwnProperty('value'); 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; * Преобразование каждого елемента полученного из поля Items;
* @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string * @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> </code></pre>
</article> </article>
</section> </section>
@@ -191,15 +272,19 @@
<ul> <ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li> <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</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#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</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#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</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#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addItem">addItem</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#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

5
src/cg-dropdown.js
View File

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