<!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 = `
                 &lt;div class="cg-select">
                    &lt;p class="selected">${content}&lt;/p>
                     &lt;div class="caret">&lt;/div>
                  &lt;/div>
                 `;
             }
           
             if (styles) {
               customStyles(element, styles);
           
               element.innerHTML = `
                 &lt;div class="cg-select" style = "${styles}">
                     &lt;p class="selected" style = "${styles}">${content}&lt;/p>
                     &lt;div class="caret" style = "${styles}">&lt;/div>
                 &lt;/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);
             }
           }
           
           /**
            * Универсальный метод для стилизации селекта
            * @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) {
             if (item &amp;&amp; typeof item !== 'object') {
               return false;
             }
           
             return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; 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;
           }
           
           /**
            * Поведение нативного(одинарного) селекта при выборе кастомного
            * @param {NodeList} element NodeList нативного селекта
            * @param {object} item выбранный элемент в кастомном селекте
            */
           export function nativOptionOrdinary(element, item) {
             element.forEach((option) => {
               option.removeAttribute('selected');
               if (option.textContent === item) {
                 option.setAttribute('selected', 'selected');
               }
             });
           }
           
           /**
            * Поведение нативного(Multiple) селекта при выборе в кастомном
            * @param {NodeList} element NodeList нативного селекта
            * @param {object} item выбранный элемент в кастомном селекте
            * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
            */
           export function nativOptionMultiple(element, item, condition) {
             element.forEach((option) => {
               if (condition == true) {
                 if (option.textContent === item) {
                   option.setAttribute('selected', 'selected');
                 }
               } else if (condition == false) {
                 if (option.textContent === item) {
                   option.removeAttribute('selected');
                 }
               } else {
                 return;
               }
             });
           }
</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>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#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>
      </ul>
      <h3>Public methods</h3>
      <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 18:07:14 GMT+0300 (Moscow Standard Time)
    </footer>

    <script>
      prettyPrint();
    </script>
    <script src="scripts/linenumber.js"></script>
  </body>
</html>