Merge pull request #12 from apuc/add-documentation
Add documentation in sg-select
This commit is contained in:
MaxOvs19
GitHub
commit
214d65bdcd
29
README.md
29
README.md
@ -3,31 +3,4 @@
|
|||||||
-----------------------------------------------------
|
-----------------------------------------------------
|
||||||
This component allows you to create a generic select.
|
This component allows you to create a generic select.
|
||||||
-----------------------------------------------------
|
-----------------------------------------------------
|
||||||
|
All documentation on the select is located in the folder of the same name
|
||||||
Creating a Component:
|
|
||||||
|
|
||||||
- Сreate an element with class cg-dropdown and give it a unique selector.
|
|
||||||
```
|
|
||||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
|
||||||
```
|
|
||||||
- Create a class element.
|
|
||||||
```
|
|
||||||
const dropdown = new DropDown()
|
|
||||||
```
|
|
||||||
- Next, pass the desired settings
|
|
||||||
|
|
||||||
--------------------------------------------------
|
|
||||||
## Settings
|
|
||||||
|
|
||||||
options = {
|
|
||||||
- selector: Here we pass our unique selector. Obligatory item!!!
|
|
||||||
- placeholder: string
|
|
||||||
- selected: string
|
|
||||||
- items = []
|
|
||||||
- url: string
|
|
||||||
- event: string
|
|
||||||
- styles: {}
|
|
||||||
- multiselect: boolean
|
|
||||||
- multiselectTag: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,147 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Class: Конструктор класса DropDown</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">Class: Конструктор класса DropDown</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>
|
||||||
|
<span class="attribs"><span class="type-signature"></span></span>Конструктор класса
|
||||||
|
DropDown<span class="signature">(options)</span><span class="type-signature"></span>
|
||||||
|
</h2>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="container-overview">
|
||||||
|
<h4 class="name" id="Конструктор класса DropDown">
|
||||||
|
<span class="type-signature"></span>new Конструктор класса DropDown<span
|
||||||
|
class="signature"
|
||||||
|
>(options)</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>options</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="cg-dropdown.js.html">cg-dropdown.js</a>,
|
||||||
|
<a href="cg-dropdown.js.html#line74">line 74</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h5>Example</h5>
|
||||||
|
|
||||||
|
<pre class="prettyprint"><code>options = {
|
||||||
|
selector: 'Уникальный селектор',
|
||||||
|
selected: 'Выбранный элемент',
|
||||||
|
placeholder: '...',
|
||||||
|
items: [string|number|object],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
background: '...',
|
||||||
|
},
|
||||||
|
list: {...},
|
||||||
|
chips: {...},
|
||||||
|
caret: {...},
|
||||||
|
placeholder: {...},
|
||||||
|
},
|
||||||
|
event: '...',
|
||||||
|
url: 'http/...',
|
||||||
|
multiselect: true/false,
|
||||||
|
multiselectTag: true/false,
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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>
|
||||||
157
documentation/DropDown.html
Normal file
157
documentation/DropDown.html
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Class: DropDown</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">Class: DropDown</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>
|
||||||
|
<span class="attribs"><span class="type-signature"></span></span>DropDown<span
|
||||||
|
class="signature"
|
||||||
|
>()</span
|
||||||
|
><span class="type-signature"></span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="class-description">Описание класса DropDown</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="container-overview">
|
||||||
|
<h2>Constructor</h2>
|
||||||
|
|
||||||
|
<h4 class="name" id="DropDown">
|
||||||
|
<span class="type-signature"></span>new DropDown<span class="signature">()</span
|
||||||
|
><span class="type-signature"></span>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl class="details">
|
||||||
|
<dt class="tag-author">Author:</dt>
|
||||||
|
<dd class="tag-author">
|
||||||
|
<ul>
|
||||||
|
<li>Овсяников Максим</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
|
||||||
|
<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#line14">line 14</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="subsection-title">Classes</h3>
|
||||||
|
|
||||||
|
<dl>
|
||||||
|
<dt><a href="DropDown.html">DropDown</a></dt>
|
||||||
|
<dd></dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h3 class="subsection-title">Members</h3>
|
||||||
|
|
||||||
|
<h4 class="name" id="indexes">
|
||||||
|
<span class="type-signature"></span>indexes<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#line70">line 70</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h4 class="name" id="value">
|
||||||
|
<span class="type-signature"></span>value<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#line61">line 61</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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>
|
||||||
669
documentation/cg-dropdown.js.html
Normal file
669
documentation/cg-dropdown.js.html
Normal file
@ -0,0 +1,669 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Source: cg-dropdown.js</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">Source: cg-dropdown.js</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<pre class="prettyprint source linenums"><code>import {
|
||||||
|
createSelected,
|
||||||
|
customStyles,
|
||||||
|
getFormatItem,
|
||||||
|
customStylesFormat,
|
||||||
|
} from './components/utils';
|
||||||
|
import { createBreadcrumb } from './components/create-element';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @class Описание класса DropDown
|
||||||
|
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
||||||
|
*@author Овсяников Максим
|
||||||
|
*/
|
||||||
|
export class DropDown {
|
||||||
|
/**
|
||||||
|
* Созданный HTML елемент
|
||||||
|
* @type {HTMLElement}
|
||||||
|
*/
|
||||||
|
#element;
|
||||||
|
/**
|
||||||
|
* Созданный список(ul), с классом list
|
||||||
|
* @type {HTMLElement}
|
||||||
|
*/
|
||||||
|
#list;
|
||||||
|
/**
|
||||||
|
* Настройки селекта передаваемые при создании экземпляра класса
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
|
#options;
|
||||||
|
/**
|
||||||
|
* Переменная для управления каретки
|
||||||
|
* @type {HTMLElement}
|
||||||
|
*/
|
||||||
|
#caret;
|
||||||
|
/**
|
||||||
|
* Массив переданных элементов
|
||||||
|
* @type {object[]}
|
||||||
|
*/
|
||||||
|
#items;
|
||||||
|
/**
|
||||||
|
* Переданные категории
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
#category;
|
||||||
|
/**
|
||||||
|
* Выбранный или массив выбранных элементов из списка
|
||||||
|
* @type {object[] | object}
|
||||||
|
*/
|
||||||
|
#selectedItems;
|
||||||
|
/**
|
||||||
|
* Массив индексов выбранных элементов
|
||||||
|
* @type {number[]}
|
||||||
|
*/
|
||||||
|
#indexes = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {string[] | string | null} Возвращает выбранные элемент(ы) в виде массива/элемента/null
|
||||||
|
* @description Геттер возвращающий выбранные элемент(ы) селекта
|
||||||
|
*/
|
||||||
|
get value() {
|
||||||
|
return this.#selectedItems ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
|
||||||
|
* @description Геттер возвращающий индексы выбранных элемента(ов) селекта
|
||||||
|
*/
|
||||||
|
get indexes() {
|
||||||
|
return this.#indexes ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {object} options Объект принимающий настройки селекта
|
||||||
|
* @constructor Конструктор класса DropDown
|
||||||
|
* @description Конструктор принимает объект и рендерит селект.
|
||||||
|
* @example
|
||||||
|
* options = {
|
||||||
|
* selector: 'Уникальный селектор',
|
||||||
|
selected: 'Выбранный элемент',
|
||||||
|
placeholder: '...',
|
||||||
|
items: [string|number|object],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
background: '...',
|
||||||
|
},
|
||||||
|
list: {...},
|
||||||
|
chips: {...},
|
||||||
|
caret: {...},
|
||||||
|
placeholder: {...},
|
||||||
|
},
|
||||||
|
event: '...',
|
||||||
|
url: 'http/...',
|
||||||
|
multiselect: true/false,
|
||||||
|
multiselectTag: true/false,
|
||||||
|
* }
|
||||||
|
|
||||||
|
*/
|
||||||
|
constructor(options = {}) {
|
||||||
|
this.#init(options);
|
||||||
|
this.#render();
|
||||||
|
this.#initEvent();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {string | object} item добавляемый елемент
|
||||||
|
* @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
|
||||||
|
* @method addItem
|
||||||
|
*/
|
||||||
|
addItem(item) {
|
||||||
|
if (this.#category) {
|
||||||
|
console.log('can`t add item to category');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!item) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const index = this.#items.length;
|
||||||
|
|
||||||
|
this.#items.push(getFormatItem(item, index));
|
||||||
|
this.#render();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} index индекс удаляемого элемента
|
||||||
|
* @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
|
||||||
|
* @method deleteItem
|
||||||
|
*/
|
||||||
|
deleteItem(index) {
|
||||||
|
if (this.#category) {
|
||||||
|
console.log('can`t add item to category');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const item = this.#items[index];
|
||||||
|
|
||||||
|
this.#items.splice(index, 1);
|
||||||
|
this.#render();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @description удаляет все елементы из списка и перерисовывает его.
|
||||||
|
* @method deleteItemAll
|
||||||
|
*/
|
||||||
|
deleteItemAll() {
|
||||||
|
this.#items.splice(0, this.#items.length);
|
||||||
|
this.#render();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} index индекс выбранного элемента
|
||||||
|
* @description выбирает элемент который будет изначально отрисовываться в селекте
|
||||||
|
* @method selectIndex
|
||||||
|
*/
|
||||||
|
selectIndex(index) {
|
||||||
|
if (this.#category) {
|
||||||
|
console.log('can`t add item to category');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = this.#element.querySelectorAll('.list__item');
|
||||||
|
|
||||||
|
if (index > options.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const select = options[index].innerText;
|
||||||
|
this.#render(select);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} numberItem номер возвращаемого элемента
|
||||||
|
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
|
||||||
|
* @method getElement
|
||||||
|
*/
|
||||||
|
getElement(numberItem) {
|
||||||
|
if (numberItem > this.#items.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return this.#items[numberItem];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
|
||||||
|
* @description Метод позволяющий переключать состояние селекта disabled,
|
||||||
|
* @method disabled
|
||||||
|
*/
|
||||||
|
disabled(value) {
|
||||||
|
if (typeof value !== 'boolean') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const select = this.#element.querySelector('.cg-select');
|
||||||
|
if (value === true) {
|
||||||
|
this.#element.setAttribute('disabled', true);
|
||||||
|
select.classList.add('disabled');
|
||||||
|
} else {
|
||||||
|
this.#element.removeAttribute('disabled');
|
||||||
|
select.classList.remove('disabled');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {HTMLInputElement} button - HTML кнопка
|
||||||
|
* @param {string} method - метод открытия open/close
|
||||||
|
* @description Метод позволяющий открывать/закрывать селект с помощью кнопок
|
||||||
|
* @method buttonControl
|
||||||
|
*/
|
||||||
|
buttonControl(button, method) {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
if (method === 'open') {
|
||||||
|
this.#open(true);
|
||||||
|
} else if (method === 'close') {
|
||||||
|
this.#close();
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Приватный метод инициализации экземпляра класса DropDown
|
||||||
|
* @method #init
|
||||||
|
* @member
|
||||||
|
* @protected
|
||||||
|
* @param {object} options передаваемые настройки селекта
|
||||||
|
* @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
|
||||||
|
* @example
|
||||||
|
* {
|
||||||
|
selector: '.cg-dropdown_one',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
|
multiselect: true,
|
||||||
|
multiselectTag: true,
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
#init(options) {
|
||||||
|
this.#options = options;
|
||||||
|
const { items, multiselect, url } = this.#options;
|
||||||
|
|
||||||
|
const elem = document.querySelector(options.selector);
|
||||||
|
|
||||||
|
if (!elem) {
|
||||||
|
throw new Error(`Element with selector ${options.selector}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#element = elem;
|
||||||
|
|
||||||
|
this.#element.addEventListener('click', () => {
|
||||||
|
this.#open();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#items = [];
|
||||||
|
|
||||||
|
if (multiselect) {
|
||||||
|
this.#selectedItems = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!items && url) {
|
||||||
|
this.#renderUrl();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
items.forEach((dataItem, index) => {
|
||||||
|
if (dataItem.category && dataItem.categoryItems) {
|
||||||
|
this.#category = dataItem.category;
|
||||||
|
|
||||||
|
this.#items.push(this.#category);
|
||||||
|
dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
|
||||||
|
this.#items.push(getFormatItem(categoryItem, indexCategory));
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.#items.push(getFormatItem(dataItem, index));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Привaтный метод экземпляра класса DropDown
|
||||||
|
*
|
||||||
|
* @method #initSelected
|
||||||
|
* @param {string} select необязательный елемент. Используется в методе selectIndex
|
||||||
|
* @description Отрисовывает и стилизует селект
|
||||||
|
* @protected
|
||||||
|
*/
|
||||||
|
#initSelected(select) {
|
||||||
|
const { styles, selected, placeholder } = this.#options;
|
||||||
|
|
||||||
|
if (selected) {
|
||||||
|
createSelected(this.#element, selected);
|
||||||
|
} else if (placeholder) {
|
||||||
|
createSelected(this.#element, placeholder);
|
||||||
|
} else {
|
||||||
|
createSelected(this.#element, 'Select...');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (styles) {
|
||||||
|
customStyles(this.#element, styles);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (select) {
|
||||||
|
createSelected(this.#element, select, styles);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Приватный метод рендера экземпляра класса DropDown
|
||||||
|
*@protected
|
||||||
|
* @method #render
|
||||||
|
* @param {string} select необязательный елемент. Передаеться в метод initSelected
|
||||||
|
* @description Рендер елементов в селекте.
|
||||||
|
*/
|
||||||
|
#render(select) {
|
||||||
|
const { styles, multiselect } = this.#options;
|
||||||
|
|
||||||
|
if (select || (select && styles)) {
|
||||||
|
this.#initSelected(select);
|
||||||
|
customStyles(this.#element, styles);
|
||||||
|
} else {
|
||||||
|
this.#initSelected();
|
||||||
|
}
|
||||||
|
|
||||||
|
const ulList = document.createElement('ul');
|
||||||
|
|
||||||
|
ulList.classList.add('list');
|
||||||
|
|
||||||
|
if (styles) {
|
||||||
|
const { list } = styles;
|
||||||
|
customStylesFormat(list, ulList);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#element.appendChild(ulList);
|
||||||
|
|
||||||
|
this.#items.forEach((dataItem) => {
|
||||||
|
const liItem = document.createElement('li');
|
||||||
|
const strongItem = document.createElement('strong');
|
||||||
|
|
||||||
|
liItem.classList.add('list__item');
|
||||||
|
strongItem.classList.add('category');
|
||||||
|
|
||||||
|
if (multiselect) {
|
||||||
|
const checkBox = document.createElement('input');
|
||||||
|
checkBox.type = 'checkbox';
|
||||||
|
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
|
||||||
|
|
||||||
|
liItem.appendChild(checkBox);
|
||||||
|
}
|
||||||
|
|
||||||
|
let textNode = '';
|
||||||
|
|
||||||
|
if (dataItem.title) {
|
||||||
|
textNode = document.createTextNode(dataItem.title);
|
||||||
|
liItem.appendChild(textNode);
|
||||||
|
ulList.appendChild(liItem);
|
||||||
|
} else {
|
||||||
|
textNode = document.createTextNode(dataItem);
|
||||||
|
strongItem.appendChild(textNode);
|
||||||
|
ulList.appendChild(strongItem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#items.filter((item, index) => {
|
||||||
|
if (typeof item !== 'object') {
|
||||||
|
this.#items.splice(index, 1);
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#addOptionsBehaviour();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Приватный метод рендера экземпляра класса DropDown
|
||||||
|
*@protected
|
||||||
|
* @method #renderUrl
|
||||||
|
* @description Рендер елементов в селекте переданных с URL и их настойка
|
||||||
|
*/
|
||||||
|
async #renderUrl() {
|
||||||
|
const { url, items, multiselect } = this.#options;
|
||||||
|
|
||||||
|
if (items) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!url) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(url);
|
||||||
|
const dataUrl = await response.json();
|
||||||
|
|
||||||
|
dataUrl.forEach((dataItem, index) => {
|
||||||
|
const item = {
|
||||||
|
id: dataItem.id,
|
||||||
|
title: dataItem.name,
|
||||||
|
value: index,
|
||||||
|
};
|
||||||
|
const ulUrl = this.#element.querySelector('.list');
|
||||||
|
const liUrl = document.createElement('li');
|
||||||
|
const textUrl = document.createTextNode(item.title);
|
||||||
|
|
||||||
|
if (multiselect) {
|
||||||
|
const checkBox = document.createElement('input');
|
||||||
|
checkBox.type = 'checkbox';
|
||||||
|
|
||||||
|
checkBox.setAttribute('id', `chbox-${item.id}`);
|
||||||
|
liUrl.appendChild(checkBox);
|
||||||
|
}
|
||||||
|
|
||||||
|
liUrl.classList.add('list__item');
|
||||||
|
|
||||||
|
liUrl.appendChild(textUrl);
|
||||||
|
ulUrl.appendChild(liUrl);
|
||||||
|
|
||||||
|
this.#items.push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#items.filter((item, index) => {
|
||||||
|
if (typeof item !== 'object') {
|
||||||
|
this.#items.splice(index, 1);
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#addOptionsBehaviour();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
|
||||||
|
* @description Открывает список для выбора элемента
|
||||||
|
* @method #open
|
||||||
|
*/
|
||||||
|
#open(oneClick) {
|
||||||
|
this.#list = this.#element.querySelector('.list');
|
||||||
|
this.#caret = this.#element.querySelector('.caret');
|
||||||
|
|
||||||
|
if (oneClick === true) {
|
||||||
|
this.#list.classList.add('open');
|
||||||
|
this.#caret.classList.add('caret_rotate');
|
||||||
|
} else {
|
||||||
|
this.#list.classList.toggle('open');
|
||||||
|
this.#caret.classList.toggle('caret_rotate');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Закрывает список
|
||||||
|
* @method #close
|
||||||
|
*/
|
||||||
|
#close() {
|
||||||
|
this.#list.classList.remove('open');
|
||||||
|
this.#caret.classList.remove('caret_rotate');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
|
||||||
|
* @method #addOptionsBehaviour
|
||||||
|
*/
|
||||||
|
#addOptionsBehaviour() {
|
||||||
|
const { multiselect, placeholder, selected, multiselectTag } = this.#options;
|
||||||
|
|
||||||
|
const options = this.#element.querySelectorAll('.list__item');
|
||||||
|
const select = this.#element.querySelector('.selected');
|
||||||
|
|
||||||
|
const ul = document.createElement('ul');
|
||||||
|
|
||||||
|
if (multiselect) {
|
||||||
|
ul.classList.add('multiselect-tag');
|
||||||
|
select.classList.add('overflow-hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
options.forEach((option, index) => {
|
||||||
|
option.addEventListener('click', (event) => {
|
||||||
|
const item = this.#items[index];
|
||||||
|
if (multiselect) {
|
||||||
|
event.stopPropagation();
|
||||||
|
option.classList.toggle('active');
|
||||||
|
|
||||||
|
const checkBox = option.querySelector('input[type="checkbox"]');
|
||||||
|
|
||||||
|
if (checkBox) {
|
||||||
|
if (!(event.target instanceof HTMLInputElement)) {
|
||||||
|
checkBox.checked = !checkBox.checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkIndex = this.#indexes.indexOf(index);
|
||||||
|
|
||||||
|
if (checkIndex === -1) {
|
||||||
|
this.#indexes.push(index);
|
||||||
|
|
||||||
|
select.innerText = '';
|
||||||
|
|
||||||
|
if (multiselectTag) {
|
||||||
|
this.#selectedItems.push(item);
|
||||||
|
select.appendChild(ul);
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
option: this.#options,
|
||||||
|
element: this.#element,
|
||||||
|
indexes: this.#indexes,
|
||||||
|
selectedItems: this.#selectedItems,
|
||||||
|
};
|
||||||
|
|
||||||
|
ul.appendChild(createBreadcrumb(data, item.title, index, item.id));
|
||||||
|
} else {
|
||||||
|
this.#selectedItems.push(item.title);
|
||||||
|
select.innerText = this.#selectedItems;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (multiselectTag) {
|
||||||
|
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
|
||||||
|
|
||||||
|
ul.removeChild(tagItem);
|
||||||
|
}
|
||||||
|
this.#indexes.splice(checkIndex, 1);
|
||||||
|
this.#selectedItems.splice(checkIndex, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.#selectedItems.length) {
|
||||||
|
if (placeholder) {
|
||||||
|
select.innerText = placeholder;
|
||||||
|
} else if (selected) {
|
||||||
|
select.innerText = selected;
|
||||||
|
} else {
|
||||||
|
select.innerText = 'Select...';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (multiselectTag) {
|
||||||
|
select.appendChild(ul);
|
||||||
|
} else {
|
||||||
|
select.innerText = this.#selectedItems;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
select.innerText = item.title;
|
||||||
|
this.#selectedItems = item;
|
||||||
|
|
||||||
|
options.forEach((option) => {
|
||||||
|
option.classList.remove('active');
|
||||||
|
});
|
||||||
|
option.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Открывает и закрывает список по переданному эвенту
|
||||||
|
* @method #initEvent
|
||||||
|
*/
|
||||||
|
#initEvent() {
|
||||||
|
const { event } = this.#options;
|
||||||
|
if (!event) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event) {
|
||||||
|
if (event === 'mouseenter') {
|
||||||
|
this.#element.addEventListener(event, () => {
|
||||||
|
this.#open();
|
||||||
|
});
|
||||||
|
this.#element.addEventListener('mouseleave', () => {
|
||||||
|
this.#close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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>
|
||||||
147
documentation/create-element.js.html
Normal file
147
documentation/create-element.js.html
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Source: create-element.js</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">Source: create-element.js</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<pre
|
||||||
|
class="prettyprint source linenums"
|
||||||
|
><code>import { customStylesFormat } from './utils';
|
||||||
|
/**
|
||||||
|
* @module createElementChips
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод который создает и отвечает за поведение chips
|
||||||
|
* @param {object} data объект в котором содержатся настройки и элементы селекта
|
||||||
|
* @param {string} title имя выбранного элемента для отрисовки chips
|
||||||
|
* @param {number} index индекс выбранного элемента для отрисовки chips
|
||||||
|
* @param {string} id уникальное id выбранного элемента
|
||||||
|
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
|
||||||
|
*/
|
||||||
|
export function createBreadcrumb(data, title, index, id) {
|
||||||
|
const { element, option, indexes, selectedItems } = data;
|
||||||
|
const { placeholder, styles } = option;
|
||||||
|
|
||||||
|
const selected = element.querySelector('.selected');
|
||||||
|
const liChip = document.createElement('li');
|
||||||
|
const textNode = document.createTextNode(title);
|
||||||
|
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');
|
||||||
|
|
||||||
|
svgIcon.setAttribute('viewBox', '0 0 10 10');
|
||||||
|
path1.setAttribute('d', 'M3,7 L7,3');
|
||||||
|
path2.setAttribute('d', 'M3,3 L7,7');
|
||||||
|
liChip.setAttribute('id', `tag-${index}-${id}`);
|
||||||
|
|
||||||
|
svgIcon.classList.add('svg-icon');
|
||||||
|
|
||||||
|
svgIcon.appendChild(path1);
|
||||||
|
svgIcon.appendChild(path2);
|
||||||
|
liChip.appendChild(textNode);
|
||||||
|
liChip.appendChild(svgIcon);
|
||||||
|
|
||||||
|
if (styles) {
|
||||||
|
const { chips } = styles;
|
||||||
|
customStylesFormat(chips, liChip);
|
||||||
|
}
|
||||||
|
|
||||||
|
svgIcon.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
const deleteIcon = indexes.indexOf(index);
|
||||||
|
|
||||||
|
indexes.splice(deleteIcon, 1);
|
||||||
|
selectedItems.splice(deleteIcon, 1);
|
||||||
|
|
||||||
|
let checkBox = '';
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
checkBox = document.getElementById(`chbox-${id}`);
|
||||||
|
} else {
|
||||||
|
checkBox = document.getElementById(`chbox-${index}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
checkBox.checked = false;
|
||||||
|
checkBox.parentElement.classList.remove('active');
|
||||||
|
|
||||||
|
if (!selectedItems.length) {
|
||||||
|
selected.innerText = placeholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
liChip.parentElement.removeChild(liChip);
|
||||||
|
});
|
||||||
|
|
||||||
|
return liChip;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Module</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="module-Utils.html">Utils</a></li>
|
||||||
|
<li><a href="module-createElementChips.html">createBreadcrumb</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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:13:59 GMT+0300 (Moscow Standard Time)
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
prettyPrint();
|
||||||
|
</script>
|
||||||
|
<script src="scripts/linenumber.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
documentation/fonts/OpenSans-Bold-webfont.eot
Normal file
BIN
documentation/fonts/OpenSans-Bold-webfont.eot
Normal file
Binary file not shown.
1830
documentation/fonts/OpenSans-Bold-webfont.svg
Normal file
1830
documentation/fonts/OpenSans-Bold-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 116 KiB |
BIN
documentation/fonts/OpenSans-Bold-webfont.woff
Normal file
BIN
documentation/fonts/OpenSans-Bold-webfont.woff
Normal file
Binary file not shown.
BIN
documentation/fonts/OpenSans-BoldItalic-webfont.eot
Normal file
BIN
documentation/fonts/OpenSans-BoldItalic-webfont.eot
Normal file
Binary file not shown.
1830
documentation/fonts/OpenSans-BoldItalic-webfont.svg
Normal file
1830
documentation/fonts/OpenSans-BoldItalic-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 118 KiB |
BIN
documentation/fonts/OpenSans-BoldItalic-webfont.woff
Normal file
BIN
documentation/fonts/OpenSans-BoldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
documentation/fonts/OpenSans-Italic-webfont.eot
Normal file
BIN
documentation/fonts/OpenSans-Italic-webfont.eot
Normal file
Binary file not shown.
1830
documentation/fonts/OpenSans-Italic-webfont.svg
Normal file
1830
documentation/fonts/OpenSans-Italic-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 120 KiB |
BIN
documentation/fonts/OpenSans-Italic-webfont.woff
Normal file
BIN
documentation/fonts/OpenSans-Italic-webfont.woff
Normal file
Binary file not shown.
BIN
documentation/fonts/OpenSans-Light-webfont.eot
Normal file
BIN
documentation/fonts/OpenSans-Light-webfont.eot
Normal file
Binary file not shown.
1831
documentation/fonts/OpenSans-Light-webfont.svg
Normal file
1831
documentation/fonts/OpenSans-Light-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 114 KiB |
BIN
documentation/fonts/OpenSans-Light-webfont.woff
Normal file
BIN
documentation/fonts/OpenSans-Light-webfont.woff
Normal file
Binary file not shown.
BIN
documentation/fonts/OpenSans-LightItalic-webfont.eot
Normal file
BIN
documentation/fonts/OpenSans-LightItalic-webfont.eot
Normal file
Binary file not shown.
1835
documentation/fonts/OpenSans-LightItalic-webfont.svg
Normal file
1835
documentation/fonts/OpenSans-LightItalic-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 120 KiB |
BIN
documentation/fonts/OpenSans-LightItalic-webfont.woff
Normal file
BIN
documentation/fonts/OpenSans-LightItalic-webfont.woff
Normal file
Binary file not shown.
BIN
documentation/fonts/OpenSans-Regular-webfont.eot
Normal file
BIN
documentation/fonts/OpenSans-Regular-webfont.eot
Normal file
Binary file not shown.
1831
documentation/fonts/OpenSans-Regular-webfont.svg
Normal file
1831
documentation/fonts/OpenSans-Regular-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 117 KiB |
BIN
documentation/fonts/OpenSans-Regular-webfont.woff
Normal file
BIN
documentation/fonts/OpenSans-Regular-webfont.woff
Normal file
Binary file not shown.
677
documentation/global.html
Normal file
677
documentation/global.html
Normal file
@ -0,0 +1,677 @@
|
|||||||
|
<!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#line232">line 232</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',
|
||||||
|
],
|
||||||
|
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#line480">line 480</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#line469">line 469</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#line575">line 575</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#line299">line 299</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#line449">line 449</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#line327">line 327</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#line393">line 393</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#line107">line 107</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#line213">line 213</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#line129">line 129</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#line147">line 147</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#line192">line 192</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"> → {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#line179">line 179</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-dropdown.js</a>,
|
||||||
|
<a href="cg-dropdown.js.html#line157">line 157</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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>
|
||||||
67
documentation/index.html
Normal file
67
documentation/index.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Home</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">Home</h1>
|
||||||
|
|
||||||
|
<h3></h3>
|
||||||
|
</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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>
|
||||||
404
documentation/module-Utils.html
Normal file
404
documentation/module-Utils.html
Normal file
@ -0,0 +1,404 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Module: util;</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">Module: Utils</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<header></header>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="container-overview">
|
||||||
|
<div class="description">Utils module</div>
|
||||||
|
|
||||||
|
<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#line1">line 1</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="subsection-title">Methods</h3>
|
||||||
|
|
||||||
|
<h4 class="name" id=".checkItemStruct">
|
||||||
|
<span class="type-signature">(static) </span>checkItemStruct<span class="signature"
|
||||||
|
>(item)</span
|
||||||
|
><span class="type-signature"> → {boolean}</span>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="description">Проверка содержит ли item указанные свойства,</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">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#line84">line 84</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h5>Returns:</h5>
|
||||||
|
|
||||||
|
<div class="param-desc">возвращает true/false если item содержит указанные свойства</div>
|
||||||
|
|
||||||
|
<dl>
|
||||||
|
<dt>Type</dt>
|
||||||
|
<dd>
|
||||||
|
<span class="param-type">boolean</span>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h4 class="name" id=".createSelected">
|
||||||
|
<span class="type-signature">(static) </span>createSelected<span class="signature"
|
||||||
|
>(element, content, styles)</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">HTMLElement</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">созданный экземпляр класса DropDown</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name"><code>content</code></td>
|
||||||
|
|
||||||
|
<td class="type">
|
||||||
|
<span class="param-type">string</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">placeholer передаваемый из настроек селекта</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name"><code>styles</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#line12">line 12</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h4 class="name" id=".customStyles">
|
||||||
|
<span class="type-signature">(static) </span>customStyles<span class="signature"
|
||||||
|
>(element, styles)</span
|
||||||
|
><span class="type-signature"></span>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
Поиск и стилизация елементов полученных из styles экземпляра 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>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>styles</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#line39">line 39</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h4 class="name" id=".customStylesFormat">
|
||||||
|
<span class="type-signature">(static) </span>customStylesFormat<span class="signature"
|
||||||
|
>(elemOption, selector)</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>elemOption</code></td>
|
||||||
|
|
||||||
|
<td class="type">
|
||||||
|
<span class="param-type">object</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">
|
||||||
|
объект полученное из объекта styles у которого мы получаем ключ-значение стилей
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name"><code>selector</code></td>
|
||||||
|
|
||||||
|
<td class="type">
|
||||||
|
<span class="param-type">HTMLElement</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">HTMLElement подвергающиеся кастомизации</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#line71">line 71</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h4 class="name" id=".getFormatItem">
|
||||||
|
<span class="type-signature">(static) </span>getFormatItem<span class="signature"
|
||||||
|
>(dataItem, index)</span
|
||||||
|
><span class="type-signature"> → {object}</span>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="description">Преобразование каждого елемента полученного из поля Items;</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>dataItem</code></td>
|
||||||
|
|
||||||
|
<td class="type">
|
||||||
|
<span class="param-type">object</span>
|
||||||
|
|
|
||||||
|
|
||||||
|
<span class="param-type">string</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">
|
||||||
|
полученный елемент переданный при создании селекта может быть как object/string
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<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="utils.js.html">utils.js</a>, <a href="utils.js.html#line98">line 98</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h5>Returns:</h5>
|
||||||
|
|
||||||
|
<div class="param-desc">возвращает сформированный объект</div>
|
||||||
|
|
||||||
|
<dl>
|
||||||
|
<dt>Type</dt>
|
||||||
|
<dd>
|
||||||
|
<span class="param-type">object</span>
|
||||||
|
</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Module</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="module-Utils.html">Utils</a></li>
|
||||||
|
<li><a href="module-createElementChips.html">createBreadcrumb</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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 18:07:14 GMT+0300 (Moscow Standard Time)
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
prettyPrint();
|
||||||
|
</script>
|
||||||
|
<script src="scripts/linenumber.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
169
documentation/module-createElementChips.html
Normal file
169
documentation/module-createElementChips.html
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Module: createElementChips</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">Module: createElementChips</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<header></header>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="container-overview"></div>
|
||||||
|
|
||||||
|
<h3 class="subsection-title">Methods</h3>
|
||||||
|
|
||||||
|
<h4 class="name" id=".createBreadcrumb">
|
||||||
|
<span class="type-signature">(static) </span>createBreadcrumb<span class="signature"
|
||||||
|
>(data, title, index, id)</span
|
||||||
|
><span class="type-signature"> → {HTMLElement}</span>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="description">Метод который создает и отвечает за поведение chips</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">
|
||||||
|
объект в котором содержатся настройки и элементы селекта
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name"><code>title</code></td>
|
||||||
|
|
||||||
|
<td class="type">
|
||||||
|
<span class="param-type">string</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">имя выбранного элемента для отрисовки chips</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name"><code>index</code></td>
|
||||||
|
|
||||||
|
<td class="type">
|
||||||
|
<span class="param-type">number</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">индекс выбранного элемента для отрисовки chips</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name"><code>id</code></td>
|
||||||
|
|
||||||
|
<td class="type">
|
||||||
|
<span class="param-type">string</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="description last">уникальное id выбранного элемента</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<dl class="details">
|
||||||
|
<dt class="tag-source">Source:</dt>
|
||||||
|
<dd class="tag-source">
|
||||||
|
<ul class="dummy">
|
||||||
|
<li>
|
||||||
|
<a href="create-element.js.html">create-element.js</a>,
|
||||||
|
<a href="create-element.js.html#line14">line 14</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h5>Returns:</h5>
|
||||||
|
|
||||||
|
<div class="param-desc">возвращает сформированный HTMLElement chips item</div>
|
||||||
|
|
||||||
|
<dl>
|
||||||
|
<dt>Type</dt>
|
||||||
|
<dd>
|
||||||
|
<span class="param-type">HTMLElement</span>
|
||||||
|
</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Module</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="module-Utils.html">Utils</a></li>
|
||||||
|
<li><a href="module-createElementChips.html">createBreadcrumb</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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:13:59 GMT+0300 (Moscow Standard Time)
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
prettyPrint();
|
||||||
|
</script>
|
||||||
|
<script src="scripts/linenumber.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
documentation/scripts/linenumber.js
Normal file
25
documentation/scripts/linenumber.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/*global document */
|
||||||
|
(() => {
|
||||||
|
const source = document.getElementsByClassName('prettyprint source linenums');
|
||||||
|
let i = 0;
|
||||||
|
let lineNumber = 0;
|
||||||
|
let lineId;
|
||||||
|
let lines;
|
||||||
|
let totalLines;
|
||||||
|
let anchorHash;
|
||||||
|
|
||||||
|
if (source && source[0]) {
|
||||||
|
anchorHash = document.location.hash.substring(1);
|
||||||
|
lines = source[0].getElementsByTagName('li');
|
||||||
|
totalLines = lines.length;
|
||||||
|
|
||||||
|
for (; i < totalLines; i++) {
|
||||||
|
lineNumber++;
|
||||||
|
lineId = `line${lineNumber}`;
|
||||||
|
lines[i].id = lineId;
|
||||||
|
if (lineId === anchorHash) {
|
||||||
|
lines[i].className += ' selected';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
202
documentation/scripts/prettify/Apache-License-2.0.txt
Normal file
202
documentation/scripts/prettify/Apache-License-2.0.txt
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
|
||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
2
documentation/scripts/prettify/lang-css.js
Normal file
2
documentation/scripts/prettify/lang-css.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com",
|
||||||
|
/^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);
|
||||||
28
documentation/scripts/prettify/prettify.js
Normal file
28
documentation/scripts/prettify/prettify.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
|
||||||
|
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
|
||||||
|
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
|
||||||
|
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
|
||||||
|
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
|
||||||
|
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
|
||||||
|
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
|
||||||
|
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
|
||||||
|
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
|
||||||
|
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
|
||||||
|
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
|
||||||
|
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
|
||||||
|
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
|
||||||
|
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
|
||||||
|
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
|
||||||
|
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
|
||||||
|
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
|
||||||
|
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
|
||||||
|
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
|
||||||
|
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
|
||||||
|
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
|
||||||
|
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
|
||||||
|
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
|
||||||
|
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
|
||||||
|
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
|
||||||
|
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
|
||||||
|
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
|
||||||
|
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
|
||||||
358
documentation/styles/jsdoc-default.css
Normal file
358
documentation/styles/jsdoc-default.css
Normal file
@ -0,0 +1,358 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
src: url('../fonts/OpenSans-Regular-webfont.eot');
|
||||||
|
src:
|
||||||
|
local('Open Sans'),
|
||||||
|
local('OpenSans'),
|
||||||
|
url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Light';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
src: url('../fonts/OpenSans-Light-webfont.eot');
|
||||||
|
src:
|
||||||
|
local('Open Sans Light'),
|
||||||
|
local('OpenSans Light'),
|
||||||
|
url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
html
|
||||||
|
{
|
||||||
|
overflow: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body
|
||||||
|
{
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #4d4e53;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited, a:active {
|
||||||
|
color: #0095dd;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
header
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
padding: 0px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tt, code, kbd, samp {
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.class-description {
|
||||||
|
font-size: 130%;
|
||||||
|
line-height: 140%;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.class-description:empty {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
float: left;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
article dl {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature-attributes {
|
||||||
|
font-size: 60%;
|
||||||
|
color: #aaa;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
margin-top: 28px;
|
||||||
|
width: 30%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 17px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul a, nav ul a:visited, nav ul a:active {
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #4D4E53;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav h3 {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: block;
|
||||||
|
padding: 6px;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-weight: 200;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1
|
||||||
|
{
|
||||||
|
font-family: 'Open Sans Light', sans-serif;
|
||||||
|
font-size: 48px;
|
||||||
|
letter-spacing: -2px;
|
||||||
|
margin: 12px 24px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3.subsection-title
|
||||||
|
{
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3
|
||||||
|
{
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4
|
||||||
|
{
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: -0.33px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color: #4d4e53;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5, .container-overview .subsection-title
|
||||||
|
{
|
||||||
|
font-size: 120%;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 8px 0 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6
|
||||||
|
{
|
||||||
|
font-size: 100%;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 6px 0 3px 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
table
|
||||||
|
{
|
||||||
|
border-spacing: 0;
|
||||||
|
border: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th
|
||||||
|
{
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
margin: 0px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
padding: 4px 6px;
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr
|
||||||
|
{
|
||||||
|
background-color: #ddd;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
th { border-right: 1px solid #aaa; }
|
||||||
|
tr > th:last-child { border-right: 1px solid #ddd; }
|
||||||
|
|
||||||
|
.ancestors, .attribs { color: #999; }
|
||||||
|
.ancestors a, .attribs a
|
||||||
|
{
|
||||||
|
color: #999 !important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear
|
||||||
|
{
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #950B02;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yes-def {
|
||||||
|
text-indent: -1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-signature {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name, .signature {
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details { margin-top: 14px; border-left: 2px solid #DDD; }
|
||||||
|
.details dt { width: 120px; float: left; padding-left: 10px; padding-top: 6px; }
|
||||||
|
.details dd { margin-left: 70px; }
|
||||||
|
.details ul { margin: 0; }
|
||||||
|
.details ul { list-style-type: none; }
|
||||||
|
.details li { margin-left: 30px; padding-top: 6px; }
|
||||||
|
.details pre.prettyprint { margin: 0 }
|
||||||
|
.details .object-value { padding-top: 0; }
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-caption
|
||||||
|
{
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 107%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source
|
||||||
|
{
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
width: 80%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.source {
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source code
|
||||||
|
{
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 18px;
|
||||||
|
display: block;
|
||||||
|
padding: 4px 12px;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #4D4E53;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint code span.line
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums
|
||||||
|
{
|
||||||
|
padding-left: 70px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums ol
|
||||||
|
{
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums li
|
||||||
|
{
|
||||||
|
border-left: 3px #ddd solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums li.selected,
|
||||||
|
.prettyprint.linenums li.selected *
|
||||||
|
{
|
||||||
|
background-color: lightyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums li *
|
||||||
|
{
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
-ms-user-select: text;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params .name, .props .name, .name code {
|
||||||
|
color: #4D4E53;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params td.description > p:first-child,
|
||||||
|
.props td.description > p:first-child
|
||||||
|
{
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params td.description > p:last-child,
|
||||||
|
.props td.description > p:last-child
|
||||||
|
{
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
color: #454545;
|
||||||
|
}
|
||||||
111
documentation/styles/prettify-jsdoc.css
Normal file
111
documentation/styles/prettify-jsdoc.css
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
/* JSDoc prettify.js theme */
|
||||||
|
|
||||||
|
/* plain text */
|
||||||
|
.pln {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* string content */
|
||||||
|
.str {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a keyword */
|
||||||
|
.kwd {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a comment */
|
||||||
|
.com {
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a type name */
|
||||||
|
.typ {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a literal value */
|
||||||
|
.lit {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* punctuation */
|
||||||
|
.pun {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lisp open bracket */
|
||||||
|
.opn {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lisp close bracket */
|
||||||
|
.clo {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a markup tag name */
|
||||||
|
.tag {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a markup attribute name */
|
||||||
|
.atn {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a markup attribute value */
|
||||||
|
.atv {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a declaration */
|
||||||
|
.dec {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a variable name */
|
||||||
|
.var {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a function name */
|
||||||
|
.fun {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Specify class=linenums on a pre to get line numbering */
|
||||||
|
ol.linenums {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
132
documentation/styles/prettify-tomorrow.css
Normal file
132
documentation/styles/prettify-tomorrow.css
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
/* Tomorrow Theme */
|
||||||
|
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
||||||
|
/* Pretty printing styles. Used with prettify.js. */
|
||||||
|
/* SPAN elements with the classes below are added by prettyprint. */
|
||||||
|
/* plain text */
|
||||||
|
.pln {
|
||||||
|
color: #4d4d4c; }
|
||||||
|
|
||||||
|
@media screen {
|
||||||
|
/* string content */
|
||||||
|
.str {
|
||||||
|
color: #718c00; }
|
||||||
|
|
||||||
|
/* a keyword */
|
||||||
|
.kwd {
|
||||||
|
color: #8959a8; }
|
||||||
|
|
||||||
|
/* a comment */
|
||||||
|
.com {
|
||||||
|
color: #8e908c; }
|
||||||
|
|
||||||
|
/* a type name */
|
||||||
|
.typ {
|
||||||
|
color: #4271ae; }
|
||||||
|
|
||||||
|
/* a literal value */
|
||||||
|
.lit {
|
||||||
|
color: #f5871f; }
|
||||||
|
|
||||||
|
/* punctuation */
|
||||||
|
.pun {
|
||||||
|
color: #4d4d4c; }
|
||||||
|
|
||||||
|
/* lisp open bracket */
|
||||||
|
.opn {
|
||||||
|
color: #4d4d4c; }
|
||||||
|
|
||||||
|
/* lisp close bracket */
|
||||||
|
.clo {
|
||||||
|
color: #4d4d4c; }
|
||||||
|
|
||||||
|
/* a markup tag name */
|
||||||
|
.tag {
|
||||||
|
color: #c82829; }
|
||||||
|
|
||||||
|
/* a markup attribute name */
|
||||||
|
.atn {
|
||||||
|
color: #f5871f; }
|
||||||
|
|
||||||
|
/* a markup attribute value */
|
||||||
|
.atv {
|
||||||
|
color: #3e999f; }
|
||||||
|
|
||||||
|
/* a declaration */
|
||||||
|
.dec {
|
||||||
|
color: #f5871f; }
|
||||||
|
|
||||||
|
/* a variable name */
|
||||||
|
.var {
|
||||||
|
color: #c82829; }
|
||||||
|
|
||||||
|
/* a function name */
|
||||||
|
.fun {
|
||||||
|
color: #4271ae; } }
|
||||||
|
/* Use higher contrast and text-weight for printable form. */
|
||||||
|
@media print, projection {
|
||||||
|
.str {
|
||||||
|
color: #060; }
|
||||||
|
|
||||||
|
.kwd {
|
||||||
|
color: #006;
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.com {
|
||||||
|
color: #600;
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.typ {
|
||||||
|
color: #404;
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.lit {
|
||||||
|
color: #044; }
|
||||||
|
|
||||||
|
.pun, .opn, .clo {
|
||||||
|
color: #440; }
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: #006;
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.atn {
|
||||||
|
color: #404; }
|
||||||
|
|
||||||
|
.atv {
|
||||||
|
color: #060; } }
|
||||||
|
/* Style */
|
||||||
|
/*
|
||||||
|
pre.prettyprint {
|
||||||
|
background: white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px; }
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Specify class=linenums on a pre to get line numbering */
|
||||||
|
ol.linenums {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
|
/* IE indents via margin-left */
|
||||||
|
li.L0,
|
||||||
|
li.L1,
|
||||||
|
li.L2,
|
||||||
|
li.L3,
|
||||||
|
li.L4,
|
||||||
|
li.L5,
|
||||||
|
li.L6,
|
||||||
|
li.L7,
|
||||||
|
li.L8,
|
||||||
|
li.L9 {
|
||||||
|
/* */ }
|
||||||
|
|
||||||
|
/* Alternate shading for lines */
|
||||||
|
li.L1,
|
||||||
|
li.L3,
|
||||||
|
li.L5,
|
||||||
|
li.L7,
|
||||||
|
li.L9 {
|
||||||
|
/* */ }
|
||||||
193
documentation/utils.js.html
Normal file
193
documentation/utils.js.html
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>JSDoc: Source: utils.js</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">Source: utils.js</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<pre class="prettyprint source linenums"><code>/**
|
||||||
|
* Utils module
|
||||||
|
* @module Utils;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Создание кнопки выбора элементов
|
||||||
|
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||||
|
* @param {string} content placeholer передаваемый из настроек селекта
|
||||||
|
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||||
|
*/
|
||||||
|
export function createSelected(element, content, styles) {
|
||||||
|
if (content) {
|
||||||
|
element.innerHTML = `
|
||||||
|
<div class="cg-select">
|
||||||
|
<p class="selected">${content}</p>
|
||||||
|
<div class="caret"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (styles) {
|
||||||
|
customStyles(element, styles);
|
||||||
|
|
||||||
|
element.innerHTML = `
|
||||||
|
<div class="cg-select" style = "${styles}">
|
||||||
|
<p class="selected" style = "${styles}">${content}</p>
|
||||||
|
<div class="caret" style = "${styles}"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
|
||||||
|
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||||
|
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||||
|
*/
|
||||||
|
export function customStyles(element, styles) {
|
||||||
|
if (!styles) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { head, caret, placeholder } = styles;
|
||||||
|
|
||||||
|
const cgSelect = element.querySelector('.cg-select');
|
||||||
|
const caretSelect = element.querySelector('.caret');
|
||||||
|
const placeholderSelect = element.querySelector('.selected');
|
||||||
|
|
||||||
|
customStylesFormat(head, cgSelect);
|
||||||
|
|
||||||
|
customStylesFormat(caret, caretSelect);
|
||||||
|
|
||||||
|
if (placeholderSelect) {
|
||||||
|
customStylesFormat(placeholder, placeholderSelect);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// export function customStylesFormat(elemOption, selector) {
|
||||||
|
// if (elemOption) {
|
||||||
|
// Object.entries(elemOption).forEach(([key, value]) => {
|
||||||
|
// selector.style[key] = value;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
/**
|
||||||
|
* Универсальный метод для стилизации селекта
|
||||||
|
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
|
||||||
|
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
|
||||||
|
*/
|
||||||
|
exports.customStylesFormat = (elemOption, selector) => {
|
||||||
|
if (elemOption) {
|
||||||
|
Object.entries(elemOption).forEach(([key, value]) => {
|
||||||
|
selector.style[key] = value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Проверка содержит ли item указанные свойства,
|
||||||
|
* @param {object} item проверяемый на определенную структуру элемент
|
||||||
|
* @returns {boolean} возвращает true/false если item содержит указанные свойства
|
||||||
|
*/
|
||||||
|
export function checkItemStruct(item) {
|
||||||
|
if (item && typeof item !== 'object') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Преобразование каждого елемента полученного из поля Items;
|
||||||
|
* @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
|
||||||
|
* @param {number} index индекс этого элемента
|
||||||
|
* @returns {object} возвращает сформированный объект
|
||||||
|
*/
|
||||||
|
export function getFormatItem(dataItem, index) {
|
||||||
|
const random = Math.random().toString(36).substring(2, 10);
|
||||||
|
let item = {};
|
||||||
|
|
||||||
|
if (checkItemStruct(dataItem)) {
|
||||||
|
item = {
|
||||||
|
id: dataItem.id,
|
||||||
|
title: dataItem.title,
|
||||||
|
value: index,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
item = {
|
||||||
|
id: random,
|
||||||
|
title: dataItem,
|
||||||
|
value: index,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
</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="%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>
|
||||||
|
</ul>
|
||||||
|
<h3>Module</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="module-Utils.html">Utils</a></li>
|
||||||
|
<li><a href="module-createElementChips.html">createBreadcrumb</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Global</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##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#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 18:07:14 GMT+0300 (Moscow Standard Time)
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
prettyPrint();
|
||||||
|
</script>
|
||||||
|
<script src="scripts/linenumber.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,40 +1,115 @@
|
|||||||
import {
|
import {
|
||||||
customStyles,
|
|
||||||
createSelected,
|
createSelected,
|
||||||
|
customStyles,
|
||||||
getFormatItem,
|
getFormatItem,
|
||||||
customStylesFormat,
|
customStylesFormat,
|
||||||
} from './components/utils';
|
} from './components/utils';
|
||||||
import { createBreadcrumb } from './components/create-element';
|
import { createBreadcrumb } from './components/create-element';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @class Описание класса DropDown
|
||||||
|
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
||||||
|
*@author Овсяников Максим
|
||||||
|
*/
|
||||||
export class DropDown {
|
export class DropDown {
|
||||||
// Глобальные переменные класса
|
/**
|
||||||
|
* Созданный HTML елемент
|
||||||
|
* @type {HTMLElement}
|
||||||
|
*/
|
||||||
#element;
|
#element;
|
||||||
|
/**
|
||||||
|
* Созданный список(ul), с классом list
|
||||||
|
* @type {HTMLElement}
|
||||||
|
*/
|
||||||
#list;
|
#list;
|
||||||
|
/**
|
||||||
|
* Настройки селекта передаваемые при создании экземпляра класса
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
#options;
|
#options;
|
||||||
|
/**
|
||||||
|
* Переменная для управления каретки
|
||||||
|
* @type {HTMLElement}
|
||||||
|
*/
|
||||||
#caret;
|
#caret;
|
||||||
|
/**
|
||||||
|
* Массив переданных элементов
|
||||||
|
* @type {object[]}
|
||||||
|
*/
|
||||||
#items;
|
#items;
|
||||||
|
/**
|
||||||
|
* Переданные категории
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
#category;
|
#category;
|
||||||
|
/**
|
||||||
|
* Выбранный или массив выбранных элементов из списка
|
||||||
|
* @type {object[] | object}
|
||||||
|
*/
|
||||||
#selectedItems;
|
#selectedItems;
|
||||||
|
/**
|
||||||
|
* Массив индексов выбранных элементов
|
||||||
|
* @type {number[]}
|
||||||
|
*/
|
||||||
#indexes = [];
|
#indexes = [];
|
||||||
|
|
||||||
// Геттер возвращающий выбранные элементы
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {string[] | string | null} Возвращает выбранные элемент(ы) в виде массива/элемента/null
|
||||||
|
* @description Геттер возвращающий выбранные элемент(ы) селекта
|
||||||
|
*/
|
||||||
get value() {
|
get value() {
|
||||||
return this.#selectedItems ?? null;
|
return this.#selectedItems ?? null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Геттер возвращающий индексы выбранных элементов
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
|
||||||
|
* @description Геттер возвращающий индексы выбранных элемента(ов) селекта
|
||||||
|
*/
|
||||||
get indexes() {
|
get indexes() {
|
||||||
return this.#indexes ?? [];
|
return this.#indexes ?? [];
|
||||||
}
|
}
|
||||||
|
|
||||||
// Конструктор принимающий настройки селекта
|
/**
|
||||||
|
*
|
||||||
|
* @param {object} options Объект принимающий настройки селекта
|
||||||
|
* @constructor Конструктор класса DropDown
|
||||||
|
* @description Конструктор принимает объект и рендерит селект.
|
||||||
|
* @example
|
||||||
|
* options = {
|
||||||
|
* selector: 'Уникальный селектор',
|
||||||
|
selected: 'Выбранный элемент',
|
||||||
|
placeholder: '...',
|
||||||
|
items: [string|number|object],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
background: '...',
|
||||||
|
},
|
||||||
|
list: {...},
|
||||||
|
chips: {...},
|
||||||
|
caret: {...},
|
||||||
|
placeholder: {...},
|
||||||
|
},
|
||||||
|
event: '...',
|
||||||
|
url: 'http/...',
|
||||||
|
multiselect: true/false,
|
||||||
|
multiselectTag: true/false,
|
||||||
|
* }
|
||||||
|
|
||||||
|
*/
|
||||||
constructor(options = {}) {
|
constructor(options = {}) {
|
||||||
this.#init(options);
|
this.#init(options);
|
||||||
this.#render();
|
this.#render();
|
||||||
this.#initEvent();
|
this.#initEvent();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод добавления елемента в список index == string/object
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {string | object} item добавляемый елемент
|
||||||
|
* @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
|
||||||
|
* @method addItem
|
||||||
|
*/
|
||||||
addItem(item) {
|
addItem(item) {
|
||||||
if (this.#category) {
|
if (this.#category) {
|
||||||
console.log('can`t add item to category');
|
console.log('can`t add item to category');
|
||||||
@ -51,7 +126,12 @@ export class DropDown {
|
|||||||
this.#render();
|
this.#render();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод удаления елемента из спискаindex == number
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} index индекс удаляемого элемента
|
||||||
|
* @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
|
||||||
|
* @method deleteItem
|
||||||
|
*/
|
||||||
deleteItem(index) {
|
deleteItem(index) {
|
||||||
if (this.#category) {
|
if (this.#category) {
|
||||||
console.log('can`t add item to category');
|
console.log('can`t add item to category');
|
||||||
@ -64,13 +144,22 @@ export class DropDown {
|
|||||||
this.#render();
|
this.#render();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод удаляющий все элементы списка.
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @description удаляет все елементы из списка и перерисовывает его.
|
||||||
|
* @method deleteItemAll
|
||||||
|
*/
|
||||||
deleteItemAll() {
|
deleteItemAll() {
|
||||||
this.#items.splice(0, this.#items.length);
|
this.#items.splice(0, this.#items.length);
|
||||||
this.#render();
|
this.#render();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод позволяющий в селекте выбрать элемент который будет изначально отрисовывать, index == number
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} index индекс выбранного элемента
|
||||||
|
* @description выбирает элемент который будет изначально отрисовываться в селекте
|
||||||
|
* @method selectIndex
|
||||||
|
*/
|
||||||
selectIndex(index) {
|
selectIndex(index) {
|
||||||
if (this.#category) {
|
if (this.#category) {
|
||||||
console.log('can`t add item to category');
|
console.log('can`t add item to category');
|
||||||
@ -87,12 +176,25 @@ export class DropDown {
|
|||||||
this.#render(select);
|
this.#render(select);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод возвращающий елемент по номеру, number == number
|
/**
|
||||||
getElement(number) {
|
* Метод экземпляра класса DropDown
|
||||||
return this.#items[number];
|
* @param {number} numberItem номер возвращаемого элемента
|
||||||
|
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
|
||||||
|
* @method getElement
|
||||||
|
*/
|
||||||
|
getElement(numberItem) {
|
||||||
|
if (numberItem > this.#items.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return this.#items[numberItem];
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод позволяющий сделать селект disabled, value == boolean;
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
|
||||||
|
* @description Метод позволяющий переключать состояние селекта disabled,
|
||||||
|
* @method disabled
|
||||||
|
*/
|
||||||
disabled(value) {
|
disabled(value) {
|
||||||
if (typeof value !== 'boolean') {
|
if (typeof value !== 'boolean') {
|
||||||
return;
|
return;
|
||||||
@ -108,7 +210,13 @@ export class DropDown {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод позволяющий открывать/закрывать селект с помощью кнопок, button == внешняя кнопка(HTMLElement); method == string;
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {HTMLInputElement} button - HTML кнопка
|
||||||
|
* @param {string} method - метод открытия open/close
|
||||||
|
* @description Метод позволяющий открывать/закрывать селект с помощью кнопок
|
||||||
|
* @method buttonControl
|
||||||
|
*/
|
||||||
buttonControl(button, method) {
|
buttonControl(button, method) {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
if (method === 'open') {
|
if (method === 'open') {
|
||||||
@ -121,7 +229,32 @@ export class DropDown {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Общая инициализация селекта и формирование элементов
|
/**
|
||||||
|
* Приватный метод инициализации экземпляра класса DropDown
|
||||||
|
* @method #init
|
||||||
|
* @member
|
||||||
|
* @protected
|
||||||
|
* @param {object} options передаваемые настройки селекта
|
||||||
|
* @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
|
||||||
|
* @example
|
||||||
|
* {
|
||||||
|
selector: '.cg-dropdown_one',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
|
multiselect: true,
|
||||||
|
multiselectTag: true,
|
||||||
|
}
|
||||||
|
*/
|
||||||
#init(options) {
|
#init(options) {
|
||||||
this.#options = options;
|
this.#options = options;
|
||||||
const { items, multiselect, url } = this.#options;
|
const { items, multiselect, url } = this.#options;
|
||||||
@ -163,7 +296,14 @@ export class DropDown {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод отрисовывающий кнопку селекта и каретку
|
/**
|
||||||
|
* Привaтный метод экземпляра класса DropDown
|
||||||
|
*
|
||||||
|
* @method #initSelected
|
||||||
|
* @param {string} select необязательный елемент. Используется в методе selectIndex
|
||||||
|
* @description Отрисовывает и стилизует селект
|
||||||
|
* @protected
|
||||||
|
*/
|
||||||
#initSelected(select) {
|
#initSelected(select) {
|
||||||
const { styles, selected, placeholder } = this.#options;
|
const { styles, selected, placeholder } = this.#options;
|
||||||
|
|
||||||
@ -184,7 +324,13 @@ export class DropDown {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Общий рендер элементов в список и их настойка
|
/**
|
||||||
|
* Приватный метод рендера экземпляра класса DropDown
|
||||||
|
*@protected
|
||||||
|
* @method #render
|
||||||
|
* @param {string} select необязательный елемент. Передаеться в метод initSelected
|
||||||
|
* @description Рендер елементов в селекте.
|
||||||
|
*/
|
||||||
#render(select) {
|
#render(select) {
|
||||||
const { styles, multiselect } = this.#options;
|
const { styles, multiselect } = this.#options;
|
||||||
|
|
||||||
@ -244,7 +390,12 @@ export class DropDown {
|
|||||||
this.#addOptionsBehaviour();
|
this.#addOptionsBehaviour();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Общий рендер элементов в список и их настойка с получением данных с URL
|
/**
|
||||||
|
* Приватный метод рендера экземпляра класса DropDown
|
||||||
|
*@protected
|
||||||
|
* @method #renderUrl
|
||||||
|
* @description Рендер елементов в селекте переданных с URL и их настойка
|
||||||
|
*/
|
||||||
async #renderUrl() {
|
async #renderUrl() {
|
||||||
const { url, items, multiselect } = this.#options;
|
const { url, items, multiselect } = this.#options;
|
||||||
|
|
||||||
@ -295,7 +446,13 @@ export class DropDown {
|
|||||||
this.#addOptionsBehaviour();
|
this.#addOptionsBehaviour();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод открывающий список
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
|
||||||
|
* @description Открывает список для выбора элемента
|
||||||
|
* @method #open
|
||||||
|
*/
|
||||||
#open(oneClick) {
|
#open(oneClick) {
|
||||||
this.#list = this.#element.querySelector('.list');
|
this.#list = this.#element.querySelector('.list');
|
||||||
this.#caret = this.#element.querySelector('.caret');
|
this.#caret = this.#element.querySelector('.caret');
|
||||||
@ -309,13 +466,23 @@ export class DropDown {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод закрывающий список
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Закрывает список
|
||||||
|
* @method #close
|
||||||
|
*/
|
||||||
#close() {
|
#close() {
|
||||||
this.#list.classList.remove('open');
|
this.#list.classList.remove('open');
|
||||||
this.#caret.classList.remove('caret_rotate');
|
this.#caret.classList.remove('caret_rotate');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + мультиселект таг.
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
|
||||||
|
* @method #addOptionsBehaviour
|
||||||
|
*/
|
||||||
#addOptionsBehaviour() {
|
#addOptionsBehaviour() {
|
||||||
const { multiselect, placeholder, selected, multiselectTag } = this.#options;
|
const { multiselect, placeholder, selected, multiselectTag } = this.#options;
|
||||||
|
|
||||||
@ -405,7 +572,12 @@ export class DropDown {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод позволяющий открывать/закрывать список по переданному эвенту.
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Открывает и закрывает список по переданному эвенту
|
||||||
|
* @method #initEvent
|
||||||
|
*/
|
||||||
#initEvent() {
|
#initEvent() {
|
||||||
const { event } = this.#options;
|
const { event } = this.#options;
|
||||||
if (!event) {
|
if (!event) {
|
||||||
|
|||||||
@ -1,6 +1,16 @@
|
|||||||
import { customStylesFormat } from './utils';
|
import { customStylesFormat } from './utils';
|
||||||
|
/**
|
||||||
|
* @module createBreadcrumb
|
||||||
|
*/
|
||||||
|
|
||||||
// Метод который создает и отвечает за поведение chips
|
/**
|
||||||
|
* Метод который создает и отвечает за поведение chips
|
||||||
|
* @param {object} data объект в котором содержатся настройки и элементы селекта
|
||||||
|
* @param {string} title имя выбранного элемента для отрисовки chips
|
||||||
|
* @param {number} index индекс выбранного элемента для отрисовки chips
|
||||||
|
* @param {string} id уникальное id выбранного элемента
|
||||||
|
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
|
||||||
|
*/
|
||||||
export function createBreadcrumb(data, title, index, id) {
|
export function createBreadcrumb(data, title, index, id) {
|
||||||
const { element, option, indexes, selectedItems } = data;
|
const { element, option, indexes, selectedItems } = data;
|
||||||
const { placeholder, styles } = option;
|
const { placeholder, styles } = option;
|
||||||
|
|||||||
@ -1,10 +1,20 @@
|
|||||||
// Создание селектора
|
/**
|
||||||
|
* Utils module
|
||||||
|
* @module Utils
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Создание кнопки выбора элементов
|
||||||
|
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||||
|
* @param {string} content placeholer передаваемый из настроек селекта
|
||||||
|
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||||
|
*/
|
||||||
export function createSelected(element, content, styles) {
|
export function createSelected(element, content, styles) {
|
||||||
if (content) {
|
if (content) {
|
||||||
element.innerHTML = `
|
element.innerHTML = `
|
||||||
<div class="cg-select">
|
<div class="cg-select">
|
||||||
<p class="selected">${content}</p>
|
<p class="selected">${content}</p>
|
||||||
<div class="caret"></div>
|
<div class="caret"></div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -14,14 +24,18 @@ export function createSelected(element, content, styles) {
|
|||||||
|
|
||||||
element.innerHTML = `
|
element.innerHTML = `
|
||||||
<div class="cg-select" style = "${styles}">
|
<div class="cg-select" style = "${styles}">
|
||||||
<span class="selected" style = "${styles}">${content}</span>
|
<p class="selected" style = "${styles}">${content}</p>
|
||||||
<div class="caret" style = "${styles}"></div>
|
<div class="caret" style = "${styles}"></div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод ищет и стилизует полученные елементы из styles
|
/**
|
||||||
|
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
|
||||||
|
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||||
|
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||||
|
*/
|
||||||
export function customStyles(element, styles) {
|
export function customStyles(element, styles) {
|
||||||
if (!styles) {
|
if (!styles) {
|
||||||
return;
|
return;
|
||||||
@ -42,7 +56,24 @@ export function customStyles(element, styles) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод checkItemStruct возвращает true/false если item содержит указанные свойства,
|
/**
|
||||||
|
* Универсальный метод для стилизации селекта
|
||||||
|
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
|
||||||
|
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
|
||||||
|
*/
|
||||||
|
export function customStylesFormat(elemOption, selector) {
|
||||||
|
if (elemOption) {
|
||||||
|
Object.entries(elemOption).forEach(([key, value]) => {
|
||||||
|
selector.style[key] = value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Проверка содержит ли item указанные свойства,
|
||||||
|
* @param {object} item проверяемый на определенную структуру элемент
|
||||||
|
* @returns {boolean} возвращает true/false если item содержит указанные свойства
|
||||||
|
*/
|
||||||
export function checkItemStruct(item) {
|
export function checkItemStruct(item) {
|
||||||
if (item && typeof item !== 'object') {
|
if (item && typeof item !== 'object') {
|
||||||
return false;
|
return false;
|
||||||
@ -51,7 +82,12 @@ export function checkItemStruct(item) {
|
|||||||
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
|
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Метод getFormatItem преобразовывает каждый елемент полученный из поля Items;
|
/**
|
||||||
|
* Преобразование каждого елемента полученного из поля Items;
|
||||||
|
* @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
|
||||||
|
* @param {number} index индекс этого элемента
|
||||||
|
* @returns {object} возвращает сформированный объект
|
||||||
|
*/
|
||||||
export function getFormatItem(dataItem, index) {
|
export function getFormatItem(dataItem, index) {
|
||||||
const random = Math.random().toString(36).substring(2, 10);
|
const random = Math.random().toString(36).substring(2, 10);
|
||||||
let item = {};
|
let item = {};
|
||||||
@ -72,12 +108,3 @@ export function getFormatItem(dataItem, index) {
|
|||||||
|
|
||||||
return item;
|
return item;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Универсальный метод для стилизации селекта
|
|
||||||
export function customStylesFormat(elemOption, selector) {
|
|
||||||
if (elemOption) {
|
|
||||||
Object.entries(elemOption).forEach(([key, value]) => {
|
|
||||||
selector.style[key] = value;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
12
src/index.js
12
src/index.js
@ -4,7 +4,17 @@ import { DropDown } from './cg-dropdown';
|
|||||||
const dropdown = new DropDown({
|
const dropdown = new DropDown({
|
||||||
selector: '.cg-dropdown_one',
|
selector: '.cg-dropdown_one',
|
||||||
placeholder: 'Выберите авто',
|
placeholder: 'Выберите авто',
|
||||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
multiselect: true,
|
multiselect: true,
|
||||||
multiselectTag: true,
|
multiselectTag: true,
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user