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

Fixed documentation and package.json

Browse Source
This commit is contained in:
MaxOvs 2022-12-29 17:15:19 +03:00
parent 2a26967058
commit e24d1951e5
12 changed files with 1306 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
documentation/DropDown.html
View File

@ -110,10 +110,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -134,10 +131,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

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

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSDoc: Source: cg-dropdown.js</title>
<title>JSDoc: Source: cg-select.js</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
@ -15,7 +15,7 @@
<body>
<div id="main">
<h1 class="page-title">Source: cg-dropdown.js</h1>
<h1 class="page-title">Source: cg-select.js</h1>
<section>
<article>
@ -40,7 +40,7 @@
/**
* @class Описание класса DropDown
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
*@author Овсяников Максим
* @author Овсяников Максим
*/
export class DropDown {
/**
@ -116,7 +116,9 @@
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: {
head: {
background: '...',
@ -238,11 +240,14 @@
}
const select = this.#element.querySelector('.cg-select');
const nativeSelect = this.#element.querySelector('.nativeSelect');
if (value === true) {
this.#element.setAttribute('disabled', true);
nativeSelect.setAttribute('disabled', true);
select.classList.add('disabled');
} else {
this.#element.removeAttribute('disabled');
nativeSelect.removeAttribute('disabled');
select.classList.remove('disabled');
}
}
@ -255,11 +260,18 @@
* @method buttonControl
*/
buttonControl(button, method) {
const {listDisplayMode} = this.#options;
if(listDisplayMode === true){
return
}
this.btn = button;
button.addEventListener('click', () => {
if (method === 'open') {
if (method.toLowerCase() === 'open') {
this.#open(true);
} else if (method === 'close') {
} else if (method.toLowerCase() === 'close') {
this.#close();
} else {
return;
@ -269,14 +281,18 @@
/**
* Метод экземпляра класса DropDown
* @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
* @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
* @method addLenguage
* @method addLanguage
*/
addLenguage(lenguage) {
const { placeholder, textInListSearch } = lenguage;
addLanguage(language) {
const { placeholder, textInListSearch, selectPlaceholder } = language;
const { searchMode } = this.#options;
const select = this.#element.querySelector('.selected');
const textNodeSelect = document.createTextNode(selectPlaceholder);
select.appendChild(textNodeSelect);
if (searchMode &amp;&amp; searchMode == true) {
const search = this.#element.querySelector('.inputSearch');
const textNoRezult = this.#element.querySelector('.noRezult');
@ -323,9 +339,10 @@
const elem = document.querySelector(options.selector);
if (!elem) {
throw new Error(`Element with selector ${options.selector}`);
}
//TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
// if (!elem) {
// throw new Error(`Element with selector ${options.selector}`);
// }
this.#element = elem;
@ -368,14 +385,18 @@
* @protected
*/
#initSelected(select) {
const { styles, selected, placeholder, lable } = this.#options;
const { styles, selected, placeholder, lable, language } = this.#options;
if (selected) {
createSelected(this.#element, selected);
} else if (placeholder) {
createSelected(this.#element, placeholder);
} else {
createSelected(this.#element, 'Select...');
if (language &amp;&amp; language === 'ru') {
createSelected(this.#element, ru.selectPlaceholder);
} else {
createSelected(this.#element, en.selectPlaceholder);
}
}
if (select) {
@ -405,7 +426,13 @@
* @description Рендер елементов в селекте.
*/
#render(select) {
const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
const {
styles, multiselect,
searchMode, multiselectTag,
darkTheme, language,
nativeSelectMode, listDisplayMode
} = this.#options;
const random = Math.random().toString(36).substring(2, 10);
if (select || (select &amp;&amp; styles)) {
@ -422,12 +449,13 @@
this.random = random;
if (searchMode) {
if (lenguage === 'ru') {
if (language === 'ru') {
inputSearch = createInputSearch(random, ru.placeholder);
} else {
inputSearch = createInputSearch(random, en.placeholder);
}
const { search } = styles;
customStylesFormat(search, inputSearch);
ulList.appendChild(inputSearch);
}
@ -491,9 +519,19 @@
this.#checkTheme();
}
if(nativeSelectMode === true){
this.#selectMode(nativeSelectMode);
}
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
if(listDisplayMode === true){
this.#displayMode(listDisplayMode)
}
this.#addOptionsBehaviour();
}
@ -751,14 +789,14 @@
* @method #searchMode
*/
#searchMode(random) {
const { lenguage } = this.#options;
const { language } = this.#options;
const input = this.#element.querySelector(`#searchSelect-${random}`);
const searchSelect = this.#element.querySelectorAll('.list__item');
const result = document.createElement('p');
let textNode = '';
if (lenguage === 'ru') {
if (language &amp;&amp; language === 'ru') {
textNode = document.createTextNode(`${ru.textInListSearch}`);
} else {
textNode = document.createTextNode(`${en.textInListSearch}`);
@ -774,17 +812,22 @@
});
input.oninput = function () {
let val = this.value.trim();
let valueSearch = this.value.trim().toLowerCase();
let anyMatch = false;
if (val != '') {
if (valueSearch != '') {
searchSelect.forEach((elem) => {
if (elem.innerText.search(val) == -1) {
let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
anyMatch = anyMatch || isMatching;
if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
elem.classList.add('displayHide');
result.classList.remove('displayHide');
} else {
elem.classList.remove('displayHide');
}
});
result.classList.toggle('displayHide', anyMatch);
} else {
searchSelect.forEach((elem) => {
elem.classList.remove('displayHide');
@ -838,6 +881,64 @@
}
});
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
* @description Изменяет отображение селекта на мобильных устройствах
* @method #selectMode
*/
#selectMode(nativeSelectMode){
let win = window.outerWidth;
if(nativeSelectMode === true){
const select = this.#element.querySelector('.cg-select');
const list = this.#element.querySelector('.list');
const nativeSelect = this.#element.querySelector('.nativeSelect')
if(win &lt; 576){
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
} else if( win > 576){
select.classList.remove('displayHide');
list.classList.remove('displayHide');
nativeSelect.classList.remove('nativeSelectActive');
nativeSelect.classList.add('displayHide');
}
} else{
return
}
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method #displayMode
*/
#displayMode(listDisplayMode){
if(listDisplayMode === true){
const modal = document.createElement('div');
const body = document.querySelector('body')
const list = this.#list;
modal.appendChild(list);
this.#element.appendChild(modal);
this.#element.addEventListener('click', () => {
modal.classList.toggle('modal');
list.classList.toggle('listModal');
body.classList.toggle('overflowHide')
});
} else{
return
}
}
}
</code></pre>
</article>
@ -850,10 +951,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -874,10 +972,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

87
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 → documentation/constructor.html
View File

@ -79,29 +79,31 @@
<h5>Example</h5>
<pre class="prettyprint"><code>options = {
selector: 'Уникальный селектор',
selected: 'Выбранный элемент',
placeholder: '...',
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
styles: {
head: {
background: '...',
},
list: {...},
chips: {...},
caret: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
multiselect: true/false,
multiselectTag: true/false,
}</code></pre>
selector: 'Уникальный селектор',
selected: 'Выбранный элемент',
placeholder: '...',
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: {
head: {
background: '...',
},
list: {...},
chips: {...},
caret: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
multiselect: true/false,
multiselectTag: true/false,
}</code></pre>
</div>
</article>
@ -112,28 +114,34 @@
<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, тогда при выборе елемента в
@ -142,16 +150,33 @@
</li>
<li>
<strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию
<strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
отображаться нативный селект из HTML 5;
</li>
<li>
<strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
с выбором опции будет отображаться как модальное окно.
</li>
<li>
<strong>language</strong> - необязательный параметр, отвечающий за локализацию
некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
передав туда объект с полями для текста.
</li>
<li>
<strong>event</strong> - необязательный параметр, который отвечает за поведения
селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
открываться при наведении.
</li>
<li>
<strong>url</strong> -
<strong
@ -160,16 +185,19 @@
>
htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
</li>
<li>
<strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
отрисовываются как обычный текст, через запятую.
</li>
<li>
<strong>multiselectTag</strong> - необязательный параметр, который отвечает за
поведения селекта, для него,
<strong>***работает только в месте с подключением multiselect.</strong>
</li>
<li>
<strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
@ -186,10 +214,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -210,10 +235,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

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

@ -153,10 +153,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -177,10 +174,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

113
documentation/global.html
View File

@ -158,6 +158,104 @@
</dd>
</dl>
<h4 class="name" id="displayMode">
<span class="type-signature">(protected) </span>#displayMode<span class="signature"
>(listDisplayMode)</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>listDisplayMode</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="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line895">line 895</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="selectMode">
<span class="type-signature">(protected) </span>#selectMode<span class="signature"
>(nativeSelectMode)</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>nativeSelectMode</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="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line864">line 864</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="initEvent">
<span class="type-signature">(protected) </span>#initEvent<span class="signature"
>()</span
@ -440,7 +538,7 @@
</dl>
<h4 class="name" id="addLenguage">
<span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</span
<span class="type-signature"></span>addLanguage<span class="signature">(language)</span
><span class="type-signature"></span>
</h4>
@ -464,7 +562,7 @@
<tbody>
<tr>
<td class="name"><code>lenguage</code></td>
<td class="name"><code>language</code></td>
<td class="type">
<span class="param-type">object</span>
@ -758,7 +856,7 @@
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line173">line 173</a>
</li>
</ul>
@ -774,10 +872,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -798,10 +893,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

14
documentation/index.html
View File

@ -35,10 +35,7 @@
</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
>
<a href="constructor.html">Конструктор класса</a>
</p>
<h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
@ -59,10 +56,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -83,10 +77,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

9
documentation/module-Utils.html
View File

@ -618,10 +618,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -642,10 +639,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

9
documentation/module-createElementChips.html
View File

@ -260,10 +260,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -284,10 +281,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

9
documentation/utils.js.html
View File

@ -257,10 +257,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<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"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -281,10 +278,12 @@
<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>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</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>

986
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -24,6 +24,7 @@
},
"devDependencies": {
"@parcel/transformer-sass": "^2.7.0",
"jsdoc": "^4.0.0",
"parcel": "^2.7.0",
"prettier": "^2.7.1"
},

14
src/cg-select.js
View File

@ -499,7 +499,7 @@ export class DropDown {
}
if(nativeSelectMode === true){
this.#SelectMode(nativeSelectMode);
this.#selectMode(nativeSelectMode);
}
@ -508,7 +508,7 @@ export class DropDown {
this.#caret = this.#element.querySelector('.caret');
if(listDisplayMode === true){
this.#DisplayMode(listDisplayMode)
this.#displayMode(listDisplayMode)
}
this.#addOptionsBehaviour();
@ -866,9 +866,9 @@ export class DropDown {
* @protected
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
* @description Изменяет отображение селекта на мобильных устройствах
* @method #SelectMode
* @method #selectMode
*/
#SelectMode(nativeSelectMode){
#selectMode(nativeSelectMode){
let win = window.outerWidth;
if(nativeSelectMode === true){
@ -897,10 +897,9 @@ export class DropDown {
* @protected
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method #DisplayMode
* @returns
* @method #displayMode
*/
#DisplayMode(listDisplayMode){
#displayMode(listDisplayMode){
if(listDisplayMode === true){
const modal = document.createElement('div');
const body = document.querySelector('body')
@ -914,7 +913,6 @@ export class DropDown {
list.classList.toggle('listModal');
body.classList.toggle('overflowHide')
});
} else{
return
}