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

Merge pull request #7 from apuc/add-disabled-fn

Browse Source 
Add disabled function
This commit is contained in:
MaxOvs19 2022-10-13 12:39:10 +03:00 committed by GitHub
commit b2dd417ba6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/cg-dropdown.js
View File

@ -1,4 +1,4 @@
import { customStyles, createSelected } from './components/utils';
import { customStyles, createSelected, checkItemStruct } from './components/utils';
import { createBreadcrumb } from './components/create-element';
export class DropDown {
@ -79,6 +79,21 @@ export class DropDown {
return this.#items[number];
}
disabled(value) {
if (typeof value !== 'boolean') {
return;
}
const select = this.#element.querySelector('.cg-select');
if (value === true) {
this.#element.setAttribute('disabled', true);
select.classList.add('disabled');
} else {
this.#element.removeAttribute('disabled');
select.classList.remove('disabled');
}
}
#init(options) {
this.#options = options;
const { items, multiselect, url } = this.#options;
@ -110,7 +125,7 @@ export class DropDown {
const random = Math.random().toString(36).substring(2, 10);
let item = {};
if (this.#checkItemStruct(dataItem)) {
if (checkItemStruct(dataItem)) {
item = {
id: dataItem.id,
title: dataItem.title,
@ -149,7 +164,7 @@ export class DropDown {
}
#render(select) {
const { styles, multiselect } = this.#options;
const { styles, multiselect, event } = this.#options;
if (select || (select && styles)) {
this.#initSelected(select);
@ -207,12 +222,11 @@ export class DropDown {
}
const response = await fetch(url);
const dataUrl = await response.json();
dataUrl.forEach((dataItem, index) => {
const item = {
id: dataItem.phone,
id: dataItem.id,
title: dataItem.name,
value: index,
};
@ -305,7 +319,7 @@ export class DropDown {
} else {
if (multiselectTag) {
const tagItem = document.getElementById(`tag-${index}`);
// TODO: bug error! in url
ul.removeChild(tagItem);
}
this.#indexes.splice(checkIndex, 1);
@ -352,21 +366,10 @@ export class DropDown {
this.#element.addEventListener(event, () => {
this.#open();
});
this.#element.addEventListener('mouseleave', () => {
this.#close();
});
}
}
}
#checkItemStruct(item) {
if (item && typeof item !== 'object') {
return false;
}
return (
item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value')
);
}
}

12
src/components/utils.js
View File

@ -26,14 +26,14 @@ export function customStyles(element, styles) {
}
const { head, caret, placeholder } = styles;
const select = element.querySelector('.cg-select');
const cgSelect = element.querySelector('.cg-select');
const crt = element.querySelector('.caret');
const placeh = element.querySelector('.selected');
if (head) {
Object.entries(head).forEach(([key, value]) => {
select.style[key] = value;
cgSelect.style[key] = value;
});
}
@ -51,3 +51,11 @@ export function customStyles(element, styles) {
}
}
}
export function checkItemStruct(item) {
if (item && typeof item !== 'object') {
return false;
}
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
}

6
src/index.html
View File

@ -9,11 +9,11 @@
</head>
<body>
<div class="container">
<div class="cg-dropdown"></div>
<button class="cg-dropdown cg-dropdown_one"></button>
<div class="cg-dropdown2"></div>
<button class="cg-dropdown cg-dropdown_two"></button>
<div class="cg-dropdown3" style="margin-left: 15px"></div>
<button class="cg-dropdown cg-dropdown_three"></button>
</div>
</body>
<script type="module" src="index.js"></script>

18
src/index.js
View File

@ -1,14 +1,10 @@
import { DropDown } from './cg-dropdown';
const dropdown = new DropDown({
selector: '.cg-dropdown',
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
styles: {
head: {
background: 'red',
},
},
multiselect: true,
multiselectTag: true,
});
@ -19,9 +15,8 @@ dropdown.addItem('Kamaz 258');
dropdown.addItem('BMW');
const dropdown2 = new DropDown({
selector: '.cg-dropdown2',
selector: '.cg-dropdown_two',
placeholder: 'SELECT CAR',
items: [
{
id: 'addaw21',
@ -55,17 +50,20 @@ const dropdown2 = new DropDown({
// multiselectTag: true,
});
dropdown.disabled(false);
dropdown2.addItem('LADA');
//ToDo: paste the desired url;
const dropdown3 = new DropDown({
selector: '.cg-dropdown3',
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'http://jsonplaceholder.typicode.com/users',
styles: {
head: {
background: 'red',
background: 'black',
width: '350px',
},
},
multiselect: true,

37
src/style/main.scss
View File

@ -4,24 +4,35 @@
}
body {
background: #1b1e25;
background: #4a4a4a;
}
.container {
margin: 0 auto;
display: flex;
margin: 50px auto;
width: 800px;
align-items: baseline;
justify-content: space-between;
width: 900px;
}
.content {
border: 1px solid #616161;
height: 500px;
}
.cg-dropdown {
min-width: 235px;
margin-left: 0;
position: relative;
margin-right: 10px;
margin: 0;
padding: 0;
border: none;
border-radius: 10px;
}
.cg-select {
padding: 5px;
min-width: 225px;
max-width: 225px;
min-height: 50px;
color: #fff;
display: flex;
@ -30,12 +41,14 @@ body {
text-overflow: ellipsis;
background: #2a2f3b;
border: none;
cursor: pointer;
border-radius: 5px;
transition: 0.5s;
.selected {
max-width: 200px;
max-width: 195px;
margin: 5px;
}
@ -70,6 +83,7 @@ body {
max-height: 230px;
overflow-y: auto;
position: absolute;
width: 220px;
padding: 7px;
margin-top: -0.2px;
@ -87,6 +101,10 @@ body {
z-index: 1;
&__item {
display: flex;
flex-direction: row;
align-items: center;
transition: 0.5s;
padding: 15px;
@ -129,6 +147,7 @@ body {
input[type='checkbox'] {
cursor: pointer;
margin: 0 5px 0 0;
}
.svg-icon {
@ -172,3 +191,7 @@ input[type='checkbox'] {
::-webkit-scrollbar-thumb {
background-color: #4d4d4d;
}
.disabled {
background-color: #8f9195 !important;
}