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

Merge pull request #1 from MaxOvs19/update-page

Browse Source 
Update page
This commit is contained in:
MaxOvs19 2023-04-07 15:02:47 +03:00 committed by GitHub
commit caad70aaad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 399 additions and 512 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@ -97,7 +97,7 @@
id="version--0231"
style="color: inherit; text-decoration: none"
>
<h2>version ~ 0.2.6</h2>
<h2>version ~ 0.3.0</h2>
</a>
<p>
This component allows you to create a custom select. It offers more

262
index.html
View File

@ -15,7 +15,7 @@
<title>Cg-Select</title>
<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>
<body class="body-example">
<div class="container">
@ -27,11 +27,12 @@
<hr style="width: 55%" />
<nav>
<ul class="navlist">
<li><a href="">Home</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>
</nav>
<p class="version">v. 0.2.6</p>
<p class="version">v. 0.3.0</p>
</header>
</div>
@ -46,12 +47,14 @@
<input type="submit" value="Submit!" class="example-select_submit" />
<button type="button" class="check-code" id="first">View code</button>
<code id="codeFirst">
<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>({
selector: <span class="code__string">'.cg-dropdown_one',</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: [
<span class="code__string">'BMW',</span>
{
@ -78,90 +81,93 @@
</div>
<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">
*Native select appears on mobile resolution.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_selectNative"></button>
</div>
<p style="margin-left: 12px; color: white">
*Native select appears on mobile resolution.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_selectNative"></button>
</div>
<button type="button" class="check-code" id="Native">View code</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">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</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>
},
<button type="button" class="check-code" id="Native">View code</button>
<code id="codeNative">
<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>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</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,
},
});
</pre>
</code>
</form>
<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>
</div>
<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">
*When using this method, the selection sheet appears as a modal window.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
</div>
<p style="margin-left: 12px; color: white">
*When using this method, the selection sheet appears as a modal
window.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
</div>
<button type="button" class="check-code" id="six">View code</button>
<button type="button" class="check-code" id="six">View code</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">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
placeholder: <span class="code__string">'Choose a car',</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>
},
<code id="codeSix">
<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>({
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
placeholder: <span class="code__string">'Choose a car',</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,
},
});
</pre>
</code>
</form>
<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>
</div>
<div class="example-select">
@ -173,10 +179,11 @@
<code id="codeSecond">
<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>({
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>
url: <span class="code__string">'https://jsonplaceholder.typicode.com/todos',</span>
searchMode: <span class="code__keyword">true,</span>
darkTheme: <span class="code__keyword">false,</span>
language: <span class="code__string">'ru',</span>
@ -201,16 +208,16 @@
<div class="col">
<h5>Default theme:</h5>
<p style="margin-right: 50px">
To change the theme of the select, you need to specify this parameter in the select
settings. The default theme is the classic theme, you can choose a white or dark
theme.
To change the theme of the select, you need to specify this
parameter in the select settings. The default theme is the
classic theme, you can choose a white or dark theme.
</p>
<code style="display: block; margin-top: 104px; ">
<pre style="height: 240px;">
<code style="display: block; margin-top: 104px">
<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>({
selector: <span class="code__string">'.cg-dropdown_one',</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: [
...
],
@ -224,11 +231,14 @@
<h5>Create custom theme:</h5>
<div class="createTheme">
<p style="margin-right: 25px">
To create your own theme, you need to create an object with the following fields.
In these fields you need to insert the previously created css class. After
creating the object, just pass it to the select settings.
<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)
To create your own theme, you need to create an object with
the following fields. In these fields you need to insert the
previously created css class. After creating the object, just
pass it to the select settings.
<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>
<code style="display: block">
<pre>
@ -240,7 +250,7 @@
placeholder?: <span class="code__class">object</span> ,
caret?: <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>
@ -258,7 +268,7 @@
<div class="row">
<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> = {
name: <span class="code__string">'test',</span>
styles: {
@ -268,7 +278,7 @@
caret: <span class="code__string">'caretTestClass',</span> ,
search: <span class="code__string">'searchTestClass',</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'
</span> },
search: {},
lable: {},
label: {},
},
};
</pre>
@ -326,44 +336,6 @@
</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">
<h1 class="example-select_title">Categories</h1>
@ -374,6 +346,7 @@
<code id="codeThird">
<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>({
selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Выберите регион',</span>
@ -430,17 +403,25 @@
<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 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>
<button type="button" class="check-code" id="callback">
View code
</button>
<code id="codeCallback">
<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>({
selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Choose a car',</span>
@ -486,6 +467,7 @@
<code id="codeFourth">
<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>({
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
placeholder: <span class="code__string">'Choose a car',</span>
@ -532,7 +514,12 @@
<div class="example-select">
<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">
You agree to the processing of data</label
>
@ -544,6 +531,7 @@
<button type="button" class="check-code" id="fifth">View code</button>
<code id="codeFifth">
<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>({
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
placeholder: <span class="code__string">'Choose a car',</span>

5
index.js
View File

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

397
package-lock.json generated
View File

@ -1,15 +1,15 @@
{
"name": "example-cg-select-page",
"version": "0.2.5",
"version": "0.3.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "example-cg-select-page",
"version": "0.2.5",
"version": "0.3.0",
"license": "ISC",
"dependencies": {
"cg-select": "^0.2.5",
"cg-select": "^0.3.0",
"gh-pages": "^5.0.0",
"parcel": "^2.8.3"
},
@ -1371,11 +1371,6 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"node_modules/@types/prettier": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
"integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
},
"node_modules/abortcontroller-polyfill": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz",
@ -1392,11 +1387,6 @@
"node": ">=0.4.0"
}
},
"node_modules/ansi-sequence-parser": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz",
"integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ=="
},
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@ -1551,55 +1541,9 @@
]
},
"node_modules/cg-select": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.2.5.tgz",
"integrity": "sha512-RziN32tl8Wdd0JTLPsIFIlD1cTDfCpmuzqtrr1dYILh8gT8HRpmhRgXC0FzcLWqIeeCPOXCxNaIfzQ/LNvPzdg==",
"dependencies": {
"@parcel/optimizer-css": "^2.8.0",
"@types/prettier": "^2.7.2",
"gh-pages": "^4.0.0",
"typedoc": "^0.23.24",
"typescript": "^4.9.4"
}
},
"node_modules/cg-select/node_modules/async": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
"dependencies": {
"lodash": "^4.17.14"
}
},
"node_modules/cg-select/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
},
"node_modules/cg-select/node_modules/email-addresses": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
"integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
},
"node_modules/cg-select/node_modules/gh-pages": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
"integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
"dependencies": {
"async": "^2.6.1",
"commander": "^2.18.0",
"email-addresses": "^3.0.1",
"filenamify": "^4.3.0",
"find-cache-dir": "^3.3.1",
"fs-extra": "^8.1.0",
"globby": "^6.1.0"
},
"bin": {
"gh-pages": "bin/gh-pages.js",
"gh-pages-clean": "bin/gh-pages-clean.js"
},
"engines": {
"node": ">=10"
}
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.3.0.tgz",
"integrity": "sha512-o6bJV8vH+iwgypfYQOUZEqsJXm6F967g4s9HRf9wy8Kt04rmwlNxUIadB0DulC/eoKzR48UC5H10WJT3Zn4SFA=="
},
"node_modules/chalk": {
"version": "4.1.2",
@ -2256,11 +2200,6 @@
"node": ">=6"
}
},
"node_modules/jsonc-parser": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
},
"node_modules/jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@ -2488,16 +2427,6 @@
"node": ">=8"
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lunr": {
"version": "2.3.9",
"resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
"integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
},
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@ -2520,17 +2449,6 @@
"semver": "bin/semver.js"
}
},
"node_modules/marked": {
"version": "4.2.12",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz",
"integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@ -2599,6 +2517,25 @@
"node-gyp-build-optional-packages-test": "build-test.js"
}
},
"node_modules/nanoid": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"optional": true,
"peer": true,
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/node-addon-api": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
@ -2845,6 +2782,31 @@
"node": ">=8"
}
},
"node_modules/postcss": {
"version": "8.4.21",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
"integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
}
],
"optional": true,
"peer": true,
"dependencies": {
"nanoid": "^3.3.4",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@ -2925,6 +2887,16 @@
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"node_modules/relateurl": {
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
"optional": true,
"peer": true,
"engines": {
"node": ">= 0.10"
}
},
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@ -2977,17 +2949,6 @@
"semver": "bin/semver"
}
},
"node_modules/shiki": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.1.tgz",
"integrity": "sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw==",
"dependencies": {
"ansi-sequence-parser": "^1.1.0",
"jsonc-parser": "^3.2.0",
"vscode-oniguruma": "^1.7.0",
"vscode-textmate": "^8.0.0"
}
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -3000,7 +2961,7 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true,
"devOptional": true,
"engines": {
"node": ">=0.10.0"
}
@ -3085,9 +3046,9 @@
}
},
"node_modules/terser": {
"version": "5.16.4",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.4.tgz",
"integrity": "sha512-5yEGuZ3DZradbogeYQ1NaGz7rXVBDWujWlx1PT8efXO6Txn+eWbfKqB2bTDVmFXmePFkoLU6XI8UektMIEA0ug==",
"version": "5.16.8",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
"integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
"dependencies": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
@ -3149,60 +3110,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/typedoc": {
"version": "0.23.25",
"resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.25.tgz",
"integrity": "sha512-O1he153qVyoCgJYSvIyY3bPP1wAJTegZfa6tL3APinSZhJOf8CSd8F/21M6ex8pUY/fuY6n0jAsT4fIuMGA6sA==",
"dependencies": {
"lunr": "^2.3.9",
"marked": "^4.2.12",
"minimatch": "^6.1.6",
"shiki": "^0.14.1"
},
"bin": {
"typedoc": "bin/typedoc"
},
"engines": {
"node": ">= 14.14"
},
"peerDependencies": {
"typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x"
}
},
"node_modules/typedoc/node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"dependencies": {
"balanced-match": "^1.0.0"
}
},
"node_modules/typedoc/node_modules/minimatch": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
"integrity": "sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==",
"dependencies": {
"brace-expansion": "^2.0.1"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/typescript": {
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
},
"node_modules/universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -3249,16 +3156,6 @@
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
},
"node_modules/vscode-oniguruma": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
"integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
},
"node_modules/vscode-textmate": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
"integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
},
"node_modules/weak-lru-cache": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
@ -4132,11 +4029,6 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"@types/prettier": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
"integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
},
"abortcontroller-polyfill": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz",
@ -4147,11 +4039,6 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
},
"ansi-sequence-parser": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz",
"integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ=="
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@ -4256,50 +4143,9 @@
"integrity": "sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA=="
},
"cg-select": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.2.5.tgz",
"integrity": "sha512-RziN32tl8Wdd0JTLPsIFIlD1cTDfCpmuzqtrr1dYILh8gT8HRpmhRgXC0FzcLWqIeeCPOXCxNaIfzQ/LNvPzdg==",
"requires": {
"@parcel/optimizer-css": "^2.8.0",
"@types/prettier": "^2.7.2",
"gh-pages": "^4.0.0",
"typedoc": "^0.23.24",
"typescript": "^4.9.4"
},
"dependencies": {
"async": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
"requires": {
"lodash": "^4.17.14"
}
},
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
},
"email-addresses": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
"integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
},
"gh-pages": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
"integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
"requires": {
"async": "^2.6.1",
"commander": "^2.18.0",
"email-addresses": "^3.0.1",
"filenamify": "^4.3.0",
"find-cache-dir": "^3.3.1",
"fs-extra": "^8.1.0",
"globby": "^6.1.0"
}
}
}
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.3.0.tgz",
"integrity": "sha512-o6bJV8vH+iwgypfYQOUZEqsJXm6F967g4s9HRf9wy8Kt04rmwlNxUIadB0DulC/eoKzR48UC5H10WJT3Zn4SFA=="
},
"chalk": {
"version": "4.1.2",
@ -4742,11 +4588,6 @@
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
},
"jsonc-parser": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
},
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@ -4857,16 +4698,6 @@
"p-locate": "^4.1.0"
}
},
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lunr": {
"version": "2.3.9",
"resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
"integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@ -4882,11 +4713,6 @@
}
}
},
"marked": {
"version": "4.2.12",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz",
"integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw=="
},
"mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@ -4940,6 +4766,13 @@
}
}
},
"nanoid": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
"optional": true,
"peer": true
},
"node-addon-api": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
@ -5109,6 +4942,18 @@
"find-up": "^4.0.0"
}
},
"postcss": {
"version": "8.4.21",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
"integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
"optional": true,
"peer": true,
"requires": {
"nanoid": "^3.3.4",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
}
},
"postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@ -5173,6 +5018,13 @@
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"relateurl": {
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
"optional": true,
"peer": true
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@ -5199,17 +5051,6 @@
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
},
"shiki": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.1.tgz",
"integrity": "sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw==",
"requires": {
"ansi-sequence-parser": "^1.1.0",
"jsonc-parser": "^3.2.0",
"vscode-oniguruma": "^1.7.0",
"vscode-textmate": "^8.0.0"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -5219,7 +5060,7 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true
"devOptional": true
},
"source-map-support": {
"version": "0.5.21",
@ -5276,9 +5117,9 @@
"integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="
},
"terser": {
"version": "5.16.4",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.4.tgz",
"integrity": "sha512-5yEGuZ3DZradbogeYQ1NaGz7rXVBDWujWlx1PT8efXO6Txn+eWbfKqB2bTDVmFXmePFkoLU6XI8UektMIEA0ug==",
"version": "5.16.8",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
"integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
"requires": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
@ -5324,40 +5165,6 @@
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
},
"typedoc": {
"version": "0.23.25",
"resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.25.tgz",
"integrity": "sha512-O1he153qVyoCgJYSvIyY3bPP1wAJTegZfa6tL3APinSZhJOf8CSd8F/21M6ex8pUY/fuY6n0jAsT4fIuMGA6sA==",
"requires": {
"lunr": "^2.3.9",
"marked": "^4.2.12",
"minimatch": "^6.1.6",
"shiki": "^0.14.1"
},
"dependencies": {
"brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"requires": {
"balanced-match": "^1.0.0"
}
},
"minimatch": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
"integrity": "sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==",
"requires": {
"brace-expansion": "^2.0.1"
}
}
}
},
"typescript": {
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g=="
},
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -5382,16 +5189,6 @@
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
},
"vscode-oniguruma": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
"integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
},
"vscode-textmate": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
"integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
},
"weak-lru-cache": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "example-cg-select-page",
"version": "0.2.6",
"version": "0.3.0",
"description": "This is a test page to demonstrate the capabilities of the select",
"scripts": {
"start": "parcel ./index.html -p 4660 --open",
@ -30,7 +30,7 @@
},
"homepage": "https://cg-select.itguild.info",
"dependencies": {
"cg-select": "^0.2.5",
"cg-select": "^0.3.0",
"gh-pages": "^5.0.0",
"parcel": "^2.8.3"
},

70
src/buttonControlCode.js Normal file
View File

@ -0,0 +1,70 @@
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 codeFirst = document.getElementById("codeFirst"); // cp1
copyCode(copy1, codeFirst);
const secondBtn = document.getElementById("second");
const codeSecond = document.getElementById("codeSecond"); // cp4
copyCode(copy4, codeSecond);
const thirdBtn = document.getElementById("third");
const codeThird = document.getElementById("codeThird"); // cp5
copyCode(copy5, codeThird);
const fourthBtn = document.getElementById("fourth");
const codeFourth = document.getElementById("codeFourth"); // cp7
copyCode(copy7, codeFourth);
const fifthBtn = document.getElementById("fifth");
const codeFifth = document.getElementById("codeFifth"); // cp8
copyCode(copy8, codeFifth);
const six = document.getElementById("six");
const codeSix = document.getElementById("codeSix"); // cp3
copyCode(copy3, codeSix);
const Native = document.getElementById("Native");
const codeNative = document.getElementById("codeNative"); // cp2
copyCode(copy2, codeNative);
const callback = document.getElementById("callback");
const codeCallback = document.getElementById("codeCallback"); // cp6
copyCode(copy6, codeCallback);
toggleCode(firstBtn, codeFirst);
toggleCode(secondBtn, codeSecond);
toggleCode(thirdBtn, codeThird);
toggleCode(fourthBtn, codeFourth);
toggleCode(fifthBtn, codeFifth);
toggleCode(six, codeSix);
toggleCode(Native, codeNative);
toggleCode(callback, codeCallback);
function copyCode(button, elementCopy) {
button.addEventListener("click", (e) => {
e.preventDefault();
navigator.clipboard.writeText(elementCopy.textContent);
});
}
function toggleCode(button, elementCopy) {
button.addEventListener("click", () => {
elementCopy.classList.toggle("active");
});
}

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.3.0</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>

55
src/example.js
View File

@ -1,55 +0,0 @@
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");
const callback = document.getElementById("callback");
const codeCallback = document.getElementById("codeCallback");
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");
});
callback.addEventListener("click", () => {
codeCallback.classList.toggle("active");
});

9
src/themeTest.ts
View File

@ -1,9 +0,0 @@
// import { CustomTheme } from 'components/theme/theme.interface';
// export const newCustomTheme: CustomTheme = {
// name: 'test',
// styles: {
// head: 'testClass',
// list: 'listTest',
// },
// };

23
example.scss → style.scss
View File

@ -1,6 +1,3 @@
// @import '/src/main.scss';
@import "./src/constructor/constructor.scss";
* {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
@ -80,7 +77,7 @@
justify-content: space-around;
margin: 15px 0 30px 0;
padding: 0;
width: 230px;
width: 500px;
li {
display: inline;
@ -194,6 +191,7 @@ code {
}
pre {
position: relative;
background: #1e1e1e;
margin: 15px;
padding: 30px 15px 0 5px;
@ -203,6 +201,23 @@ pre {
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 {
&__class,
&__var,