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

Fixed bug and added disaible fn.

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-12 14:36:49 +03:00
parent 0585b01ca3
commit 9099bcbc81
5 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/cg-dropdown.js
View File

@ -3,6 +3,7 @@ import { createBreadcrumb } from './components/create-element';
export class DropDown { export class DropDown {
#element; #element;
#selector;
#list; #list;
#options; #options;
#caret; #caret;
@ -146,10 +147,13 @@ export class DropDown {
if (select) { if (select) {
createSelected(this.#element, select, styles); createSelected(this.#element, select, styles);
} }
const selector = this.#element.querySelector('.cg-select');
this.#selector = selector;
} }
#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);
@ -158,6 +162,10 @@ export class DropDown {
this.#initSelected(); this.#initSelected();
} }
// if (event) {
// this.#initEvent();
// }
const ulList = document.createElement('ul'); const ulList = document.createElement('ul');
if (styles) { if (styles) {
@ -352,7 +360,6 @@ 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();
}); });
@ -369,4 +376,16 @@ export class DropDown {
item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value') 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 {
}
}
} }

12
src/components/utils.js
View File

@ -1,10 +1,10 @@
export function createSelected(element, content, styles) { export function createSelected(element, content, styles) {
if (content) { if (content) {
element.innerHTML = ` element.innerHTML = `
<div class="cg-select"> <button class="cg-select">
<p class="selected">${content}</p> <p class="selected">${content}</p>
<div class="caret"></div> <div class="caret"></div>
</div> </button>
`; `;
} }
@ -12,10 +12,10 @@ export function createSelected(element, content, styles) {
customStyles(element, styles); customStyles(element, styles);
element.innerHTML = ` element.innerHTML = `
<div class="cg-select" style = "${styles}"> <button class="cg-select" style = "${styles}">
<span class="selected" style = "${styles}">${content}</span> <span class="selected" style = "${styles}">${content}</span>
<div class="caret" style = "${styles}"></div> <div class="caret" style = "${styles}"></div>
</div> </button>
`; `;
} }
} }
@ -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;
}); });
} }

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> <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> </div>
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>

8
src/index.js
View File

@ -1,7 +1,7 @@
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: { styles: {
@ -19,9 +19,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',
@ -56,11 +55,12 @@ const dropdown2 = new DropDown({
}); });
dropdown2.addItem('LADA'); dropdown2.addItem('LADA');
dropdown.disabled(true);
//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: {

13
src/style/main.scss
View File

@ -10,19 +10,23 @@ body {
.container { .container {
display: flex; display: flex;
margin: 50px auto; margin: 50px auto;
justify-content: space-between;
width: 800px; width: 800px;
} }
.cg-dropdown { .cg-dropdown {
position: relative; * {
margin-right: 10px; position: relative;
// max-height: 60px;
}
} }
.cg-select { .cg-select {
padding: 5px; padding: 5px;
min-width: 225px; min-width: 235px;
max-width: 225px; max-width: 225px;
min-height: 50px; min-height: 60px;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -30,6 +34,7 @@ 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;