<!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, nativeOptionMultiple } 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 nativeOption = element.querySelectorAll('.nativeSelect__nativeOption'); 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.preventDefault(); event.stopPropagation(); nativeOptionMultiple(nativeOption, 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 nativeSelect = document.createElement('select'); nativeSelect.setAttribute('name', 'dataSelect'); nativeSelect.classList.add('nativeSelect'); return nativeSelect; } /** * Метод который создает Options для нативного селекта * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта */ export function createNativeSelectOption() { const nativeOption = document.createElement('option'); nativeOption.classList.add('nativeSelect__nativeOption'); return nativeOption; } /** * Метод который создает поиск элементов в селекте * @param {string} random уникальное значение для input элемента. * @param {string} lenguage текст на определенном языке переданный из файла language.js * @returns {HTMLInputElement} Возвращает сформированный input елемент. */ export function createInputSearch(random, lenguage) { const inputSearch = document.createElement('input'); inputSearch.type = 'text'; inputSearch.classList.add('inputSearch'); inputSearch.setAttribute('id', `searchSelect-${random}`); if (lenguage) { inputSearch.setAttribute('placeholder', `${lenguage}`); } else { inputSearch.setAttribute('placeholder', 'Search...'); } inputSearch.addEventListener('click', (e) => { e.preventDefault(); }); return inputSearch; } </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="constructor.html">Конструктор класса DropDown</a> </li> </ul> <h3>Modules</h3> <ul> <li><a href="module-Utils.html">Utils</a></li> <li><a href="module-createElementChips.html">createElementChips</a></li> </ul> <h3>Private methods</h3> <ul> <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li> <li><a href="global.html#close">#close</a></li> <li><a href="global.html#checkTheme">#checkTheme</a></li> <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li> <li><a href="global.html#init">#init</a></li> <li><a href="global.html#initEvent">#initEvent</a></li> <li><a href="global.html#initSelected">#initSelected</a></li> <li><a href="global.html#open">#open</a></li> <li><a href="global.html#render">#render</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#displayMode">#displayMode</a></li> <li><a href="global.html#selectMode">#selectMode</a></li> </ul> <h3>Public methods</h3> <ul> <li><a href="global.html#addLanguage">addLanguage</a></li> <li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItemAll">deleteItemAll</a></li> <li><a href="global.html#disabled">disabled</a></li> <li><a href="global.html#getElement">getElement</a></li> <li><a href="global.html#selectIndex">selectIndex</a></li> </ul> </nav> <br class="clear" /> <footer> Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Wed Oct 19 2022 20:13:59 GMT+0300 (Moscow Standard Time) </footer> <script> prettyPrint(); </script> <script src="scripts/linenumber.js"></script> </body> </html>