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

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

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

45
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

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

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

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

113
documentation/global.html
View File

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

14
documentation/index.html
View File

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

9
documentation/module-Utils.html
View File

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

9
documentation/module-createElementChips.html
View File

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

9
documentation/utils.js.html
View File

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

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": { "devDependencies": {
"@parcel/transformer-sass": "^2.7.0", "@parcel/transformer-sass": "^2.7.0",
"jsdoc": "^4.0.0",
"parcel": "^2.7.0", "parcel": "^2.7.0",
"prettier": "^2.7.1" "prettier": "^2.7.1"
}, },

14
src/cg-select.js
View File

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