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

Finished update

Browse Source
This commit is contained in:
MaxOvs19 2023-02-08 15:03:36 +03:00
parent c5d41550b1
commit d9e6fc72c9
7 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CHANGELOG.md
View File

@ -26,13 +26,23 @@ Tested in JS and React. Errors in work in React applications are revealed.
- All select rewritten to ts. - All select rewritten to ts.
- Fixed bugs and shortcomings. - Fixed bugs and shortcomings.
24.01.2023 - fix 0.2.2 - Fixed documentation etc. ##### 24.01.2023 - fix 0.2.2 - Fixed documentation etc.
27.01.2023 - fix 0.2.3
### 27.01.2023 - update 0.2.3
- Changed the theme selection function. - Changed the theme selection function.
- Fixed documentation. - Fixed documentation.
31.01.2023 - fix 0.2.31 ##### 31.01.2023 - fix 0.2.31
- Adding a new method to track select actions. - Adding a new method to track select actions.
- Fixed documentation. - Fixed documentation.
##### 08.02.2023 - fix 0.2.32
- Fixing Methods and Variables.
- Updating how themes work.
- Fixed documentation.
- Fixing bugs related to the cleanup of the select.
- Documentation navigation update.
- Added icon for example page and documentation.

1
docs/index.html
View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="assets/highlight.css" /> <link rel="stylesheet" href="assets/highlight.css" />
<link rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" />
<script async src="assets/search.js" id="search-script"></script> <script async src="assets/search.js" id="search-script"></script>
</head> </head>
<body> <body>

2
example/index.html
View File

@ -14,6 +14,7 @@
<meta property="og:image" content="/src/images/logoCG.jpg" /> <meta property="og:image" content="/src/images/logoCG.jpg" />
<title>Cg-Select</title> <title>Cg-Select</title>
<link rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" />
<link href="example.scss" rel="stylesheet" /> <link href="example.scss" rel="stylesheet" />
</head> </head>
<body class="body-example"> <body class="body-example">
@ -351,6 +352,7 @@
maxWidth: <span class="code__string">'500px ',</span> maxWidth: <span class="code__string">'500px ',</span>
}, },
}, },
multiselect: <span class="code__keyword">true,</span>
}); });
</pre> </pre>
</code> </code>

3
example/index.js
View File

@ -57,6 +57,7 @@ const dropdownNativeSelect = new CGSelect({
width: '824px', width: '824px',
}, },
}, },
theme: 'dark',
}); });
// ------------------------------listDisplayMode-------------------- // ------------------------------listDisplayMode--------------------
@ -88,7 +89,7 @@ const dropdownlistDisplayMode = new CGSelect({
// --------------------------------Категории-------------------------- // --------------------------------Категории--------------------------
const dropdown4 = new CGSelect({ const dropdown4 = new CGSelect({
selector: '.cg-dropdown_categories', selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион', placeholder: 'Choose region',
searchMode: true, searchMode: true,
items: [ items: [
{ {

7
src/cg-select.ts
View File

@ -32,7 +32,6 @@ import { changeTheme } from './components/theme/theme';
* @author Ovsyanikov Maxim * @author Ovsyanikov Maxim
*/ */
export class CGSelect implements ICgSelect { export class CGSelect implements ICgSelect {
// Select settings
selector?: string; selector?: string;
selected?: string; selected?: string;
placeholder?: string; placeholder?: string;
@ -466,10 +465,6 @@ export class CGSelect implements ICgSelect {
* @method initEvent * @method initEvent
*/ */
private initEvent() { private initEvent() {
if (!this.event) {
return;
}
if (this.event) { if (this.event) {
if (this.event === 'mouseenter') { if (this.event === 'mouseenter') {
this.element!.addEventListener(this.event, () => { this.element!.addEventListener(this.event, () => {
@ -771,7 +766,7 @@ export class CGSelect implements ICgSelect {
* @returns {HTMLElement} returns a reference to the selected HTML element. * @returns {HTMLElement} returns a reference to the selected HTML element.
* @method getElement * @method getElement
*/ */
public getElement(numberItem: number): IItems[] | string[] | any { public getElement(numberItem: number): IItems[] | any {
if (numberItem > this.items.length) { if (numberItem > this.items.length) {
return; return;
} }

5
src/components/theme/theme.ts
View File

@ -4,6 +4,7 @@ export function changeTheme(element: Element, theme: string) {
const list = element!.querySelector('ul.list'); const list = element!.querySelector('ul.list');
const search = element!.querySelector('.inputSearch'); const search = element!.querySelector('.inputSearch');
const path = element.querySelectorAll('.pathWhite'); const path = element.querySelectorAll('.pathWhite');
const nativeSelect = element.querySelector('.nativeSelect');
select!.classList.remove('classicSelect'); select!.classList.remove('classicSelect');
list!.classList.remove('classicList'); list!.classList.remove('classicList');
@ -12,10 +13,11 @@ export function changeTheme(element: Element, theme: string) {
elem.classList.remove('pathWhite'); elem.classList.remove('pathWhite');
}); });
switch (theme) { switch (theme.toLowerCase()) {
case 'dark': case 'dark':
select!.classList.add('selectDark'); select!.classList.add('selectDark');
list!.classList.add('listDark'); list!.classList.add('listDark');
nativeSelect?.classList.add('listDark');
path.forEach((elem) => { path.forEach((elem) => {
elem.classList.add('pathWhite'); elem.classList.add('pathWhite');
}); });
@ -24,6 +26,7 @@ export function changeTheme(element: Element, theme: string) {
select!.classList.add('selectWhite'); select!.classList.add('selectWhite');
caret!.classList.add('caretWhite'); caret!.classList.add('caretWhite');
list!.classList.add('listWhite'); list!.classList.add('listWhite');
nativeSelect?.classList.add('listWhite');
path.forEach((elem) => { path.forEach((elem) => {
elem.classList.add('pathBlack'); elem.classList.add('pathBlack');
}); });

BIN
src/images/logoCG2.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB