From 45df42825fb495aed879788d9b813ecfc02e75ea Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 3 Mar 2023 14:54:11 +0300 Subject: [PATCH] Fixed description and layout --- index.html | 46 ++++++++++ index.js | 242 +++++++++++++++++++++++++++---------------------- src/example.js | 63 +++++++------ 3 files changed, 216 insertions(+), 135 deletions(-) diff --git a/index.html b/index.html index 4e71df5..dadcccb 100644 --- a/index.html +++ b/index.html @@ -420,6 +420,52 @@ +
+

Use callbacks

+ +
+
+

When using a callback, you can pass in the first parameter such values ​​as: open, close, select, clear. +
The second parameter is a function in which there are two parameters: state and value. +
The output of the value can be seen in the browser console. +

+
+ +
+ + + + 
+            const dropdown = new CGSelect({
+              selector: '.cg-dropdown_categories', 
+              placeholder: 'Choose a car', 
+              searchMode: true,
+              items: [
+                  'BMW',
+                  {
+                    id: '213sade',
+                    title: 'Opel',
+                    value: 1,
+                  },
+                  'Mersedes', 
+                  'MAN',  
+                  'Ferari', 
+              ],
+              styles: {
+                head: {
+                  width: '830px', 
+                },
+                list: {
+                  width: '824px', 
+                },
+              },
+              multiselect: true,
+              multiselectTag: true,
+            });
+
+ +
+

Button control

diff --git a/index.js b/index.js index 817bae9..92704e2 100644 --- a/index.js +++ b/index.js @@ -1,31 +1,31 @@ -import CGSelect from 'cg-select'; +import CGSelect from "cg-select"; // import { newCustomTheme } from './src/themeTest'; -import './src/example'; -import './src/constructor/constructor'; +import "./src/example"; +import "./src/constructor/constructor"; // ------------------------------Обычный селект-------------------- const dropdown = new CGSelect({ - selector: '.cg-dropdown_one', - placeholder: 'Choose a car', - label: 'EXAMPLE', + selector: ".cg-dropdown_one", + placeholder: "Choose a car", + label: "EXAMPLE", items: [ - 'BMW', + "BMW", { - id: '213sade', - title: 'Opel', + id: "213sade", + title: "Opel", value: 1, }, - 'Mersedes', - 'MAN', - 'Ferari', + "Mersedes", + "MAN", + "Ferari", ], styles: { head: { - width: '830px', + width: "830px", }, list: { - width: '824px', + width: "824px", }, }, }); @@ -35,123 +35,123 @@ const dropdown = new CGSelect({ // }); const droptheme = new CGSelect({ - selector: '.cg-dropdown_theme', - placeholder: 'Choose a car', + selector: ".cg-dropdown_theme", + placeholder: "Choose a car", items: [ - 'BMW', + "BMW", { - id: '213sade', - title: 'Opel', + id: "213sade", + title: "Opel", value: 1, }, - 'Mersedes', - 'MAN', - 'Ferari', + "Mersedes", + "MAN", + "Ferari", ], styles: { head: { - width: '830px', + width: "830px", }, list: { - width: '824px', + width: "824px", }, }, - theme: 'dark', + theme: "dark", }); // ------------------------------NativeSelect----------------------- const dropdownNativeSelect = new CGSelect({ - selector: '.cg-dropdown_selectNative', - placeholder: 'Choose a car', + selector: ".cg-dropdown_selectNative", + placeholder: "Choose a car", nativeSelectMode: true, items: [ - 'BMW', + "BMW", { - id: '213sade', - title: 'Opel', + id: "213sade", + title: "Opel", value: 1, }, - 'Mersedes', - 'MAN', - 'Ferari', - 'Kamaz', - 'Ural', + "Mersedes", + "MAN", + "Ferari", + "Kamaz", + "Ural", ], styles: { head: { - width: '830px', + width: "830px", }, list: { - width: '824px', + width: "824px", }, }, - theme: 'dark', + theme: "dark", }); // ------------------------------listDisplayMode-------------------- const dropdownlistDisplayMode = new CGSelect({ - selector: '.cg-dropdown_listDisplayMode', - placeholder: 'Choose a car', + selector: ".cg-dropdown_listDisplayMode", + placeholder: "Choose a car", listDisplayMode: true, items: [ - 'BMW', + "BMW", { - id: '213sade', - title: 'Opel', + id: "213sade", + title: "Opel", value: 1, }, - 'Mersedes', - 'MAN', - 'Ferari', + "Mersedes", + "MAN", + "Ferari", ], styles: { head: { - width: '830px', + width: "830px", }, list: { - width: '824px', + width: "824px", }, }, }); // --------------------------------Категории-------------------------- const dropdown4 = new CGSelect({ - selector: '.cg-dropdown_categories', - placeholder: 'Choose region', + selector: ".cg-dropdown_categories", + placeholder: "Choose region", searchMode: true, items: [ { - category: 'Russia', + category: "Russia", categoryItems: [ { - id: '28qwds', - title: 'Москва', + id: "28qwds", + title: "Москва", value: 0, }, , - 'Ростов-на-дону', - 'Саратов', - 'Волгоград', - 'Донецк', + "Ростов-на-дону", + "Саратов", + "Волгоград", + "Донецк", ], }, { - category: 'USA', - categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], + category: "USA", + categoryItems: ["Alabama", "Texas", "Colorado", "Klirens", "Los-Angeles"], }, { - category: 'France', - categoryItems: ['Paris'], + category: "France", + categoryItems: ["Paris"], }, ], styles: { head: { - width: '830px', + width: "830px", }, list: { - width: '824px', + width: "824px", }, placeholder: { - maxWidth: '500px ', + maxWidth: "500px ", }, }, multiselect: true, @@ -160,84 +160,84 @@ const dropdown4 = new CGSelect({ //----------------управление с помощью кнопок---------------------------------- const dropdownBtn = new CGSelect({ - selector: '.cg-dropdown_usedBtn', - placeholder: 'Choose a car', + selector: ".cg-dropdown_usedBtn", + placeholder: "Choose a car", searchMode: true, items: [ - 'BMW', + "BMW", { - id: '213sade', - title: 'Opel', + id: "213sade", + title: "Opel", value: 1, }, - 'Mersedes', - 'MAN', - 'max', + "Mersedes", + "MAN", + "max", ], styles: { head: { - width: '830px', - color: 'black', - backgroundColor: 'rgb(176 223 167)', + width: "830px", + color: "black", + backgroundColor: "rgb(176 223 167)", }, list: { - width: '824px', - color: 'black', - backgroundColor: 'rgb(176 223 167)', + width: "824px", + color: "black", + backgroundColor: "rgb(176 223 167)", }, caret: { - borderTop: '6px solid black', + borderTop: "6px solid black", }, search: { - backgroundColor: '#d7ffff', - borderRadius: '5px', - borderBottom: 'none', - width: '95%', - color: 'black', + backgroundColor: "#d7ffff", + borderRadius: "5px", + borderBottom: "none", + width: "95%", + color: "black", }, }, multiselect: true, }); -const buttonOpen = document.querySelector('.button__open'); -const buttonClose = document.querySelector('.button__close'); +const buttonOpen = document.querySelector(".button__open"); +const buttonClose = document.querySelector(".button__close"); -dropdownBtn.buttonControl(buttonOpen, 'open'); -dropdownBtn.buttonControl(buttonClose, 'close'); +dropdownBtn.buttonControl(buttonOpen, "open"); +dropdownBtn.buttonControl(buttonClose, "close"); //-------------------------Функция Disabled---------------------------------- const dropdownDisabled = new CGSelect({ - selector: '.cg-dropdown_checkboxDisable', - placeholder: 'Choose a car', + selector: ".cg-dropdown_checkboxDisable", + placeholder: "Choose a car", searchMode: true, items: [ - 'BMW', + "BMW", { - id: '213sade', - title: 'Opel', + id: "213sade", + title: "Opel", value: 1, }, - 'Mersedes', - 'MAN', - 'max', + "Mersedes", + "MAN", + "max", ], styles: { head: { - width: '830px', + width: "830px", }, list: { - width: '824px', + width: "824px", }, placeholder: { - maxWidth: '500px ', + maxWidth: "500px ", }, }, multiselect: true, }); dropdownDisabled.disabled(true); -let chbox = document.getElementById('checkboxDisable'); +let chbox = document.getElementById("checkboxDisable"); -chbox.addEventListener('click', () => { +chbox.addEventListener("click", () => { if (chbox.checked == true) { dropdownDisabled.disabled(false); } else { @@ -247,19 +247,47 @@ chbox.addEventListener('click', () => { // ------------------------------URL-------------------- const dropdown3 = new CGSelect({ - selector: '.cg-dropdown_three', - placeholder: 'URL', - url: 'https://jsonplaceholder.typicode.com/todos', + selector: ".cg-dropdown_three", + placeholder: "URL", + url: "https://jsonplaceholder.typicode.com/todos", searchMode: true, darkTheme: false, - language: 'ru', + language: "ru", styles: { head: { - width: '830px', + width: "830px", }, list: { - width: '824px', + width: "824px", }, }, multiselect: true, }); + +const dropCall = new CGSelect({ + selector: ".cg-dropdown_callback", + placeholder: "Choose a car", + items: [ + "BMW", + { + id: "213sade", + title: "Opel", + value: 1, + }, + "Mersedes", + "MAN", + "Ferari", + ], + styles: { + head: { + width: "830px", + }, + list: { + width: "824px", + }, + }, +}); + +dropCall.on("select", (state, value) => { + console.log(value); +}); diff --git a/src/example.js b/src/example.js index 2238b38..596cf99 100644 --- a/src/example.js +++ b/src/example.js @@ -1,48 +1,55 @@ -const firstBtn = document.getElementById('first'); -const codeFirst = document.getElementById('codeFirst'); +const firstBtn = document.getElementById("first"); +const codeFirst = document.getElementById("codeFirst"); -const secondBtn = document.getElementById('second'); -const codeSecond = document.getElementById('codeSecond'); +const secondBtn = document.getElementById("second"); +const codeSecond = document.getElementById("codeSecond"); -const thirdBtn = document.getElementById('third'); -const codeThird = document.getElementById('codeThird'); +const thirdBtn = document.getElementById("third"); +const codeThird = document.getElementById("codeThird"); -const fourthBtn = document.getElementById('fourth'); -const codeFourth = document.getElementById('codeFourth'); +const fourthBtn = document.getElementById("fourth"); +const codeFourth = document.getElementById("codeFourth"); -const fifthBtn = document.getElementById('fifth'); -const codeFifth = document.getElementById('codeFifth'); +const fifthBtn = document.getElementById("fifth"); +const codeFifth = document.getElementById("codeFifth"); -const six = document.getElementById('six'); -const codeSix = document.getElementById('codeSix'); +const six = document.getElementById("six"); +const codeSix = document.getElementById("codeSix"); -const Native = document.getElementById('Native'); -const codeNative = document.getElementById('codeNative'); +const Native = document.getElementById("Native"); +const codeNative = document.getElementById("codeNative"); -firstBtn.addEventListener('click', () => { - codeFirst.classList.toggle('active'); +const callback = document.getElementById("callback"); +const codeCallback = document.getElementById("codeCallback"); + +firstBtn.addEventListener("click", () => { + codeFirst.classList.toggle("active"); }); -secondBtn.addEventListener('click', () => { - codeSecond.classList.toggle('active'); +secondBtn.addEventListener("click", () => { + codeSecond.classList.toggle("active"); }); -thirdBtn.addEventListener('click', () => { - codeThird.classList.toggle('active'); +thirdBtn.addEventListener("click", () => { + codeThird.classList.toggle("active"); }); -fourthBtn.addEventListener('click', () => { - codeFourth.classList.toggle('active'); +fourthBtn.addEventListener("click", () => { + codeFourth.classList.toggle("active"); }); -fifthBtn.addEventListener('click', () => { - codeFifth.classList.toggle('active'); +fifthBtn.addEventListener("click", () => { + codeFifth.classList.toggle("active"); }); -six.addEventListener('click', () => { - codeSix.classList.toggle('active'); +six.addEventListener("click", () => { + codeSix.classList.toggle("active"); }); -Native.addEventListener('click', () => { - codeNative.classList.toggle('active'); +Native.addEventListener("click", () => { + codeNative.classList.toggle("active"); +}); + +callback.addEventListener("click", () => { + codeCallback.classList.toggle("active"); });