translation of descriptions of all methods, etc. into English
This commit is contained in:
parent
718b67e891
commit
15f73b164a
172
src/cg-select.ts
172
src/cg-select.ts
@ -26,12 +26,12 @@ import { ILanguage } from './interfaces/language.interface';
|
||||
import './main.scss';
|
||||
|
||||
/**
|
||||
* @class Описание класса ICgSelect
|
||||
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
||||
* @author Овсяников Максим
|
||||
* @class Class Description ICgSelect
|
||||
* @description This class implements the functionality of a custom select, with customization capabilities.
|
||||
* @author Ovsyanikov Maxim
|
||||
*/
|
||||
export class CGSelect implements ICgSelect {
|
||||
// Настройки селекта
|
||||
// Select settings
|
||||
selector?: string;
|
||||
selected?: string;
|
||||
placeholder?: string;
|
||||
@ -49,62 +49,60 @@ export class CGSelect implements ICgSelect {
|
||||
multiselect?: boolean;
|
||||
multiselectTag?: boolean;
|
||||
|
||||
// Переменные и комплектующие селекта
|
||||
|
||||
/**
|
||||
* Созданный HTML елемент
|
||||
* Created HTML element.
|
||||
* @type {Element | null}
|
||||
*/
|
||||
private element!: Element | null;
|
||||
/**
|
||||
* Созданный список(ul), с классом list
|
||||
* Created list(ul), with class list.
|
||||
* @type {Element | null | undefined}
|
||||
*/
|
||||
private list!: Element | null;
|
||||
/**
|
||||
* Настройки селекта передаваемые при создании экземпляра класса
|
||||
* Select settings passed when creating an instance of the class.
|
||||
* @type {ICgSelect}
|
||||
*/
|
||||
private options!: ICgSelect;
|
||||
/**
|
||||
* Уникальный Id для елементов
|
||||
* Unique Id for elements.
|
||||
* @type {string}
|
||||
*/
|
||||
private randomId!: string;
|
||||
/**
|
||||
* Переменная для управления каретки
|
||||
* Variable for carriage control.
|
||||
* @type {Element | null | undefined}
|
||||
*/
|
||||
private caret: Element | null | undefined;
|
||||
/**
|
||||
* Переданные категории
|
||||
* Transferred categories.
|
||||
* @type {string}
|
||||
*/
|
||||
private category?: string;
|
||||
/**
|
||||
* Выбранный или массив выбранных элементов из списка
|
||||
* Selected or an array of selected items from a list.
|
||||
* @type {string[] | string}
|
||||
*/
|
||||
private selectedItems!: string[] | string;
|
||||
/**
|
||||
* Массив индексов выбранных элементов
|
||||
* Array of indexes of selected elements.
|
||||
* @type {number[]}
|
||||
*/
|
||||
private indexes: number[] = [];
|
||||
/**
|
||||
* Кнопка, для управления селектом
|
||||
* Button, to control the select.
|
||||
* @type {Element | null}
|
||||
*/
|
||||
private btnCntr?: Element | null;
|
||||
|
||||
/**
|
||||
* @param {ICgSelect} setting Объект принимающий настройки селекта
|
||||
* @constructor Конструктор класса DropDown
|
||||
* @description Конструктор принимает объект и рендерит селект.
|
||||
* @param {ICgSelect} setting Object accepting select settings.
|
||||
* @constructor ICgSelect class constructor.
|
||||
* @description The constructor takes an object and renders the select.
|
||||
* @example
|
||||
* options = {
|
||||
* selector: 'Уникальный селектор',
|
||||
selected: 'Выбранный элемент',
|
||||
* selector: 'Unique selector',
|
||||
selected: 'Selected item',
|
||||
placeholder: '...',
|
||||
lable: '...'
|
||||
items: [string|number|object],
|
||||
@ -139,34 +137,32 @@ export class CGSelect implements ICgSelect {
|
||||
|
||||
//Getters
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @returns {string[] | string} Возвращает выбранные элемент(ы) в виде массива/элемента/null
|
||||
* @description Геттер возвращающий выбранные элемент(ы) селекта
|
||||
* @returns {string[] | string} Returns the selected element(s) as an array / element / null.
|
||||
* @description Getter returning the selected element(s) of the select.
|
||||
*/
|
||||
get value(): string | string[] {
|
||||
return this.selectedItems ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
|
||||
* @description Геттер возвращающий индексы выбранных элемента(ов) селекта
|
||||
* @returns {number | number[]} Returns the indices of the selected element(s) as an array / empty array.
|
||||
* @description A getter that returns the indexes of the selected element(s) of the select.
|
||||
*/
|
||||
get indexesOf(): number | number[] {
|
||||
return this.indexes ?? [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод инициализации экземпляра класса DropDown
|
||||
* Private method for initializing an instance of the ICgSelect class.
|
||||
* @method init
|
||||
* @member
|
||||
* @protected
|
||||
* @param {ISgSelect} setting передаваемые настройки селекта
|
||||
* @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
|
||||
* @private
|
||||
* @param {ISgSelect} setting passed select settings.
|
||||
* @description Private method. General initialization of the select. Obtaining tinctures and converting select elements.
|
||||
* @example
|
||||
* {
|
||||
selector: '.cg-dropdown_one',
|
||||
placeholder: 'Выберите авто',
|
||||
placeholder: 'Choose a car',
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
@ -267,11 +263,10 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод рендера экземпляра класса DropDown
|
||||
* @protected
|
||||
* @private
|
||||
* @method render
|
||||
* @param {string} select необязательный елемент. Передаеться в метод initSelected
|
||||
* @description Рендер елементов в селекте.
|
||||
* @param {string} select optional element. Passed to the initSelected.
|
||||
* @description Render elements in select.
|
||||
*/
|
||||
private render(select?: string): void {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
@ -376,10 +371,9 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод рендера экземпляра класса DropDown
|
||||
* @protected
|
||||
* @private
|
||||
* @method renderUrl
|
||||
* @description Рендер елементов в селекте переданных с URL и их настойка
|
||||
* @description Rendering elements in the select passed from the URL and setting them up.
|
||||
*/
|
||||
private async renderUrl() {
|
||||
const response = await fetch(this.url!);
|
||||
@ -439,11 +433,10 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Привaтный метод экземпляра класса DropDown
|
||||
* @method initSelected
|
||||
* @param {string} select необязательный елемент. Используется в методе selectIndex
|
||||
* @description Отрисовывает и стилизует селект
|
||||
* @protected
|
||||
* @param {string} select optional element. Used in the selectedIndex method.
|
||||
* @description Renders and styles the select.
|
||||
* @private
|
||||
*/
|
||||
private initSelected(select?: string): void {
|
||||
if (this.selected) {
|
||||
@ -468,9 +461,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод экземпляра класса DropDown
|
||||
* @protected
|
||||
* @description Открывает и закрывает список по переданному эвенту
|
||||
* @private
|
||||
* @description Opens and closes the list by the passed event.
|
||||
* @method initEvent
|
||||
*/
|
||||
private initEvent() {
|
||||
@ -491,10 +483,9 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод экземпляра класса DropDown
|
||||
* @protected
|
||||
* @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
|
||||
* @description Открывает список для выбора элемента
|
||||
* @private
|
||||
* @param {boolean} oneClick optional parameter passed from the buttonControl function.
|
||||
* @description Opens a list to select an element.
|
||||
* @method open
|
||||
*/
|
||||
private open(oneClick?: boolean): void {
|
||||
@ -508,9 +499,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод экземпляра класса DropDown
|
||||
* @protected
|
||||
* @description Закрывает список
|
||||
* @private
|
||||
* @description Closes the list.
|
||||
* @method close
|
||||
*/
|
||||
private close(): void {
|
||||
@ -519,9 +509,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод экземпляра класса DropDown
|
||||
* @protected
|
||||
* @description Закрывает список по клику вне элемента
|
||||
* @private
|
||||
* @description Closes the list on click outside of an element.
|
||||
* @method closeSelectClick
|
||||
*/
|
||||
private closeSelectClick(): void {
|
||||
@ -540,9 +529,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод экземпляра класса DropDown
|
||||
* @protected
|
||||
* @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
|
||||
* @private
|
||||
* @description A method that implements the selection of elements in different modes.
|
||||
* @method addOptionsBehaviour
|
||||
*/
|
||||
private addOptionsBehaviour() {
|
||||
@ -668,10 +656,9 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод рендера экземпляра класса DropDown
|
||||
* @protected
|
||||
* @method #checkTheme
|
||||
* @description Изменяет цветовую схему с темной на светлую.
|
||||
* @private
|
||||
* @method checkTheme
|
||||
* @description Changes the color scheme from dark to light.
|
||||
*/
|
||||
private checkTheme(): void {
|
||||
const select = this.element!.querySelector('.cg-select');
|
||||
@ -695,10 +682,9 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод экземпляра класса DropDown
|
||||
* @protected
|
||||
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
|
||||
* @description Изменяет отображение селекта на мобильных устройствах
|
||||
* @private
|
||||
* @param {boolean} nativeSelectMode parameter responsible for adding native select.
|
||||
* @description Changes the display of the select on mobile devices.
|
||||
* @method selectMode
|
||||
*/
|
||||
private selectMode(nativeSelectMode: boolean) {
|
||||
@ -725,9 +711,9 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод который реализует поиск элементов в селекте
|
||||
* @protected
|
||||
* @param {string} random уникальное значение для input элемента.
|
||||
* @description The method that implements the search for elements in the select.
|
||||
* @private
|
||||
* @param {string} random unique value for input element.
|
||||
* @method searchMode
|
||||
*/
|
||||
private searchModeSelect(random: string) {
|
||||
@ -780,10 +766,9 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Приватный метод экземпляра класса DropDown
|
||||
* @protected
|
||||
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
|
||||
* @description Изменяет отображение листа с выбором в виде модального окна.
|
||||
* @private
|
||||
* @param {boolean} listDisplayMode parameter responsible for displaying the selection in the form of a modal window.
|
||||
* @description Changes the display of a sheet with a selection as a modal window.
|
||||
* @method displayMode
|
||||
*/
|
||||
private displayMode(listDisplayMode: boolean): void {
|
||||
@ -806,10 +791,10 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
// Public methods
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {number} numberItem номер возвращаемого элемента
|
||||
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
|
||||
* @param {number} numberItem returned element number.
|
||||
* @returns {HTMLElement} returns a reference to the selected HTML element.
|
||||
* @method getElement
|
||||
*/
|
||||
public getElement(numberItem: number): IItems[] | string[] | any {
|
||||
@ -821,9 +806,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
|
||||
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
|
||||
* @param {ILanguage} language the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.
|
||||
* @description a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.
|
||||
* @method addLanguage
|
||||
*/
|
||||
public addLanguage(language: ILanguage) {
|
||||
@ -847,10 +831,9 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {HTMLInputElement} button - HTML кнопка
|
||||
* @param {string} method - метод открытия open/close
|
||||
* @description Метод позволяющий открывать/закрывать селект с помощью кнопок
|
||||
* @param {HTMLInputElement} button - HTML button.
|
||||
* @param {string} method - open/close method.
|
||||
* @description A method that allows you to open / close the select using buttons.
|
||||
* @method buttonControl
|
||||
*/
|
||||
public buttonControl(button: Element, method: string) {
|
||||
@ -871,9 +854,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
|
||||
* @description Метод позволяющий переключать состояние селекта disabled,
|
||||
* @param {boolean} value - Passed parameter to add the disabled attribute.
|
||||
* @description A method that allows you to toggle the state of the disabled select.
|
||||
* @method disabled
|
||||
*/
|
||||
public disabled(value: boolean) {
|
||||
@ -892,9 +874,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {string | object} item добавляемый елемент
|
||||
* @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
|
||||
* @param {string | IItems} item added element.
|
||||
* @description adds the given element to the end of the list and redraws the list. Cannot be used when passing elements with categories.
|
||||
* @method addItem
|
||||
*/
|
||||
public addItem(item: IItems | string | number) {
|
||||
@ -914,9 +895,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {number} index индекс удаляемого элемента
|
||||
* @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
|
||||
* @param {number} index the index of the element to be removed.
|
||||
* @description removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.
|
||||
* @method deleteItem
|
||||
*/
|
||||
public deleteItem(index: number) {
|
||||
@ -932,8 +912,7 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @description удаляет все елементы из списка и перерисовывает его.
|
||||
* @description removes all elements from the list and redraws it.
|
||||
* @method deleteItemAll
|
||||
*/
|
||||
public deleteItemAll() {
|
||||
@ -942,9 +921,8 @@ export class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {number} index индекс выбранного элемента
|
||||
* @description выбирает элемент который будет изначально отрисовываться в селекте
|
||||
* @param {number} index the index of the selected element.
|
||||
* @description selects the element that will be initially rendered in the select.
|
||||
* @method selectIndex
|
||||
*/
|
||||
public selectIndex(index: number) {
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import { ICgSelect } from 'interfaces/cg-select.interface';
|
||||
|
||||
/**
|
||||
* @description Настройки для создания чипсов.
|
||||
* @description cSettings for creating chips.
|
||||
*/
|
||||
export interface ICreateBreadCrumb {
|
||||
/**
|
||||
* Определенный экземпляр класса.
|
||||
* A specific instance of a class.
|
||||
* @type {Element | null}
|
||||
*/
|
||||
element: Element | null;
|
||||
/**
|
||||
* Настройки селекта.
|
||||
* Select settings.
|
||||
* @type {ICgSelect}
|
||||
*/
|
||||
option: ICgSelect;
|
||||
/**
|
||||
* Массив индексов выбранных элементов.
|
||||
* Array of indexes of selected elements.
|
||||
* @type {number[]}
|
||||
*/
|
||||
indexes: number[];
|
||||
/**
|
||||
* Массив с выбранными элементами.
|
||||
* Array with selected elements.
|
||||
* @type {string[]}
|
||||
*/
|
||||
selectedItems: string[];
|
||||
|
||||
@ -2,8 +2,8 @@ import { customStylesFormat, nativeOptionMultiple } from '../utils/utils';
|
||||
import { ICreateBreadCrumb } from './create-element.interface';
|
||||
|
||||
/**
|
||||
* Метод который создает нативный селект
|
||||
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
|
||||
* The method that creates the native select.
|
||||
* @returns {HTMLSelectElement} Returns the created native select.
|
||||
*/
|
||||
export function createNativeSelect(): HTMLSelectElement {
|
||||
const nativeSelect = document.createElement('select');
|
||||
@ -14,8 +14,8 @@ export function createNativeSelect(): HTMLSelectElement {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод который создает Options для нативного селекта
|
||||
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
|
||||
* The method that creates Options for the native select.
|
||||
* @returns {HTMLOptionElement} Returns the generated Options of the native select.
|
||||
*/
|
||||
export function createNativeSelectOption(): HTMLOptionElement {
|
||||
const nativeOption = document.createElement('option');
|
||||
@ -25,12 +25,12 @@ export function createNativeSelectOption(): HTMLOptionElement {
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод который создает и отвечает за поведение chips
|
||||
* @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта
|
||||
* @param {string} title имя выбранного элемента для отрисовки chips
|
||||
* @param {number} index индекс выбранного элемента для отрисовки chips
|
||||
* @param {string} id уникальное id выбранного элемента
|
||||
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
|
||||
* The method that creates and is responsible for the behavior of the chips.
|
||||
* @param {ICreateBreadCrumb} data an object that contains settings and select elements.
|
||||
* @param {string} title the name of the selected element to draw chips.
|
||||
* @param {number} index index of the selected item to draw chips.
|
||||
* @param {string} id unique id of the selected element.
|
||||
* @returns {HTMLElement} returns the generated HTMLElement chips item.
|
||||
*/
|
||||
export function createBreadCrumb(
|
||||
data: ICreateBreadCrumb,
|
||||
@ -98,10 +98,10 @@ export function createBreadCrumb(
|
||||
}
|
||||
|
||||
/**
|
||||
* Метод который создает поиск элементов в селекте
|
||||
* @param {string} random уникальное значение для input элемента.
|
||||
* @param {string} lenguage текст на определенном языке переданный из файла language.js
|
||||
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
|
||||
* The method that creates a search for elements in the select.
|
||||
* @param {string} random unique value for input element.
|
||||
* @param {string} lenguage text in specific language passed from language.ts file
|
||||
* @returns {HTMLInputElement} Returns the rendered input element.
|
||||
*/
|
||||
export function createInputSearch(random: string, lenguage: string): HTMLInputElement {
|
||||
const inputSearch = document.createElement('input');
|
||||
|
||||
@ -1,58 +1,58 @@
|
||||
import { IItems } from 'interfaces/items.interface';
|
||||
|
||||
/**
|
||||
* @description Настройки получаемых элементов.
|
||||
* @description Receive Item Settings.
|
||||
*/
|
||||
export interface IDataItem {
|
||||
/**
|
||||
* Необязательный параметр. Категория группы элементов.
|
||||
* Optional parameter. Item group category.
|
||||
* @type {string}
|
||||
*/
|
||||
category?: string;
|
||||
/**
|
||||
* Необязательный параметр. Массив с элементами.
|
||||
* Optional parameter. Array with elements.
|
||||
* @type {IItems[] | string[] | any}
|
||||
*/
|
||||
categoryItems?: IItems[] | string[];
|
||||
/**
|
||||
* Значение переданного элемента.
|
||||
* The value of the passed element.
|
||||
* @type {string | IItems | number}
|
||||
*/
|
||||
ItemValue: string | IItems | number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Настройки для текста селекта и тд.
|
||||
* @description Settings for select text, etc.
|
||||
*/
|
||||
export interface ISelectedItems {
|
||||
/**
|
||||
* Placeholder необязательный параметр, в который передается текст плейсхолдера селекта.
|
||||
* Placeholder optional parameter to which the text of the select placeholder is passed.
|
||||
* @type {string}
|
||||
*/
|
||||
placeholder?: string;
|
||||
/**
|
||||
* Необязательный параметр, в который передается элемент который будет выбран изначально в селекте.
|
||||
* An optional parameter, which is passed the element that will be selected initially in the select.
|
||||
* @type {string}
|
||||
*/
|
||||
selected?: string;
|
||||
/**
|
||||
* Массив выбранных элементов из списка
|
||||
* Array of selected items from the list.
|
||||
* @type {string[]}
|
||||
*/
|
||||
selectedItems?: string[];
|
||||
/**
|
||||
* Массив индексов выбранных элементов
|
||||
* Array of indexes of selected elements.
|
||||
* @type {number[]}
|
||||
*/
|
||||
indexes?: number[];
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за поведения селекта,
|
||||
* для него, ***работает только в месте с подключением multiselect.
|
||||
* An optional parameter that is responsible for the behavior of the select,
|
||||
* for him, *** works only in a place with a multiselect connection.
|
||||
* @type {boolean}
|
||||
*/
|
||||
multiselectTag?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема.
|
||||
* An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
|
||||
* @type {boolean}
|
||||
*/
|
||||
darkTheme?: boolean;
|
||||
|
||||
@ -7,10 +7,10 @@ import { IItems } from 'interfaces/items.interface';
|
||||
import { ISelectedItems } from './urils.interface';
|
||||
|
||||
/**
|
||||
* Преобразование каждого елемента полученного из поля Items;
|
||||
* @param {any} dataItem полученный елемент переданный при создании селекта может быть как object / string
|
||||
* @param {number} index индекс этого элемента
|
||||
* @returns {IItems} возвращает сформированный объект
|
||||
* Converting each item obtained from the Items field;
|
||||
* @param {any} dataItem received element passed when creating the select.
|
||||
* @param {number} index index of this element.
|
||||
* @returns {IItems} returns the formed object
|
||||
*/
|
||||
export function getFormatItem(dataItem: any, index: number): IItems {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
@ -30,10 +30,10 @@ export function getFormatItem(dataItem: any, index: number): IItems {
|
||||
}
|
||||
|
||||
/**
|
||||
* Вставка изначального текста селекта(до выбора)
|
||||
* @param {ITextSelect} data объект в котором находяться title селекта
|
||||
* @param {HTMLElement | null | undefined} select елемент селекта, куда будет вставляться title
|
||||
* @returns {HTMLElement} возвращает сформированный елемент селекта
|
||||
* Insert initial select text (before selection)
|
||||
* @param {ITextSelect} data the object in which the title of the select is located.
|
||||
* @param {HTMLElement | null | undefined} select select element where title will be inserted.
|
||||
* @returns {HTMLElement} returns the generated select element.
|
||||
*/
|
||||
export function getSelectText(
|
||||
data: ISelectedItems,
|
||||
@ -53,9 +53,9 @@ export function getSelectText(
|
||||
}
|
||||
|
||||
/**
|
||||
* Проверка содержит ли item указанные свойства,
|
||||
* @param {object} item проверяемый на определенную структуру элемент
|
||||
* @returns {boolean} возвращает true/false если item содержит указанные свойства
|
||||
* Checking if item contains the specified properties.
|
||||
* @param {object} item element to be checked against a certain structure.
|
||||
* @returns {boolean} returns true/false if item contains the specified properties.
|
||||
*/
|
||||
export function checkItemStruct(item: object): boolean {
|
||||
if (item && typeof item !== 'object') {
|
||||
@ -66,10 +66,10 @@ export function checkItemStruct(item: object): boolean {
|
||||
}
|
||||
|
||||
/**
|
||||
* Создание кнопки выбора элементов
|
||||
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||
* @param {string} content placeholer передаваемый из настроек селекта
|
||||
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||
* Creating an Item Selector Button.
|
||||
* @param {HTMLElement} element instantiated class CgSelect.
|
||||
* @param {string} content placeholer passed from select settings.
|
||||
* @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) {
|
||||
const select = document.createElement('div');
|
||||
@ -97,10 +97,10 @@ export function createSelected(element: Element, content?: string, styles?: ISty
|
||||
}
|
||||
|
||||
/**
|
||||
* Создание кнопки отчиски селекта, при единичном выборе.
|
||||
* @param {HTMLElement} select место в селекте которое будет переназначено на ''.
|
||||
* @param {Element} element экземпляр класса DropDown.
|
||||
* @param {ISelectedItems} dataSelectText текст который отрисовывается в селекте.
|
||||
* Creating a clear select button, with a single selection.
|
||||
* @param {HTMLElement} select place in the select that will be reassigned to ''.
|
||||
* @param {Element} element class instance CgSelect.
|
||||
* @param {ISelectedItems} dataSelectText the text that is rendered in the select.
|
||||
*/
|
||||
export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) {
|
||||
const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
|
||||
@ -164,9 +164,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
|
||||
}
|
||||
|
||||
/**
|
||||
* Поведение нативного(одинарного) селекта при выборе кастомного
|
||||
* @param {NodeList} element NodeList нативного селекта
|
||||
* @param {any} item выбранный элемент в кастомном селекте
|
||||
* Behavior of a native (single) select when choosing a custom one.
|
||||
* @param {NodeList} element NodeList native select.
|
||||
* @param {any} item selected element in custom select.
|
||||
*/
|
||||
export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: string) {
|
||||
element!.forEach((option) => {
|
||||
@ -178,10 +178,10 @@ export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, i
|
||||
}
|
||||
|
||||
/**
|
||||
* Поведение нативного(Multiple) селекта при выборе в кастомном
|
||||
* @param {NodeListOf<Element> | undefined} element NodeList нативного селекта
|
||||
* @param {string} item выбранный элемент в кастомном селекте
|
||||
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
|
||||
* The behavior of the native (Multiple) select when choosing in a custom one.
|
||||
* @param {NodeListOf<Element> | undefined} element NodeList of native select.
|
||||
* @param {string} item selected element in custom select.
|
||||
* @param {boolean} condition a special flag that adds / removes attributes from the native select.
|
||||
*/
|
||||
export function nativeOptionMultiple(
|
||||
element: NodeListOf<Element> | undefined,
|
||||
@ -204,9 +204,9 @@ export function nativeOptionMultiple(
|
||||
}
|
||||
|
||||
/**
|
||||
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
|
||||
* @param {Element} element созданный экземпляр класса DropDown
|
||||
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||
* Finding and styling elements derived from the styles instance CgSelect
|
||||
* @param {Element} element instantiated class CgSelect.
|
||||
* @param {object} styles object in which there are settings for customizing parts of the select.
|
||||
*/
|
||||
export function customStyles(element: Element, styles: IStyle) {
|
||||
const cgSelect = element.querySelector('.cg-select');
|
||||
@ -224,9 +224,9 @@ export function customStyles(element: Element, styles: IStyle) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Универсальный метод для стилизации селекта
|
||||
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
|
||||
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
|
||||
* Generic Method for Styling a Select.
|
||||
* @param {object} elemOption an object obtained from the styles object from which we get the styles key-value.
|
||||
* @param {HTMLElement} selector HTMLElement subject to customization.
|
||||
*/
|
||||
export function customStylesFormat(elemOption: object, selector: any) {
|
||||
if (elemOption) {
|
||||
|
||||
@ -1,135 +1,135 @@
|
||||
import { IItems } from './items.interface';
|
||||
|
||||
/**
|
||||
* @description Настройки селекта.
|
||||
* @description Select settings.
|
||||
*/
|
||||
export interface ICgSelect {
|
||||
/**
|
||||
* Уникальный селектор - *обязательный параметр(индефикатор), который задаеться при создании селекта.
|
||||
* Unique selector - *mandatory parameter (indicator) that is set when creating a select.
|
||||
* @type {string}
|
||||
*/
|
||||
selector?: string;
|
||||
/**
|
||||
* Необязательный параметр, в который передается элемент который будет выбран изначально в селекте.
|
||||
* An optional parameter, which is passed the element that will be selected initially in the select.
|
||||
* @type {string}
|
||||
*/
|
||||
selected?: string;
|
||||
/**
|
||||
* Placeholder необязательный параметр, в который передается текст плейсхолдера селекта.
|
||||
* Placeholder optional parameter to which the text of the select placeholder is passed.
|
||||
* @type {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}
|
||||
*/
|
||||
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}
|
||||
*/
|
||||
darkTheme?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, который добавляет живой поиск по элеметам селекта.
|
||||
* An optional parameter that adds a live search on the select elements.
|
||||
* @type {boolean}
|
||||
*/
|
||||
searchMode?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за поведения селекта при открытии, если closeOnSelect: false,
|
||||
* тогда при выборе елемента в селекте закрытия не происходит,
|
||||
* и можно выбрать другой элемент по умолчанию, closeOnSelect:true.
|
||||
* 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,
|
||||
* and you can select another element by default, closeOnSelect:true.
|
||||
* @type {boolean}
|
||||
*/
|
||||
closeOnSelect?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за поведения селекта при открытии на мобильных усторйствах.
|
||||
* An optional parameter that is responsible for the behavior of the select when opened on mobile devices.
|
||||
* @type {boolean}
|
||||
*/
|
||||
nativeSelectMode?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за поведения селекта при открытии.
|
||||
* An optional parameter that is responsible for the behavior of the select when opening.
|
||||
* @type {boolean}
|
||||
*/
|
||||
listDisplayMode?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, отвечающий за локализацию некоторых текстовых элементов.
|
||||
* Optional parameter responsible for the localization of some text elements.
|
||||
* @type {string}
|
||||
*/
|
||||
language?: string;
|
||||
/**
|
||||
* Необязательный параметр,который добавляет lable перед селектом.
|
||||
* An optional parameter that adds a lable before the select.
|
||||
* @type {string}
|
||||
*/
|
||||
lable?: string;
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за кастомизацию элементов селекта,
|
||||
* в него передаются обьекты с CSS свойствами для кастомизируемых элементов.
|
||||
* An optional parameter that is responsible for customizing the select elements,
|
||||
* objects with CSS properties for customizable elements are passed to it.
|
||||
* @type {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}
|
||||
*/
|
||||
event?: string;
|
||||
/**
|
||||
* Обязательный параметр(эсли не указан другой способ получения данных (items)),
|
||||
* данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
|
||||
* Required parameter (if no other way to get data (items) is specified),
|
||||
* data that comes from the backend in the format { id: "", title: "", value: ""}.
|
||||
* @type {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}
|
||||
*/
|
||||
multiselect?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за поведения селекта,
|
||||
* для него, ***работает только в месте с подключением multiselect.
|
||||
* An optional parameter that is responsible for the behavior of the select,
|
||||
* for him, *** works only in a place with a multiselect connection.
|
||||
* @type {boolean}
|
||||
*/
|
||||
multiselectTag?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Настройки стилей.
|
||||
* @description Style Settings.
|
||||
*/
|
||||
export interface IStyle {
|
||||
/**
|
||||
* Кастомизация кнопки селекта.
|
||||
* Select button customization.
|
||||
* @type {object}
|
||||
*/
|
||||
head?: object;
|
||||
/**
|
||||
* Кастомизация каретки.
|
||||
* Carriage customization.
|
||||
* @type {object}
|
||||
*/
|
||||
caret?: object;
|
||||
/**
|
||||
* Кастомизация placeholder.
|
||||
* Customization placeholder.
|
||||
* @type {object}
|
||||
*/
|
||||
placeholder?: object;
|
||||
/**
|
||||
* Кастомизация lable селекта.
|
||||
* Lable select customization.
|
||||
* @type {object}
|
||||
*/
|
||||
lable?: object;
|
||||
/**
|
||||
* Кастомизация листа с выбором элементов.
|
||||
* Sheet customization with a selection of elements.
|
||||
* @type {object}
|
||||
*/
|
||||
list?: object;
|
||||
/**
|
||||
* Кастомизация поиска.
|
||||
* Search customization.
|
||||
* @type {object}
|
||||
*/
|
||||
search?: object;
|
||||
/**
|
||||
* Кастомизация чипсов с выбранными элементами
|
||||
* Chips customization with selected elements.
|
||||
* @type {object}
|
||||
*/
|
||||
chips?: object;
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
/**
|
||||
* @description Строение элемента.
|
||||
* @description Element structure.
|
||||
*/
|
||||
export interface IItems {
|
||||
/**
|
||||
* Уникальное ID элемента
|
||||
* Unique item ID.
|
||||
* @type {string}
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Текстовое значение элемента
|
||||
* Element text value.
|
||||
* @type {string}
|
||||
*/
|
||||
title: string;
|
||||
/**
|
||||
* Порядковый номер, или другая информация
|
||||
* Sequence number, or other information.
|
||||
* @type {number | string}
|
||||
*/
|
||||
value: number | string;
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
/**
|
||||
* @description Настройки для добавления языков.
|
||||
* @description Settings for adding languages.
|
||||
*/
|
||||
export interface ILanguage {
|
||||
/**
|
||||
* Текст в поиске.
|
||||
* Search text.
|
||||
* @type {string}
|
||||
*/
|
||||
placeholder: string;
|
||||
/**
|
||||
* Дефолтный Текст Селекта если не указан placeholder или выбранный элемент
|
||||
* Default Select Text if no placeholder or selected element is specified.
|
||||
* @type {string}
|
||||
*/
|
||||
selectPlaceholder: string;
|
||||
/**
|
||||
* Текст если совпадений нет.
|
||||
* Text if no match.
|
||||
* @type {string}
|
||||
*/
|
||||
textInListSearch: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user