apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix git ignore

Browse Source
This commit is contained in:
MaxOvs 2022-12-28 20:35:00 +03:00
parent 43a9256258
commit 2a26967058
5 changed files with 854 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,4 +1,4 @@
node_modules
dist
.parcel-cache
example

50
example/example.js Normal file
View File

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

212
example/example.scss Normal file
View File

@ -0,0 +1,212 @@
@import '/src/main.scss';
* {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.body-example {
background: #000000c4;
}
.container {
margin: 0 auto;
width: 900px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.header {
width: 100%;
border-radius: 5px;
display: flex;
align-items: center;
flex-direction: column;
background-color: #2a2f3b;
margin-bottom: 8px;
h1 {
font-size: 57px;
color: white;
font-family: 'Times New Roman', Times, serif;
margin: 40px 0 12px 0;
}
&__logoBox {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&__logo {
width: 13%;
height: 16%;
border: 1px solid #525252;
border-radius: 50%;
margin: 22px 0 0 29px;
}
.navlist {
display: flex;
justify-content: space-around;
margin: 15px 0 30px 0;
padding: 0;
width: 230px;
li {
display: inline;
list-style: none;
text-decoration: none;
a {
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
.content {
margin-top: 15px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.example-select {
width: 100%;
background-color: #5c5c5c;
border-radius: 5px;
margin: 15px 0 0 0;
&_title {
height: 45px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: white;
padding: 20px 0 0 40px;
margin: 0 0 30px 0;
background-color: #2a2f3b;
font-size: 20px;
}
&_submit {
width: 200px;
height: 35px;
border-radius: 10px;
border: none;
margin-top: 20px;
margin: 20px 15px;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
&:hover {
background-color: #d7d7d7;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
}
}
.layout-select {
margin: 15px;
}
}
code {
display: none;
}
pre {
background: #1e1e1e;
margin: 15px;
padding: 15px;
color: #88d0f7;
border-radius: 15px;
font-size: 16px;
line-height: 20px;
}
.code {
&__class,
&__var,
&__string,
&__keyword {
font-size: 16px;
line-height: 20px;
}
&__class {
color: #4ec9b0;
}
&__var {
color: #34a7ff;
}
&__string {
color: #ce9178;
}
&__keyword {
color: #5090ca;
}
}
.check-code {
width: 200px;
height: 35px;
cursor: pointer;
border: none;
border-radius: 10px;
margin: 20px 15px;
transition: all 1s;
}
.active {
display: block;
}
@media (max-width: 576px) {
.container {
width: 95%;
}
.header {
margin-top: 15px;
h1 {
font-size: 32px;
}
}
.example-select_title {
font-size: 14px;
height: 40px;
}
}

359
example/index.html Normal file
View File

@ -0,0 +1,359 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
property="og:description"
content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="cg-select" />
<meta property="og:url" content="https://cg-select.itguild.info" />
<meta property="og:image" content="/src/images/logoCG.jpg" />
<title>Cg-Select</title>
<link href="example.scss" rel="stylesheet" />
</head>
<body class="body-example">
<div class="container">
<header class="header">
<div class="header__logoBox">
<h1>CG-SELECT</h1>
<img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
</div>
<hr style="width: 55%" />
<nav>
<ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="../documentation/index.html">Documentation</a></li>
</ul>
</nav>
</header>
</div>
<div class="container content">
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект</h2>
<form method="get" class="form">
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_one"></button>
</div>
<input type="submit" value="Отправить!" class="example-select_submit" />
<button type="button" class="check-code" id="first">Посмотреть код</button>
<code id="codeFirst">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
lable: <span class="code__string">'EXAMPLE',</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>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*При мобильном разрешении появляеться нативный селект.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_selectNative"></button>
</div>
<button type="button" class="check-code" id="Native">Посмотреть код</button>
<code id="codeNative">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
nativeSelectMode: <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>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*При использовании данного метода лист с выбором появляеться как модальное окно.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
</div>
<button type="button" class="check-code" id="six">Посмотреть код</button>
<code id="codeSix">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
listDisplayMode: <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>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h1 class="example-select_title">Селект с данными с URL</h1>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_three"></button>
</div>
<button type="button" class="check-code" id="second">Посмотреть код</button>
<code id="codeSecond">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_three',</span>
placeholder: <span class="code__string">'URL',</span>
url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>
searchMode: <span class="code__keyword">true,</span>
darkTheme: <span class="code__keyword">false,</span>
language: <span class="code__string">'ru',</span>
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Категории</h1>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_categories"></button>
</div>
<button type="button" class="check-code" id="third">Посмотреть код</button>
<code id="codeThird">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Выберите регион',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
{
category: <span class="code__string">'Russia',</span>
categoryItems: [
{
id: <span class="code__string">'28qwds',</span>
title: <span class="code__string">'Москва',</span>
value: 0,
},
<span class="code__string">'Ростов-на-дону',</span>
<span class="code__string">'Саратов',</span>
<span class="code__string">'Волгоград',</span>
<span class="code__string">'Донецк',</span>
],
},
{
category: <span class="code__string">'USA',</span>
categoryItems: <span class="code__string">[
'Alabama',
'Texas',
'Colorado',
'Klirens',
'Los-Angeles'],</span>
},
{
category: <span class="code__string">'France',</span>
categoryItems: <span class="code__string">['Paris'],</span>
},
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
placeholder: {
maxWidth: <span class="code__string">'500px ',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
multiselectTag: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Управление с помошью кнопок</h1>
<div style="margin-bottom: 15px">
<button class="button__open example-select_submit">Open</button>
<button class="button__close example-select_submit">Close</button>
</div>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
</div>
<button type="button" class="check-code" id="fourth">Посмотреть код</button>
<code id="codeFourth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
placeholder: <span class="code__string">'Выберите авто',</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">'max',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
color: <span class="code__string">'black',</span>
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
},
list: {
width: <span class="code__string">'824px',</span>
color: <span class="code__string">'black',</span>
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
},
caret: {
borderTop: <span class="code__string">'6px solid black',</span>
},
search: {
backgroundColor: <span class="code__string">'#d7ffff',</span>
borderRadius: <span class="code__string">'5px',</span>
borderBottom: <span class="code__string">'none',</span>
width: <span class="code__string">'95%',</span>
color: <span class="code__string">'black',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Функция disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
<label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
</div>
<button type="button" class="check-code" id="fifth">Посмотреть код</button>
<code id="codeFifth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
placeholder: <span class="code__string">'Выберите авто',</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>
},
placeholder: {
maxWidth: <span class="code__string">'500px ',</span>
},
},
});
</pre>
</code>
</div>
</div>
</body>
<script type="module" src="index.js"></script>
</html>

232
example/index.js Normal file
View File

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