apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish working search

Browse Source
This commit is contained in:
Макс Овсяников
2022-10-25 21:03:10 +03:00
parent 19a857280d
commit 482b3799d2
14 changed files with 1100 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
documentation/utils.js.html
View File

@ -20,122 +20,151 @@
<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);
}
}
// export function customStylesFormat(elemOption, selector) {
// if (elemOption) {
// Object.entries(elemOption).forEach(([key, value]) => {
// selector.style[key] = value;
// });
// }
// }
/**
* Универсальный метод для стилизации селекта
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
*/
exports.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;
}
* 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>