2022-10-19 20:33:37 +03:00
|
|
|
<!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"
|
2022-10-25 21:03:10 +03:00
|
|
|
><code>import { customStylesFormat, nativOptionMultiple } from './utils';
|
|
|
|
|
/**
|
|
|
|
|
* @module createBreadcrumb
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Метод который создает и отвечает за поведение 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 nativOption = element.querySelectorAll('.nativSelect__nativOption');
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
nativOptionMultiple(nativOption, title, false);
|
|
|
|
|
|
|
|
|
|
const deleteIcon = indexes.indexOf(index);
|
|
|
|
|
let checkBox = '';
|
|
|
|
|
|
|
|
|
|
indexes.splice(deleteIcon, 1);
|
|
|
|
|
selectedItems.splice(deleteIcon, 1);
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Метод который создает нативный селект
|
|
|
|
|
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
|
|
|
|
|
*/
|
|
|
|
|
export function createNativeSelect() {
|
|
|
|
|
const nativSelect = document.createElement('select');
|
|
|
|
|
|
|
|
|
|
nativSelect.setAttribute('form', 'data');
|
|
|
|
|
nativSelect.setAttribute('name', 'dataSelect');
|
|
|
|
|
nativSelect.classList.add('nativSelect');
|
|
|
|
|
return nativSelect;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Метод который создает Options для нативного селекта
|
|
|
|
|
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
|
|
|
|
|
*/
|
|
|
|
|
export function createNativSelectOption() {
|
|
|
|
|
const nativOption = document.createElement('option');
|
|
|
|
|
|
|
|
|
|
nativOption.classList.add('nativSelect__nativOption');
|
|
|
|
|
return nativOption;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Метод который создает поиск элементов в селекте
|
|
|
|
|
* @param {string} random уникальное значение для input элемента.
|
|
|
|
|
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
|
|
|
|
|
*/
|
|
|
|
|
export function createInputSearch(random) {
|
|
|
|
|
const intputSearch = document.createElement('input');
|
|
|
|
|
|
|
|
|
|
intputSearch.type = 'text';
|
|
|
|
|
intputSearch.classList.add('inputSearch');
|
|
|
|
|
intputSearch.setAttribute('id', `searchSelect-${random}`);
|
|
|
|
|
intputSearch.setAttribute('placeholder', 'Search...');
|
|
|
|
|
|
|
|
|
|
return intputSearch;
|
|
|
|
|
}
|
2022-10-19 20:33:37 +03:00
|
|
|
</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>
|
2022-10-21 16:17:37 +03:00
|
|
|
<h3>Modules</h3>
|
2022-10-19 20:33:37 +03:00
|
|
|
<ul>
|
|
|
|
|
<li><a href="module-Utils.html">Utils</a></li>
|
2022-10-21 16:17:37 +03:00
|
|
|
<li><a href="module-createElementChips.html">createElementChips</a></li>
|
2022-10-19 20:33:37 +03:00
|
|
|
</ul>
|
2022-10-21 16:17:37 +03:00
|
|
|
<h3>Private methods</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
|
|
|
|
|
<li><a href="global.html#close">#close</a></li>
|
|
|
|
|
<li><a href="global.html#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>
|
2022-10-25 21:03:10 +03:00
|
|
|
<li><a href="global.html#searchMode">#searchMode</a></li>
|
2022-10-21 16:17:37 +03:00
|
|
|
</ul>
|
|
|
|
|
<h3>Public methods</h3>
|
2022-10-19 20:33:37 +03:00
|
|
|
<ul>
|
|
|
|
|
<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>
|
