diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 416d537..ade425b 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -7,6 +7,7 @@ import { import { createBreadcrumb } from './components/create-element'; export class DropDown { + // Глобальные переменные класса #element; #list; #options; @@ -16,20 +17,24 @@ export class DropDown { #selectedItems; #indexes = []; + // Геттер возвращающий выбранные элементы get value() { return this.#selectedItems ?? null; } + // Геттер возвращающий индексы выбранных элементов get indexes() { return this.#indexes ?? []; } + // Конструктор принимающий настройки селекта constructor(options = {}) { this.#init(options); this.#render(); this.#initEvent(); } + // Метод добавления елемента в список index == string/object addItem(item) { if (this.#category) { console.log('can`t add item to category'); @@ -46,6 +51,7 @@ export class DropDown { this.#render(); } + // Метод удаления елемента из спискаindex == number deleteItem(index) { if (this.#category) { console.log('can`t add item to category'); @@ -58,11 +64,13 @@ export class DropDown { this.#render(); } + // Метод удаляющий все элементы списка. deleteItemAll() { this.#items.splice(0, this.#items.length); this.#render(); } + // Метод позволяющий в селекте выбрать элемент который будет изначально отрисовывать, index == number selectIndex(index) { if (this.#category) { console.log('can`t add item to category'); @@ -79,10 +87,12 @@ export class DropDown { this.#render(select); } + // Метод возвращающий елемент по номеру, number == number getElement(number) { return this.#items[number]; } + // Метод позволяющий сделать селект disabled, value == boolean; disabled(value) { if (typeof value !== 'boolean') { return; @@ -98,6 +108,7 @@ export class DropDown { } } + // Метод позволяющий открывать/закрывать селект с помощью кнопок, button == внешняя кнопка(HTMLElement); method == string; buttonControl(button, method) { button.addEventListener('click', () => { if (method === 'open') { @@ -110,6 +121,7 @@ export class DropDown { }); } + // Общая инициализация селекта и формирование элементов #init(options) { this.#options = options; const { items, multiselect, url } = this.#options; @@ -151,6 +163,7 @@ export class DropDown { }); } + // Метод отрисовывающий кнопку селекта и каретку #initSelected(select) { const { styles, selected, placeholder } = this.#options; @@ -171,6 +184,7 @@ export class DropDown { } } + // Общий рендер элементов в список и их настойка #render(select) { const { styles, multiselect } = this.#options; @@ -230,6 +244,7 @@ export class DropDown { this.#addOptionsBehaviour(); } + // Общий рендер элементов в список и их настойка с получением данных с URL async #renderUrl() { const { url, items, multiselect } = this.#options; @@ -280,6 +295,7 @@ export class DropDown { this.#addOptionsBehaviour(); } + // Метод открывающий список #open(oneClick) { this.#list = this.#element.querySelector('.list'); this.#caret = this.#element.querySelector('.caret'); @@ -293,11 +309,13 @@ export class DropDown { } } + // Метод закрывающий список #close() { this.#list.classList.remove('open'); this.#caret.classList.remove('caret_rotate'); } + // Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + мультиселект таг. #addOptionsBehaviour() { const { multiselect, placeholder, selected, multiselectTag } = this.#options; @@ -387,6 +405,7 @@ export class DropDown { }); } + // Метод позволяющий открывать/закрывать список по переданному эвенту. #initEvent() { const { event } = this.#options; if (!event) { diff --git a/src/components/create-element.js b/src/components/create-element.js index 51b49ef..9394c49 100644 --- a/src/components/create-element.js +++ b/src/components/create-element.js @@ -1,5 +1,6 @@ import { customStylesFormat } from './utils'; +// Метод который создает и отвечает за поведение chips export function createBreadcrumb(data, title, index, id) { const { element, option, indexes, selectedItems } = data; const { placeholder, styles } = option; diff --git a/src/components/utils.js b/src/components/utils.js index 3cc5e4b..4950db2 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -1,3 +1,4 @@ +// Создание селектора export function createSelected(element, content, styles) { if (content) { element.innerHTML = ` @@ -20,6 +21,7 @@ export function createSelected(element, content, styles) { } } +// Метод ищет и стилизует полученные елементы из styles export function customStyles(element, styles) { if (!styles) { return; @@ -40,6 +42,7 @@ export function customStyles(element, styles) { } } +// Метод checkItemStruct возвращает true/false если item содержит указанные свойства, export function checkItemStruct(item) { if (item && typeof item !== 'object') { return false; @@ -48,6 +51,7 @@ export function checkItemStruct(item) { return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value'); } +// Метод getFormatItem преобразовывает каждый елемент полученный из поля Items; export function getFormatItem(dataItem, index) { const random = Math.random().toString(36).substring(2, 10); let item = {}; @@ -69,6 +73,7 @@ export function getFormatItem(dataItem, index) { return item; } +// Универсальный метод для стилизации селекта export function customStylesFormat(elemOption, selector) { if (elemOption) { Object.entries(elemOption).forEach(([key, value]) => {