cg-select/documentation/global.html
2022-12-29 17:15:19 +03:00

925 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSDoc: Global</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css" />
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
</head>
<body>
<div id="main">
<h1 class="page-title">Global</h1>
<section>
<header>
<h2></h2>
</header>
<article>
<div class="container-overview">
<dl class="details"></dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="init">
<span class="type-signature">(protected) </span>#init<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#line272">line 272</a>
</li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>{
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
darkTheme: true,
multiselect: true,
multiselectTag: true,
}</code></pre>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="addOptionsBehaviour">
<span class="type-signature">(protected) </span>#addOptionsBehaviour<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#line606">line 606</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="checkTheme">
<span class="type-signature">(protected) </span>#checkTheme<span class="signature"
>()</span
><span class="type-signature"></span>
</h4>
<div class="description">Изменяет цветовую схему с темной на светлую.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line479">line 479</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="close">
<span class="type-signature">(protected) </span>#close<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#line595">line 595</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="closeSelectClick">
<span class="type-signature">(protected) </span>#closeSelectClick<span class="signature"
>()</span
><span class="type-signature"></span>
</h4>
<div class="description">Закрывает список по клику вне элемента</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line800">line 800</a>
</li>
</ul>
</dd>
</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
><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#line776">line 776</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="initSelected">
<span class="type-signature">(protected) </span>#initSelected<span class="signature"
>(select)</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">string</span>
</td>
<td class="description last">
необязательный елемент. Используется в методе selectIndex
</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#line341">line 341</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="open">
<span class="type-signature">(protected) </span>#open<span class="signature"
>(oneClick)</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>oneClick</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">
необязательный параметр передаваемый из функции buttonControl
</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#line578">line 578</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="render">
<span class="type-signature">(protected) </span>#render<span class="signature"
>(select)</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">string</span>
</td>
<td class="description last">
необязательный елемент. Передаеться в метод initSelected
</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#line379">line 379</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="renderUrl">
<span class="type-signature">(protected) </span>#renderUrl<span class="signature"
>()</span
><span class="type-signature"></span>
</h4>
<div class="description">Рендер елементов в селекте переданных с URL и их настойка</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#line508">line 508</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="searchMode">
<span class="type-signature">(protected) </span>#searchMode<span class="signature"
>(random)</span
><span class="type-signature"></span>
</h4>
<div class="description">Метод который реализует поиск элементов в селекте</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>random</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">уникальное значение для input элемента.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line726">line 726</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="addItem">
<span class="type-signature"></span>addItem<span class="signature">(item)</span
><span class="type-signature"></span>
</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>item</code></td>
<td class="type">
<span class="param-type">string</span>
|
<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="cg-dropdown.js.html">cg-dropdown.js</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>addLanguage<span class="signature">(language)</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>language</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
объект в котором находятся поля для подключения языка имеет два обязательных поля
placeholder, textInListSearch
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html#line249">line 249</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="buttonControl">
<span class="type-signature"></span>buttonControl<span class="signature"
>(button, method)</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>button</code></td>
<td class="type">
<span class="param-type">HTMLInputElement</span>
</td>
<td class="description last">HTML кнопка</td>
</tr>
<tr>
<td class="name"><code>method</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">метод открытия open/close</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#line229">line 229</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="deleteItem">
<span class="type-signature"></span>deleteItem<span class="signature">(index)</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>index</code></td>
<td class="type">
<span class="param-type">number</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-dropdown.js</a>,
<a href="cg-dropdown.js.html#line145">line 145</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="deleteItemAll">
<span class="type-signature"></span>deleteItemAll<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#line163">line 163</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="disabled">
<span class="type-signature"></span>disabled<span class="signature">(value)</span
><span class="type-signature"></span>
</h4>
<div class="description">Метод позволяющий переключать состояние селекта disabled,</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>value</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">
Передаваемый параметр для добавления атрибута disabled;
</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#line208">line 208</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="getElement">
<span class="type-signature"></span>getElement<span class="signature">(numberItem)</span
><span class="type-signature"> &rarr; {HTMLElement}</span>
</h4>
<div class="description">Метод экземпляра класса DropDown</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>numberItem</code></td>
<td class="type">
<span class="param-type">number</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-dropdown.js</a>,
<a href="cg-dropdown.js.html#line195">line 195</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">возвращает ссылку на выбранный HTML элемент</div>
<dl>
<dt>Type</dt>
<dd>
<span class="param-type">HTMLElement</span>
</dd>
</dl>
<h4 class="name" id="selectIndex">
<span class="type-signature"></span>selectIndex<span class="signature">(index)</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>index</code></td>
<td class="type">
<span class="param-type">number</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#line173">line 173</a>
</li>
</ul>
</dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2>
<h3>Classes</h3>
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
<ul>
<li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createElementChips</a></li>
</ul>
<h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#checkTheme">#checkTheme</a></li>
<li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<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#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>
<li><a href="global.html#deleteItemAll">deleteItemAll</a></li>
<li><a href="global.html#disabled">disabled</a></li>
<li><a href="global.html#getElement">getElement</a></li>
<li><a href="global.html#selectIndex">selectIndex</a></li>
</ul>
</nav>
<br class="clear" />
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Wed
Oct 19 2022 20:30:19 GMT+0300 (Moscow Standard Time)
</footer>
<script>
prettyPrint();
</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>