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

Fixed methods search and Exemple page

Browse Source
This commit is contained in:
Макс Овсяников 2022-11-17 21:21:06 +03:00
parent 3160b3d14b
commit 6295b10c6d
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>
<div id="main">
<h1 class="page-title">Home</h1>
<section>
<h2>CG-SELECT</h2>
<a href="../src/index.html">-- Вернуться к примеру --</a>
<p>
Этот компонент предлагает более гибкую настройку и использование селекта. Так же
реализованны методы взаимодействия с селектом
реализованны методы взаимодействия с селектом.
</p>
<h5>Для создания компонета нужно:</h5>

13
src/cg-dropdown.js
View File

@ -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');

13
src/index.html
View File

@ -10,8 +10,17 @@
<body>
<div class="container">
<header class="header">
<h1>CG-SELECT</h1>
<img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
<div class="header__logoBox">
<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>
</div>

7
src/index.js
View File

@ -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,
});

42
src/style/ExemplePage.scss
View File

@ -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;
}
}
}
}
}