86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
import { CGSelect } from '../../../src/cg-select';
|
|
|
|
const body = new CGSelect({
|
|
selector: '.body',
|
|
placeholder: 'Select element to style',
|
|
items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips'],
|
|
});
|
|
|
|
let head = '';
|
|
let list = '';
|
|
let placeholder = '';
|
|
let caret = '';
|
|
let chips = '';
|
|
let valueSelect = '';
|
|
|
|
const textarea = document.querySelector('#styles');
|
|
const renderBtn = document.querySelector('.render');
|
|
const saveStyleBtn = document.querySelector('.saveStyle');
|
|
|
|
body.on('select', (e, value) => {
|
|
valueSelect = value;
|
|
textarea.value = '';
|
|
textarea.removeAttribute('disabled');
|
|
getValueSelect(valueSelect);
|
|
});
|
|
|
|
function getValueSelect(value) {
|
|
textarea.onkeyup = function () {
|
|
switch (value) {
|
|
case 'head':
|
|
// ввод стилей
|
|
head = textarea.value;
|
|
break;
|
|
case 'list':
|
|
list = textarea.value;
|
|
break;
|
|
case 'placeholder':
|
|
placeholder = textarea.value;
|
|
break;
|
|
case 'caret':
|
|
caret = textarea.value;
|
|
break;
|
|
case 'search':
|
|
search = textarea.value;
|
|
break;
|
|
case 'chips':
|
|
chips = textarea.value;
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
}
|
|
|
|
renderBtn.addEventListener('click', () => {
|
|
const select = new CGSelect({
|
|
selector: '.select',
|
|
placeholder: 'Choose a car',
|
|
items: [
|
|
'BMW',
|
|
{
|
|
id: '213sade',
|
|
title: 'Opel',
|
|
value: 1,
|
|
},
|
|
'Mersedes',
|
|
'MAN',
|
|
'Ferari',
|
|
],
|
|
searchMode: 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);
|
|
});
|