From f72084e44e8492741f4e08aaa0242e3c6c802627 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 11 Jan 2023 18:41:33 +0300 Subject: [PATCH] Added public methods and fixed bugs --- src/cg-selectTS.ts | 109 ++++++++++++++++++++------- src/interfaces/language.interface.ts | 5 ++ src/language/languageTS.ts | 13 ++++ 3 files changed, 100 insertions(+), 27 deletions(-) create mode 100644 src/interfaces/language.interface.ts create mode 100644 src/language/languageTS.ts diff --git a/src/cg-selectTS.ts b/src/cg-selectTS.ts index 69efdf8..4738298 100644 --- a/src/cg-selectTS.ts +++ b/src/cg-selectTS.ts @@ -20,7 +20,8 @@ import { IDataItem, ISelectedItems } from './components/utils/urils.interface'; import { ICgSelect, IStyle } from './interfaces/cg-select.interface'; import { IItems } from './interfaces/items.interface'; -import { ru, en } from './language/language'; +import { ru, en } from './language/languageTS'; +import { ILanguage } from './interfaces/language.interface'; import './main.scss'; @@ -628,32 +629,6 @@ export class CGSelect implements ICgSelect { } } - /** - * Приватный метод экземпляра класса DropDown - * @protected - * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна. - * @description Изменяет отображение листа с выбором в виде модального окна. - * @method displayMode - */ - private displayMode(listDisplayMode: boolean): void { - if (listDisplayMode) { - const modal = document.createElement('div'); - const body = document.querySelector('body'); - const list = this.list!; - - modal.appendChild(list); - this.element!.appendChild(modal); - - this.element!.addEventListener('click', () => { - modal.classList.toggle('modal'); - list.classList.toggle('listModal'); - body!.classList.toggle('overflowHide'); - }); - } else { - return; - } - } - /** * Метод который реализует поиск элементов в селекте * @protected @@ -710,4 +685,84 @@ export class CGSelect implements ICgSelect { }; } } + + /** + * Приватный метод экземпляра класса DropDown + * @protected + * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна. + * @description Изменяет отображение листа с выбором в виде модального окна. + * @method displayMode + */ + private displayMode(listDisplayMode: boolean): void { + if (listDisplayMode) { + const modal = document.createElement('div'); + const body = document.querySelector('body'); + const list = this.list!; + + modal.appendChild(list); + this.element!.appendChild(modal); + + this.element!.addEventListener('click', () => { + modal.classList.toggle('modal'); + list.classList.toggle('listModal'); + body!.classList.toggle('overflowHide'); + }); + } else { + return; + } + } + + // Public methods + /** + * Метод экземпляра класса DropDown + * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch + * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата + * @method addLanguage + */ + public addLanguage(language: ILanguage) { + const { placeholder, textInListSearch, selectPlaceholder } = language; + const { searchMode } = this.options; + + const select = this.element!.querySelector('.selected'); + const textNodeSelect = document.createTextNode(selectPlaceholder); + select!.appendChild(textNodeSelect); + + if (searchMode) { + const search = this.element!.querySelector('.inputSearch'); + const textNoRezult = this.element!.querySelector('.noRezult'); + const textNode = document.createTextNode(textInListSearch); + + search!.setAttribute('placeholder', placeholder); + search!.setAttribute('placeholder', placeholder); + + textNoRezult!.textContent = ''; + textNoRezult!.appendChild(textNode); + } + } + + /** + * Метод экземпляра класса DropDown + * @param {HTMLInputElement} button - HTML кнопка + * @param {string} method - метод открытия open/close + * @description Метод позволяющий открывать/закрывать селект с помощью кнопок + * @method buttonControl + */ + public buttonControl(button, method: string) { + const { listDisplayMode } = this.options; + + if (listDisplayMode === true) { + return; + } + + // this.btn = button; + button.addEventListener('click', () => { + if (method.toLowerCase() === 'open') { + this.open(true); + } else if (method.toLowerCase() === 'close') { + this.close(); + } else { + return; + } + }); + } } diff --git a/src/interfaces/language.interface.ts b/src/interfaces/language.interface.ts new file mode 100644 index 0000000..ffaaf2a --- /dev/null +++ b/src/interfaces/language.interface.ts @@ -0,0 +1,5 @@ +export interface ILanguage { + placeholder: string; + selectPlaceholder: string; + textInListSearch: string; +} diff --git a/src/language/languageTS.ts b/src/language/languageTS.ts new file mode 100644 index 0000000..41212b9 --- /dev/null +++ b/src/language/languageTS.ts @@ -0,0 +1,13 @@ +import { ILanguage } from '../interfaces/language.interface'; + +export const ru: ILanguage = { + selectPlaceholder: 'Выберите элемент...', + placeholder: 'Поиск...', + textInListSearch: 'Совпадений нет...', +}; + +export const en: ILanguage = { + selectPlaceholder: 'Select element...', + placeholder: 'Search...', + textInListSearch: 'No matches...', +};