Class CGSelect

Description

This class implements the functionality of a custom select, with customization capabilities.

Author

Ovsyanikov Maxim

Hierarchy

CGSelect

Implements

ICgSelect

Index

Constructors

constructor

Accessors

indexesOf value

Constructors

constructor

new CGSelect(setting: ICgSelect): CGSelect

Description

The constructor takes an object and renders the select.

Example

options = {
 selector: 'Unique selector',
   selected: 'Selected item',
   placeholder: '...',
   lable: '...'
   items: [string|number|object],
   theme: string,
   searchMode: true/false,
   closeOnSelect:  true/false,
   nativeSelectMode: true/false,
   listDisplayMode: true/false,
   language: 'ru/en',
   styles: {
     head: {
       background: '...',
     },
     list: {...},
     chips: {...},
     caret: {...},
     placeholder: {...},
     lable: {..},
   },
   event: '...',
   url: 'http/...',
   multiselect: true/false,
   multiselectTag: true/false,
}

Parameters

setting: ICgSelect

Object accepting select settings.

Returns CGSelect

Properties

`Private` `Optional` btnCntr

btnCntr?: null | Element

Button, to control the select.

`Private` caret

caret: undefined | null | Element

Variable for carriage control.

`Private` `Optional` category

category?: string

Transferred categories.

`Optional` closeOnSelect

closeOnSelect?: boolean

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.

`Private` element

element: null | Element

Created HTML element.

`Optional` event

event?: string

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.

`Private` indexes

indexes: number[] = []

Array of indexes of selected elements.

`Optional` items

items?: any

*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.

`Optional` lable

lable?: string

An optional parameter that adds a lable before the select.

`Optional` language

language?: string

Optional parameter responsible for the localization of some text elements.

`Private` list

list: null | Element

Created list(ul), with class list.

`Optional` listDisplayMode

listDisplayMode?: boolean

An optional parameter that is responsible for the behavior of the select when opening.

`Optional` multiselect

multiselect?: boolean

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.

`Optional` multiselectTag

multiselectTag?: boolean

An optional parameter that is responsible for the behavior of the select, for him, *** works only in a place with a multiselect connection.

`Optional` nativeSelectMode

nativeSelectMode?: boolean

An optional parameter that is responsible for the behavior of the select when opened on mobile devices.

`Private` options

options: ICgSelect

Select settings passed when creating an instance of the class.

`Optional` placeholder

placeholder?: string

Placeholder optional parameter to which the text of the select placeholder is passed.

`Private` randomId

randomId: string

Unique Id for elements.

`Optional` searchMode

searchMode?: boolean

An optional parameter that adds a live search on the select elements.

`Optional` selected

selected?: string

An optional parameter, which is passed the element that will be selected initially in the select.

`Private` selectedItems

selectedItems: string | string[]

Selected or an array of selected items from a list.

`Optional` selector

selector?: string

Unique selector - *mandatory parameter (indicator) that is set when creating a select.

`Optional` styles

styles?: IStyle

An optional parameter that is responsible for customizing the select elements, objects with CSS properties for customizable elements are passed to it.

`Optional` theme

theme?: string

An optional parameter responsible for switching between different themes, the classic theme is set by default.

`Optional` url

url?: string

Required parameter (if no other way to get data (items) is specified), data that comes from the backend in the format { id: "", title: "", value: ""}.

Accessors

indexesOf

get indexesOf(): number | number[]
Returns

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.

Returns number | number[]
- Defined in cg-select.ts:152

value

get value(): string | string[]
Returns

Returns the selected element(s) as an array / element / null.

Description

Getter returning the selected element(s) of the select.

Returns string | string[]
- Defined in cg-select.ts:144

Methods

addItem

addItem(item: string | number | IItems): undefined | false
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
Parameters
- item: string | number | IItems
  
  added element.
Returns undefined | false
- Defined in cg-select.ts:855

addLanguage

addLanguage(language: ILanguage): void
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
Parameters
- language: ILanguage
  
  the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.
Returns void
- Defined in cg-select.ts:787

`Private` addOptionsBehaviour

addOptionsBehaviour(): void
Private

Description

A method that implements the selection of elements in different modes.

Method

addOptionsBehaviour

Returns void
- Defined in cg-select.ts:536

buttonControl

buttonControl(button: Element, method: string): void
Description

A method that allows you to open / close the select using buttons.

Method

buttonControl
Parameters
- button: Element
  
  HTML button.
- method: string
  
  open/close method.
Returns void
- Defined in cg-select.ts:813

`Private` close

close(): void
Private

Description

Closes the list.

Method

close

Returns void
- Defined in cg-select.ts:506

`Private` closeSelectClick

closeSelectClick(): void
Private

Description

Closes the list on click outside of an element.

Method

closeSelectClick

Returns void
- Defined in cg-select.ts:516

deleteItem

deleteItem(index: number): void
Description

removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.

Method

deleteItem
Parameters
- index: number
  
  the index of the element to be removed.
Returns void
- Defined in cg-select.ts:876

deleteItemAll

deleteItemAll(): void
Description

removes all elements from the list and redraws it.

Method

deleteItemAll

Returns void
- Defined in cg-select.ts:892

disabled

disabled(value: boolean): void
Description

A method that allows you to toggle the state of the disabled select.

Method

disabled
Parameters
- value: boolean
  
  Passed parameter to add the disabled attribute.
Returns void
- Defined in cg-select.ts:835

`Private` displayMode

displayMode(listDisplayMode: boolean): void
Private

Description

Changes the display of a sheet with a selection as a modal window.

Method

displayMode
Parameters
- listDisplayMode: boolean
  
  parameter responsible for displaying the selection in the form of a modal window.
Returns void
- Defined in cg-select.ts:748

getElement

getElement(numberItem: number): any
Returns

returns a reference to the selected HTML element.

Method

getElement
Parameters
- numberItem: number
  
  returned element number.
Returns any
- Defined in cg-select.ts:774

`Private` init

init(setting: ICgSelect): void

Private

Private method for initializing an instance of the ICgSelect class.

Method

init

Member

Description

Private method. General initialization of the select. Obtaining tinctures and converting select elements.

Example

{
        selector: '.cg-dropdown_one',
        placeholder: 'Choose a car',
        items: [
          'BMW',
          {
            id: '213sade',
            title: 'Opel',
            value: 1,
          },
          'Mersedes',
          'MAN',
          'max',
        ],
        multiselect: true,
        multiselectTag: true,
      }

Parameters

setting: ICgSelect

passed select settings.

Returns void

`Private` initEvent

initEvent(): void
Private

Description

Opens and closes the list by the passed event.

Method

initEvent

Returns void
- Defined in cg-select.ts:468

`Private` initSelected

initSelected(select?: string): void
Private

Method

initSelected

Description

Renders and styles the select.
Parameters
- Optional select: string
  
  optional element. Used in the selectedIndex method.
Returns void
- Defined in cg-select.ts:441

on

on(state: string, callback: ((state: any) => any)): void
Description

Method for tracking the actions of the select, you can pass a callback

Method

on
Parameters
- state: string
  
  select state.
- callback: ((state: any) => any)
  - - (state: any): any
    - Parameters
      
      state: any
      
      Returns any
Returns void
- Defined in cg-select.ts:924

`Private` open

open(oneClick?: boolean): void
Private

Description

Opens a list to select an element.

Method

open
Parameters
- Optional oneClick: boolean
  
  optional parameter passed from the buttonControl function.
Returns void
- Defined in cg-select.ts:491

`Private` render

render(select?: string): void
Private

Method

render

Description

Render elements in select.
Parameters
- Optional select: string
  
  optional element. Passed to the initSelected.
Returns void
- Defined in cg-select.ts:271

`Private` renderUrl

renderUrl(): Promise<void>
Private

Method

renderUrl

Description

Rendering elements in the select passed from the URL and setting them up.

Returns Promise<void>
- Defined in cg-select.ts:379

`Private` searchModeSelect

searchModeSelect(random: string): void
Private

Description

The method that implements the search for elements in the select.

Method

searchMode
Parameters
- random: string
  
  unique value for input element.
Returns void
- Defined in cg-select.ts:693

selectIndex

selectIndex(index: number): void
Description

selects the element that will be initially rendered in the select.

Method

selectIndex
Parameters
- index: number
  
  the index of the selected element.
Returns void
- Defined in cg-select.ts:902

`Private` selectMode

selectMode(nativeSelectMode: boolean): void
Private

Description

Changes the display of the select on mobile devices.

Method

selectMode
Parameters
- nativeSelectMode: boolean
  
  parameter responsible for adding native select.
Returns void
- Defined in cg-select.ts:664

Class CGSelect

Description

Author

Hierarchy

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Description

Example

Parameters

setting: ICgSelect

Returns CGSelect

Properties

Private Optional btnCntr

Private caret

Private Optional category

Optional closeOnSelect

Private element

Optional event

Private indexes

Optional items

Optional lable

Optional language

Private list

Optional listDisplayMode

Optional multiselect

Optional multiselectTag

Optional nativeSelectMode

Private options

Optional placeholder

Private randomId

Optional searchMode

Optional selected

Private selectedItems

Optional selector

Optional styles

Optional theme

Optional url

Accessors

indexesOf

Returns

Description

Returns number | number[]

value

Returns

Description

Returns string | string[]

Methods

addItem

Description

Method

Parameters

item: string | number | IItems

Returns undefined | false

addLanguage

Description

Method

Parameters

language: ILanguage

Returns void

Private addOptionsBehaviour

Description

Method

Returns void

buttonControl

Description

Method

Parameters

button: Element

method: string

Returns void

Private close

Description

Method

Returns void

`Private` `Optional` btnCntr

`Private` caret

`Private` `Optional` category

`Optional` closeOnSelect

`Private` element

`Optional` event

`Private` indexes

`Optional` items

`Optional` lable

`Optional` language

`Private` list

`Optional` listDisplayMode

`Optional` multiselect

`Optional` multiselectTag

`Optional` nativeSelectMode

`Private` options

`Optional` placeholder

`Private` randomId

`Optional` searchMode

`Optional` selected

`Private` selectedItems

`Optional` selector

`Optional` styles

`Optional` theme

`Optional` url

`Private` addOptionsBehaviour

`Private` close

`Private` closeSelectClick

`Private` displayMode

`Private` init

`Private` initEvent

`Private` initSelected

`Optional` select: string

`Private` open

`Optional` oneClick: boolean

`Private` render