<!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>