From 2edd1393ef75f5a1aa1ee4299260230503f17e7d Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Fri, 28 Oct 2022 15:45:09 +0300 Subject: [PATCH] Added label and fix submit form and etc. --- src/cg-dropdown.js | 48 ++++++++++++++------- src/components/create-element.js | 1 - src/components/utils.js | 5 ++- src/index.html | 36 +++++++++++++--- src/index.js | 72 +++++++++++++++++++++++++++----- src/style/main.scss | 11 +++-- 6 files changed, 134 insertions(+), 39 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 4b33224..fa7ba58 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -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; diff --git a/src/components/create-element.js b/src/components/create-element.js index 3a78064..0627dc4 100644 --- a/src/components/create-element.js +++ b/src/components/create-element.js @@ -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; diff --git a/src/components/utils.js b/src/components/utils.js index 7a3058e..c630730 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -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); diff --git a/src/index.html b/src/index.html index d1f9e64..de67cd0 100644 --- a/src/index.html +++ b/src/index.html @@ -10,13 +10,39 @@
- +
+
+

Дефолтный селект

+ +
- - - + +
- +
+

Селект с данными с URL

+ +
+ +
+

Селект с категориями

+ +
+ +
+

Cелект управляемый кнопками

+ + + +
+ +
+

Cелект с функцией disabled

+ + + + +
diff --git a/src/index.js b/src/index.js index 47e5c1d..12fbba1 100644 --- a/src/index.js +++ b/src/index.js @@ -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); + } +}); diff --git a/src/style/main.scss b/src/style/main.scss index 39f6dc0..8bd5436 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -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; -}