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'; import { createBreadcrumb } from './components/create-element';
export class DropDown { export class DropDown {
@ -79,6 +79,21 @@ export class DropDown {
return this.#items[number]; 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) { #init(options) {
this.#options = options; this.#options = options;
const { items, multiselect, url } = this.#options; const { items, multiselect, url } = this.#options;
@ -110,7 +125,7 @@ export class DropDown {
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
let item = {}; let item = {};
if (this.#checkItemStruct(dataItem)) { if (checkItemStruct(dataItem)) {
item = { item = {
id: dataItem.id, id: dataItem.id,
title: dataItem.title, title: dataItem.title,
@ -149,7 +164,7 @@ export class DropDown {
} }
#render(select) { #render(select) {
const { styles, multiselect } = this.#options; const { styles, multiselect, event } = this.#options;
if (select || (select && styles)) { if (select || (select && styles)) {
this.#initSelected(select); this.#initSelected(select);
@ -207,12 +222,11 @@ export class DropDown {
} }
const response = await fetch(url); const response = await fetch(url);
const dataUrl = await response.json(); const dataUrl = await response.json();
dataUrl.forEach((dataItem, index) => { dataUrl.forEach((dataItem, index) => {
const item = { const item = {
id: dataItem.phone, id: dataItem.id,
title: dataItem.name, title: dataItem.name,
value: index, value: index,
}; };
@ -305,7 +319,7 @@ export class DropDown {
} else { } else {
if (multiselectTag) { if (multiselectTag) {
const tagItem = document.getElementById(`tag-${index}`); const tagItem = document.getElementById(`tag-${index}`);
// TODO: bug error! in url
ul.removeChild(tagItem); ul.removeChild(tagItem);
} }
this.#indexes.splice(checkIndex, 1); this.#indexes.splice(checkIndex, 1);
@ -352,21 +366,10 @@ export class DropDown {
this.#element.addEventListener(event, () => { this.#element.addEventListener(event, () => {
this.#open(); this.#open();
}); });
this.#element.addEventListener('mouseleave', () => { this.#element.addEventListener('mouseleave', () => {
this.#close(); 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 { head, caret, placeholder } = styles;
const select = element.querySelector('.cg-select'); const cgSelect = element.querySelector('.cg-select');
const crt = element.querySelector('.caret'); const crt = element.querySelector('.caret');
const placeh = element.querySelector('.selected'); const placeh = element.querySelector('.selected');
if (head) { if (head) {
Object.entries(head).forEach(([key, value]) => { 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> </head>
<body> <body>
<div class="container"> <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> </div>
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>

18
src/index.js
View File

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

37
src/style/main.scss
View File

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