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

fix typo

Browse Source
This commit is contained in:
Victor 2022-12-23 19:18:33 +03:00
parent 005f732424
commit 521bf00615
14 changed files with 112 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,14 +25,14 @@
getFormatItem,
getSelectText,
customStylesFormat,
nativOptionMultiple,
nativOptionOrdinary,
nativeOptionMultiple,
nativeOptionOrdinary,
clearSelect,
} from './components/utils';
import {
createBreadcrumb,
createInputSearch,
createNativSelectOption,
createNativeSelectOption,
createNativeSelect,
} from './components/create-element';
import { ru, en } from './language/language';
@ -416,19 +416,19 @@
}
const ulList = document.createElement('ul');
const nativSelect = createNativeSelect();
const nativeSelect = createNativeSelect();
let intputSearch = '';
let inputSearch = '';
this.random = random;
if (searchMode) {
if (lenguage === 'ru') {
intputSearch = createInputSearch(random, ru.placeholder);
inputSearch = createInputSearch(random, ru.placeholder);
} else {
intputSearch = createInputSearch(random, en.placeholder);
inputSearch = createInputSearch(random, en.placeholder);
}
ulList.appendChild(intputSearch);
ulList.appendChild(inputSearch);
}
ulList.classList.add('list');
@ -441,10 +441,10 @@
this.#element.appendChild(ulList);
this.#items.forEach((dataItem) => {
this.#element.appendChild(nativSelect);
this.#element.appendChild(nativeSelect);
const liItem = document.createElement('li');
const nativOption = createNativSelectOption();
const nativeOption = createNativeSelectOption();
const strongItem = document.createElement('strong');
liItem.classList.add('list__item');
@ -460,17 +460,17 @@
checkBox.classList.add('displayHide');
}
nativSelect.setAttribute('multiple', 'multiple');
nativeSelect.setAttribute('multiple', 'multiple');
}
let textNode = '';
if (dataItem.title) {
nativOption.text = dataItem.title;
nativOption.value = dataItem.title;
nativeOption.text = dataItem.title;
nativeOption.value = dataItem.title;
textNode = document.createTextNode(dataItem.title);
nativSelect.appendChild(nativOption);
nativeSelect.appendChild(nativeOption);
liItem.appendChild(textNode);
ulList.appendChild(liItem);
} else {
@ -546,7 +546,7 @@
const response = await fetch(url);
const dataUrl = await response.json();
const nativSelect = createNativeSelect();
const nativeSelect = createNativeSelect();
dataUrl.forEach((dataItem, index) => {
const item = {
@ -556,7 +556,7 @@
};
const ulUrl = this.#element.querySelector('.list');
const nativOption = createNativSelectOption();
const nativeOption = createNativeSelectOption();
const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title);
@ -568,23 +568,23 @@
}
checkBox.setAttribute('id', `chbox-${item.id}`);
nativSelect.setAttribute('multiple', 'multiple');
nativeSelect.setAttribute('multiple', 'multiple');
liUrl.appendChild(checkBox);
}
liUrl.classList.add('list__item');
nativOption.value = item.title;
nativOption.text = item.title;
nativeOption.value = item.title;
nativeOption.text = item.title;
nativSelect.appendChild(nativOption);
nativeSelect.appendChild(nativeOption);
liUrl.appendChild(textUrl);
ulUrl.appendChild(liUrl);
this.#items.push(item);
});
this.#element.appendChild(nativSelect);
this.#element.appendChild(nativeSelect);
this.#items.filter((item, index) => {
if (typeof item !== 'object') {
@ -643,7 +643,7 @@
const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected');
const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
const ulMultipul = document.createElement('ul');
@ -686,7 +686,7 @@
}
if (checkIndex === -1) {
nativOptionMultiple(nativOption, item.title, true);
nativeOptionMultiple(nativeOption, item.title, true);
this.#indexes.push(index);
select.innerText = '';
@ -714,7 +714,7 @@
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
nativOptionMultiple(nativOption, item.title, false);
nativeOptionMultiple(nativeOption, item.title, false);
}
if (!this.#selectedItems.length) {
@ -731,7 +731,7 @@
select.innerText = item.title;
this.#selectedItems = item;
nativOptionOrdinary(nativOption, item.title);
nativeOptionOrdinary(nativeOption, item.title);
options.forEach((option) => {
option.classList.remove('active');

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

@ -21,7 +21,7 @@
<article>
<pre
class="prettyprint source linenums"
><code>import { customStylesFormat, nativOptionMultiple } from './utils';
><code>import { customStylesFormat, nativeOptionMultiple } from './utils';
/**
* @module createBreadcrumb
*/
@ -39,7 +39,7 @@
const { placeholder, styles } = option;
const selected = element.querySelector('.selected');
const nativOption = element.querySelectorAll('.nativSelect__nativOption');
const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li');
const textNode = document.createTextNode(title);
@ -67,7 +67,7 @@
svgIcon.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
nativOptionMultiple(nativOption, title, false);
nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index);
let checkBox = '';
@ -99,22 +99,22 @@
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
export function createNativeSelect() {
const nativSelect = document.createElement('select');
const nativeSelect = document.createElement('select');
nativSelect.setAttribute('name', 'dataSelect');
nativSelect.classList.add('nativSelect');
return nativSelect;
nativeSelect.setAttribute('name', 'dataSelect');
nativeSelect.classList.add('nativeSelect');
return nativeSelect;
}
/**
* Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/
export function createNativSelectOption() {
const nativOption = document.createElement('option');
export function createNativeSelectOption() {
const nativeOption = document.createElement('option');
nativOption.classList.add('nativSelect__nativOption');
return nativOption;
nativeOption.classList.add('nativeSelect__nativeOption');
return nativeOption;
}
/**
@ -124,23 +124,23 @@
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/
export function createInputSearch(random, lenguage) {
const intputSearch = document.createElement('input');
const inputSearch = document.createElement('input');
intputSearch.type = 'text';
intputSearch.classList.add('inputSearch');
intputSearch.setAttribute('id', `searchSelect-${random}`);
inputSearch.type = 'text';
inputSearch.classList.add('inputSearch');
inputSearch.setAttribute('id', `searchSelect-${random}`);
if (lenguage) {
intputSearch.setAttribute('placeholder', `${lenguage}`);
inputSearch.setAttribute('placeholder', `${lenguage}`);
} else {
intputSearch.setAttribute('placeholder', 'Search...');
inputSearch.setAttribute('placeholder', 'Search...');
}
intputSearch.addEventListener('click', (e) => {
inputSearch.addEventListener('click', (e) => {
e.preventDefault();
});
return intputSearch;
return inputSearch;
}
</code></pre>
</article>

8
documentation/module-Utils.html
View File

@ -483,8 +483,8 @@
</dd>
</dl>
<h4 class="name" id=".nativOptionMultiple">
<span class="type-signature">(static) </span>nativOptionMultiple<span class="signature"
<h4 class="name" id=".nativeOptionMultiple">
<span class="type-signature">(static) </span>nativeOptionMultiple<span class="signature"
>(element, item, condition)</span
><span class="type-signature"></span>
</h4>
@ -552,8 +552,8 @@
</dd>
</dl>
<h4 class="name" id=".nativOptionOrdinary">
<span class="type-signature">(static) </span>nativOptionOrdinary<span class="signature"
<h4 class="name" id=".nativeOptionOrdinary">
<span class="type-signature">(static) </span>nativeOptionOrdinary<span class="signature"
>(element, item)</span
><span class="type-signature"></span>
</h4>

4
documentation/module-createElementChips.html
View File

@ -219,8 +219,8 @@
</dd>
</dl>
<h4 class="name" id=".createNativSelectOption">
<span class="type-signature">(static) </span>createNativSelectOption<span
<h4 class="name" id=".createNativeSelectOption">
<span class="type-signature">(static) </span>createNativeSelectOption<span
class="signature"
>()</span
><span class="type-signature"> &rarr; {HTMLOptionElement}</span>

4
documentation/utils.js.html
View File

@ -155,7 +155,7 @@
* @param {NodeList} element NodeList нативного селекта
* @param {object} item выбранный элемент в кастомном селекте
*/
export function nativOptionOrdinary(element, item) {
export function nativeOptionOrdinary(element, item) {
element.forEach((option) => {
option.removeAttribute('selected');
if (option.textContent === item) {
@ -170,7 +170,7 @@
* @param {object} item выбранный элемент в кастомном селекте
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
*/
export function nativOptionMultiple(element, item, condition) {
export function nativeOptionMultiple(element, item, condition) {
element.forEach((option) => {
if (condition == true) {
if (option.textContent === item) {

58
src/cg-select.js
View File

@ -4,14 +4,14 @@ import {
getFormatItem,
getSelectText,
customStylesFormat,
nativOptionMultiple,
nativOptionOrdinary,
nativeOptionMultiple,
nativeOptionOrdinary,
clearSelect,
} from './components/utils';
import {
createBreadcrumb,
createInputSearch,
createNativSelectOption,
createNativeSelectOption,
createNativeSelect,
} from './components/create-element';
import { ru, en } from './language/language';
@ -217,14 +217,14 @@ export class DropDown {
}
const select = this.#element.querySelector('.cg-select');
const nativSelect = this.#element.querySelector('.nativSelect');
const nativeSelect = this.#element.querySelector('.nativeSelect');
if (value === true) {
this.#element.setAttribute('disabled', true);
nativSelect.setAttribute('disabled', true);
nativeSelect.setAttribute('disabled', true);
select.classList.add('disabled');
} else {
this.#element.removeAttribute('disabled');
nativSelect.removeAttribute('disabled');
nativeSelect.removeAttribute('disabled');
select.classList.remove('disabled');
}
}
@ -407,20 +407,20 @@ export class DropDown {
}
const ulList = document.createElement('ul');
const nativSelect = createNativeSelect();
const nativeSelect = createNativeSelect();
let intputSearch = '';
let inputSearch = '';
this.random = random;
if (searchMode) {
if (language === 'ru') {
intputSearch = createInputSearch(random, ru.placeholder);
inputSearch = createInputSearch(random, ru.placeholder);
} else {
intputSearch = createInputSearch(random, en.placeholder);
inputSearch = createInputSearch(random, en.placeholder);
}
const { search } = styles;
customStylesFormat(search, intputSearch);
ulList.appendChild(intputSearch);
customStylesFormat(search, inputSearch);
ulList.appendChild(inputSearch);
}
ulList.classList.add('list');
@ -433,10 +433,10 @@ export class DropDown {
this.#element.appendChild(ulList);
this.#items.forEach((dataItem) => {
this.#element.appendChild(nativSelect);
this.#element.appendChild(nativeSelect);
const liItem = document.createElement('li');
const nativOption = createNativSelectOption();
const nativeOption = createNativeSelectOption();
const strongItem = document.createElement('strong');
liItem.classList.add('list__item');
@ -452,17 +452,17 @@ export class DropDown {
checkBox.classList.add('displayHide');
}
nativSelect.setAttribute('multiple', 'multiple');
nativeSelect.setAttribute('multiple', 'multiple');
}
let textNode = '';
if (dataItem.title) {
nativOption.text = dataItem.title;
nativOption.value = dataItem.title;
nativeOption.text = dataItem.title;
nativeOption.value = dataItem.title;
textNode = document.createTextNode(dataItem.title);
nativSelect.appendChild(nativOption);
nativeSelect.appendChild(nativeOption);
liItem.appendChild(textNode);
ulList.appendChild(liItem);
} else {
@ -538,7 +538,7 @@ export class DropDown {
const response = await fetch(url);
const dataUrl = await response.json();
const nativSelect = createNativeSelect();
const nativeSelect = createNativeSelect();
dataUrl.forEach((dataItem, index) => {
const item = {
@ -548,7 +548,7 @@ export class DropDown {
};
const ulUrl = this.#element.querySelector('.list');
const nativOption = createNativSelectOption();
const nativeOption = createNativeSelectOption();
const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title);
@ -560,23 +560,23 @@ export class DropDown {
}
checkBox.setAttribute('id', `chbox-${item.id}`);
nativSelect.setAttribute('multiple', 'multiple');
nativeSelect.setAttribute('multiple', 'multiple');
liUrl.appendChild(checkBox);
}
liUrl.classList.add('list__item');
nativOption.value = item.title;
nativOption.text = item.title;
nativeOption.value = item.title;
nativeOption.text = item.title;
nativSelect.appendChild(nativOption);
nativeSelect.appendChild(nativeOption);
liUrl.appendChild(textUrl);
ulUrl.appendChild(liUrl);
this.#items.push(item);
});
this.#element.appendChild(nativSelect);
this.#element.appendChild(nativeSelect);
this.#items.filter((item, index) => {
if (typeof item !== 'object') {
@ -635,7 +635,7 @@ export class DropDown {
const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected');
const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
const ulMultipul = document.createElement('ul');
@ -678,7 +678,7 @@ export class DropDown {
}
if (checkIndex === -1) {
nativOptionMultiple(nativOption, item.title, true);
nativeOptionMultiple(nativeOption, item.title, true);
this.#indexes.push(index);
select.innerText = '';
@ -706,7 +706,7 @@ export class DropDown {
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
nativOptionMultiple(nativOption, item.title, false);
nativeOptionMultiple(nativeOption, item.title, false);
}
if (!this.#selectedItems.length) {
@ -723,7 +723,7 @@ export class DropDown {
select.innerText = item.title;
this.#selectedItems = item;
nativOptionOrdinary(nativOption, item.title);
nativeOptionOrdinary(nativeOption, item.title);
options.forEach((option) => {
option.classList.remove('active');

38
src/components/create-element.js
View File

@ -1,4 +1,4 @@
import { customStylesFormat, nativOptionMultiple } from './utils';
import { customStylesFormat, nativeOptionMultiple } from './utils';
/**
* @module createBreadcrumb
*/
@ -16,7 +16,7 @@ export function createBreadcrumb(data, title, index, id) {
const { placeholder, styles } = option;
const selected = element.querySelector('.selected');
const nativOption = element.querySelectorAll('.nativSelect__nativOption');
const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li');
const textNode = document.createTextNode(title);
@ -44,7 +44,7 @@ export function createBreadcrumb(data, title, index, id) {
svgIcon.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
nativOptionMultiple(nativOption, title, false);
nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index);
let checkBox = '';
@ -76,22 +76,22 @@ export function createBreadcrumb(data, title, index, id) {
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
export function createNativeSelect() {
const nativSelect = document.createElement('select');
const nativeSelect = document.createElement('select');
nativSelect.setAttribute('name', 'dataSelect');
nativSelect.classList.add('nativSelect');
return nativSelect;
nativeSelect.setAttribute('name', 'dataSelect');
nativeSelect.classList.add('nativeSelect');
return nativeSelect;
}
/**
* Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/
export function createNativSelectOption() {
const nativOption = document.createElement('option');
export function createNativeSelectOption() {
const nativeOption = document.createElement('option');
nativOption.classList.add('nativSelect__nativOption');
return nativOption;
nativeOption.classList.add('nativeSelect__nativeOption');
return nativeOption;
}
/**
@ -101,21 +101,21 @@ export function createNativSelectOption() {
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/
export function createInputSearch(random, lenguage) {
const intputSearch = document.createElement('input');
const inputSearch = document.createElement('input');
intputSearch.type = 'text';
intputSearch.classList.add('inputSearch');
intputSearch.setAttribute('id', `searchSelect-${random}`);
inputSearch.type = 'text';
inputSearch.classList.add('inputSearch');
inputSearch.setAttribute('id', `searchSelect-${random}`);
if (lenguage) {
intputSearch.setAttribute('placeholder', `${lenguage}`);
inputSearch.setAttribute('placeholder', `${lenguage}`);
} else {
intputSearch.setAttribute('placeholder', 'Search...');
inputSearch.setAttribute('placeholder', 'Search...');
}
intputSearch.addEventListener('click', (e) => {
inputSearch.addEventListener('click', (e) => {
e.preventDefault();
});
return intputSearch;
return inputSearch;
}

4
src/components/utils.js
View File

@ -134,7 +134,7 @@ export function getFormatItem(dataItem, index) {
* @param {NodeList} element NodeList нативного селекта
* @param {object} item выбранный элемент в кастомном селекте
*/
export function nativOptionOrdinary(element, item) {
export function nativeOptionOrdinary(element, item) {
element.forEach((option) => {
option.removeAttribute('selected');
if (option.textContent === item) {
@ -149,7 +149,7 @@ export function nativOptionOrdinary(element, item) {
* @param {object} item выбранный элемент в кастомном селекте
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
*/
export function nativOptionMultiple(element, item, condition) {
export function nativeOptionMultiple(element, item, condition) {
element.forEach((option) => {
if (condition == true) {
if (option.textContent === item) {

3
src/index.js Normal file
View File

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

2
src/language/language.js
View File

@ -5,7 +5,7 @@ export const ru = {
};
export const en = {
selectPlaceholder: 'Select...',
selectPlaceholder: 'Select element...',
placeholder: 'Search...',
textInListSearch: 'No matches...',
};

4
src/main.scss
View File

@ -1,5 +1,5 @@
@import './style/nativSelect.scss';
@import './style/scrolbar.scss';
@import './style/nativeSelect.scss';
@import './style/scrollbar.scss';
@import './style/svgStyle.scss';
@import './style/whiteTheme.scss';

2
src/page/index.js
View File

@ -1,4 +1,4 @@
import { DropDown } from '../cg-select';
import DropDown from '../index';
import './example';
// ------------------------------Обычный селект--------------------

6
src/style/nativSelect.scss → src/style/nativeSelect.scss
View File

@ -1,4 +1,4 @@
.nativSelect {
.nativeSelect {
border: none;
cursor: pointer;
display: none;
@ -13,13 +13,13 @@
-o-border-radius: 5px;
margin: 0;
&__nativOption {
&__nativeOption {
border: 1px #0a0b0e solid;
}
}
// @media (max-width: 576px) {
// .nativSelect {
// .nativeSelect {
// display: block;
// min-width: 235px;
// height: 50px;

0
src/style/scrolbar.scss → src/style/scrollbar.scss
View File