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

Fixed pages

Browse Source
This commit is contained in:
MaxOvs19 2023-04-04 20:57:05 +03:00
parent fa53a86810
commit 4c136507fe
7 changed files with 5460 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
index.html
View File

@ -15,7 +15,7 @@
<title>Cg-Select</title> <title>Cg-Select</title>
<link rel="shortcut icon" href="src/img/logoCG2.ico" type="image/x-icon" /> <link rel="shortcut icon" href="src/img/logoCG2.ico" type="image/x-icon" />
<link href="example.scss" rel="stylesheet" /> <link type="text/css" media="all" rel="stylesheet" href="style.scss" />
</head> </head>
<body class="body-example"> <body class="body-example">
<div class="container"> <div class="container">
@ -27,11 +27,12 @@
<hr style="width: 55%" /> <hr style="width: 55%" />
<nav> <nav>
<ul class="navlist"> <ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="docs/index.html">Documentation</a></li> <li><a href="docs/index.html">Documentation</a></li>
<li><a href="">Home</a></li>
<li><a href="src/constructor/constructor.html">Constructor</a></li>
</ul> </ul>
</nav> </nav>
<p class="version">v. 0.2.6</p> <p class="version">v. 0.2.7</p>
</header> </header>
</div> </div>
@ -46,12 +47,14 @@
<input type="submit" value="Submit!" class="example-select_submit" /> <input type="submit" value="Submit!" class="example-select_submit" />
<button type="button" class="check-code" id="first">View code</button> <button type="button" class="check-code" id="first">View code</button>
<code id="codeFirst"> <code id="codeFirst">
<pre> <pre>
<button class="copy" id="cp1">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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_one',</span> selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>
lable: <span class="code__string">'EXAMPLE',</span> label: <span class="code__string">'EXAMPLE',</span>
items: [ items: [
<span class="code__string">'BMW',</span> <span class="code__string">'BMW',</span>
{ {
@ -78,9 +81,10 @@
</div> </div>
<div class="example-select"> <div class="example-select">
<h2 class="example-select_title">Default select with function nativeSelectMode</h2> <h2 class="example-select_title">
Default select with function nativeSelectMode
</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white"> <p style="margin-left: 12px; color: white">
*Native select appears on mobile resolution. *Native select appears on mobile resolution.
</p> </p>
@ -91,6 +95,7 @@
<button type="button" class="check-code" id="Native">View code</button> <button type="button" class="check-code" id="Native">View code</button>
<code id="codeNative"> <code id="codeNative">
<pre> <pre>
<button class="copy" id="cp2">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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_one',</span> selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>
@ -117,15 +122,16 @@
}); });
</pre> </pre>
</code> </code>
</form>
</div> </div>
<div class="example-select"> <div class="example-select">
<h2 class="example-select_title">Default select with function listDisplayMode</h2> <h2 class="example-select_title">
Default select with function listDisplayMode
</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white"> <p style="margin-left: 12px; color: white">
*When using this method, the selection sheet appears as a modal window. *When using this method, the selection sheet appears as a modal
window.
</p> </p>
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button> <button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
@ -135,6 +141,7 @@
<code id="codeSix"> <code id="codeSix">
<pre> <pre>
<button class="copy" id="cp3">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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_listDisplayMode',</span> selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>
@ -161,7 +168,6 @@
}); });
</pre> </pre>
</code> </code>
</form>
</div> </div>
<div class="example-select"> <div class="example-select">
@ -173,10 +179,11 @@
<code id="codeSecond"> <code id="codeSecond">
<pre> <pre>
<button class="copy" id="cp4">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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_three',</span> selector: <span class="code__string">'.cg-dropdown_three',</span>
placeholder: <span class="code__string">'URL',</span> placeholder: <span class="code__string">'URL',</span>
url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span> url: <span class="code__string">'https://jsonplaceholder.typicode.com/todos',</span>
searchMode: <span class="code__keyword">true,</span> searchMode: <span class="code__keyword">true,</span>
darkTheme: <span class="code__keyword">false,</span> darkTheme: <span class="code__keyword">false,</span>
language: <span class="code__string">'ru',</span> language: <span class="code__string">'ru',</span>
@ -201,16 +208,16 @@
<div class="col"> <div class="col">
<h5>Default theme:</h5> <h5>Default theme:</h5>
<p style="margin-right: 50px"> <p style="margin-right: 50px">
To change the theme of the select, you need to specify this parameter in the select To change the theme of the select, you need to specify this
settings. The default theme is the classic theme, you can choose a white or dark parameter in the select settings. The default theme is the
theme. classic theme, you can choose a white or dark theme.
</p> </p>
<code style="display: block; margin-top: 104px; "> <code style="display: block; margin-top: 104px">
<pre style="height: 240px;"> <pre style="height: 240px">
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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_one',</span> selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>
lable: <span class="code__string">'EXAMPLE',</span> label: <span class="code__string">'EXAMPLE',</span>
items: [ items: [
... ...
], ],
@ -224,11 +231,14 @@
<h5>Create custom theme:</h5> <h5>Create custom theme:</h5>
<div class="createTheme"> <div class="createTheme">
<p style="margin-right: 25px"> <p style="margin-right: 25px">
To create your own theme, you need to create an object with the following fields. To create your own theme, you need to create an object with
In these fields you need to insert the previously created css class. After the following fields. In these fields you need to insert the
creating the object, just pass it to the select settings. previously created css class. After creating the object, just
<br>The main interface for creating a theme uses a Json data view, however if you want pass it to the select settings.
to set the theme locally using classes, use the CustomTheme interface (an example with it is below) <br />The main interface for creating a theme uses a Json data
view, however if you want to set the theme locally using
classes, use the CustomTheme interface (an example with it is
below)
</p> </p>
<code style="display: block"> <code style="display: block">
<pre> <pre>
@ -240,7 +250,7 @@
placeholder?: <span class="code__class">object</span> , placeholder?: <span class="code__class">object</span> ,
caret?: <span class="code__class">object</span> , caret?: <span class="code__class">object</span> ,
search?: <span class="code__class">object</span> , search?: <span class="code__class">object</span> ,
lable?: <span class="code__class">object</span> , label?: <span class="code__class">object</span> ,
}, },
}; };
</pre> </pre>
@ -258,7 +268,7 @@
<div class="row"> <div class="row">
<code style="display: block"> <code style="display: block">
<pre style="height:460px"> <pre style="height: 460px">
<span class="code__keyword">const</span> <span class="code__var">newTheme</span>:<span class="code__class"> CustomTheme</span> = { <span class="code__keyword">const</span> <span class="code__var">newTheme</span>:<span class="code__class"> CustomTheme</span> = {
name: <span class="code__string">'test',</span> name: <span class="code__string">'test',</span>
styles: { styles: {
@ -268,7 +278,7 @@
caret: <span class="code__string">'caretTestClass',</span> , caret: <span class="code__string">'caretTestClass',</span> ,
search: <span class="code__string">'searchTestClass',</span> , search: <span class="code__string">'searchTestClass',</span> ,
chips: <span class="code__string">'chipsTestClass',</span> , chips: <span class="code__string">'chipsTestClass',</span> ,
lable: <span class="code__string">'lableTestClass',</span> , label: <span class="code__string">'labelTestClass',</span> ,
}, },
}; };
@ -305,7 +315,7 @@
borderTop: '6px solid white' borderTop: '6px solid white'
</span> }, </span> },
search: {}, search: {},
lable: {}, label: {},
}, },
}; };
</pre> </pre>
@ -326,44 +336,6 @@
</div> </div>
</div> </div>
<div class="example-select">
<h1 class="example-select_title">Select constructor</h1>
<div class="row" style="margin: 20px; color: white">
<div class="col">
<h5 style="font-size: 18px; margin: 0;">Select Style Builder:</h5>
<p style="margin-right: 50px; font-size: 17px">
This is a constructor for styling a select online without downloading. For it to work,
you need to:
<ol style="font-size: 15px;">
<li class="liList">Select a part of the select for customization. </li>
<li class="liList">Enter styles in the text field in the form "color: red;".</li>
<li class="liList">Click on the render button.</li>
</ol>
</p>
</div>
<div class="col">
<div class="layout-select constructor">
<button class="cg-dropdown body"></button>
<textarea
name="styles"
id="styles"
cols="30"
rows="5"
class="textareaStyle"
placeholder="Enter CSS properties"
disabled="disabled"
></textarea>
<button type="button" class="check-code render">Render</button>
</div>
</div>
</div>
<div class="layout-select constructor" style="margin-bottom: 60px;">
<button class="cg-dropdown select"></button>
</div>
</div>
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Categories</h1> <h1 class="example-select_title">Categories</h1>
@ -374,6 +346,7 @@
<code id="codeThird"> <code id="codeThird">
<pre> <pre>
<button class="copy" id="cp5">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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> selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Выберите регион',</span> placeholder: <span class="code__string">'Выберите регион',</span>
@ -430,17 +403,25 @@
<div class="layout-select"> <div class="layout-select">
<div class="col"> <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>. <p style="color: white">
<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>. When using a callback, you can pass in the first parameter such
<br>The output of the value can be seen in the browser console. 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> </p>
</div> </div>
<button class="cg-dropdown cg-dropdown_callback"></button> <button class="cg-dropdown cg-dropdown_callback"></button>
</div> </div>
<button type="button" class="check-code" id="callback">View code</button> <button type="button" class="check-code" id="callback">
View code
</button>
<code id="codeCallback"> <code id="codeCallback">
<pre> <pre>
<button class="copy" id="cp6">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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> selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>
@ -486,6 +467,7 @@
<code id="codeFourth"> <code id="codeFourth">
<pre> <pre>
<button class="copy" id="cp7">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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_usedBtn',</span> selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>
@ -532,7 +514,12 @@
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Function disabled</h1> <h1 class="example-select_title">Function disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" /> <input
type="checkbox"
name="chbx"
id="checkboxDisable"
style="margin: 16px"
/>
<label for="checkboxDisable" style="color: white"> <label for="checkboxDisable" style="color: white">
You agree to the processing of data</label You agree to the processing of data</label
> >
@ -544,6 +531,7 @@
<button type="button" class="check-code" id="fifth">View code</button> <button type="button" class="check-code" id="fifth">View code</button>
<code id="codeFifth"> <code id="codeFifth">
<pre> <pre>
<button class="copy" id="cp8">Copy code</button>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <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_checkboxDisable',</span> selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>

6
index.js
View File

@ -1,8 +1,6 @@
import CGSelect from "cg-select"; import CGSelect from "cg-select";
// import { newCustomTheme } from './src/themeTest'; import "./style.scss";
import "./src/buttonControlCode";
import "./src/example";
import "./src/constructor/constructor";
// ------------------------------Обычный селект-------------------- // ------------------------------Обычный селект--------------------
const dropdown = new CGSelect({ const dropdown = new CGSelect({

5481
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -30,7 +30,7 @@
}, },
"homepage": "https://cg-select.itguild.info", "homepage": "https://cg-select.itguild.info",
"dependencies": { "dependencies": {
"cg-select": "^0.2.5", "cg-select": "^0.2.7",
"gh-pages": "^5.0.0", "gh-pages": "^5.0.0",
"parcel": "^2.8.3" "parcel": "^2.8.3"
}, },

20
src/example.js → src/buttonControlCode.js
View File

@ -1,9 +1,22 @@
const copy1 = document.getElementById("cp1");
const copy2 = document.getElementById("cp2");
const copy3 = document.getElementById("cp3");
const copy4 = document.getElementById("cp4");
const copy5 = document.getElementById("cp5");
const copy6 = document.getElementById("cp6");
const copy7 = document.getElementById("cp7");
const copy8 = document.getElementById("cp8");
const firstBtn = document.getElementById("first"); const firstBtn = document.getElementById("first");
const codeFirst = document.getElementById("codeFirst"); const codeFirst = document.getElementById("codeFirst");
copyCode(copy1, codeFirst);
const secondBtn = document.getElementById("second"); const secondBtn = document.getElementById("second");
const codeSecond = document.getElementById("codeSecond"); const codeSecond = document.getElementById("codeSecond");
copyCode(copy2, codeSecond);
const thirdBtn = document.getElementById("third"); const thirdBtn = document.getElementById("third");
const codeThird = document.getElementById("codeThird"); const codeThird = document.getElementById("codeThird");
@ -53,3 +66,10 @@ Native.addEventListener("click", () => {
callback.addEventListener("click", () => { callback.addEventListener("click", () => {
codeCallback.classList.toggle("active"); codeCallback.classList.toggle("active");
}); });
function copyCode(button, elementCopy) {
button.addEventListener("click", (e) => {
e.preventDefault();
navigator.clipboard.writeText(elementCopy.textContent);
});
}

82
src/constructor/constructor.html Normal file
View File

@ -0,0 +1,82 @@
<!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="../img/logoCG.jpg" />
<title>Cg-Select</title>
<link rel="shortcut icon" href="../img/logoCG2.ico" type="image/x-icon" />
<link href="../../style.scss" rel="stylesheet" />
<link href="constructor.scss" rel="stylesheet" />
</head>
<body class="body-example">
<div class="container">
<header class="header">
<div class="header__logoBox">
<h1>CG-SELECT</h1>
<img src="../img/logoCG.jpg" alt="#" class="header__logo" />
</div>
<hr style="width: 55%" />
<nav>
<ul class="navlist">
<li><a href="../../docs/index.html">Documentation</a></li>
<li><a href="../../index.html">Home</a></li>
<li><a href="./constructor.html">Constructor</a></li>
</ul>
</nav>
<p class="version">v. 0.2.7</p>
</header>
</div>
<div class="container content">
<div class="example-select">
<h1 class="example-select_title">Select constructor</h1>
<div class="row" style="margin: 20px; color: white">
<div class="col">
<h5 style="font-size: 18px; margin: 0;">Select Style Builder:</h5>
<p style="margin-right: 50px; font-size: 17px">
This is a constructor for styling a select online without downloading. For it to work,
you need to:
<ol style="font-size: 15px;">
<li class="liList">Select a part of the select for customization. </li>
<li class="liList">Enter styles in the text field in the form "color: red;".</li>
<li class="liList">Click on the render button.</li>
</ol>
</p>
</div>
<div class="col">
<div class="layout-select constructor">
<button class="cg-dropdown body"></button>
<textarea
name="styles"
id="styles"
cols="30"
rows="5"
class="textareaStyle"
placeholder="Enter CSS properties"
disabled="disabled"
></textarea>
<button type="button" class="check-code render">Render</button>
</div>
</div>
</div>
<div class="layout-select constructor" style="margin-bottom: 60px;">
<button class="cg-dropdown select"></button>
</div>
</div>
</div>
</body>
<script type="module" src="constructor.js"></script>
</html>

23
example.scss → style.scss
View File

@ -1,6 +1,3 @@
// @import '/src/main.scss';
@import "./src/constructor/constructor.scss";
* { * {
font-size: 14px; font-size: 14px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
@ -80,7 +77,7 @@
justify-content: space-around; justify-content: space-around;
margin: 15px 0 30px 0; margin: 15px 0 30px 0;
padding: 0; padding: 0;
width: 230px; width: 500px;
li { li {
display: inline; display: inline;
@ -194,6 +191,7 @@ code {
} }
pre { pre {
position: relative;
background: #1e1e1e; background: #1e1e1e;
margin: 15px; margin: 15px;
padding: 30px 15px 0 5px; padding: 30px 15px 0 5px;
@ -203,6 +201,23 @@ pre {
line-height: 20px; line-height: 20px;
} }
.copy {
position: absolute;
top: 25px;
right: 25px;
height: 29px;
width: 100px;
border-radius: 8px;
text-align: center;
border: none;
cursor: pointer;
&:hover {
background-color: #d7d7d7;
transition: all 1s;
}
}
.code { .code {
&__class, &__class,
&__var, &__var,