From 6295b10c6d725f38ee2fed377287202b513abb83 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Thu, 17 Nov 2022 21:21:06 +0300 Subject: [PATCH] Fixed methods search and Exemple page --- documentation/index.html | 4 +++- src/cg-dropdown.js | 13 ++++++------ src/index.html | 13 ++++++++++-- src/index.js | 7 +++++++ src/style/ExemplePage.scss | 42 +++++++++++++++++++++++++++++++++----- 5 files changed, 65 insertions(+), 14 deletions(-) diff --git a/documentation/index.html b/documentation/index.html index 806c98f..e9d92a7 100644 --- a/documentation/index.html +++ b/documentation/index.html @@ -16,11 +16,13 @@

Home

+

CG-SELECT

+ -- Вернуться к примеру --

Этот компонент предлагает более гибкую настройку и использование селекта. Так же - реализованны методы взаимодействия с селектом + реализованны методы взаимодействия с селектом.

Для создания компонета нужно:
diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 5ad7e7f..9bab76a 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -388,6 +388,8 @@ export class DropDown { */ #render(select) { const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options; + const { list, search } = styles; + const random = Math.random().toString(36).substring(2, 10); if (select || (select && styles)) { @@ -409,14 +411,13 @@ export class DropDown { } else { intputSearch = createInputSearch(random, en.placeholder); } - + customStylesFormat(search, intputSearch); ulList.appendChild(intputSearch); } ulList.classList.add('list'); if (styles) { - const { list } = styles; customStylesFormat(list, ulList); } @@ -756,15 +757,15 @@ export class DropDown { }); input.oninput = function () { - let val = this.value.trim(); + let valueSearch = this.value.trim().toLowerCase(); let anyMatch = false; - if (val != '') { + if (valueSearch != '') { searchSelect.forEach((elem) => { - let isMatching = new RegExp(val, 'gi').test(elem.textContent); + let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent); anyMatch = anyMatch || isMatching; - if (elem.innerText.search(val) == -1) { + if (elem.textContent.toLowerCase().search(valueSearch) == -1) { elem.classList.add('displayHide'); } else { elem.classList.remove('displayHide'); diff --git a/src/index.html b/src/index.html index 60d7b7b..d5d45f0 100644 --- a/src/index.html +++ b/src/index.html @@ -10,8 +10,17 @@
-

CG-SELECT

- +
+

CG-SELECT

+ +
+
+
diff --git a/src/index.js b/src/index.js index 1c7451f..b57cbb2 100644 --- a/src/index.js +++ b/src/index.js @@ -130,6 +130,13 @@ const dropdownBtn = new DropDown({ caret: { borderTop: '6px solid black', }, + search: { + backgroundColor: '#d7ffff', + borderRadius: '5px', + borderBottom: 'none', + width: '95%', + color: 'black', + }, }, multiselect: true, }); diff --git a/src/style/ExemplePage.scss b/src/style/ExemplePage.scss index 587de21..94b5af5 100644 --- a/src/style/ExemplePage.scss +++ b/src/style/ExemplePage.scss @@ -1,10 +1,9 @@ .header { width: 100%; - height: 130px; border-radius: 5px; display: flex; align-items: center; - justify-content: center; + flex-direction: column; background-color: #2a2f3b; margin-bottom: 8px; @@ -12,13 +11,46 @@ font-size: 57px; color: white; font-family: 'Times New Roman', Times, serif; + margin: 40px 0 12px 0; + } + + &__logoBox { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; } &__logo { - width: 11%; - margin-left: 25px; - border-radius: 60px; + width: 13%; + height: 16%; border: 1px solid #525252; + border-radius: 50%; + + margin: 22px 0 0 29px; + } + + .navlist { + display: flex; + justify-content: space-around; + margin: 15px 0 30px 0; + padding: 0; + width: 230px; + + li { + display: inline; + list-style: none; + text-decoration: none; + + a { + color: white; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } } }