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

Merge pull request #26 from apuc/add-search-customization

Browse Source 
Fixed methods search and Example page
This commit is contained in:
MaxOvs19 2022-11-17 21:29:50 +03:00 committed by GitHub
commit 3c3f8604a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 65 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
documentation/index.html
View File

@ -16,11 +16,13 @@
<body> <body>
<div id="main"> <div id="main">
<h1 class="page-title">Home</h1> <h1 class="page-title">Home</h1>
<section> <section>
<h2>CG-SELECT</h2> <h2>CG-SELECT</h2>
<a href="../src/index.html">-- Вернуться к примеру --</a>
<p> <p>
Этот компонент предлагает более гибкую настройку и использование селекта. Так же Этот компонент предлагает более гибкую настройку и использование селекта. Так же
реализованны методы взаимодействия с селектом реализованны методы взаимодействия с селектом.
</p> </p>
<h5>Для создания компонета нужно:</h5> <h5>Для создания компонета нужно:</h5>

13
src/cg-dropdown.js
View File

@ -388,6 +388,8 @@ export class DropDown {
*/ */
#render(select) { #render(select) {
const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options; const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
const { list, search } = styles;
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
if (select || (select && styles)) { if (select || (select && styles)) {
@ -409,14 +411,13 @@ export class DropDown {
} else { } else {
intputSearch = createInputSearch(random, en.placeholder); intputSearch = createInputSearch(random, en.placeholder);
} }
customStylesFormat(search, intputSearch);
ulList.appendChild(intputSearch); ulList.appendChild(intputSearch);
} }
ulList.classList.add('list'); ulList.classList.add('list');
if (styles) { if (styles) {
const { list } = styles;
customStylesFormat(list, ulList); customStylesFormat(list, ulList);
} }
@ -756,15 +757,15 @@ export class DropDown {
}); });
input.oninput = function () { input.oninput = function () {
let val = this.value.trim(); let valueSearch = this.value.trim().toLowerCase();
let anyMatch = false; let anyMatch = false;
if (val != '') { if (valueSearch != '') {
searchSelect.forEach((elem) => { searchSelect.forEach((elem) => {
let isMatching = new RegExp(val, 'gi').test(elem.textContent); let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
anyMatch = anyMatch || isMatching; anyMatch = anyMatch || isMatching;
if (elem.innerText.search(val) == -1) { if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
elem.classList.add('displayHide'); elem.classList.add('displayHide');
} else { } else {
elem.classList.remove('displayHide'); elem.classList.remove('displayHide');

13
src/index.html
View File

@ -10,8 +10,17 @@
<body> <body>
<div class="container"> <div class="container">
<header class="header"> <header class="header">
<h1>CG-SELECT</h1> <div class="header__logoBox">
<img src="/src/images/logoCG.jpg" alt="#" class="header__logo" /> <h1>CG-SELECT</h1>
<img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
</div>
<hr style="width: 55%" />
<nav>
<ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="../documentation/index.html">Documentation</a></li>
</ul>
</nav>
</header> </header>
</div> </div>

7
src/index.js
View File

@ -130,6 +130,13 @@ const dropdownBtn = new DropDown({
caret: { caret: {
borderTop: '6px solid black', borderTop: '6px solid black',
}, },
search: {
backgroundColor: '#d7ffff',
borderRadius: '5px',
borderBottom: 'none',
width: '95%',
color: 'black',
},
}, },
multiselect: true, multiselect: true,
}); });

42
src/style/ExemplePage.scss
View File

@ -1,10 +1,9 @@
.header { .header {
width: 100%; width: 100%;
height: 130px;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; flex-direction: column;
background-color: #2a2f3b; background-color: #2a2f3b;
margin-bottom: 8px; margin-bottom: 8px;
@ -12,13 +11,46 @@
font-size: 57px; font-size: 57px;
color: white; color: white;
font-family: 'Times New Roman', Times, serif; 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 { &__logo {
width: 11%; width: 13%;
margin-left: 25px; height: 16%;
border-radius: 60px;
border: 1px solid #525252; 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;
}
}
}
} }
} }