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

Method disabled in finish. Refactoring core select

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-12 22:40:57 +03:00
parent 9099bcbc81
commit 3a031a864e
5 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/cg-dropdown.js
View File

@ -1,9 +1,8 @@
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 {
#element; #element;
#selector;
#list; #list;
#options; #options;
#caret; #caret;
@ -80,6 +79,18 @@ export class DropDown {
return this.#items[number]; 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) { #init(options) {
this.#options = options; this.#options = options;
const { items, multiselect, url } = this.#options; const { items, multiselect, url } = this.#options;
@ -111,7 +122,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,
@ -147,9 +158,6 @@ 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) {
@ -162,10 +170,6 @@ 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) {
@ -215,12 +219,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,
}; };
@ -313,7 +316,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);
@ -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 {
}
}
} }

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

6
src/index.html
View File

@ -9,11 +9,11 @@
</head> </head>
<body> <body>
<div class="container"> <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> </div>
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>

7
src/index.js
View File

@ -6,7 +6,7 @@ const dropdown = new DropDown({
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
styles: { styles: {
head: { head: {
background: 'red', background: '#4d629f',
}, },
}, },
multiselect: true, multiselect: true,
@ -55,7 +55,7 @@ const dropdown2 = new DropDown({
}); });
dropdown2.addItem('LADA'); dropdown2.addItem('LADA');
dropdown.disabled(true); dropdown.disabled(false);
//ToDo: paste the desired url; //ToDo: paste the desired url;
@ -65,7 +65,8 @@ const dropdown3 = new DropDown({
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,

36
src/style/main.scss
View File

@ -4,29 +4,36 @@
} }
body { body {
background: #1b1e25; background: #4a4a4a;
} }
.container { .container {
margin: 0 auto;
display: flex; display: flex;
margin: 50px auto; align-items: baseline;
justify-content: space-between; justify-content: space-between;
width: 800px; width: 900px;
}
.content {
border: 1px solid #616161;
height: 500px;
} }
.cg-dropdown { .cg-dropdown {
* { min-width: 235px;
margin-left: 0;
position: relative; position: relative;
margin: 0;
// max-height: 60px; padding: 0;
} border: none;
border-radius: 10px;
} }
.cg-select { .cg-select {
padding: 5px; padding: 5px;
min-width: 235px;
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;
@ -40,7 +47,8 @@ body {
transition: 0.5s; transition: 0.5s;
.selected { .selected {
max-width: 200px; max-width: 195px;
margin: 5px; margin: 5px;
} }
@ -75,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;
@ -92,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;
@ -134,6 +147,7 @@ body {
input[type='checkbox'] { input[type='checkbox'] {
cursor: pointer; cursor: pointer;
margin: 0 5px 0 0;
} }
.svg-icon { .svg-icon {