diff --git a/example/index.html b/example/index.html index 76d573d..1912f3e 100644 --- a/example/index.html +++ b/example/index.html @@ -332,6 +332,8 @@ class="textareaStyle" placeholder="Enter CSS properties" > + +
diff --git a/example/src/constructor/constructor.js b/example/src/constructor/constructor.js index 28c2d61..62d4c2d 100644 --- a/example/src/constructor/constructor.js +++ b/example/src/constructor/constructor.js @@ -6,33 +6,18 @@ const body = new CGSelect({ items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips', 'lable'], }); -const select = new CGSelect({ - selector: '.select', - placeholder: 'Choose a car', - items: [ - 'BMW', - { - id: '213sade', - title: 'Opel', - value: 1, - }, - 'Mersedes', - 'MAN', - 'Ferari', - ], - styles: { - head: {}, - placeholder: {}, - list: {}, - caret: {}, - chips: {}, - search: {}, - lable: {}, - }, -}); - +let head = ''; +let list = ''; +let placeholder = ''; +let caret = ''; +let chips = ''; +let lable = ''; let valueSelect = ''; +const textarea = document.querySelector('#styles'); +const renderBtn = document.querySelector('.render'); +const saveStyleBtn = document.querySelector('.saveStyle'); + body.on('select', (e, value) => { valueSelect = value; getValueSelect(valueSelect); @@ -41,7 +26,12 @@ body.on('select', (e, value) => { function getValueSelect(value) { switch (value) { case 'head': - console.log('lol'); + // ввод стилей + // background: red; + textarea.onkeyup = function () { + console.log(textarea.value); + head = textarea.value; + }; break; case 'list': break; @@ -61,8 +51,37 @@ function getValueSelect(value) { } } -let textarea = document.querySelector('#styles'); +// Рендер селекта со стилями +renderBtn.addEventListener('click', () => { + // debugger; + // let HEAD = { + // key[0]: key[1] + // }; -textarea.onkeyup = function () { - console.log(textarea.value); -}; + const select = new CGSelect({ + selector: '.select', + placeholder: 'Choose a car', + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + styles: { + head: { + background: head, + }, + placeholder: {}, + list: {}, + caret: {}, + chips: {}, + search: {}, + lable: {}, + }, + }); +});