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

translation of descriptions of all methods, etc. into English

Browse Source
This commit is contained in:
Макс Овсяников 2023-01-20 18:50:53 +03:00
parent 718b67e891
commit 15f73b164a
8 changed files with 179 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/cg-select.ts
View File

@ -26,12 +26,12 @@ import { ILanguage } from './interfaces/language.interface';
import './main.scss'; import './main.scss';
/** /**
* @class Описание класса ICgSelect * @class Class Description ICgSelect
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации. * @description This class implements the functionality of a custom select, with customization capabilities.
* @author Овсяников Максим * @author Ovsyanikov Maxim
*/ */
export class CGSelect implements ICgSelect { export class CGSelect implements ICgSelect {
// Настройки селекта // Select settings
selector?: string; selector?: string;
selected?: string; selected?: string;
placeholder?: string; placeholder?: string;
@ -49,62 +49,60 @@ export class CGSelect implements ICgSelect {
multiselect?: boolean; multiselect?: boolean;
multiselectTag?: boolean; multiselectTag?: boolean;
// Переменные и комплектующие селекта
/** /**
* Созданный HTML елемент * Created HTML element.
* @type {Element | null} * @type {Element | null}
*/ */
private element!: Element | null; private element!: Element | null;
/** /**
* Созданный список(ul), с классом list * Created list(ul), with class list.
* @type {Element | null | undefined} * @type {Element | null | undefined}
*/ */
private list!: Element | null; private list!: Element | null;
/** /**
* Настройки селекта передаваемые при создании экземпляра класса * Select settings passed when creating an instance of the class.
* @type {ICgSelect} * @type {ICgSelect}
*/ */
private options!: ICgSelect; private options!: ICgSelect;
/** /**
* Уникальный Id для елементов * Unique Id for elements.
* @type {string} * @type {string}
*/ */
private randomId!: string; private randomId!: string;
/** /**
* Переменная для управления каретки * Variable for carriage control.
* @type {Element | null | undefined} * @type {Element | null | undefined}
*/ */
private caret: Element | null | undefined; private caret: Element | null | undefined;
/** /**
* Переданные категории * Transferred categories.
* @type {string} * @type {string}
*/ */
private category?: string; private category?: string;
/** /**
* Выбранный или массив выбранных элементов из списка * Selected or an array of selected items from a list.
* @type {string[] | string} * @type {string[] | string}
*/ */
private selectedItems!: string[] | string; private selectedItems!: string[] | string;
/** /**
* Массив индексов выбранных элементов * Array of indexes of selected elements.
* @type {number[]} * @type {number[]}
*/ */
private indexes: number[] = []; private indexes: number[] = [];
/** /**
* Кнопка, для управления селектом * Button, to control the select.
* @type {Element | null} * @type {Element | null}
*/ */
private btnCntr?: Element | null; private btnCntr?: Element | null;
/** /**
* @param {ICgSelect} setting Объект принимающий настройки селекта * @param {ICgSelect} setting Object accepting select settings.
* @constructor Конструктор класса DropDown * @constructor ICgSelect class constructor.
* @description Конструктор принимает объект и рендерит селект. * @description The constructor takes an object and renders the select.
* @example * @example
* options = { * options = {
* selector: 'Уникальный селектор', * selector: 'Unique selector',
selected: 'Выбранный элемент', selected: 'Selected item',
placeholder: '...', placeholder: '...',
lable: '...' lable: '...'
items: [string|number|object], items: [string|number|object],
@ -139,34 +137,32 @@ export class CGSelect implements ICgSelect {
//Getters //Getters
/** /**
* Метод экземпляра класса DropDown * @returns {string[] | string} Returns the selected element(s) as an array / element / null.
* @returns {string[] | string} Возвращает выбранные элемент(ы) в виде массива/элемента/null * @description Getter returning the selected element(s) of the select.
* @description Геттер возвращающий выбранные элемент(ы) селекта
*/ */
get value(): string | string[] { get value(): string | string[] {
return this.selectedItems ?? null; return this.selectedItems ?? null;
} }
/** /**
* Метод экземпляра класса DropDown * @returns {number | number[]} Returns the indices of the selected element(s) as an array / empty array.
* @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив * @description A getter that returns the indexes of the selected element(s) of the select.
* @description Геттер возвращающий индексы выбранных элемента(ов) селекта
*/ */
get indexesOf(): number | number[] { get indexesOf(): number | number[] {
return this.indexes ?? []; return this.indexes ?? [];
} }
/** /**
* Приватный метод инициализации экземпляра класса DropDown * Private method for initializing an instance of the ICgSelect class.
* @method init * @method init
* @member * @member
* @protected * @private
* @param {ISgSelect} setting передаваемые настройки селекта * @param {ISgSelect} setting passed select settings.
* @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта. * @description Private method. General initialization of the select. Obtaining tinctures and converting select elements.
* @example * @example
* { * {
selector: '.cg-dropdown_one', selector: '.cg-dropdown_one',
placeholder: 'Выберите авто', placeholder: 'Choose a car',
items: [ items: [
'BMW', 'BMW',
{ {
@ -267,11 +263,10 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод рендера экземпляра класса DropDown * @private
* @protected
* @method render * @method render
* @param {string} select необязательный елемент. Передаеться в метод initSelected * @param {string} select optional element. Passed to the initSelected.
* @description Рендер елементов в селекте. * @description Render elements in select.
*/ */
private render(select?: string): void { private render(select?: string): void {
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
@ -376,10 +371,9 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод рендера экземпляра класса DropDown * @private
* @protected
* @method renderUrl * @method renderUrl
* @description Рендер елементов в селекте переданных с URL и их настойка * @description Rendering elements in the select passed from the URL and setting them up.
*/ */
private async renderUrl() { private async renderUrl() {
const response = await fetch(this.url!); const response = await fetch(this.url!);
@ -439,11 +433,10 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Привaтный метод экземпляра класса DropDown
* @method initSelected * @method initSelected
* @param {string} select необязательный елемент. Используется в методе selectIndex * @param {string} select optional element. Used in the selectedIndex method.
* @description Отрисовывает и стилизует селект * @description Renders and styles the select.
* @protected * @private
*/ */
private initSelected(select?: string): void { private initSelected(select?: string): void {
if (this.selected) { if (this.selected) {
@ -468,9 +461,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод экземпляра класса DropDown * @private
* @protected * @description Opens and closes the list by the passed event.
* @description Открывает и закрывает список по переданному эвенту
* @method initEvent * @method initEvent
*/ */
private initEvent() { private initEvent() {
@ -491,10 +483,9 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод экземпляра класса DropDown * @private
* @protected * @param {boolean} oneClick optional parameter passed from the buttonControl function.
* @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl * @description Opens a list to select an element.
* @description Открывает список для выбора элемента
* @method open * @method open
*/ */
private open(oneClick?: boolean): void { private open(oneClick?: boolean): void {
@ -508,9 +499,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод экземпляра класса DropDown * @private
* @protected * @description Closes the list.
* @description Закрывает список
* @method close * @method close
*/ */
private close(): void { private close(): void {
@ -519,9 +509,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод экземпляра класса DropDown * @private
* @protected * @description Closes the list on click outside of an element.
* @description Закрывает список по клику вне элемента
* @method closeSelectClick * @method closeSelectClick
*/ */
private closeSelectClick(): void { private closeSelectClick(): void {
@ -540,9 +529,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод экземпляра класса DropDown * @private
* @protected * @description A method that implements the selection of elements in different modes.
* @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
* @method addOptionsBehaviour * @method addOptionsBehaviour
*/ */
private addOptionsBehaviour() { private addOptionsBehaviour() {
@ -668,10 +656,9 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод рендера экземпляра класса DropDown * @private
* @protected * @method checkTheme
* @method #checkTheme * @description Changes the color scheme from dark to light.
* @description Изменяет цветовую схему с темной на светлую.
*/ */
private checkTheme(): void { private checkTheme(): void {
const select = this.element!.querySelector('.cg-select'); const select = this.element!.querySelector('.cg-select');
@ -695,10 +682,9 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод экземпляра класса DropDown * @private
* @protected * @param {boolean} nativeSelectMode parameter responsible for adding native select.
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта. * @description Changes the display of the select on mobile devices.
* @description Изменяет отображение селекта на мобильных устройствах
* @method selectMode * @method selectMode
*/ */
private selectMode(nativeSelectMode: boolean) { private selectMode(nativeSelectMode: boolean) {
@ -725,9 +711,9 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод который реализует поиск элементов в селекте * @description The method that implements the search for elements in the select.
* @protected * @private
* @param {string} random уникальное значение для input элемента. * @param {string} random unique value for input element.
* @method searchMode * @method searchMode
*/ */
private searchModeSelect(random: string) { private searchModeSelect(random: string) {
@ -780,10 +766,9 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Приватный метод экземпляра класса DropDown * @private
* @protected * @param {boolean} listDisplayMode parameter responsible for displaying the selection in the form of a modal window.
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна. * @description Changes the display of a sheet with a selection as a modal window.
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method displayMode * @method displayMode
*/ */
private displayMode(listDisplayMode: boolean): void { private displayMode(listDisplayMode: boolean): void {
@ -806,10 +791,10 @@ export class CGSelect implements ICgSelect {
} }
// Public methods // Public methods
/** /**
* Метод экземпляра класса DropDown * @param {number} numberItem returned element number.
* @param {number} numberItem номер возвращаемого элемента * @returns {HTMLElement} returns a reference to the selected HTML element.
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
* @method getElement * @method getElement
*/ */
public getElement(numberItem: number): IItems[] | string[] | any { public getElement(numberItem: number): IItems[] | string[] | any {
@ -821,9 +806,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод экземпляра класса DropDown * @param {ILanguage} language the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.
* @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch * @description a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
* @method addLanguage * @method addLanguage
*/ */
public addLanguage(language: ILanguage) { public addLanguage(language: ILanguage) {
@ -847,10 +831,9 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод экземпляра класса DropDown * @param {HTMLInputElement} button - HTML button.
* @param {HTMLInputElement} button - HTML кнопка * @param {string} method - open/close method.
* @param {string} method - метод открытия open/close * @description A method that allows you to open / close the select using buttons.
* @description Метод позволяющий открывать/закрывать селект с помощью кнопок
* @method buttonControl * @method buttonControl
*/ */
public buttonControl(button: Element, method: string) { public buttonControl(button: Element, method: string) {
@ -871,9 +854,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод экземпляра класса DropDown * @param {boolean} value - Passed parameter to add the disabled attribute.
* @param {boolean} value - Передаваемый параметр для добавления атрибута disabled; * @description A method that allows you to toggle the state of the disabled select.
* @description Метод позволяющий переключать состояние селекта disabled,
* @method disabled * @method disabled
*/ */
public disabled(value: boolean) { public disabled(value: boolean) {
@ -892,9 +874,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод экземпляра класса DropDown * @param {string | IItems} item added element.
* @param {string | object} item добавляемый елемент * @description adds the given element to the end of the list and redraws the list. Cannot be used when passing elements with categories.
* @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
* @method addItem * @method addItem
*/ */
public addItem(item: IItems | string | number) { public addItem(item: IItems | string | number) {
@ -914,9 +895,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод экземпляра класса DropDown * @param {number} index the index of the element to be removed.
* @param {number} index индекс удаляемого элемента * @description removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.
* @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
* @method deleteItem * @method deleteItem
*/ */
public deleteItem(index: number) { public deleteItem(index: number) {
@ -932,8 +912,7 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод экземпляра класса DropDown * @description removes all elements from the list and redraws it.
* @description удаляет все елементы из списка и перерисовывает его.
* @method deleteItemAll * @method deleteItemAll
*/ */
public deleteItemAll() { public deleteItemAll() {
@ -942,9 +921,8 @@ export class CGSelect implements ICgSelect {
} }
/** /**
* Метод экземпляра класса DropDown * @param {number} index the index of the selected element.
* @param {number} index индекс выбранного элемента * @description selects the element that will be initially rendered in the select.
* @description выбирает элемент который будет изначально отрисовываться в селекте
* @method selectIndex * @method selectIndex
*/ */
public selectIndex(index: number) { public selectIndex(index: number) {

10
src/components/create-element/create-element.interface.ts
View File

@ -1,26 +1,26 @@
import { ICgSelect } from 'interfaces/cg-select.interface'; import { ICgSelect } from 'interfaces/cg-select.interface';
/** /**
* @description Настройки для создания чипсов. * @description cSettings for creating chips.
*/ */
export interface ICreateBreadCrumb { export interface ICreateBreadCrumb {
/** /**
* Определенный экземпляр класса. * A specific instance of a class.
* @type {Element | null} * @type {Element | null}
*/ */
element: Element | null; element: Element | null;
/** /**
* Настройки селекта. * Select settings.
* @type {ICgSelect} * @type {ICgSelect}
*/ */
option: ICgSelect; option: ICgSelect;
/** /**
* Массив индексов выбранных элементов. * Array of indexes of selected elements.
* @type {number[]} * @type {number[]}
*/ */
indexes: number[]; indexes: number[];
/** /**
* Массив с выбранными элементами. * Array with selected elements.
* @type {string[]} * @type {string[]}
*/ */
selectedItems: string[]; selectedItems: string[];

28
src/components/create-element/create-element.ts
View File

@ -2,8 +2,8 @@ import { customStylesFormat, nativeOptionMultiple } from '../utils/utils';
import { ICreateBreadCrumb } from './create-element.interface'; import { ICreateBreadCrumb } from './create-element.interface';
/** /**
* Метод который создает нативный селект * The method that creates the native select.
* @returns {HTMLSelectElement} Возвращает созданный нативный селект * @returns {HTMLSelectElement} Returns the created native select.
*/ */
export function createNativeSelect(): HTMLSelectElement { export function createNativeSelect(): HTMLSelectElement {
const nativeSelect = document.createElement('select'); const nativeSelect = document.createElement('select');
@ -14,8 +14,8 @@ export function createNativeSelect(): HTMLSelectElement {
} }
/** /**
* Метод который создает Options для нативного селекта * The method that creates Options for the native select.
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта * @returns {HTMLOptionElement} Returns the generated Options of the native select.
*/ */
export function createNativeSelectOption(): HTMLOptionElement { export function createNativeSelectOption(): HTMLOptionElement {
const nativeOption = document.createElement('option'); const nativeOption = document.createElement('option');
@ -25,12 +25,12 @@ export function createNativeSelectOption(): HTMLOptionElement {
} }
/** /**
* Метод который создает и отвечает за поведение chips * The method that creates and is responsible for the behavior of the chips.
* @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта * @param {ICreateBreadCrumb} data an object that contains settings and select elements.
* @param {string} title имя выбранного элемента для отрисовки chips * @param {string} title the name of the selected element to draw chips.
* @param {number} index индекс выбранного элемента для отрисовки chips * @param {number} index index of the selected item to draw chips.
* @param {string} id уникальное id выбранного элемента * @param {string} id unique id of the selected element.
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item * @returns {HTMLElement} returns the generated HTMLElement chips item.
*/ */
export function createBreadCrumb( export function createBreadCrumb(
data: ICreateBreadCrumb, data: ICreateBreadCrumb,
@ -98,10 +98,10 @@ export function createBreadCrumb(
} }
/** /**
* Метод который создает поиск элементов в селекте * The method that creates a search for elements in the select.
* @param {string} random уникальное значение для input элемента. * @param {string} random unique value for input element.
* @param {string} lenguage текст на определенном языке переданный из файла language.js * @param {string} lenguage text in specific language passed from language.ts file
* @returns {HTMLInputElement} Возвращает сформированный input елемент. * @returns {HTMLInputElement} Returns the rendered input element.
*/ */
export function createInputSearch(random: string, lenguage: string): HTMLInputElement { export function createInputSearch(random: string, lenguage: string): HTMLInputElement {
const inputSearch = document.createElement('input'); const inputSearch = document.createElement('input');

24
src/components/utils/urils.interface.ts
View File

@ -1,58 +1,58 @@
import { IItems } from 'interfaces/items.interface'; import { IItems } from 'interfaces/items.interface';
/** /**
* @description Настройки получаемых элементов. * @description Receive Item Settings.
*/ */
export interface IDataItem { export interface IDataItem {
/** /**
* Необязательный параметр. Категория группы элементов. * Optional parameter. Item group category.
* @type {string} * @type {string}
*/ */
category?: string; category?: string;
/** /**
* Необязательный параметр. Массив с элементами. * Optional parameter. Array with elements.
* @type {IItems[] | string[] | any} * @type {IItems[] | string[] | any}
*/ */
categoryItems?: IItems[] | string[]; categoryItems?: IItems[] | string[];
/** /**
* Значение переданного элемента. * The value of the passed element.
* @type {string | IItems | number} * @type {string | IItems | number}
*/ */
ItemValue: string | IItems | number; ItemValue: string | IItems | number;
} }
/** /**
* @description Настройки для текста селекта и тд. * @description Settings for select text, etc.
*/ */
export interface ISelectedItems { export interface ISelectedItems {
/** /**
* Placeholder необязательный параметр, в который передается текст плейсхолдера селекта. * Placeholder optional parameter to which the text of the select placeholder is passed.
* @type {string} * @type {string}
*/ */
placeholder?: string; placeholder?: string;
/** /**
* Необязательный параметр, в который передается элемент который будет выбран изначально в селекте. * An optional parameter, which is passed the element that will be selected initially in the select.
* @type {string} * @type {string}
*/ */
selected?: string; selected?: string;
/** /**
* Массив выбранных элементов из списка * Array of selected items from the list.
* @type {string[]} * @type {string[]}
*/ */
selectedItems?: string[]; selectedItems?: string[];
/** /**
* Массив индексов выбранных элементов * Array of indexes of selected elements.
* @type {number[]} * @type {number[]}
*/ */
indexes?: number[]; indexes?: number[];
/** /**
* Необязательный параметр, который отвечает за поведения селекта, * An optional parameter that is responsible for the behavior of the select,
* для него, ***работает только в месте с подключением multiselect. * for him, *** works only in a place with a multiselect connection.
* @type {boolean} * @type {boolean}
*/ */
multiselectTag?: boolean; multiselectTag?: boolean;
/** /**
* Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема. * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
* @type {boolean} * @type {boolean}
*/ */
darkTheme?: boolean; darkTheme?: boolean;

64
src/components/utils/utils.ts
View File

@ -7,10 +7,10 @@ import { IItems } from 'interfaces/items.interface';
import { ISelectedItems } from './urils.interface'; import { ISelectedItems } from './urils.interface';
/** /**
* Преобразование каждого елемента полученного из поля Items; * Converting each item obtained from the Items field;
* @param {any} dataItem полученный елемент переданный при создании селекта может быть как object / string * @param {any} dataItem received element passed when creating the select.
* @param {number} index индекс этого элемента * @param {number} index index of this element.
* @returns {IItems} возвращает сформированный объект * @returns {IItems} returns the formed object
*/ */
export function getFormatItem(dataItem: any, index: number): IItems { export function getFormatItem(dataItem: any, index: number): IItems {
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
@ -30,10 +30,10 @@ export function getFormatItem(dataItem: any, index: number): IItems {
} }
/** /**
* Вставка изначального текста селекта(до выбора) * Insert initial select text (before selection)
* @param {ITextSelect} data объект в котором находяться title селекта * @param {ITextSelect} data the object in which the title of the select is located.
* @param {HTMLElement | null | undefined} select елемент селекта, куда будет вставляться title * @param {HTMLElement | null | undefined} select select element where title will be inserted.
* @returns {HTMLElement} возвращает сформированный елемент селекта * @returns {HTMLElement} returns the generated select element.
*/ */
export function getSelectText( export function getSelectText(
data: ISelectedItems, data: ISelectedItems,
@ -53,9 +53,9 @@ export function getSelectText(
} }
/** /**
* Проверка содержит ли item указанные свойства, * Checking if item contains the specified properties.
* @param {object} item проверяемый на определенную структуру элемент * @param {object} item element to be checked against a certain structure.
* @returns {boolean} возвращает true/false если item содержит указанные свойства * @returns {boolean} returns true/false if item contains the specified properties.
*/ */
export function checkItemStruct(item: object): boolean { export function checkItemStruct(item: object): boolean {
if (item && typeof item !== 'object') { if (item && typeof item !== 'object') {
@ -66,10 +66,10 @@ export function checkItemStruct(item: object): boolean {
} }
/** /**
* Создание кнопки выбора элементов * Creating an Item Selector Button.
* @param {HTMLElement} element созданный экземпляр класса DropDown * @param {HTMLElement} element instantiated class CgSelect.
* @param {string} content placeholer передаваемый из настроек селекта * @param {string} content placeholer passed from select settings.
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта * @param {object} styles optional parameter. The object in which the settings for customizing parts of the select are located.
*/ */
export function createSelected(element: Element, content?: string, styles?: IStyle) { export function createSelected(element: Element, content?: string, styles?: IStyle) {
const select = document.createElement('div'); const select = document.createElement('div');
@ -97,10 +97,10 @@ export function createSelected(element: Element, content?: string, styles?: ISty
} }
/** /**
* Создание кнопки отчиски селекта, при единичном выборе. * Creating a clear select button, with a single selection.
* @param {HTMLElement} select место в селекте которое будет переназначено на ''. * @param {HTMLElement} select place in the select that will be reassigned to ''.
* @param {Element} element экземпляр класса DropDown. * @param {Element} element class instance CgSelect.
* @param {ISelectedItems} dataSelectText текст который отрисовывается в селекте. * @param {ISelectedItems} dataSelectText the text that is rendered in the select.
*/ */
export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) { export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) {
const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText; const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
@ -164,9 +164,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
} }
/** /**
* Поведение нативного(одинарного) селекта при выборе кастомного * Behavior of a native (single) select when choosing a custom one.
* @param {NodeList} element NodeList нативного селекта * @param {NodeList} element NodeList native select.
* @param {any} item выбранный элемент в кастомном селекте * @param {any} item selected element in custom select.
*/ */
export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: string) { export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: string) {
element!.forEach((option) => { element!.forEach((option) => {
@ -178,10 +178,10 @@ export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, i
} }
/** /**
* Поведение нативного(Multiple) селекта при выборе в кастомном * The behavior of the native (Multiple) select when choosing in a custom one.
* @param {NodeListOf<Element> | undefined} element NodeList нативного селекта * @param {NodeListOf<Element> | undefined} element NodeList of native select.
* @param {string} item выбранный элемент в кастомном селекте * @param {string} item selected element in custom select.
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта * @param {boolean} condition a special flag that adds / removes attributes from the native select.
*/ */
export function nativeOptionMultiple( export function nativeOptionMultiple(
element: NodeListOf<Element> | undefined, element: NodeListOf<Element> | undefined,
@ -204,9 +204,9 @@ export function nativeOptionMultiple(
} }
/** /**
* Поиск и стилизация елементов полученных из styles экземпляра DropDown * Finding and styling elements derived from the styles instance CgSelect
* @param {Element} element созданный экземпляр класса DropDown * @param {Element} element instantiated class CgSelect.
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта * @param {object} styles object in which there are settings for customizing parts of the select.
*/ */
export function customStyles(element: Element, styles: IStyle) { export function customStyles(element: Element, styles: IStyle) {
const cgSelect = element.querySelector('.cg-select'); const cgSelect = element.querySelector('.cg-select');
@ -224,9 +224,9 @@ export function customStyles(element: Element, styles: IStyle) {
} }
/** /**
* Универсальный метод для стилизации селекта * Generic Method for Styling a Select.
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей * @param {object} elemOption an object obtained from the styles object from which we get the styles key-value.
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации * @param {HTMLElement} selector HTMLElement subject to customization.
*/ */
export function customStylesFormat(elemOption: object, selector: any) { export function customStylesFormat(elemOption: object, selector: any) {
if (elemOption) { if (elemOption) {

66
src/interfaces/cg-select.interface.ts
View File

@ -1,135 +1,135 @@
import { IItems } from './items.interface'; import { IItems } from './items.interface';
/** /**
* @description Настройки селекта. * @description Select settings.
*/ */
export interface ICgSelect { export interface ICgSelect {
/** /**
* Уникальный селектор - *обязательный параметр(индефикатор), который задаеться при создании селекта. * Unique selector - *mandatory parameter (indicator) that is set when creating a select.
* @type {string} * @type {string}
*/ */
selector?: string; selector?: string;
/** /**
* Необязательный параметр, в который передается элемент который будет выбран изначально в селекте. * An optional parameter, which is passed the element that will be selected initially in the select.
* @type {string} * @type {string}
*/ */
selected?: string; selected?: string;
/** /**
* Placeholder необязательный параметр, в который передается текст плейсхолдера селекта. * Placeholder optional parameter to which the text of the select placeholder is passed.
* @type {string} * @type {string}
*/ */
placeholder?: string; placeholder?: string;
/** /**
* *Обязательный параметр(эсли не указан другой способ получения данных (url)), это массив элементов, * *Required parameter (if no other way to get data (url) is specified), this is an array of elements,
* которые будут отображаться в селекте при выборе. * which will be displayed in the select when selected.
* @type {IItems[] | string[] | any} * @type {IItems[] | string[] | any}
*/ */
items?: IItems[] | string[] | any; items?: IItems[] | string[] | any;
/** /**
* Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true) * An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).
* @type {boolean} * @type {boolean}
*/ */
darkTheme?: boolean; darkTheme?: boolean;
/** /**
* Необязательный параметр, который добавляет живой поиск по элеметам селекта. * An optional parameter that adds a live search on the select elements.
* @type {boolean} * @type {boolean}
*/ */
searchMode?: boolean; searchMode?: boolean;
/** /**
* Необязательный параметр, который отвечает за поведения селекта при открытии, если closeOnSelect: false, * An optional parameter that is responsible for the behavior of the select when opening, if closeOnSelect: false,
* тогда при выборе елемента в селекте закрытия не происходит, * then when an element is selected in the selector, closing does not occur,
* и можно выбрать другой элемент по умолчанию, closeOnSelect:true. * and you can select another element by default, closeOnSelect:true.
* @type {boolean} * @type {boolean}
*/ */
closeOnSelect?: boolean; closeOnSelect?: boolean;
/** /**
* Необязательный параметр, который отвечает за поведения селекта при открытии на мобильных усторйствах. * An optional parameter that is responsible for the behavior of the select when opened on mobile devices.
* @type {boolean} * @type {boolean}
*/ */
nativeSelectMode?: boolean; nativeSelectMode?: boolean;
/** /**
* Необязательный параметр, который отвечает за поведения селекта при открытии. * An optional parameter that is responsible for the behavior of the select when opening.
* @type {boolean} * @type {boolean}
*/ */
listDisplayMode?: boolean; listDisplayMode?: boolean;
/** /**
* Необязательный параметр, отвечающий за локализацию некоторых текстовых элементов. * Optional parameter responsible for the localization of some text elements.
* @type {string} * @type {string}
*/ */
language?: string; language?: string;
/** /**
* Необязательный параметр,который добавляет lable перед селектом. * An optional parameter that adds a lable before the select.
* @type {string} * @type {string}
*/ */
lable?: string; lable?: string;
/** /**
* Необязательный параметр, который отвечает за кастомизацию элементов селекта, * An optional parameter that is responsible for customizing the select elements,
* в него передаются обьекты с CSS свойствами для кастомизируемых элементов. * objects with CSS properties for customizable elements are passed to it.
* @type {IStyle} * @type {IStyle}
*/ */
styles?: IStyle; styles?: IStyle;
/** /**
* Необязательный параметр, который отвечает за поведения селекта, передавая в этот параметр, евент по типу 'mouseenter', * An optional parameter that is responsible for the behavior of the select, passing to this parameter an event of the 'mouseenter' type,
* селект будет открываться при наведении. * select will open on hover.
* @type {string} * @type {string}
*/ */
event?: string; event?: string;
/** /**
* Обязательный параметр(эсли не указан другой способ получения данных (items)), * Required parameter (if no other way to get data (items) is specified),
* данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}. * data that comes from the backend in the format { id: "", title: "", value: ""}.
* @type {string} * @type {string}
*/ */
url?: string; url?: string;
/** /**
* Необязательный параметр, который отвечает за поведения селекта, добавляет возможность выбирать несколько элементов. * An optional parameter, which is responsible for the behavior of the select, adds the ability to select multiple elements.
* Выбранные элементы отрисовываются как обычный текст, через запятую. * Selected elements are rendered as plain text, separated by commas.
* @type {boolean} * @type {boolean}
*/ */
multiselect?: boolean; multiselect?: boolean;
/** /**
* Необязательный параметр, который отвечает за поведения селекта, * An optional parameter that is responsible for the behavior of the select,
* для него, ***работает только в месте с подключением multiselect. * for him, *** works only in a place with a multiselect connection.
* @type {boolean} * @type {boolean}
*/ */
multiselectTag?: boolean; multiselectTag?: boolean;
} }
/** /**
* @description Настройки стилей. * @description Style Settings.
*/ */
export interface IStyle { export interface IStyle {
/** /**
* Кастомизация кнопки селекта. * Select button customization.
* @type {object} * @type {object}
*/ */
head?: object; head?: object;
/** /**
* Кастомизация каретки. * Carriage customization.
* @type {object} * @type {object}
*/ */
caret?: object; caret?: object;
/** /**
* Кастомизация placeholder. * Customization placeholder.
* @type {object} * @type {object}
*/ */
placeholder?: object; placeholder?: object;
/** /**
* Кастомизация lable селекта. * Lable select customization.
* @type {object} * @type {object}
*/ */
lable?: object; lable?: object;
/** /**
* Кастомизация листа с выбором элементов. * Sheet customization with a selection of elements.
* @type {object} * @type {object}
*/ */
list?: object; list?: object;
/** /**
* Кастомизация поиска. * Search customization.
* @type {object} * @type {object}
*/ */
search?: object; search?: object;
/** /**
* Кастомизация чипсов с выбранными элементами * Chips customization with selected elements.
* @type {object} * @type {object}
*/ */
chips?: object; chips?: object;

8
src/interfaces/items.interface.ts
View File

@ -1,19 +1,19 @@
/** /**
* @description Строение элемента. * @description Element structure.
*/ */
export interface IItems { export interface IItems {
/** /**
* Уникальное ID элемента * Unique item ID.
* @type {string} * @type {string}
*/ */
id: string; id: string;
/** /**
* Текстовое значение элемента * Element text value.
* @type {string} * @type {string}
*/ */
title: string; title: string;
/** /**
* Порядковый номер, или другая информация * Sequence number, or other information.
* @type {number | string} * @type {number | string}
*/ */
value: number | string; value: number | string;

8
src/interfaces/language.interface.ts
View File

@ -1,19 +1,19 @@
/** /**
* @description Настройки для добавления языков. * @description Settings for adding languages.
*/ */
export interface ILanguage { export interface ILanguage {
/** /**
* Текст в поиске. * Search text.
* @type {string} * @type {string}
*/ */
placeholder: string; placeholder: string;
/** /**
* Дефолтный Текст Селекта если не указан placeholder или выбранный элемент * Default Select Text if no placeholder or selected element is specified.
* @type {string} * @type {string}
*/ */
selectPlaceholder: string; selectPlaceholder: string;
/** /**
* Текст если совпадений нет. * Text if no match.
* @type {string} * @type {string}
*/ */
textInListSearch: string; textInListSearch: string;