MaxOvs19/Example-CG-SELECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed bugs

Browse Source
This commit is contained in:
MaxOvs19
2023-03-02 19:45:03 +03:00
parent 67bd0cf7f2
commit 5fc17c7c2d
4 changed files with 65 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/constructor/constructor.js
View File

@ -1,44 +1,45 @@
import CGSelect from 'cg-select';
import CGSelect from "cg-select";
const body = new CGSelect({
selector: '.body',
placeholder: 'Select element to style',
items: ['head', 'list', 'placeholder', 'caret', 'search'],
selector: ".body",
placeholder: "Select element to style",
items: ["head", "list", "placeholder", "caret", "search"],
});
let head = '';
let list = '';
let placeholder = '';
let caret = '';
let valueSelect = '';
let head = "";
let list = "";
let placeholder = "";
let caret = "";
let valueSelect = "";
let search = "";
const textarea = document.querySelector('#styles');
const renderBtn = document.querySelector('.render');
const textarea = document.querySelector("#styles");
const renderBtn = document.querySelector(".render");
body.on('select', (e, value) => {
body.on("select", (e, value) => {
valueSelect = value;
textarea.value = '';
textarea.removeAttribute('disabled');
textarea.value = "";
textarea.removeAttribute("disabled");
getValueSelect(valueSelect);
});
function getValueSelect(value) {
textarea.onkeyup = function () {
switch (value) {
case 'head':
case "head":
// ввод стилей
head = textarea.value;
break;
case 'list':
case "list":
list = textarea.value;
break;
case 'placeholder':
case "placeholder":
placeholder = textarea.value;
break;
case 'caret':
case "caret":
caret = textarea.value;
break;
case 'search':
case "search":
search = textarea.value;
break;
@ -48,36 +49,36 @@ function getValueSelect(value) {
};
}
renderBtn.addEventListener('click', () => {
renderBtn.addEventListener("click", () => {
const select = new CGSelect({
selector: '.select',
placeholder: 'Choose a car',
label: 'Exemple select',
selector: ".select",
placeholder: "Choose a car",
items: [
'BMW',
"BMW",
{
id: '213sade',
title: 'Opel',
id: "213sade",
title: "Opel",
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
"Mersedes",
"MAN",
"Ferari",
],
searchMode: true,
multiselect: true,
multiselectTag: true,
});
const drop = document.querySelector('.select');
let headSelect = drop.querySelector('.cg-select');
let listSelect = drop.querySelector('.list');
let placeholderSelect = drop.querySelector('.selected');
let caretSelect = drop.querySelector('.caret');
let searchSelect = drop.querySelector('.inputSearch');
headSelect.setAttribute('style', head);
listSelect.setAttribute('style', list);
placeholderSelect.setAttribute('style', placeholder);
caretSelect.setAttribute('style', caret);
searchSelect.setAttribute('style', search);
const drop = document.querySelector(".select");
let headSelect = drop.querySelector(".cg-select");
let listSelect = drop.querySelector(".list");
let placeholderSelect = drop.querySelector(".selected");
let caretSelect = drop.querySelector(".caret");
let searchSelect = drop.querySelector(".inputSearch");
headSelect.setAttribute("style", head);
listSelect.setAttribute("style", list);
placeholderSelect.setAttribute("style", placeholder);
caretSelect.setAttribute("style", caret);
searchSelect.setAttribute("style", search);
});