<!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); } } /** * Универсальный метод для стилизации селекта * @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 && 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; } /** * Поведение нативного(одинарного) селекта при выборе кастомного * @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>