From 3a031a864e77438c160dfdda7e5e09d2c3d91dfa Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 12 Oct 2022 22:40:57 +0300 Subject: [PATCH] Method disabled in finish. Refactoring core select --- src/cg-dropdown.js | 51 +++++++++++++---------------------------- src/components/utils.js | 20 +++++++++++----- src/index.html | 6 ++--- src/index.js | 7 +++--- src/style/main.scss | 38 ++++++++++++++++++++---------- 5 files changed, 63 insertions(+), 59 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index b66463d..4f84846 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -1,9 +1,8 @@ -import { customStyles, createSelected } from './components/utils'; +import { customStyles, createSelected, checkItemStruct } from './components/utils'; import { createBreadcrumb } from './components/create-element'; export class DropDown { #element; - #selector; #list; #options; #caret; @@ -80,6 +79,18 @@ export class DropDown { 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) { this.#options = options; const { items, multiselect, url } = this.#options; @@ -111,7 +122,7 @@ export class DropDown { const random = Math.random().toString(36).substring(2, 10); let item = {}; - if (this.#checkItemStruct(dataItem)) { + if (checkItemStruct(dataItem)) { item = { id: dataItem.id, title: dataItem.title, @@ -147,9 +158,6 @@ export class DropDown { if (select) { createSelected(this.#element, select, styles); } - - const selector = this.#element.querySelector('.cg-select'); - this.#selector = selector; } #render(select) { @@ -162,10 +170,6 @@ export class DropDown { this.#initSelected(); } - // if (event) { - // this.#initEvent(); - // } - const ulList = document.createElement('ul'); if (styles) { @@ -215,12 +219,11 @@ export class DropDown { } const response = await fetch(url); - const dataUrl = await response.json(); dataUrl.forEach((dataItem, index) => { const item = { - id: dataItem.phone, + id: dataItem.id, title: dataItem.name, value: index, }; @@ -313,7 +316,7 @@ export class DropDown { } else { if (multiselectTag) { const tagItem = document.getElementById(`tag-${index}`); - + // TODO: bug error! in url ul.removeChild(tagItem); } 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 { - } - } } diff --git a/src/components/utils.js b/src/components/utils.js index 45e7841..9d6c13f 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -1,10 +1,10 @@ export function createSelected(element, content, styles) { if (content) { element.innerHTML = ` - + `; } @@ -12,10 +12,10 @@ export function createSelected(element, content, styles) { customStyles(element, styles); element.innerHTML = ` - +
+ ${content} +
+
`; } } @@ -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'); +} diff --git a/src/index.html b/src/index.html index 275edda..2e0d1ea 100644 --- a/src/index.html +++ b/src/index.html @@ -9,11 +9,11 @@
-
+ -
+ -
+
diff --git a/src/index.js b/src/index.js index 1afff76..bf439cd 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ const dropdown = new DropDown({ items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], styles: { head: { - background: 'red', + background: '#4d629f', }, }, multiselect: true, @@ -55,7 +55,7 @@ const dropdown2 = new DropDown({ }); dropdown2.addItem('LADA'); -dropdown.disabled(true); +dropdown.disabled(false); //ToDo: paste the desired url; @@ -65,7 +65,8 @@ const dropdown3 = new DropDown({ url: 'http://jsonplaceholder.typicode.com/users', styles: { head: { - background: 'red', + background: 'black', + width: '350px', }, }, multiselect: true, diff --git a/src/style/main.scss b/src/style/main.scss index cfd1d2d..c40fb12 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -4,29 +4,36 @@ } body { - background: #1b1e25; + background: #4a4a4a; } .container { + margin: 0 auto; display: flex; - margin: 50px auto; + align-items: baseline; justify-content: space-between; - width: 800px; + width: 900px; +} + +.content { + border: 1px solid #616161; + height: 500px; } .cg-dropdown { - * { - position: relative; - - // max-height: 60px; - } + min-width: 235px; + margin-left: 0; + position: relative; + margin: 0; + padding: 0; + border: none; + border-radius: 10px; } .cg-select { padding: 5px; - min-width: 235px; - max-width: 225px; - min-height: 60px; + + min-height: 50px; color: #fff; display: flex; justify-content: space-between; @@ -40,7 +47,8 @@ body { transition: 0.5s; .selected { - max-width: 200px; + max-width: 195px; + margin: 5px; } @@ -75,6 +83,7 @@ body { max-height: 230px; overflow-y: auto; position: absolute; + width: 220px; padding: 7px; margin-top: -0.2px; @@ -92,6 +101,10 @@ body { z-index: 1; &__item { + display: flex; + flex-direction: row; + align-items: center; + transition: 0.5s; padding: 15px; @@ -134,6 +147,7 @@ body { input[type='checkbox'] { cursor: pointer; + margin: 0 5px 0 0; } .svg-icon {