Fixed bug and added disaible fn.
This commit is contained in:
parent
0585b01ca3
commit
9099bcbc81
@ -3,6 +3,7 @@ import { createBreadcrumb } from './components/create-element';
|
||||
|
||||
export class DropDown {
|
||||
#element;
|
||||
#selector;
|
||||
#list;
|
||||
#options;
|
||||
#caret;
|
||||
@ -146,10 +147,13 @@ export class DropDown {
|
||||
if (select) {
|
||||
createSelected(this.#element, select, styles);
|
||||
}
|
||||
|
||||
const selector = this.#element.querySelector('.cg-select');
|
||||
this.#selector = selector;
|
||||
}
|
||||
|
||||
#render(select) {
|
||||
const { styles, multiselect } = this.#options;
|
||||
const { styles, multiselect, event } = this.#options;
|
||||
|
||||
if (select || (select && styles)) {
|
||||
this.#initSelected(select);
|
||||
@ -158,6 +162,10 @@ export class DropDown {
|
||||
this.#initSelected();
|
||||
}
|
||||
|
||||
// if (event) {
|
||||
// this.#initEvent();
|
||||
// }
|
||||
|
||||
const ulList = document.createElement('ul');
|
||||
|
||||
if (styles) {
|
||||
@ -352,7 +360,6 @@ export class DropDown {
|
||||
this.#element.addEventListener(event, () => {
|
||||
this.#open();
|
||||
});
|
||||
|
||||
this.#element.addEventListener('mouseleave', () => {
|
||||
this.#close();
|
||||
});
|
||||
@ -369,4 +376,16 @@ export class DropDown {
|
||||
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 = `
|
||||
<div class="cg-select">
|
||||
<button class="cg-select">
|
||||
<p class="selected">${content}</p>
|
||||
<div class="caret"></div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -12,10 +12,10 @@ export function createSelected(element, content, styles) {
|
||||
customStyles(element, styles);
|
||||
|
||||
element.innerHTML = `
|
||||
<div class="cg-select" style = "${styles}">
|
||||
<button class="cg-select" style = "${styles}">
|
||||
<span class="selected" style = "${styles}">${content}</span>
|
||||
<div class="caret" style = "${styles}"></div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="cg-dropdown"></div>
|
||||
<div class="cg-dropdown cg-dropdown_one"></div>
|
||||
|
||||
<div class="cg-dropdown2"></div>
|
||||
<div class="cg-dropdown cg-dropdown_two"></div>
|
||||
|
||||
<div class="cg-dropdown3" style="margin-left: 15px"></div>
|
||||
<div class="cg-dropdown cg-dropdown_three"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="module" src="index.js"></script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { DropDown } from './cg-dropdown';
|
||||
|
||||
const dropdown = new DropDown({
|
||||
selector: '.cg-dropdown',
|
||||
selector: '.cg-dropdown_one',
|
||||
placeholder: 'Выберите авто',
|
||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
||||
styles: {
|
||||
@ -19,9 +19,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',
|
||||
@ -56,11 +55,12 @@ const dropdown2 = new DropDown({
|
||||
});
|
||||
|
||||
dropdown2.addItem('LADA');
|
||||
dropdown.disabled(true);
|
||||
|
||||
//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: {
|
||||
|
||||
@ -10,19 +10,23 @@ body {
|
||||
.container {
|
||||
display: flex;
|
||||
margin: 50px auto;
|
||||
justify-content: space-between;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.cg-dropdown {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
* {
|
||||
position: relative;
|
||||
|
||||
// max-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.cg-select {
|
||||
padding: 5px;
|
||||
min-width: 225px;
|
||||
min-width: 235px;
|
||||
max-width: 225px;
|
||||
min-height: 50px;
|
||||
min-height: 60px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -30,6 +34,7 @@ body {
|
||||
|
||||
text-overflow: ellipsis;
|
||||
background: #2a2f3b;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: 0.5s;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user