New breanch. Low file sliting
This commit is contained in:
parent
9d177262f5
commit
35c7bff4a5
@ -1,3 +1,6 @@
|
||||
import { customStyles, createSelected } from './components/utils';
|
||||
import { createBreadcrumb } from './components/create-element';
|
||||
|
||||
export class DropDown {
|
||||
#element;
|
||||
#list;
|
||||
@ -5,7 +8,6 @@ export class DropDown {
|
||||
#caret;
|
||||
#items;
|
||||
#selectedItems;
|
||||
#id = [];
|
||||
#indexes = [];
|
||||
|
||||
get value() {
|
||||
@ -81,24 +83,26 @@ export class DropDown {
|
||||
const { styles } = this.#options;
|
||||
|
||||
if (this.#options.selected) {
|
||||
this.#createSelected(this.#options.selected);
|
||||
createSelected(this.#element, this.#options.selected);
|
||||
} else {
|
||||
this.#createSelected('Select...');
|
||||
createSelected(this.#element, 'Select...');
|
||||
}
|
||||
|
||||
if (!this.#options.selected && this.#options.placeholder) {
|
||||
this.#createSelected(this.#options.placeholder);
|
||||
createSelected(this.#element, this.#options.placeholder);
|
||||
}
|
||||
|
||||
if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) {
|
||||
this.#createSelected(this.#options.placeholder);
|
||||
this.#customStyles(styles);
|
||||
} else {
|
||||
this.#customStyles(styles);
|
||||
if (styles) {
|
||||
if (this.#options.placeholder) {
|
||||
createSelected(this.#element, this.#options.placeholder, styles);
|
||||
} else if (this.#options.selected) {
|
||||
createSelected(this.#element, this.#options.selected, styles);
|
||||
}
|
||||
customStyles(this.#element, styles);
|
||||
}
|
||||
|
||||
if (select) {
|
||||
this.#createSelected(select);
|
||||
createSelected(this.#element, select, styles);
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +111,7 @@ export class DropDown {
|
||||
|
||||
if (select || (select && styles)) {
|
||||
this.#initSelected(select);
|
||||
this.#customStyles(styles);
|
||||
customStyles(this.#element, styles);
|
||||
} else {
|
||||
this.#initSelected();
|
||||
}
|
||||
@ -281,9 +285,28 @@ export class DropDown {
|
||||
selected.appendChild(ul);
|
||||
|
||||
if (this.#checkItemStruct(item)) {
|
||||
ul.appendChild(this.#createBreadcrumb(value, index, id));
|
||||
ul.appendChild(
|
||||
createBreadcrumb(
|
||||
this.#options,
|
||||
this.#element,
|
||||
this.#indexes,
|
||||
this.#selectedItems,
|
||||
value,
|
||||
index,
|
||||
id,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
ul.appendChild(this.#createBreadcrumb(value, index));
|
||||
ul.appendChild(
|
||||
createBreadcrumb(
|
||||
this.#options,
|
||||
this.#element,
|
||||
this.#indexes,
|
||||
this.#selectedItems,
|
||||
value,
|
||||
index,
|
||||
),
|
||||
);
|
||||
}
|
||||
} else {
|
||||
selected.innerText = this.#selectedItems;
|
||||
@ -329,57 +352,6 @@ export class DropDown {
|
||||
});
|
||||
}
|
||||
|
||||
#createBreadcrumb(value, index, id) {
|
||||
const { placeholder } = this.#options;
|
||||
|
||||
const selected = this.#element.querySelector('.selected');
|
||||
|
||||
const li = document.createElement('li');
|
||||
const text = document.createTextNode(value);
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
|
||||
svg.setAttribute('viewBox', '0 0 10 10');
|
||||
path1.setAttribute('d', 'M3,7 L7,3');
|
||||
path2.setAttribute('d', 'M3,3 L7,7');
|
||||
li.setAttribute('id', `tag-${index}`);
|
||||
|
||||
svg.classList.add('svg-icon');
|
||||
|
||||
svg.appendChild(path1);
|
||||
svg.appendChild(path2);
|
||||
li.appendChild(text);
|
||||
li.appendChild(svg);
|
||||
|
||||
svg.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
const deleteIcon = this.#indexes.indexOf(index);
|
||||
|
||||
this.#indexes.splice(deleteIcon, 1);
|
||||
this.#selectedItems.splice(deleteIcon, 1);
|
||||
|
||||
let checkBox = '';
|
||||
if (id) {
|
||||
checkBox = document.getElementById(`chbox-${id}`);
|
||||
} else {
|
||||
checkBox = document.getElementById(`chbox-${index}`);
|
||||
}
|
||||
|
||||
checkBox.checked = false;
|
||||
checkBox.parentElement.classList.remove('active');
|
||||
|
||||
if (!this.#selectedItems.length) {
|
||||
selected.innerText = placeholder;
|
||||
}
|
||||
|
||||
li.parentElement.removeChild(li);
|
||||
});
|
||||
|
||||
return li;
|
||||
}
|
||||
|
||||
#initEvent() {
|
||||
const { event } = this.#options;
|
||||
if (!event) {
|
||||
@ -401,60 +373,6 @@ export class DropDown {
|
||||
}
|
||||
}
|
||||
|
||||
#customStyles(styles) {
|
||||
if (!styles) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { head, caret, placeholder } = styles;
|
||||
const select = this.#element.querySelector('.cg-select');
|
||||
const crt = this.#element.querySelector('.caret');
|
||||
|
||||
const placeh = this.#element.querySelector('.selected');
|
||||
|
||||
if (head) {
|
||||
Object.entries(head).forEach(([key, value]) => {
|
||||
select.style[key] = value;
|
||||
});
|
||||
}
|
||||
|
||||
if (caret) {
|
||||
Object.entries(caret).forEach(([key, value]) => {
|
||||
crt.style[key] = value;
|
||||
});
|
||||
}
|
||||
|
||||
if (placeh) {
|
||||
if (placeholder) {
|
||||
Object.entries(placeholder).forEach(([key, value]) => {
|
||||
placeh.style[key] = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#createSelected(content, styles) {
|
||||
if (content) {
|
||||
this.#element.innerHTML = `
|
||||
<div class="cg-select">
|
||||
<p class="selected">${content}</p>
|
||||
<div class="caret"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (styles) {
|
||||
this.#customStyles(styles);
|
||||
|
||||
this.#element.innerHTML = `
|
||||
<div class="cg-select" style = "${styles}">
|
||||
<span class="selected" style = "${styles}">${content}</span>
|
||||
<div class="caret" style = "${styles}"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
#checkItemStruct(item) {
|
||||
if (item && typeof item !== 'object') {
|
||||
return false;
|
||||
|
||||
50
src/components/create-element.js
Normal file
50
src/components/create-element.js
Normal file
@ -0,0 +1,50 @@
|
||||
export function createBreadcrumb(options, element, indexes, selectedItems, value, index, id) {
|
||||
const { placeholder } = options;
|
||||
|
||||
const selected = element.querySelector('.selected');
|
||||
|
||||
const li = document.createElement('li');
|
||||
const text = document.createTextNode(value);
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
|
||||
svg.setAttribute('viewBox', '0 0 10 10');
|
||||
path1.setAttribute('d', 'M3,7 L7,3');
|
||||
path2.setAttribute('d', 'M3,3 L7,7');
|
||||
li.setAttribute('id', `tag-${index}`);
|
||||
|
||||
svg.classList.add('svg-icon');
|
||||
|
||||
svg.appendChild(path1);
|
||||
svg.appendChild(path2);
|
||||
li.appendChild(text);
|
||||
li.appendChild(svg);
|
||||
|
||||
svg.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
const deleteIcon = indexes.indexOf(index);
|
||||
|
||||
indexes.splice(deleteIcon, 1);
|
||||
selectedItems.splice(deleteIcon, 1);
|
||||
|
||||
let checkBox = '';
|
||||
if (id) {
|
||||
checkBox = document.getElementById(`chbox-${id}`);
|
||||
} else {
|
||||
checkBox = document.getElementById(`chbox-${index}`);
|
||||
}
|
||||
|
||||
checkBox.checked = false;
|
||||
checkBox.parentElement.classList.remove('active');
|
||||
|
||||
if (!selectedItems.length) {
|
||||
selected.innerText = placeholder;
|
||||
}
|
||||
|
||||
li.parentElement.removeChild(li);
|
||||
});
|
||||
|
||||
return li;
|
||||
}
|
||||
53
src/components/utils.js
Normal file
53
src/components/utils.js
Normal file
@ -0,0 +1,53 @@
|
||||
export function createSelected(element, content, styles) {
|
||||
if (content) {
|
||||
element.innerHTML = `
|
||||
<div class="cg-select">
|
||||
<p class="selected">${content}</p>
|
||||
<div class="caret"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (styles) {
|
||||
customStyles(element, styles);
|
||||
|
||||
element.innerHTML = `
|
||||
<div class="cg-select" style = "${styles}">
|
||||
<span class="selected" style = "${styles}">${content}</span>
|
||||
<div class="caret" style = "${styles}"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export function customStyles(element, styles) {
|
||||
if (!styles) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { head, caret, placeholder } = styles;
|
||||
const select = 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;
|
||||
});
|
||||
}
|
||||
|
||||
if (caret) {
|
||||
Object.entries(caret).forEach(([key, value]) => {
|
||||
crt.style[key] = value;
|
||||
});
|
||||
}
|
||||
|
||||
if (placeh) {
|
||||
if (placeholder) {
|
||||
Object.entries(placeholder).forEach(([key, value]) => {
|
||||
placeh.style[key] = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,11 @@ const dropdown = new DropDown({
|
||||
selector: '.cg-dropdown',
|
||||
placeholder: 'Выберите авто',
|
||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
||||
styles: {
|
||||
head: {
|
||||
background: 'red',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
});
|
||||
@ -42,6 +47,7 @@ const dropdown2 = new DropDown({
|
||||
value: '5',
|
||||
},
|
||||
],
|
||||
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user