From 521bf00615832225e6c78ba6afb7242d0f14f533 Mon Sep 17 00:00:00 2001 From: Victor Date: Fri, 23 Dec 2022 19:18:33 +0300 Subject: [PATCH] fix typo --- documentation/cg-dropdown.js.html | 50 ++++++++-------- documentation/create-element.js.html | 38 ++++++------ documentation/module-Utils.html | 8 +-- documentation/module-createElementChips.html | 4 +- documentation/utils.js.html | 4 +- src/cg-select.js | 58 +++++++++---------- src/components/create-element.js | 38 ++++++------ src/components/utils.js | 4 +- src/index.js | 3 + src/language/language.js | 2 +- src/main.scss | 4 +- src/page/index.js | 2 +- .../{nativSelect.scss => nativeSelect.scss} | 6 +- src/style/{scrolbar.scss => scrollbar.scss} | 0 14 files changed, 112 insertions(+), 109 deletions(-) create mode 100644 src/index.js rename src/style/{nativSelect.scss => nativeSelect.scss} (92%) rename src/style/{scrolbar.scss => scrollbar.scss} (100%) diff --git a/documentation/cg-dropdown.js.html b/documentation/cg-dropdown.js.html index 4b7f4dc..0cdaf02 100644 --- a/documentation/cg-dropdown.js.html +++ b/documentation/cg-dropdown.js.html @@ -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'); diff --git a/documentation/create-element.js.html b/documentation/create-element.js.html index beb0d06..66cdeae 100644 --- a/documentation/create-element.js.html +++ b/documentation/create-element.js.html @@ -21,7 +21,7 @@ 
import { customStylesFormat, nativOptionMultiple } from './utils';
+          >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;
             }
diff --git a/documentation/module-Utils.html b/documentation/module-Utils.html index 8a20fc7..30caeb6 100644 --- a/documentation/module-Utils.html +++ b/documentation/module-Utils.html @@ -483,8 +483,8 @@ -

- (static) nativOptionMultiple + (static) nativeOptionMultiple(element, item, condition)

@@ -552,8 +552,8 @@ -

- (static) nativOptionOrdinary + (static) nativeOptionOrdinary(element, item)

diff --git a/documentation/module-createElementChips.html b/documentation/module-createElementChips.html index f7cd35b..735abcb 100644 --- a/documentation/module-createElementChips.html +++ b/documentation/module-createElementChips.html @@ -219,8 +219,8 @@ -

- (static) createNativSelectOption + (static) createNativeSelectOption() → {HTMLOptionElement} diff --git a/documentation/utils.js.html b/documentation/utils.js.html index 0171eb1..e0aee0a 100644 --- a/documentation/utils.js.html +++ b/documentation/utils.js.html @@ -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) { diff --git a/src/cg-select.js b/src/cg-select.js index d2a373d..f1ffe59 100644 --- a/src/cg-select.js +++ b/src/cg-select.js @@ -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'); diff --git a/src/components/create-element.js b/src/components/create-element.js index 68c501d..bf9b5d7 100644 --- a/src/components/create-element.js +++ b/src/components/create-element.js @@ -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; } diff --git a/src/components/utils.js b/src/components/utils.js index 245e77e..9e3c371 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -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) { diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e28803e --- /dev/null +++ b/src/index.js @@ -0,0 +1,3 @@ +import { DropDown } from './cg-select'; + +export default DropDown; diff --git a/src/language/language.js b/src/language/language.js index 2095dcb..3b6ecb0 100644 --- a/src/language/language.js +++ b/src/language/language.js @@ -5,7 +5,7 @@ export const ru = { }; export const en = { - selectPlaceholder: 'Select...', + selectPlaceholder: 'Select element...', placeholder: 'Search...', textInListSearch: 'No matches...', }; diff --git a/src/main.scss b/src/main.scss index 3a78f0e..5ff4e87 100644 --- a/src/main.scss +++ b/src/main.scss @@ -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'; diff --git a/src/page/index.js b/src/page/index.js index 764a54b..c1a5fc6 100644 --- a/src/page/index.js +++ b/src/page/index.js @@ -1,4 +1,4 @@ -import { DropDown } from '../cg-select'; +import DropDown from '../index'; import './example'; // ------------------------------Обычный селект-------------------- diff --git a/src/style/nativSelect.scss b/src/style/nativeSelect.scss similarity index 92% rename from src/style/nativSelect.scss rename to src/style/nativeSelect.scss index c1f5a6f..c634533 100644 --- a/src/style/nativSelect.scss +++ b/src/style/nativeSelect.scss @@ -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; diff --git a/src/style/scrolbar.scss b/src/style/scrollbar.scss similarity index 100% rename from src/style/scrolbar.scss rename to src/style/scrollbar.scss