diff --git a/example/indexTs.ts b/example/indexTs.ts index aebfdd1..73a18a7 100644 --- a/example/indexTs.ts +++ b/example/indexTs.ts @@ -3,7 +3,6 @@ import { SGSelect } from "../src/cg-selectTS"; const dropdn = new SGSelect({ selector: '.cg-dropdown_one', placeholder: 'Выберите авто', - // lable: 'EXAMPLE', items: [ 'BMW', { diff --git a/src/cg-selectTS.ts b/src/cg-selectTS.ts index cfcad63..8379ab2 100644 --- a/src/cg-selectTS.ts +++ b/src/cg-selectTS.ts @@ -1,3 +1,5 @@ +import { IDataItem } from './components/utils/urils.interface'; +import { createSelected, getFormatItem } from './components/utils/utilsTs'; import { ISgSelect } from './interfaces/cg-select.interface'; import { IItems } from './interfaces/items.interface'; import './main.scss'; @@ -22,7 +24,7 @@ export class SGSelect implements ISgSelect { private element: Element | null; private list: HTMLElement; - private options: object; + private options: ISgSelect; private caret: HTMLElement; private category: string; private selectedItems: object[] | object; @@ -31,17 +33,23 @@ export class SGSelect implements ISgSelect { constructor(setting: ISgSelect) { this.init(setting); + this.render(); } private init(setting: ISgSelect): void { const { items, multiselect, url, selector} = setting; + this.options = setting; + + const elem = document.querySelector(selector); this.element = elem; this.element?.addEventListener('click', (e) => { e.preventDefault(); + console.log('click'); + }); this.itemsSelect = []; @@ -55,11 +63,45 @@ export class SGSelect implements ISgSelect { return; } - items.forEach((dataItem, index) => { - this.itemsSelect.push() + items.forEach((dataItem:IDataItem, index:number) => { + this.itemsSelect.push(getFormatItem(dataItem, index)) }) } - private render() {} + private render() { + const { + styles, + multiselect, + searchMode, + multiselectTag, + darkTheme, + language, + nativeSelectMode, + listDisplayMode, + } = this.options; + + const random = Math.random().toString(36).substring(2, 10); + + this.initSelected() + + } + private renderUrl() {} + + + private initSelected(){ + const { styles, selected, placeholder, lable, language } = this.options; + + if (selected) { + createSelected(this.element, selected); + } else if (placeholder) { + createSelected(this.element, placeholder); + } else { + // if (language && language === 'ru') { + // createSelected(this.#element, ru.selectPlaceholder); + // } else { + // createSelected(this.#element, en.selectPlaceholder); + // } + } + } } diff --git a/src/components/utils/urils.interface.ts b/src/components/utils/urils.interface.ts new file mode 100644 index 0000000..c681930 --- /dev/null +++ b/src/components/utils/urils.interface.ts @@ -0,0 +1,5 @@ +export interface IDataItem{ + category?: string; + categoryItems?: string; + ItemValue: object | string | number; +} \ No newline at end of file diff --git a/src/components/utils/utilsTs.ts b/src/components/utils/utilsTs.ts new file mode 100644 index 0000000..3c32005 --- /dev/null +++ b/src/components/utils/utilsTs.ts @@ -0,0 +1,81 @@ +import { IItems } from '../../interfaces/items.interface'; +import { IDataItem } from './urils.interface'; + +/** + * Преобразование каждого елемента полученного из поля Items; + * @param {IDataItem} dataItem полученный елемент переданный при создании селекта может быть как object / string + * @param {number} index индекс этого элемента + * @returns {IDataItem | IItems} возвращает сформированный объект + */ + +export function getFormatItem(dataItem:IDataItem , index: number):IDataItem | IItems { + const random = Math.random().toString(36).substring(2, 10); + let item: IItems; + + if(checkItemStruct(dataItem)){ + return dataItem; + } else{ + item = { + id: random, + title: dataItem, + value: index + } + return item; + } +} + +/** + * Проверка содержит ли item указанные свойства, + * @param {object} item проверяемый на определенную структуру элемент + * @returns {boolean} возвращает true/false если item содержит указанные свойства + */ +export function checkItemStruct(item: object): boolean { + if (item && typeof item !== 'object') { + return false; + } + + return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value'); +} + +/** + * Создание кнопки выбора элементов + * @param {HTMLElement} element созданный экземпляр класса DropDown + * @param {string} content placeholer передаваемый из настроек селекта + * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта + */ +export function createSelected(element: Element|null, content?: string, styles?: object) { + + const select = document.createElement('div'); + const selected = document.createElement('p'); + const caret = document.createElement('div'); + + + select.classList.add('cg-select'); + selected.classList.add('selected'); + caret.classList.add('caret'); + + select.appendChild(selected); + select.appendChild(caret); + + if(content){ + const text = document.createTextNode(content); + selected.appendChild(text); + element?.appendChild(select) + } else if(styles){ + // customStyles(element, styles); + select.setAttribute('style', `${styles}`) + selected.setAttribute('style', `${styles}`) + caret.setAttribute('style', `${styles}`) + } + + // if (styles) { + // customStyles(element, styles); + + // element.innerHTML = ` + //
+ //

${content}

+ //
+ //
+ // `; + // } +} \ No newline at end of file diff --git a/src/components/utilsTs.ts b/src/components/utilsTs.ts deleted file mode 100644 index b879140..0000000 --- a/src/components/utilsTs.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { IItems } from '../interfaces/items.interface'; - -interface IDataItem{ - category?: string; - categoryItems?: string; - ItemValue: IItems | string | number; -} - -/** - * Преобразование каждого елемента полученного из поля Items; - * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string - * @param {number} index индекс этого элемента - * @returns {object} возвращает сформированный объект - */ - -export function getFormatItem(dataItem:IDataItem, index: number) { - const random = Math.random().toString(36).substring(2, 10); - let item: IItems; - -// if (checkItemStruct(dataItem)) { -// item = { -// id: dataItem.id, -// title: dataItem.title, -// value: index, -// }; -// } else { -// item = { -// id: random, -// title: dataItem, -// value: index, -// }; -// } - -// return item; -} - -/** - * Проверка содержит ли item указанные свойства, - * @param {object} item проверяемый на определенную структуру элемент - * @returns {boolean} возвращает true/false если item содержит указанные свойства - */ -export function checkItemStruct(item: object): boolean { - if (item && typeof item !== 'object') { - return false; - } - - return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value'); -} diff --git a/src/interfaces/items.interface.ts b/src/interfaces/items.interface.ts index c7bfa0d..1e55bfd 100644 --- a/src/interfaces/items.interface.ts +++ b/src/interfaces/items.interface.ts @@ -1,5 +1,5 @@ export interface IItems{ id: string; - title: string; + title: string | number | object; value: number | string } \ No newline at end of file