Fixed exemple page and collback
This commit is contained in:
MaxOvs19
parent
993b8855fa
commit
bcad805727
@ -1,6 +1,6 @@
|
||||
# CG-SELECT
|
||||
|
||||
## version ~ 0.2.31
|
||||
## version ~ 0.2.32
|
||||
|
||||
This component allows you to create a custom select. It offers more flexible customization and use of select.
|
||||
Customization, multi-selection and live search by elements are available.
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
|
||||
<div class="container content">
|
||||
<div class="example-select">
|
||||
<h2 class="example-select_title">Дефолтный селект</h2>
|
||||
<h2 class="example-select_title">Default select</h2>
|
||||
<form method="get" class="form">
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||
@ -43,12 +43,12 @@
|
||||
|
||||
<input type="submit" value="Отправить!" class="example-select_submit" />
|
||||
|
||||
<button type="button" class="check-code" id="first">Посмотреть код</button>
|
||||
<button type="button" class="check-code" id="first">View code</button>
|
||||
<code id="codeFirst">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</span>
|
||||
lable: <span class="code__string">'EXAMPLE',</span>
|
||||
items: [
|
||||
<span class="code__string">'BMW',</span>
|
||||
@ -76,22 +76,22 @@
|
||||
</div>
|
||||
|
||||
<div class="example-select">
|
||||
<h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
|
||||
<h2 class="example-select_title">Default select with function nativeSelectMode</h2>
|
||||
|
||||
<form method="get" class="form">
|
||||
<p style="margin-left: 12px; color: white">
|
||||
*При мобильном разрешении появляеться нативный селект.
|
||||
*Native select appears on mobile resolution.
|
||||
</p>
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_selectNative"></button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="check-code" id="Native">Посмотреть код</button>
|
||||
<button type="button" class="check-code" id="Native">View code</button>
|
||||
<code id="codeNative">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</span>
|
||||
nativeSelectMode: <span class="code__keyword">true,</span>
|
||||
items: [
|
||||
<span class="code__string">'BMW',</span>
|
||||
@ -119,23 +119,23 @@
|
||||
</div>
|
||||
|
||||
<div class="example-select">
|
||||
<h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
|
||||
<h2 class="example-select_title">Default select with function listDisplayMode</h2>
|
||||
|
||||
<form method="get" class="form">
|
||||
<p style="margin-left: 12px; color: white">
|
||||
*При использовании данного метода лист с выбором появляеться как модальное окно.
|
||||
*When using this method, the selection sheet appears as a modal window.
|
||||
</p>
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="check-code" id="six">Посмотреть код</button>
|
||||
<button type="button" class="check-code" id="six">View code</button>
|
||||
|
||||
<code id="codeSix">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
|
||||
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</span>
|
||||
listDisplayMode: <span class="code__keyword">true,</span>
|
||||
items: [
|
||||
<span class="code__string">'BMW',</span>
|
||||
@ -163,11 +163,11 @@
|
||||
</div>
|
||||
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Селект с данными с URL</h1>
|
||||
<h1 class="example-select_title">Select with data from URL</h1>
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||
</div>
|
||||
<button type="button" class="check-code" id="second">Посмотреть код</button>
|
||||
<button type="button" class="check-code" id="second">View code</button>
|
||||
|
||||
<code id="codeSecond">
|
||||
<pre>
|
||||
@ -192,12 +192,12 @@
|
||||
</div>
|
||||
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Категории</h1>
|
||||
<h1 class="example-select_title">Categories</h1>
|
||||
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_categories"></button>
|
||||
</div>
|
||||
<button type="button" class="check-code" id="third">Посмотреть код</button>
|
||||
<button type="button" class="check-code" id="third">View code</button>
|
||||
|
||||
<code id="codeThird">
|
||||
<pre>
|
||||
@ -253,7 +253,7 @@
|
||||
</div>
|
||||
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Управление с помошью кнопок</h1>
|
||||
<h1 class="example-select_title">Button control</h1>
|
||||
<div style="margin-bottom: 15px">
|
||||
<button class="button__open example-select_submit">Open</button>
|
||||
<button class="button__close example-select_submit">Close</button>
|
||||
@ -263,13 +263,13 @@
|
||||
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="check-code" id="fourth">Посмотреть код</button>
|
||||
<button type="button" class="check-code" id="fourth">View code</button>
|
||||
|
||||
<code id="codeFourth">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
|
||||
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</span>
|
||||
searchMode: <span class="code__keyword">true,</span>
|
||||
items: [
|
||||
<span class="code__string">'BMW',</span>
|
||||
@ -311,21 +311,23 @@
|
||||
</div>
|
||||
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Функция disabled</h1>
|
||||
<h1 class="example-select_title">Function disabled</h1>
|
||||
|
||||
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
|
||||
<label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
|
||||
<label for="checkboxDisable" style="color: white">
|
||||
You agree to the processing of data</label
|
||||
>
|
||||
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="check-code" id="fifth">Посмотреть код</button>
|
||||
<button type="button" class="check-code" id="fifth">View code</button>
|
||||
<code id="codeFifth">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
|
||||
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</span>
|
||||
searchMode: <span class="code__keyword">true,</span>
|
||||
items: [
|
||||
<span class="code__string">'BMW',</span>
|
||||
|
||||
@ -4,8 +4,8 @@ import './example';
|
||||
// ------------------------------Обычный селект--------------------
|
||||
const dropdown = new CGSelect({
|
||||
selector: '.cg-dropdown_one',
|
||||
placeholder: 'Выберите авто',
|
||||
lable: 'EXAMPLE',
|
||||
placeholder: 'Choose a car',
|
||||
label: 'EXAMPLE',
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
@ -28,14 +28,14 @@ const dropdown = new CGSelect({
|
||||
// multiselect: true,
|
||||
});
|
||||
|
||||
// dropdown.on('select', function (e) {
|
||||
// console.log(`this state: ${e}`);
|
||||
// });
|
||||
dropdown.on('clear', function (e) {
|
||||
console.log(`this state: ${e}`);
|
||||
});
|
||||
|
||||
// ------------------------------NativeSelect-----------------------
|
||||
const dropdownNativeSelect = new CGSelect({
|
||||
selector: '.cg-dropdown_selectNative',
|
||||
placeholder: 'Выберите авто',
|
||||
placeholder: 'Choose a car',
|
||||
nativeSelectMode: true,
|
||||
items: [
|
||||
'BMW',
|
||||
@ -63,7 +63,7 @@ const dropdownNativeSelect = new CGSelect({
|
||||
// ------------------------------listDisplayMode--------------------
|
||||
const dropdownlistDisplayMode = new CGSelect({
|
||||
selector: '.cg-dropdown_listDisplayMode',
|
||||
placeholder: 'Выберите авто',
|
||||
placeholder: 'Choose a car',
|
||||
listDisplayMode: true,
|
||||
items: [
|
||||
'BMW',
|
||||
@ -134,7 +134,7 @@ const dropdown4 = new CGSelect({
|
||||
//----------------управление с помощью кнопок----------------------------------
|
||||
const dropdownBtn = new CGSelect({
|
||||
selector: '.cg-dropdown_usedBtn',
|
||||
placeholder: 'Выберите авто',
|
||||
placeholder: 'Choose a car',
|
||||
searchMode: true,
|
||||
items: [
|
||||
'BMW',
|
||||
@ -181,7 +181,7 @@ dropdownBtn.buttonControl(buttonClose, 'close');
|
||||
//-------------------------Функция Disabled----------------------------------
|
||||
const dropdownDisabled = new CGSelect({
|
||||
selector: '.cg-dropdown_checkboxDisable',
|
||||
placeholder: 'Выберите авто',
|
||||
placeholder: 'Choose a car',
|
||||
searchMode: true,
|
||||
items: [
|
||||
'BMW',
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.2.31",
|
||||
"version": "0.2.32",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "cg-select",
|
||||
"version": "0.2.31",
|
||||
"version": "0.2.32",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@parcel/optimizer-css": "^2.8.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.2.31",
|
||||
"version": "0.2.32",
|
||||
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
|
||||
"author": {
|
||||
"name": "CraftGroup",
|
||||
|
||||
@ -43,7 +43,7 @@ export class CGSelect implements ICgSelect {
|
||||
nativeSelectMode?: boolean;
|
||||
listDisplayMode?: boolean;
|
||||
language?: string;
|
||||
lable?: string;
|
||||
label?: string;
|
||||
styles?: IStyle;
|
||||
event?: string;
|
||||
url?: string;
|
||||
@ -74,7 +74,7 @@ export class CGSelect implements ICgSelect {
|
||||
* Variable for carriage control.
|
||||
* @type {Element | null | undefined}
|
||||
*/
|
||||
private caret: Element | null | undefined;
|
||||
private carriage: Element | null | undefined;
|
||||
/**
|
||||
* Transferred categories.
|
||||
* @type {string}
|
||||
@ -94,7 +94,7 @@ export class CGSelect implements ICgSelect {
|
||||
* Button, to control the select.
|
||||
* @type {Element | null}
|
||||
*/
|
||||
private btnCntr?: Element | null;
|
||||
private buttonAction?: Element | null;
|
||||
|
||||
/**
|
||||
* @param {ICgSelect} setting Object accepting select settings.
|
||||
@ -105,7 +105,7 @@ export class CGSelect implements ICgSelect {
|
||||
* selector: 'Unique selector',
|
||||
selected: 'Selected item',
|
||||
placeholder: '...',
|
||||
lable: '...'
|
||||
label: '...'
|
||||
items: [string|number|object],
|
||||
theme: string,
|
||||
searchMode: true/false,
|
||||
@ -119,9 +119,9 @@ export class CGSelect implements ICgSelect {
|
||||
},
|
||||
list: {...},
|
||||
chips: {...},
|
||||
caret: {...},
|
||||
carriage: {...},
|
||||
placeholder: {...},
|
||||
lable: {..},
|
||||
label: {..},
|
||||
},
|
||||
event: '...',
|
||||
url: 'http/...',
|
||||
@ -191,7 +191,7 @@ export class CGSelect implements ICgSelect {
|
||||
searchMode,
|
||||
language,
|
||||
styles,
|
||||
lable,
|
||||
label,
|
||||
event,
|
||||
selected,
|
||||
placeholder,
|
||||
@ -210,7 +210,7 @@ export class CGSelect implements ICgSelect {
|
||||
this.nativeSelectMode = nativeSelectMode;
|
||||
this.listDisplayMode = listDisplayMode;
|
||||
this.styles = styles;
|
||||
this.lable = lable;
|
||||
this.label = label;
|
||||
this.event = event;
|
||||
this.selected = selected;
|
||||
this.placeholder = placeholder;
|
||||
@ -231,14 +231,14 @@ export class CGSelect implements ICgSelect {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.lable) {
|
||||
const lableItem = document.createElement('h1');
|
||||
const textLable = document.createTextNode(this.lable);
|
||||
if (this.label) {
|
||||
const labelItem = document.createElement('h1');
|
||||
const textLabel = document.createTextNode(this.label);
|
||||
|
||||
lableItem.appendChild(textLable);
|
||||
lableItem.classList.add('label');
|
||||
labelItem.appendChild(textLabel);
|
||||
labelItem.classList.add('label');
|
||||
|
||||
this.element!.insertAdjacentElement('beforebegin', lableItem);
|
||||
this.element!.insertAdjacentElement('beforebegin', labelItem);
|
||||
}
|
||||
|
||||
items.forEach((dataItem: any, index: number) => {
|
||||
@ -354,7 +354,7 @@ export class CGSelect implements ICgSelect {
|
||||
});
|
||||
|
||||
this.list = this.element!.querySelector('.list');
|
||||
this.caret = this.element!.querySelector('.caret');
|
||||
this.carriage = this.element!.querySelector('.caret');
|
||||
|
||||
if (this.theme) {
|
||||
changeTheme(this.element!, this.theme!);
|
||||
@ -491,10 +491,10 @@ export class CGSelect implements ICgSelect {
|
||||
private open(oneClick?: boolean): void {
|
||||
if (oneClick === true) {
|
||||
this.list!.classList.add('open');
|
||||
this.caret!.classList.add('caret_rotate');
|
||||
this.carriage!.classList.add('caret_rotate');
|
||||
} else {
|
||||
this.list!.classList.toggle('open');
|
||||
this.caret!.classList.toggle('caret_rotate');
|
||||
this.carriage!.classList.toggle('caret_rotate');
|
||||
}
|
||||
}
|
||||
|
||||
@ -505,7 +505,7 @@ export class CGSelect implements ICgSelect {
|
||||
*/
|
||||
private close(): void {
|
||||
this.list?.classList.remove('open');
|
||||
this.caret?.classList.remove('caret_rotate');
|
||||
this.carriage?.classList.remove('caret_rotate');
|
||||
}
|
||||
|
||||
/**
|
||||
@ -519,7 +519,7 @@ export class CGSelect implements ICgSelect {
|
||||
document.addEventListener('click', (e) => {
|
||||
const withinBoundaries = e.composedPath().includes(dropdown!);
|
||||
if (!withinBoundaries) {
|
||||
if (this.btnCntr) {
|
||||
if (this.buttonAction) {
|
||||
return;
|
||||
} else {
|
||||
this.close();
|
||||
@ -815,7 +815,7 @@ export class CGSelect implements ICgSelect {
|
||||
return;
|
||||
}
|
||||
|
||||
this.btnCntr = button!;
|
||||
this.buttonAction = button!;
|
||||
button.addEventListener('click', () => {
|
||||
if (method.toLowerCase() === 'open') {
|
||||
this.open(true);
|
||||
@ -945,6 +945,15 @@ export class CGSelect implements ICgSelect {
|
||||
});
|
||||
callback(state);
|
||||
break;
|
||||
case 'clear':
|
||||
this.element!.addEventListener('click', () => {
|
||||
const svgIcon = this.element?.querySelector('.svg-icon');
|
||||
svgIcon?.addEventListener('click', () => {
|
||||
console.log('list:clear', svgIcon.classList.contains('svg-clear'));
|
||||
});
|
||||
});
|
||||
callback(state);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,7 +143,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
|
||||
|
||||
select!.appendChild(svgIcon);
|
||||
|
||||
svgIcon.addEventListener('click', () => {
|
||||
svgIcon.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
select!.innerText = '';
|
||||
|
||||
nativeOption.forEach((option) => {
|
||||
|
||||
@ -61,7 +61,7 @@ export interface ICgSelect {
|
||||
* An optional parameter that adds a lable before the select.
|
||||
* @type {string}
|
||||
*/
|
||||
lable?: string;
|
||||
label?: string;
|
||||
/**
|
||||
* An optional parameter that is responsible for customizing the select elements,
|
||||
* objects with CSS properties for customizable elements are passed to it.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user