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

Debuging and repare code

Browse Source
This commit is contained in:
Макс Овсяников 2023-01-17 20:21:43 +03:00
parent bf9dc01ad5
commit 8897e12464
10 changed files with 306 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/index.html
View File

@ -27,7 +27,7 @@
<nav>
<ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="/documentation/index.html">Documentation</a></li>
<!-- <li><a href="/documentation/index.html">Documentation</a></li> -->
</ul>
</nav>
</header>
@ -356,5 +356,5 @@
</div>
</body>
<script type="module" src="index.js"></script>
<script type="module" src="indexTs.ts"></script>
<!-- <script type="module" src="indexTs.ts"></script> -->
</html>

99
example/index.js
View File

@ -1,34 +1,34 @@
import DropDown from '../index';
import { CGSelect } from '../src/cg-selectTS';
import './example';
// ------------------------------Обычный селект--------------------
// const dropdown = new DropDown({
// selector: '.cg-dropdown_one',
// placeholder: 'Выберите авто',
// lable: 'EXAMPLE',
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
lable: 'EXAMPLE',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// ------------------------------NativeSelect-----------------------
const dropdownNativeSelect = new DropDown({
const dropdownNativeSelect = new CGSelect({
selector: '.cg-dropdown_selectNative',
placeholder: 'Выберите авто',
nativeSelectMode: true,
@ -43,7 +43,7 @@ const dropdownNativeSelect = new DropDown({
'MAN',
'Ferari',
'Kamaz',
'Ural'
'Ural',
],
styles: {
head: {
@ -56,7 +56,7 @@ const dropdownNativeSelect = new DropDown({
});
// ------------------------------listDisplayMode--------------------
const dropdownlistDisplayMode = new DropDown({
const dropdownlistDisplayMode = new CGSelect({
selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Выберите авто',
listDisplayMode: true,
@ -81,26 +81,8 @@ const dropdownlistDisplayMode = new DropDown({
},
});
// ------------------------------URL--------------------
const dropdown3 = new DropDown({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'https://jsonplaceholder.typicode.com/users',
searchMode: true,
darkTheme: false,
language: 'ru',
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// --------------------------------Категории--------------------------
const dropdown4 = new DropDown({
const dropdown4 = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
searchMode: true,
@ -145,7 +127,7 @@ const dropdown4 = new DropDown({
});
//----------------управление с помощью кнопок----------------------------------
const dropdownBtn = new DropDown({
const dropdownBtn = new CGSelect({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Выберите авто',
searchMode: true,
@ -192,7 +174,7 @@ dropdownBtn.buttonControl(buttonOpen, 'open');
dropdownBtn.buttonControl(buttonClose, 'close');
//-------------------------Функция Disabled----------------------------------
const dropdownDisabled = new DropDown({
const dropdownDisabled = new CGSelect({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Выберите авто',
searchMode: true,
@ -230,3 +212,22 @@ chbox.addEventListener('click', () => {
dropdownDisabled.disabled(true);
}
});
// ------------------------------URL--------------------
const dropdown3 = new CGSelect({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'https://jsonplaceholder.typicode.com/todos',
searchMode: true,
darkTheme: false,
language: 'ru',
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
multiselect: true,
});

264
example/indexTs.ts
View File

@ -1,36 +1,234 @@
import { CGSelect } from '../src/cg-selectTS';
// import { CGSelect } from '../src/cg-selectTS';
// import './example';
const dropdn = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
// url
// // ------------------------------Обычный селект--------------------
// const dropdn = new CGSelect({
// selector: '.cg-dropdown_one',
// placeholder: 'Выберите авто',
// lable: 'EXAMPLE',
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // ------------------------------NativeSelect-----------------------
// const dropdownNativeSelect = new CGSelect({
// selector: '.cg-dropdown_selectNative',
// placeholder: 'Выберите авто',
// nativeSelectMode: true,
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// 'Kamaz',
// 'Ural',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // console.log();
// // ------------------------------listDisplayMode--------------------
// const dropdownlistDisplayMode = new CGSelect({
// selector: '.cg-dropdown_listDisplayMode',
// placeholder: 'Выберите авто',
// listDisplayMode: true,
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // ------------------------------URL--------------------
// const dropdown3 = new CGSelect({
// selector: '.cg-dropdown_three',
// placeholder: 'URL',
// url: 'https://jsonplaceholder.typicode.com/users',
// searchMode: true,
// nativeSelectMode: true
// event: 'mouseenter',
// buttonControl
multiselect: true,
multiselectTag: true,
});
// darkTheme: false,
// language: 'ru',
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // --------------------------------Категории--------------------------
// const dropdown4 = new CGSelect({
// selector: '.cg-dropdown_categories',
// placeholder: 'Выберите регион',
// searchMode: true,
// items: [
// {
// category: 'Russia',
// categoryItems: [
// {
// id: '28qwds',
// title: 'Москва',
// value: 0,
// },
// ,
// 'Ростов-на-дону',
// 'Саратов',
// 'Волгоград',
// 'Донецк',
// ],
// },
// {
// category: 'USA',
// categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
// },
// {
// category: 'France',
// categoryItems: ['Paris'],
// },
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// placeholder: {
// maxWidth: '500px ',
// },
// },
// multiselect: true,
// multiselectTag: true,
// });
// //----------------управление с помощью кнопок----------------------------------
// const dropdownBtn = new CGSelect({
// selector: '.cg-dropdown_usedBtn',
// placeholder: 'Выберите авто',
// searchMode: true,
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'max',
// ],
// styles: {
// head: {
// width: '830px',
// color: 'black',
// backgroundColor: 'rgb(176 223 167)',
// },
// list: {
// width: '824px',
// color: 'black',
// backgroundColor: 'rgb(176 223 167)',
// },
// caret: {
// borderTop: '6px solid black',
// },
// search: {
// backgroundColor: '#d7ffff',
// borderRadius: '5px',
// borderBottom: 'none',
// width: '95%',
// color: 'black',
// },
// },
// multiselect: true,
// });
// const buttonOpen = document.querySelector('.button__open');
// const buttonClose = document.querySelector('.button__close');
// dropdownBtn.buttonControl(buttonOpen!, 'open');
// dropdownBtn.buttonControl(buttonClose!, 'close');
// //-------------------------Функция Disabled----------------------------------
// const dropdownDisabled = new CGSelect({
// selector: '.cg-dropdown_checkboxDisable',
// placeholder: 'Выберите авто',
// searchMode: true,
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'max',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// placeholder: {
// maxWidth: '500px ',
// },
// },
// multiselect: true,
// });
// dropdownDisabled.disabled(true);
// let chbox = document.getElementById('checkboxDisable') as HTMLInputElement;
// chbox!.addEventListener('click', () => {
// if (chbox!.checked == true) {
// dropdownDisabled.disabled(false);
// } else {
// dropdownDisabled.disabled(true);
// }
// });

0
index.ts → index.js
View File

2
package.json
View File

@ -9,7 +9,7 @@
"homepage": "https://cg-select.itguild.info",
"scripts": {
"start": "parcel example/index.html -p 4500 --open ",
"build": "parcel build ./src/cg-selectTS.ts --no-cache",
"build": "parcel build example/index.html --no-cache",
"deploy": "gh-pages -d dist",
"predeploy": "npm run build"
},

15
src/cg-selectTS.ts
View File

@ -230,10 +230,11 @@ export class CGSelect implements ICgSelect {
this.items = [];
if (!this.items && this.url) {
if (this.url && !items) {
this.renderUrl();
return;
}
createSelected;
items.forEach((dataItem: any, index: number) => {
@ -373,12 +374,9 @@ export class CGSelect implements ICgSelect {
* @description Рендер елементов в селекте переданных с URL и их настойка
*/
private async renderUrl() {
if (this.items || !this.url) {
return;
}
const response = await fetch(this.url);
const response = await fetch(this.url!);
const dataUrl = await response.json();
console.log(dataUrl);
const nativeSelect = createNativeSelect();
@ -554,7 +552,10 @@ export class CGSelect implements ICgSelect {
const select: HTMLElement | null | undefined = this.element?.querySelector('.selected');
const nativeOption = this.element!.querySelectorAll('.nativeSelect__nativeOption');
let selectedItemsClear: ISelectedItems;
let selectedItemsClear: ISelectedItems = {
placeholder: this.placeholder!,
selected: this.selected!,
};
const ulMultipul = document.createElement('ul');

6
src/components/create-element/create-elementTs.ts
View File

@ -1,4 +1,4 @@
import { nativeOptionMultiple } from '../utils/utilsTs';
import { customStylesFormat, nativeOptionMultiple } from '../utils/utilsTs';
import { ICreateBreadCrumb } from './create-element.interface';
/**
@ -63,8 +63,8 @@ export function createBreadCrumb(
liChip.appendChild(svgIcon);
if (styles) {
// const { chips } = styles;
// customStylesFormat(chips, liChip);
const { chips } = styles;
customStylesFormat(chips!, liChip);
}
svgIcon.addEventListener('click', (event) => {

5
src/components/utils/utilsTs.ts
View File

@ -48,6 +48,7 @@ export function getSelectText(
} else {
select!.innerText = 'Select...';
}
return select!;
}
@ -116,7 +117,7 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
svgIcon.appendChild(path1);
svgIcon.appendChild(path2);
if (multiselectTag) {
if (multiselectTag && multiselectTag == true) {
return;
}
@ -162,7 +163,7 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
* @param {NodeList} element NodeList нативного селекта
* @param {any} item выбранный элемент в кастомном селекте
*/
export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: any) {
export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: string) {
element!.forEach((option) => {
option.removeAttribute('selected');
if (option.textContent === item) {

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

@ -128,4 +128,9 @@ export interface IStyle {
* @type {object}
*/
search?: object;
/**
* Кастомизация чипсов с выбранными элементами
* @type {object}
*/
chips?: object;
}

2
tsconfig.json
View File

@ -1,5 +1,5 @@
{
"include": ["src/**/*", "index.ts"],
// "include": ["src/**/*", "index.ts"],
"compilerOptions": {
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */