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

Compare commits

base: MaxOvs19:67bd0cf7f2cb8917cd2277bbc38f5b3806646f5c
Branches Tags
MaxOvs19:master
...
compare: MaxOvs19:45df42825fb495aed879788d9b813ecfc02e75ea
Branches Tags
MaxOvs19:master

2 Commits
67bd0cf7f2 ... 45df42825f

Author SHA1 Message Date
MaxOvs19
45df42825f Fixed description and layout 2023-03-03 14:54:11 +03:00
MaxOvs19
5fc17c7c2d Fixed bugs 2023-03-02 19:45:03 +03:00
6 changed files with 281 additions and 180 deletions
Show Stats Expand all files Collapse all files

2
docs/index.html
View File

@ -43,7 +43,7 @@
</ul> </ul>
<a href="index.html" class="title">Home</a> <a href="index.html" class="title">Home</a>
<a href="/index.html" class="title" style="margin-left: 15px" <a href="/index.html" class="title" style="margin-left: 15px"
>Go to CGSelect</a >Example</a
> >
</div> </div>
<div class="table-cell" id="tsd-widgets"> <div class="table-cell" id="tsd-widgets">

23
example.scss
View File

@ -1,5 +1,5 @@
// @import '/src/main.scss'; // @import '/src/main.scss';
@import './src/constructor/constructor.scss'; @import "./src/constructor/constructor.scss";
* { * {
font-size: 14px; font-size: 14px;
@ -55,7 +55,7 @@
h1 { h1 {
font-size: 57px; font-size: 57px;
color: white; color: white;
font-family: 'Times New Roman', Times, serif; font-family: "Times New Roman", Times, serif;
margin: 40px 0 12px 0; margin: 40px 0 12px 0;
} }
@ -255,10 +255,29 @@ pre {
} }
} }
.stylesTheme {
width: 100% !important;
}
.example-select_title { .example-select_title {
font-size: 14px; font-size: 14px;
height: 40px; height: 40px;
} }
.type {
display: none;
}
.row {
flex-direction: column;
.col {
width: 100%;
}
}
pre {
overflow-x: auto !important;
}
} }
.version { .version {

50
index.html
View File

@ -250,7 +250,7 @@
<h5 style="margin: 20px 0 5px; text-align: center">Example:</h5> <h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
<div class="row"> <div class="row type">
<h6>For JS</h6> <h6>For JS</h6>
<h6>For TS</h6> <h6>For TS</h6>
</div> </div>
@ -291,7 +291,7 @@
</code> </code>
</div> </div>
<h6>CSS</h6> <h6>CSS</h6>
<code style="display: block; width: 44%"> <code style="display: block; width: 44%" class="stylesTheme">
<pre> <pre>
.headTestClass { .headTestClass {
background-color: <span class="code__string">#8297ff</span>; background-color: <span class="code__string">#8297ff</span>;
@ -420,6 +420,52 @@
</code> </code>
</div> </div>
<div class="example-select">
<h1 class="example-select_title">Use callbacks</h1>
<div class="layout-select">
<div class="col">
<p style="color: white;">When using a callback, you can pass in the first parameter such values ​​as: <span class="code__string">open, close, select, clear</span>.
<br>The second parameter is a function in which there are two parameters: <span class="code__string">state</span> and <span class="code__string">value</span>.
<br>The output of the value can be seen in the browser console.
</p>
</div>
<button class="cg-dropdown cg-dropdown_callback"></button>
</div>
<button type="button" class="check-code" id="callback">View code</button>
<code id="codeCallback">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Choose a car',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
multiselectTag: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Button control</h1> <h1 class="example-select_title">Button control</h1>
<div style="margin-bottom: 15px"> <div style="margin-bottom: 15px">

242
index.js
View File

@ -1,31 +1,31 @@
import CGSelect from 'cg-select'; import CGSelect from "cg-select";
// import { newCustomTheme } from './src/themeTest'; // import { newCustomTheme } from './src/themeTest';
import './src/example'; import "./src/example";
import './src/constructor/constructor'; import "./src/constructor/constructor";
// ------------------------------Обычный селект-------------------- // ------------------------------Обычный селект--------------------
const dropdown = new CGSelect({ const dropdown = new CGSelect({
selector: '.cg-dropdown_one', selector: ".cg-dropdown_one",
placeholder: 'Choose a car', placeholder: "Choose a car",
label: 'EXAMPLE', label: "EXAMPLE",
items: [ items: [
'BMW', "BMW",
{ {
id: '213sade', id: "213sade",
title: 'Opel', title: "Opel",
value: 1, value: 1,
}, },
'Mersedes', "Mersedes",
'MAN', "MAN",
'Ferari', "Ferari",
], ],
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
}, },
list: { list: {
width: '824px', width: "824px",
}, },
}, },
}); });
@ -35,123 +35,123 @@ const dropdown = new CGSelect({
// }); // });
const droptheme = new CGSelect({ const droptheme = new CGSelect({
selector: '.cg-dropdown_theme', selector: ".cg-dropdown_theme",
placeholder: 'Choose a car', placeholder: "Choose a car",
items: [ items: [
'BMW', "BMW",
{ {
id: '213sade', id: "213sade",
title: 'Opel', title: "Opel",
value: 1, value: 1,
}, },
'Mersedes', "Mersedes",
'MAN', "MAN",
'Ferari', "Ferari",
], ],
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
}, },
list: { list: {
width: '824px', width: "824px",
}, },
}, },
theme: 'dark', theme: "dark",
}); });
// ------------------------------NativeSelect----------------------- // ------------------------------NativeSelect-----------------------
const dropdownNativeSelect = new CGSelect({ const dropdownNativeSelect = new CGSelect({
selector: '.cg-dropdown_selectNative', selector: ".cg-dropdown_selectNative",
placeholder: 'Choose a car', placeholder: "Choose a car",
nativeSelectMode: true, nativeSelectMode: true,
items: [ items: [
'BMW', "BMW",
{ {
id: '213sade', id: "213sade",
title: 'Opel', title: "Opel",
value: 1, value: 1,
}, },
'Mersedes', "Mersedes",
'MAN', "MAN",
'Ferari', "Ferari",
'Kamaz', "Kamaz",
'Ural', "Ural",
], ],
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
}, },
list: { list: {
width: '824px', width: "824px",
}, },
}, },
theme: 'dark', theme: "dark",
}); });
// ------------------------------listDisplayMode-------------------- // ------------------------------listDisplayMode--------------------
const dropdownlistDisplayMode = new CGSelect({ const dropdownlistDisplayMode = new CGSelect({
selector: '.cg-dropdown_listDisplayMode', selector: ".cg-dropdown_listDisplayMode",
placeholder: 'Choose a car', placeholder: "Choose a car",
listDisplayMode: true, listDisplayMode: true,
items: [ items: [
'BMW', "BMW",
{ {
id: '213sade', id: "213sade",
title: 'Opel', title: "Opel",
value: 1, value: 1,
}, },
'Mersedes', "Mersedes",
'MAN', "MAN",
'Ferari', "Ferari",
], ],
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
}, },
list: { list: {
width: '824px', width: "824px",
}, },
}, },
}); });
// --------------------------------Категории-------------------------- // --------------------------------Категории--------------------------
const dropdown4 = new CGSelect({ const dropdown4 = new CGSelect({
selector: '.cg-dropdown_categories', selector: ".cg-dropdown_categories",
placeholder: 'Choose region', placeholder: "Choose region",
searchMode: true, searchMode: true,
items: [ items: [
{ {
category: 'Russia', category: "Russia",
categoryItems: [ categoryItems: [
{ {
id: '28qwds', id: "28qwds",
title: 'Москва', title: "Москва",
value: 0, value: 0,
}, },
, ,
'Ростов-на-дону', "Ростов-на-дону",
'Саратов', "Саратов",
'Волгоград', "Волгоград",
'Донецк', "Донецк",
], ],
}, },
{ {
category: 'USA', category: "USA",
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], categoryItems: ["Alabama", "Texas", "Colorado", "Klirens", "Los-Angeles"],
}, },
{ {
category: 'France', category: "France",
categoryItems: ['Paris'], categoryItems: ["Paris"],
}, },
], ],
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
}, },
list: { list: {
width: '824px', width: "824px",
}, },
placeholder: { placeholder: {
maxWidth: '500px ', maxWidth: "500px ",
}, },
}, },
multiselect: true, multiselect: true,
@ -160,84 +160,84 @@ const dropdown4 = new CGSelect({
//----------------управление с помощью кнопок---------------------------------- //----------------управление с помощью кнопок----------------------------------
const dropdownBtn = new CGSelect({ const dropdownBtn = new CGSelect({
selector: '.cg-dropdown_usedBtn', selector: ".cg-dropdown_usedBtn",
placeholder: 'Choose a car', placeholder: "Choose a car",
searchMode: true, searchMode: true,
items: [ items: [
'BMW', "BMW",
{ {
id: '213sade', id: "213sade",
title: 'Opel', title: "Opel",
value: 1, value: 1,
}, },
'Mersedes', "Mersedes",
'MAN', "MAN",
'max', "max",
], ],
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
color: 'black', color: "black",
backgroundColor: 'rgb(176 223 167)', backgroundColor: "rgb(176 223 167)",
}, },
list: { list: {
width: '824px', width: "824px",
color: 'black', color: "black",
backgroundColor: 'rgb(176 223 167)', backgroundColor: "rgb(176 223 167)",
}, },
caret: { caret: {
borderTop: '6px solid black', borderTop: "6px solid black",
}, },
search: { search: {
backgroundColor: '#d7ffff', backgroundColor: "#d7ffff",
borderRadius: '5px', borderRadius: "5px",
borderBottom: 'none', borderBottom: "none",
width: '95%', width: "95%",
color: 'black', color: "black",
}, },
}, },
multiselect: true, multiselect: true,
}); });
const buttonOpen = document.querySelector('.button__open'); const buttonOpen = document.querySelector(".button__open");
const buttonClose = document.querySelector('.button__close'); const buttonClose = document.querySelector(".button__close");
dropdownBtn.buttonControl(buttonOpen, 'open'); dropdownBtn.buttonControl(buttonOpen, "open");
dropdownBtn.buttonControl(buttonClose, 'close'); dropdownBtn.buttonControl(buttonClose, "close");
//-------------------------Функция Disabled---------------------------------- //-------------------------Функция Disabled----------------------------------
const dropdownDisabled = new CGSelect({ const dropdownDisabled = new CGSelect({
selector: '.cg-dropdown_checkboxDisable', selector: ".cg-dropdown_checkboxDisable",
placeholder: 'Choose a car', placeholder: "Choose a car",
searchMode: true, searchMode: true,
items: [ items: [
'BMW', "BMW",
{ {
id: '213sade', id: "213sade",
title: 'Opel', title: "Opel",
value: 1, value: 1,
}, },
'Mersedes', "Mersedes",
'MAN', "MAN",
'max', "max",
], ],
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
}, },
list: { list: {
width: '824px', width: "824px",
}, },
placeholder: { placeholder: {
maxWidth: '500px ', maxWidth: "500px ",
}, },
}, },
multiselect: true, multiselect: true,
}); });
dropdownDisabled.disabled(true); dropdownDisabled.disabled(true);
let chbox = document.getElementById('checkboxDisable'); let chbox = document.getElementById("checkboxDisable");
chbox.addEventListener('click', () => { chbox.addEventListener("click", () => {
if (chbox.checked == true) { if (chbox.checked == true) {
dropdownDisabled.disabled(false); dropdownDisabled.disabled(false);
} else { } else {
@ -247,19 +247,47 @@ chbox.addEventListener('click', () => {
// ------------------------------URL-------------------- // ------------------------------URL--------------------
const dropdown3 = new CGSelect({ const dropdown3 = new CGSelect({
selector: '.cg-dropdown_three', selector: ".cg-dropdown_three",
placeholder: 'URL', placeholder: "URL",
url: 'https://jsonplaceholder.typicode.com/todos', url: "https://jsonplaceholder.typicode.com/todos",
searchMode: true, searchMode: true,
darkTheme: false, darkTheme: false,
language: 'ru', language: "ru",
styles: { styles: {
head: { head: {
width: '830px', width: "830px",
}, },
list: { list: {
width: '824px', width: "824px",
}, },
}, },
multiselect: true, 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);
});

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

63
src/example.js
View File

@ -1,48 +1,55 @@
const firstBtn = document.getElementById('first'); const firstBtn = document.getElementById("first");
const codeFirst = document.getElementById('codeFirst'); const codeFirst = document.getElementById("codeFirst");
const secondBtn = document.getElementById('second'); const secondBtn = document.getElementById("second");
const codeSecond = document.getElementById('codeSecond'); const codeSecond = document.getElementById("codeSecond");
const thirdBtn = document.getElementById('third'); const thirdBtn = document.getElementById("third");
const codeThird = document.getElementById('codeThird'); const codeThird = document.getElementById("codeThird");
const fourthBtn = document.getElementById('fourth'); const fourthBtn = document.getElementById("fourth");
const codeFourth = document.getElementById('codeFourth'); const codeFourth = document.getElementById("codeFourth");
const fifthBtn = document.getElementById('fifth'); const fifthBtn = document.getElementById("fifth");
const codeFifth = document.getElementById('codeFifth'); const codeFifth = document.getElementById("codeFifth");
const six = document.getElementById('six'); const six = document.getElementById("six");
const codeSix = document.getElementById('codeSix'); const codeSix = document.getElementById("codeSix");
const Native = document.getElementById('Native'); const Native = document.getElementById("Native");
const codeNative = document.getElementById('codeNative'); const codeNative = document.getElementById("codeNative");
firstBtn.addEventListener('click', () => { const callback = document.getElementById("callback");
codeFirst.classList.toggle('active'); const codeCallback = document.getElementById("codeCallback");
firstBtn.addEventListener("click", () => {
codeFirst.classList.toggle("active");
}); });
secondBtn.addEventListener('click', () => { secondBtn.addEventListener("click", () => {
codeSecond.classList.toggle('active'); codeSecond.classList.toggle("active");
}); });
thirdBtn.addEventListener('click', () => { thirdBtn.addEventListener("click", () => {
codeThird.classList.toggle('active'); codeThird.classList.toggle("active");
}); });
fourthBtn.addEventListener('click', () => { fourthBtn.addEventListener("click", () => {
codeFourth.classList.toggle('active'); codeFourth.classList.toggle("active");
}); });
fifthBtn.addEventListener('click', () => { fifthBtn.addEventListener("click", () => {
codeFifth.classList.toggle('active'); codeFifth.classList.toggle("active");
}); });
six.addEventListener('click', () => { six.addEventListener("click", () => {
codeSix.classList.toggle('active'); codeSix.classList.toggle("active");
}); });
Native.addEventListener('click', () => { Native.addEventListener("click", () => {
codeNative.classList.toggle('active'); codeNative.classList.toggle("active");
});
callback.addEventListener("click", () => {
codeCallback.classList.toggle("active");
}); });