From 04b3bb23b1316da6014987d18d9f922940ec6492 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 31 Oct 2022 19:32:59 +0300 Subject: [PATCH] Added default styles(White/Dark) theme --- src/cg-dropdown.js | 33 ++++++++++++++++++++++----- src/components/create-element.js | 1 + src/index.js | 7 +++++- src/style/main.scss | 38 +++----------------------------- src/style/scrolbar.scss | 12 ++++++++++ src/style/svgStyle.scss | 21 ++++++++++++++++++ src/style/whiteTheme.scss | 13 +++++++++++ 7 files changed, 84 insertions(+), 41 deletions(-) create mode 100644 src/style/scrolbar.scss create mode 100644 src/style/svgStyle.scss create mode 100644 src/style/whiteTheme.scss diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index fa7ba58..bb52a35 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -350,7 +350,7 @@ export class DropDown { * @description Рендер елементов в селекте. */ #render(select) { - const { styles, multiselect, searchMode, multiselectTag } = this.#options; + const { styles, multiselect, searchMode, multiselectTag, darkTheme } = this.#options; const random = Math.random().toString(36).substring(2, 10); if (select || (select && styles)) { @@ -362,16 +362,15 @@ export class DropDown { const ulList = document.createElement('ul'); const intputSearch = createInputSearch(random); - this.random = random; - const nativSelect = createNativeSelect(); - - ulList.classList.add('list'); + this.random = random; if (searchMode) { ulList.appendChild(intputSearch); } + ulList.classList.add('list'); + if (styles) { const { list } = styles; customStylesFormat(list, ulList); @@ -426,9 +425,33 @@ export class DropDown { return item; }); + if (darkTheme == false) { + this.checkTheme(); + } + this.#addOptionsBehaviour(); } + checkTheme() { + const { darkTheme } = this.#options; + + const select = this.#element.querySelector('.cg-select'); + const caret = this.#element.querySelector('.caret'); + const list = this.#element.querySelector('ul.list'); + const listItem = this.#element.querySelectorAll('.list__item'); + + console.log(list); + if (darkTheme == false) { + select.classList.add('selectWhite'); + caret.classList.add('caretWhite'); + list.classList.add('listWhite'); + } else if (darkTheme == true || !darkTheme) { + return; + } else { + throw new Error('Styles error or invalid value entered!'); + } + } + /** * Приватный метод рендера экземпляра класса DropDown *@protected diff --git a/src/components/create-element.js b/src/components/create-element.js index 0627dc4..46340b9 100644 --- a/src/components/create-element.js +++ b/src/components/create-element.js @@ -42,6 +42,7 @@ export function createBreadcrumb(data, title, index, id) { } svgIcon.addEventListener('click', (event) => { + event.preventDefault(); event.stopPropagation(); nativOptionMultiple(nativOption, title, false); diff --git a/src/index.js b/src/index.js index 7f9a35c..eefbbf8 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ const dropdown = new DropDown({ selector: '.cg-dropdown_one', placeholder: 'Выберите авто', lable: 'Выбор лучшего авто!', + darkTheme: false, items: [ 'BMW', { @@ -15,6 +16,8 @@ const dropdown = new DropDown({ 'Mersedes', 'MAN', 'Ferari', + 'Ferari', + 'Ferari', ], styles: { lable: { @@ -23,7 +26,8 @@ const dropdown = new DropDown({ borderRadius: '5px', }, }, - // multiselect: true, + multiselect: true, + multiselectTag: true, }); // ------------------------------URL-------------------- @@ -92,6 +96,7 @@ const dropdownBtn = new DropDown({ selector: '.cg-dropdown_usedBtn', placeholder: 'Выберите авто', searchMode: true, + darkTheme: true, items: [ 'BMW', { diff --git a/src/style/main.scss b/src/style/main.scss index ae5c633..69c2869 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -1,4 +1,7 @@ @import 'src/style/nativSelect.scss'; +@import './scrolbar.scss'; +@import './whiteTheme.scss'; +@import './svgStyle.scss'; * { font-size: 14px; @@ -166,28 +169,6 @@ input[type='checkbox'] { margin: 0 5px 0 0; } -// --------SVG-------- -.svg-icon { - width: 16px; - margin-left: 3px; - background-color: #bebebc; - border-radius: 5px; - cursor: pointer; - transition: 1s; - - &:hover { - transition: 1s; - background-color: #ffffff; - } -} - -.svg-icon path { - color: black; - stroke: currentcolor; - transition: 0.2s; - stroke-width: 0.5; -} - .label { color: white; } @@ -220,19 +201,6 @@ input[type='checkbox'] { display: none; } -// ------SCROLLBAR------ -::-webkit-scrollbar { - width: 10px; -} - -::-webkit-scrollbar-track { - background-color: #d1d1d19d; -} - -::-webkit-scrollbar-thumb { - background-color: #4d4d4d; -} - @media (max-width: 425px) { .list { display: none !important; diff --git a/src/style/scrolbar.scss b/src/style/scrolbar.scss new file mode 100644 index 0000000..1e3dfc6 --- /dev/null +++ b/src/style/scrolbar.scss @@ -0,0 +1,12 @@ +// ------SCROLLBAR------ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background-color: #d1d1d19d; +} + +::-webkit-scrollbar-thumb { + background-color: #4d4d4d; +} diff --git a/src/style/svgStyle.scss b/src/style/svgStyle.scss new file mode 100644 index 0000000..d6ad5dd --- /dev/null +++ b/src/style/svgStyle.scss @@ -0,0 +1,21 @@ +// --------SVG-------- +.svg-icon { + width: 16px; + margin-left: 3px; + background-color: #bebebc; + border-radius: 5px; + cursor: pointer; + transition: 1s; + + &:hover { + transition: 1s; + background-color: #ffffff; + } +} + +.svg-icon path { + color: black; + stroke: currentcolor; + transition: 0.2s; + stroke-width: 0.5; +} diff --git a/src/style/whiteTheme.scss b/src/style/whiteTheme.scss new file mode 100644 index 0000000..4e9991e --- /dev/null +++ b/src/style/whiteTheme.scss @@ -0,0 +1,13 @@ +.selectWhite { + color: black !important; + background: rgb(248, 248, 248) !important; +} + +.caretWhite { + border-top: 6px solid black !important; +} + +.listWhite { + color: black !important; + background-color: white !important; +}