Method disabled in finish. Refactoring core select
This commit is contained in:
parent
9099bcbc81
commit
3a031a864e
@ -1,9 +1,8 @@
|
||||
import { customStyles, createSelected } from './components/utils';
|
||||
import { customStyles, createSelected, checkItemStruct } from './components/utils';
|
||||
import { createBreadcrumb } from './components/create-element';
|
||||
|
||||
export class DropDown {
|
||||
#element;
|
||||
#selector;
|
||||
#list;
|
||||
#options;
|
||||
#caret;
|
||||
@ -80,6 +79,18 @@ export class DropDown {
|
||||
return this.#items[number];
|
||||
}
|
||||
|
||||
disabled(value) {
|
||||
if (typeof value !== 'boolean') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value === true) {
|
||||
this.#element.setAttribute('disabled', true);
|
||||
} else {
|
||||
this.#element.removeAttribute('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
#init(options) {
|
||||
this.#options = options;
|
||||
const { items, multiselect, url } = this.#options;
|
||||
@ -111,7 +122,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,
|
||||
@ -147,9 +158,6 @@ export class DropDown {
|
||||
if (select) {
|
||||
createSelected(this.#element, select, styles);
|
||||
}
|
||||
|
||||
const selector = this.#element.querySelector('.cg-select');
|
||||
this.#selector = selector;
|
||||
}
|
||||
|
||||
#render(select) {
|
||||
@ -162,10 +170,6 @@ export class DropDown {
|
||||
this.#initSelected();
|
||||
}
|
||||
|
||||
// if (event) {
|
||||
// this.#initEvent();
|
||||
// }
|
||||
|
||||
const ulList = document.createElement('ul');
|
||||
|
||||
if (styles) {
|
||||
@ -215,12 +219,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,
|
||||
};
|
||||
@ -313,7 +316,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);
|
||||
@ -366,26 +369,4 @@ export class DropDown {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#checkItemStruct(item) {
|
||||
if (item && typeof item !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value')
|
||||
);
|
||||
}
|
||||
|
||||
disabled(value) {
|
||||
// if (typeof value !== 'boolean') {
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (value == true) {
|
||||
const select = this.#element.querySelector('.cg-select');
|
||||
// return console.log('Work');
|
||||
} else {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
export function createSelected(element, content, styles) {
|
||||
if (content) {
|
||||
element.innerHTML = `
|
||||
<button class="cg-select">
|
||||
<div class="cg-select">
|
||||
<p class="selected">${content}</p>
|
||||
<div class="caret"></div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -12,10 +12,10 @@ export function createSelected(element, content, styles) {
|
||||
customStyles(element, styles);
|
||||
|
||||
element.innerHTML = `
|
||||
<button class="cg-select" style = "${styles}">
|
||||
<span class="selected" style = "${styles}">${content}</span>
|
||||
<div class="caret" style = "${styles}"></div>
|
||||
</button>
|
||||
<div class="cg-select" style = "${styles}">
|
||||
<span class="selected" style = "${styles}">${content}</span>
|
||||
<div class="caret" style = "${styles}"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -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');
|
||||
}
|
||||
|
||||
@ -9,11 +9,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="cg-dropdown cg-dropdown_one"></div>
|
||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||
|
||||
<div class="cg-dropdown cg-dropdown_two"></div>
|
||||
<button class="cg-dropdown cg-dropdown_two"></button>
|
||||
|
||||
<div class="cg-dropdown cg-dropdown_three"></div>
|
||||
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||
</div>
|
||||
</body>
|
||||
<script type="module" src="index.js"></script>
|
||||
|
||||
@ -6,7 +6,7 @@ const dropdown = new DropDown({
|
||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
||||
styles: {
|
||||
head: {
|
||||
background: 'red',
|
||||
background: '#4d629f',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
@ -55,7 +55,7 @@ const dropdown2 = new DropDown({
|
||||
});
|
||||
|
||||
dropdown2.addItem('LADA');
|
||||
dropdown.disabled(true);
|
||||
dropdown.disabled(false);
|
||||
|
||||
//ToDo: paste the desired url;
|
||||
|
||||
@ -65,7 +65,8 @@ const dropdown3 = new DropDown({
|
||||
url: 'http://jsonplaceholder.typicode.com/users',
|
||||
styles: {
|
||||
head: {
|
||||
background: 'red',
|
||||
background: 'black',
|
||||
width: '350px',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
|
||||
@ -4,29 +4,36 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: #1b1e25;
|
||||
background: #4a4a4a;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
margin: 50px auto;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
width: 800px;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border: 1px solid #616161;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.cg-dropdown {
|
||||
* {
|
||||
position: relative;
|
||||
|
||||
// max-height: 60px;
|
||||
}
|
||||
min-width: 235px;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cg-select {
|
||||
padding: 5px;
|
||||
min-width: 235px;
|
||||
max-width: 225px;
|
||||
min-height: 60px;
|
||||
|
||||
min-height: 50px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -40,7 +47,8 @@ body {
|
||||
transition: 0.5s;
|
||||
|
||||
.selected {
|
||||
max-width: 200px;
|
||||
max-width: 195px;
|
||||
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
@ -75,6 +83,7 @@ body {
|
||||
max-height: 230px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
|
||||
width: 220px;
|
||||
padding: 7px;
|
||||
margin-top: -0.2px;
|
||||
@ -92,6 +101,10 @@ body {
|
||||
z-index: 1;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
transition: 0.5s;
|
||||
padding: 15px;
|
||||
|
||||
@ -134,6 +147,7 @@ body {
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user