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

Merge pull request #32 from apuc/native-select-mode

Browse Source 
Native select mode + DIsplay Mode
This commit is contained in:
MaxOvs19 2022-12-29 17:25:45 +03:00 committed by GitHub
commit 9d46709478
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 1625 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

10
CHANGELOG.md
View File

@ -1,6 +1,6 @@
# CG-SELECT
## 16.12.2022 - релиз версии 0.1.0!
### 16.12.2022 - релиз версии 0.1.0!
### 20.12.2022 - обновление 0.1.12.
@ -12,3 +12,11 @@
- Изменеия в расположении файлов scss.
- Исправлено влияние стилей селекта на JS приложение.
### 29.12.2022 - обновление 0.1.17
- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно).
- Исправленны выявленные баги.
- Исправленно отображение страницы с примером на мобильных устройствах.
- Обновленна документация!

16
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT
## version ~ 0.1.14
## version ~ 0.1.17
Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
Доступна кастомизация, мультивыбор и живой поиск по елементам.
@ -45,8 +45,8 @@ npm i cg-select
### Пример создния обычного селекта
```javascript
import {DropDown} from 'cg-select/src/cg-select';
import 'cg-select/src/main.scss'
import { DropDown } from 'cg-select/src/cg-select';
import 'cg-select/src/main.scss';
const dropdown = new DropDown({
selector: '.cg-dropdown_selector',
@ -74,7 +74,7 @@ const dropdown = new DropDown({
![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select.
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Так же её можно открыть на странице с примером, или перейти по ссылке ниже.
**Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/up_/documentation/index.html
@ -88,10 +88,10 @@ const dropdown = new DropDown({
## Compatibility
Совместимость с приложениями | JS | React | Angular | Vue |
| -------------------------- | :--: | :-----: | :-----: | :--: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png)|
| Комментарий | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
| Совместимость с приложениями | JS | React | Angular | Vue |
| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
| Комментарий | Протестирован в Js приложениях и работает успешно. | Работает только с костылем в виде `setTimeout()` | пока недоступно | тесты не проведены |
## History

9
documentation/DropDown.html
View File

@ -110,10 +110,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -134,10 +131,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

158
documentation/cg-dropdown.js.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSDoc: Source: cg-dropdown.js</title>
<title>JSDoc: Source: cg-select.js</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
@ -15,7 +15,7 @@
<body>
<div id="main">
<h1 class="page-title">Source: cg-dropdown.js</h1>
<h1 class="page-title">Source: cg-select.js</h1>
<section>
<article>
@ -40,7 +40,7 @@
/**
* @class Описание класса DropDown
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
*@author Овсяников Максим
* @author Овсяников Максим
*/
export class DropDown {
/**
@ -116,7 +116,9 @@
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: {
head: {
background: '...',
@ -238,11 +240,14 @@
}
const select = this.#element.querySelector('.cg-select');
const nativeSelect = this.#element.querySelector('.nativeSelect');
if (value === true) {
this.#element.setAttribute('disabled', true);
nativeSelect.setAttribute('disabled', true);
select.classList.add('disabled');
} else {
this.#element.removeAttribute('disabled');
nativeSelect.removeAttribute('disabled');
select.classList.remove('disabled');
}
}
@ -255,11 +260,18 @@
* @method buttonControl
*/
buttonControl(button, method) {
const {listDisplayMode} = this.#options;
if(listDisplayMode === true){
return
}
this.btn = button;
button.addEventListener('click', () => {
if (method === 'open') {
if (method.toLowerCase() === 'open') {
this.#open(true);
} else if (method === 'close') {
} else if (method.toLowerCase() === 'close') {
this.#close();
} else {
return;
@ -269,14 +281,18 @@
/**
* Метод экземпляра класса DropDown
* @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
* @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
* @method addLenguage
* @method addLanguage
*/
addLenguage(lenguage) {
const { placeholder, textInListSearch } = lenguage;
addLanguage(language) {
const { placeholder, textInListSearch, selectPlaceholder } = language;
const { searchMode } = this.#options;
const select = this.#element.querySelector('.selected');
const textNodeSelect = document.createTextNode(selectPlaceholder);
select.appendChild(textNodeSelect);
if (searchMode &amp;&amp; searchMode == true) {
const search = this.#element.querySelector('.inputSearch');
const textNoRezult = this.#element.querySelector('.noRezult');
@ -323,9 +339,10 @@
const elem = document.querySelector(options.selector);
if (!elem) {
throw new Error(`Element with selector ${options.selector}`);
}
//TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
// if (!elem) {
// throw new Error(`Element with selector ${options.selector}`);
// }
this.#element = elem;
@ -368,14 +385,18 @@
* @protected
*/
#initSelected(select) {
const { styles, selected, placeholder, lable } = this.#options;
const { styles, selected, placeholder, lable, language } = this.#options;
if (selected) {
createSelected(this.#element, selected);
} else if (placeholder) {
createSelected(this.#element, placeholder);
} else {
createSelected(this.#element, 'Select...');
if (language &amp;&amp; language === 'ru') {
createSelected(this.#element, ru.selectPlaceholder);
} else {
createSelected(this.#element, en.selectPlaceholder);
}
}
if (select) {
@ -405,7 +426,13 @@
* @description Рендер елементов в селекте.
*/
#render(select) {
const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
const {
styles, multiselect,
searchMode, multiselectTag,
darkTheme, language,
nativeSelectMode, listDisplayMode
} = this.#options;
const random = Math.random().toString(36).substring(2, 10);
if (select || (select &amp;&amp; styles)) {
@ -422,12 +449,13 @@
this.random = random;
if (searchMode) {
if (lenguage === 'ru') {
if (language === 'ru') {
inputSearch = createInputSearch(random, ru.placeholder);
} else {
inputSearch = createInputSearch(random, en.placeholder);
}
const { search } = styles;
customStylesFormat(search, inputSearch);
ulList.appendChild(inputSearch);
}
@ -491,9 +519,19 @@
this.#checkTheme();
}
if(nativeSelectMode === true){
this.#selectMode(nativeSelectMode);
}
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
if(listDisplayMode === true){
this.#displayMode(listDisplayMode)
}
this.#addOptionsBehaviour();
}
@ -751,14 +789,14 @@
* @method #searchMode
*/
#searchMode(random) {
const { lenguage } = this.#options;
const { language } = this.#options;
const input = this.#element.querySelector(`#searchSelect-${random}`);
const searchSelect = this.#element.querySelectorAll('.list__item');
const result = document.createElement('p');
let textNode = '';
if (lenguage === 'ru') {
if (language &amp;&amp; language === 'ru') {
textNode = document.createTextNode(`${ru.textInListSearch}`);
} else {
textNode = document.createTextNode(`${en.textInListSearch}`);
@ -774,17 +812,22 @@
});
input.oninput = function () {
let val = this.value.trim();
let valueSearch = this.value.trim().toLowerCase();
let anyMatch = false;
if (val != '') {
if (valueSearch != '') {
searchSelect.forEach((elem) => {
if (elem.innerText.search(val) == -1) {
let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
anyMatch = anyMatch || isMatching;
if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
elem.classList.add('displayHide');
result.classList.remove('displayHide');
} else {
elem.classList.remove('displayHide');
}
});
result.classList.toggle('displayHide', anyMatch);
} else {
searchSelect.forEach((elem) => {
elem.classList.remove('displayHide');
@ -838,6 +881,64 @@
}
});
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
* @description Изменяет отображение селекта на мобильных устройствах
* @method #selectMode
*/
#selectMode(nativeSelectMode){
let win = window.outerWidth;
if(nativeSelectMode === true){
const select = this.#element.querySelector('.cg-select');
const list = this.#element.querySelector('.list');
const nativeSelect = this.#element.querySelector('.nativeSelect')
if(win &lt; 576){
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
} else if( win > 576){
select.classList.remove('displayHide');
list.classList.remove('displayHide');
nativeSelect.classList.remove('nativeSelectActive');
nativeSelect.classList.add('displayHide');
}
} else{
return
}
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method #displayMode
*/
#displayMode(listDisplayMode){
if(listDisplayMode === true){
const modal = document.createElement('div');
const body = document.querySelector('body')
const list = this.#list;
modal.appendChild(list);
this.#element.appendChild(modal);
this.#element.addEventListener('click', () => {
modal.classList.toggle('modal');
list.classList.toggle('listModal');
body.classList.toggle('overflowHide')
});
} else{
return
}
}
}
</code></pre>
</article>
@ -850,10 +951,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -874,10 +972,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

87
documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html → documentation/constructor.html
View File

@ -79,29 +79,31 @@
<h5>Example</h5>
<pre class="prettyprint"><code>options = {
selector: 'Уникальный селектор',
selected: 'Выбранный элемент',
placeholder: '...',
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
lenguage: 'ru/en',
styles: {
head: {
background: '...',
},
list: {...},
chips: {...},
caret: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
multiselect: true/false,
multiselectTag: true/false,
}</code></pre>
selector: 'Уникальный селектор',
selected: 'Выбранный элемент',
placeholder: '...',
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: {
head: {
background: '...',
},
list: {...},
chips: {...},
caret: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
multiselect: true/false,
multiselectTag: true/false,
}</code></pre>
</div>
</article>
@ -112,28 +114,34 @@
<strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
который задаеться при создании селекта.
</li>
<li>
<strong>selected</strong> - необязательный параметр, в который передается элемент
который будет выбран изначально в селекте.
</li>
<li>
<strong>placeholder</strong> - необязательный параметр, в который передается текст
плейсхолдера селекта.
</li>
<li>
<strong>items</strong> -
<strong
>*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
>, это массив елементов, которые будут отображаться в селекте при выборе.
</li>
<li>
<strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
</li>
<li>
<strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
по элеметам селекта.
</li>
<li>
<strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
@ -142,16 +150,33 @@
</li>
<li>
<strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию
<strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
отображаться нативный селект из HTML 5;
</li>
<li>
<strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
с выбором опции будет отображаться как модальное окно.
</li>
<li>
<strong>language</strong> - необязательный параметр, отвечающий за локализацию
некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
передав туда объект с полями для текста.
</li>
<li>
<strong>event</strong> - необязательный параметр, который отвечает за поведения
селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
открываться при наведении.
</li>
<li>
<strong>url</strong> -
<strong
@ -160,16 +185,19 @@
>
htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
</li>
<li>
<strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
отрисовываются как обычный текст, через запятую.
</li>
<li>
<strong>multiselectTag</strong> - необязательный параметр, который отвечает за
поведения селекта, для него,
<strong>***работает только в месте с подключением multiselect.</strong>
</li>
<li>
<strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
@ -186,10 +214,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -210,10 +235,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/create-element.js.html
View File

@ -153,10 +153,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -177,10 +174,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

113
documentation/global.html
View File

@ -158,6 +158,104 @@
</dd>
</dl>
<h4 class="name" id="displayMode">
<span class="type-signature">(protected) </span>#displayMode<span class="signature"
>(listDisplayMode)</span
><span class="type-signature"></span>
</h4>
<div class="description">
Изменяет отображение листа с выбором в виде модального окна.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>listDisplayMode</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">
параметр отвечающий за отображение выбора в виде модального окна.
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line895">line 895</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="selectMode">
<span class="type-signature">(protected) </span>#selectMode<span class="signature"
>(nativeSelectMode)</span
><span class="type-signature"></span>
</h4>
<div class="description">Изменяет отображение селекта на мобильных устройствах</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>nativeSelectMode</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">
параметр отвечающий за добавления нативного селекта.
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line864">line 864</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="initEvent">
<span class="type-signature">(protected) </span>#initEvent<span class="signature"
>()</span
@ -440,7 +538,7 @@
</dl>
<h4 class="name" id="addLenguage">
<span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</span
<span class="type-signature"></span>addLanguage<span class="signature">(language)</span
><span class="type-signature"></span>
</h4>
@ -464,7 +562,7 @@
<tbody>
<tr>
<td class="name"><code>lenguage</code></td>
<td class="name"><code>language</code></td>
<td class="type">
<span class="param-type">object</span>
@ -758,7 +856,7 @@
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>,
<a href="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line173">line 173</a>
</li>
</ul>
@ -774,10 +872,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -798,10 +893,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

16
documentation/index.html
View File

@ -19,7 +19,7 @@
<section>
<h2>CG-SELECT</h2>
<a href="/src/page/index.html">-- Вернуться к примеру --</a>
<a href="/example/index.html">-- Вернуться к примеру --</a>
<p>
Этот компонент предлагает более гибкую настройку и использование селекта. Так же
реализованны методы взаимодействия с селектом.
@ -35,10 +35,7 @@
</ul>
<p>
<strong>*Все настройки можно посмореть в вкладке</strong>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса</a
>
<a href="constructor.html">Конструктор класса</a>
</p>
<h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
@ -59,10 +56,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -83,10 +77,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/module-Utils.html
View File

@ -618,10 +618,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -642,10 +639,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/module-createElementChips.html
View File

@ -260,10 +260,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -284,10 +281,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/utils.js.html
View File

@ -257,10 +257,7 @@
<ul>
<li><a href="DropDown.html">DropDown</a></li>
<li>
<a
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
<a href="constructor.html">Конструктор класса DropDown</a>
</li>
</ul>
<h3>Modules</h3>
@ -281,10 +278,12 @@
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul>
<h3>Public methods</h3>
<ul>
<li><a href="global.html#addLenguage">addLenguage</a></li>
<li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li>

16
src/page/example.js → example/example.js
View File

@ -13,6 +13,14 @@ 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")
})
@ -32,3 +40,11 @@ fourthBtn.addEventListener('click', () => {
fifthBtn.addEventListener('click', () => {
codeFifth.classList.toggle("active")
})
six.addEventListener('click', () => {
codeSix.classList.toggle("active")
})
Native.addEventListener('click', () => {
codeNative.classList.toggle("active")
})

20
src/page/example.scss → example/example.scss
View File

@ -87,7 +87,6 @@
.content {
margin-top: 15px;
// background-color: #6b6d76;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@ -113,7 +112,6 @@
}
&_submit {
//background-color: #2a2f3b;
width: 200px;
height: 35px;
border-radius: 10px;
@ -194,3 +192,21 @@ pre {
.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;
}
}

102
src/page/index.html → example/index.html
View File

@ -4,8 +4,17 @@
<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="/src/page/example.scss" rel="stylesheet" />
<link href="example.scss" rel="stylesheet" />
</head>
<body class="body-example">
<div class="container">
@ -18,7 +27,7 @@
<nav>
<ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="/documentation/index.html">Documentation</a></li>
<li><a href="../documentation/index.html">Documentation</a></li>
</ul>
</nav>
</header>
@ -66,6 +75,93 @@
</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">
@ -218,7 +314,7 @@
<h1 class="example-select_title">Функция disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
<label for="checkboxDisable">Вы согласны на обработку данных</label>
<label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>

57
src/page/index.js → example/index.js
View File

@ -27,12 +27,59 @@ const dropdown = new DropDown({
},
});
// const ger = {
// placeholder: 'searcH????',
// textInListSearch: 'None',
// };
// ------------------------------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',
},
},
});
// dropdown.addLenguage(ger);
// ------------------------------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({

4
index.js Normal file
View File

@ -0,0 +1,4 @@
import { DropDown } from './src/cg-select';
export default DropDown;

978
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -1,15 +1,16 @@
{
"name": "cg-select",
"version": "0.1.15",
"version": "0.1.17",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": {
"name": "CraftGroup",
"url": "https://github.com/apuc/"
},
"homepage": "https://cg-select.itguild.info",
"main": "dist/index.js",
"scripts": {
"start": "parcel src/page/index.html -p 4500 --open ",
"build": "parcel build ./src/page/index.html",
"start": "parcel example/index.html -p 4500 --open ",
"build": "parcel build index.js",
"deploy": "gh-pages -d dist",
"predeploy": "npm run build"
},
@ -23,6 +24,7 @@
},
"devDependencies": {
"@parcel/transformer-sass": "^2.7.0",
"jsdoc": "^4.0.0",
"parcel": "^2.7.0",
"prettier": "^2.7.1"
},

89
src/cg-select.js
View File

@ -95,6 +95,8 @@ export class DropDown {
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: {
head: {
@ -237,11 +239,18 @@ export class DropDown {
* @method buttonControl
*/
buttonControl(button, method) {
const {listDisplayMode} = this.#options;
if(listDisplayMode === true){
return
}
this.btn = button;
button.addEventListener('click', () => {
if (method === 'open') {
if (method.toLowerCase() === 'open') {
this.#open(true);
} else if (method === 'close') {
} else if (method.toLowerCase() === 'close') {
this.#close();
} else {
return;
@ -396,7 +405,13 @@ export class DropDown {
* @description Рендер елементов в селекте.
*/
#render(select) {
const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options;
const {
styles, multiselect,
searchMode, multiselectTag,
darkTheme, language,
nativeSelectMode, listDisplayMode
} = this.#options;
const random = Math.random().toString(36).substring(2, 10);
if (select || (select && styles)) {
@ -483,9 +498,19 @@ export class DropDown {
this.#checkTheme();
}
if(nativeSelectMode === true){
this.#selectMode(nativeSelectMode);
}
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
if(listDisplayMode === true){
this.#displayMode(listDisplayMode)
}
this.#addOptionsBehaviour();
}
@ -835,4 +860,62 @@ export class DropDown {
}
});
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
* @description Изменяет отображение селекта на мобильных устройствах
* @method #selectMode
*/
#selectMode(nativeSelectMode){
let win = window.outerWidth;
if(nativeSelectMode === true){
const select = this.#element.querySelector('.cg-select');
const list = this.#element.querySelector('.list');
const nativeSelect = this.#element.querySelector('.nativeSelect')
if(win < 576){
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
} else if( win > 576){
select.classList.remove('displayHide');
list.classList.remove('displayHide');
nativeSelect.classList.remove('nativeSelectActive');
nativeSelect.classList.add('displayHide');
}
} else{
return
}
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method #displayMode
*/
#displayMode(listDisplayMode){
if(listDisplayMode === true){
const modal = document.createElement('div');
const body = document.querySelector('body')
const list = this.#list;
modal.appendChild(list);
this.#element.appendChild(modal);
this.#element.addEventListener('click', () => {
modal.classList.toggle('modal');
list.classList.toggle('listModal');
body.classList.toggle('overflowHide')
});
} else{
return
}
}
}

3
src/index.js
View File

@ -1,3 +0,0 @@
import { DropDown } from './cg-select';
export default DropDown;

24
src/main.scss
View File

@ -2,6 +2,7 @@
@import './style/scrollbar.scss';
@import './style/svgStyle.scss';
@import './style/whiteTheme.scss';
@import './style/displayMode.scss';
// ----Layout----
.cg-dropdown {
@ -258,8 +259,11 @@ input[type='checkbox'] {
.label {
color: white;
}
//-------Behavior--------
.active {
text-align: start;
background: #8282822c;
}
@ -270,7 +274,7 @@ input[type='checkbox'] {
-ms-transition: 0.5s;
-o-transition: 0.5s;
display: block;
display: block !important;
opacity: 1;
&_none {
@ -289,7 +293,7 @@ input[type='checkbox'] {
}
.displayHide {
display: none;
display: none !important;
}
/*320px - 576px*/
@ -299,23 +303,13 @@ input[type='checkbox'] {
padding: 0;
}
.container {
width: 90%;
.header {
h1 {
font-size: 32px;
}
}
}
.list {
width: 98% !important;
}
// .open {
// display: none !important;
// }
.listModal {
width: 88% !important;
}
.cg-select {
width: 100% !important;

24
src/style/displayMode.scss Normal file
View File

@ -0,0 +1,24 @@
.modal {
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0.45);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
&_active {
display: flex;
}
}
.listModal {
position: fixed !important;
top: 150px;
}
.overflowHide {
overflow: hidden;
}

34
src/style/nativeSelect.scss
View File

@ -18,19 +18,25 @@
}
}
// @media (max-width: 576px) {
// .nativeSelect {
// display: block;
// min-width: 235px;
// height: 50px;
.nativeSelectActive {
display: block;
min-width: 235px;
height: 50px;
border: none;
border-radius: 10px;
}
// border: none;
// border-radius: 10px;
// }
@media (max-width: 576px) {
.nativeSelect {
min-width: 235px;
height: 50px;
border: none;
border-radius: 10px;
}
// select[multiple='multiple'] {
// color: black;
// background-color: white;
// border-radius: 0;
// }
// }
select[multiple='multiple'] {
color: black;
background-color: white;
border-radius: 0;
}
}