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

Added label and fix submit form and etc.

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-28 15:45:09 +03:00
parent ac49225a44
commit 2edd1393ef
6 changed files with 134 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/cg-dropdown.js
View File

@ -274,13 +274,14 @@ export class DropDown {
this.#element = elem;
this.#element.addEventListener('click', () => {
this.#element.addEventListener('click', (e) => {
e.preventDefault();
this.#open();
});
this.#items = [];
if (multiselect) {
if (multiselect && multiselect == true) {
this.#selectedItems = [];
}
@ -312,7 +313,7 @@ export class DropDown {
* @protected
*/
#initSelected(select) {
const { styles, selected, placeholder } = this.#options;
const { styles, selected, placeholder, lable } = this.#options;
if (selected) {
createSelected(this.#element, selected);
@ -322,13 +323,23 @@ export class DropDown {
createSelected(this.#element, 'Select...');
}
if (styles) {
customStyles(this.#element, styles);
}
if (select) {
createSelected(this.#element, select, styles);
}
if (lable) {
const lableItem = document.createElement('h1');
const textLable = document.createTextNode(lable);
lableItem.appendChild(textLable);
lableItem.classList.add('label');
this.#element.insertAdjacentElement('beforebegin', lableItem);
}
if (styles) {
customStyles(this.#element, styles);
}
}
/**
@ -356,6 +367,7 @@ export class DropDown {
const nativSelect = createNativeSelect();
ulList.classList.add('list');
if (searchMode) {
ulList.appendChild(intputSearch);
}
@ -377,13 +389,13 @@ export class DropDown {
liItem.classList.add('list__item');
strongItem.classList.add('category');
if (multiselect) {
if (multiselect && multiselect == true) {
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
liItem.appendChild(checkBox);
if (multiselectTag) {
if (multiselectTag && multiselectTag == true) {
checkBox.classList.add('displayHide');
}
@ -424,7 +436,7 @@ export class DropDown {
* @description Рендер елементов в селекте переданных с URL и их настойка
*/
async #renderUrl() {
const { url, items, multiselect } = this.#options;
const { url, items, multiselect, multiselectTag } = this.#options;
if (items) {
return;
@ -451,9 +463,12 @@ export class DropDown {
const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title);
if (multiselect) {
if (multiselect && multiselect == true) {
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
if (multiselectTag && multiselectTag == true) {
checkBox.classList.add('displayHide');
}
checkBox.setAttribute('id', `chbox-${item.id}`);
nativSelect.setAttribute('multiple', 'multiple');
@ -529,7 +544,7 @@ export class DropDown {
const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
const ulMultipul = document.createElement('ul');
if (multiselect) {
if (multiselect && multiselect == true) {
ulMultipul.classList.add('multiselect-tag');
select.classList.add('overflow-hidden');
}
@ -542,7 +557,8 @@ export class DropDown {
option.addEventListener('click', (event) => {
const item = this.#items[index];
if (multiselect) {
if (multiselect && multiselect == true) {
event.preventDefault();
event.stopPropagation();
option.classList.toggle('active');
@ -562,7 +578,7 @@ export class DropDown {
select.innerText = '';
if (multiselectTag) {
if (multiselectTag && multiselectTag == true) {
this.#selectedItems.push(item);
select.appendChild(ulMultipul);
@ -579,7 +595,7 @@ export class DropDown {
select.innerText = this.#selectedItems;
}
} else {
if (multiselectTag) {
if (multiselectTag && multiselectTag == true) {
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
ulMultipul.removeChild(tagItem);
}
@ -597,7 +613,7 @@ export class DropDown {
select.innerText = 'Select...';
}
} else {
if (multiselectTag) {
if (multiselectTag && multiselectTag == true) {
select.appendChild(ulMultipul);
} else {
select.innerText = this.#selectedItems;

1
src/components/create-element.js
View File

@ -77,7 +77,6 @@ export function createBreadcrumb(data, title, index, id) {
export function createNativeSelect() {
const nativSelect = document.createElement('select');
nativSelect.setAttribute('form', 'data');
nativSelect.setAttribute('name', 'dataSelect');
nativSelect.classList.add('nativSelect');
return nativSelect;

5
src/components/utils.js
View File

@ -41,15 +41,16 @@ export function customStyles(element, styles) {
return;
}
const { head, caret, placeholder } = styles;
const { head, caret, placeholder, lable } = styles;
const cgSelect = element.querySelector('.cg-select');
const caretSelect = element.querySelector('.caret');
const placeholderSelect = element.querySelector('.selected');
const lableItem = element.parentElement.querySelector('h1.label');
customStylesFormat(head, cgSelect);
customStylesFormat(caret, caretSelect);
customStylesFormat(lable, lableItem);
if (placeholderSelect) {
customStylesFormat(placeholder, placeholderSelect);

36
src/index.html
View File

@ -10,13 +10,39 @@
</head>
<body>
<div class="container">
<!-- <form id="data" action="handler.php"></form> -->
<form method="get" class="form">
<div>
<h1>Дефолтный селект</h1>
<button class="cg-dropdown cg-dropdown_one"></button>
<!-- <input type="submit" form="data" value="Отправить" /> -->
<button class="cg-dropdown cg-dropdown_three"></button>
</div>
<button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
<input type="submit" value="Отправить!" />
</form>
<div>
<h1>Селект с данными с URL</h1>
<button class="cg-dropdown cg-dropdown_three"></button>
</div>
<div>
<h1>Селект с категориями</h1>
<button class="cg-dropdown cg-dropdown_categories"></button>
</div>
<div>
<h1>Cелект управляемый кнопками</h1>
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
<button class="button__open">Open</button>
<button class="button__close">Close</button>
</div>
<div style="width: 300px">
<h1>Cелект с функцией disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" />
<label for="checkboxDisable">Вы согласны на обработку данных</label>
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
</div>
</div>
</body>
<script type="module" src="index.js"></script>

72
src/index.js
View File

@ -4,7 +4,7 @@ import { DropDown } from './cg-dropdown';
const dropdown = new DropDown({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
searchMode: true,
lable: 'Выбор лучшего авто!',
items: [
'BMW',
{
@ -14,13 +14,17 @@ const dropdown = new DropDown({
},
'Mersedes',
'MAN',
'max',
'Ferari',
],
multiselect: true,
multiselectTag: true,
styles: {
lable: {
fontSize: '14px',
border: '1px white solid',
borderRadius: '5px',
},
},
});
// dropdown.disabled(false);
// ------------------------------URL--------------------
const dropdown3 = new DropDown({
selector: '.cg-dropdown_three',
@ -39,7 +43,7 @@ const dropdown3 = new DropDown({
// --------------------------------Категории--------------------------
const dropdown4 = new DropDown({
selector: '.cg-dropdown_button',
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
searchMode: true,
items: [
@ -83,9 +87,55 @@ const dropdown4 = new DropDown({
});
//----------------управление с помощью кнопок----------------------------------
/* const buttonOpen = document.querySelector('.button__open');
const buttonClose = document.querySelector('.button__close');
const dropdownBtn = new DropDown({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Выберите авто',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
multiselect: true,
});
dropdown4.buttonControl(buttonOpen, 'open');
dropdown4.buttonControl(buttonClose, 'close');
*/
const buttonOpen = document.querySelector('.button__open');
const buttonClose = document.querySelector('.button__close');
dropdownBtn.buttonControl(buttonOpen, 'open');
dropdownBtn.buttonControl(buttonClose, 'close');
//-------------------------Функция Disabled----------------------------------
const dropdownDisabled = new DropDown({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Выберите авто',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
multiselect: true,
});
dropdownDisabled.disabled(true);
let chbox = document.getElementById('checkboxDisable');
chbox.addEventListener('click', () => {
if (chbox.checked == true) {
dropdownDisabled.disabled(false);
} else {
dropdownDisabled.disabled(true);
}
});

11
src/style/main.scss
View File

@ -186,6 +186,9 @@ input[type='checkbox'] {
stroke-width: 0.5;
}
.label {
color: white;
}
//-------Behavior--------
.active {
background: #8282822c;
@ -211,6 +214,10 @@ input[type='checkbox'] {
white-space: nowrap;
}
.displayHide {
display: none;
}
// ------SCROLLBAR------
::-webkit-scrollbar {
width: 10px;
@ -223,7 +230,3 @@ input[type='checkbox'] {
::-webkit-scrollbar-thumb {
background-color: #4d4d4d;
}
.displayHide {
display: none;
}