diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 0f377a5..d5f8a5b 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -14,6 +14,7 @@ import { createNativSelectOption, createNativeSelect, } from './components/create-element'; +import { ru, en } from './language/language'; /** * @class Описание класса DropDown @@ -243,9 +244,28 @@ export class DropDown { }); } - // on(select, callback) { - // console.log('aa'); - // } + /** + * Метод экземпляра класса DropDown + * @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch + * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата + * @method addLenguage + */ + addLenguage(lenguage) { + const { placeholder, textInListSearch } = lenguage; + const { searchMode } = this.#options; + + if (searchMode && searchMode == true) { + const search = this.#element.querySelector('.inputSearch'); + const textNoRezult = this.#element.querySelector('.noRezult'); + const textNode = document.createTextNode(textInListSearch); + + search.setAttribute('placeholder', placeholder); + search.setAttribute('placeholder', placeholder); + + textNoRezult.innerText = ''; + textNoRezult.appendChild(textNode); + } + } /** * Приватный метод инициализации экземпляра класса DropDown @@ -361,7 +381,7 @@ export class DropDown { * @description Рендер елементов в селекте. */ #render(select) { - const { styles, multiselect, searchMode, multiselectTag, darkTheme } = this.#options; + const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options; const random = Math.random().toString(36).substring(2, 10); if (select || (select && styles)) { @@ -372,11 +392,18 @@ export class DropDown { } const ulList = document.createElement('ul'); - const intputSearch = createInputSearch(random); const nativSelect = createNativeSelect(); + + let intputSearch = ''; this.random = random; if (searchMode) { + if (lenguage === 'ru') { + intputSearch = createInputSearch(random, ru.placeholder); + } else { + intputSearch = createInputSearch(random, en.placeholder); + } + ulList.appendChild(intputSearch); } @@ -453,16 +480,21 @@ export class DropDown { * @description Изменяет цветовую схему с темной на светлую. */ #checkTheme() { - const { darkTheme } = this.#options; + const { darkTheme, searchMode } = this.#options; const select = this.#element.querySelector('.cg-select'); const caret = this.#element.querySelector('.caret'); const list = this.#element.querySelector('ul.list'); + const search = this.#element.querySelector('.inputSearch'); if (darkTheme == false) { select.classList.add('selectWhite'); caret.classList.add('caretWhite'); list.classList.add('listWhite'); + + if (searchMode == true) { + search.classList.add('inputWhite'); + } } else if (darkTheme == true || !darkTheme) { return; } else { @@ -695,13 +727,22 @@ export class DropDown { * @method #searchMode */ #searchMode(random) { + const { lenguage } = this.#options; + const input = this.#element.querySelector(`#searchSelect-${random}`); const searchSelect = this.#element.querySelectorAll('.list__item'); const result = document.createElement('p'); - const textNode = document.createTextNode('No matches...'); + + let textNode = ''; + if (lenguage === 'ru') { + textNode = document.createTextNode(`${ru.textInListSearch}`); + } else { + textNode = document.createTextNode(`${en.textInListSearch}`); + } result.appendChild(textNode); result.classList.add('displayHide'); + result.classList.add('noRezult'); input.parentElement.appendChild(result); input.addEventListener('click', (e) => { diff --git a/src/components/create-element.js b/src/components/create-element.js index 46340b9..68c501d 100644 --- a/src/components/create-element.js +++ b/src/components/create-element.js @@ -97,15 +97,25 @@ export function createNativSelectOption() { /** * Метод который создает поиск элементов в селекте * @param {string} random уникальное значение для input элемента. + * @param {string} lenguage текст на определенном языке переданный из файла language.js * @returns {HTMLInputElement} Возвращает сформированный input елемент. */ -export function createInputSearch(random) { +export function createInputSearch(random, lenguage) { const intputSearch = document.createElement('input'); intputSearch.type = 'text'; intputSearch.classList.add('inputSearch'); intputSearch.setAttribute('id', `searchSelect-${random}`); - intputSearch.setAttribute('placeholder', 'Search...'); + + if (lenguage) { + intputSearch.setAttribute('placeholder', `${lenguage}`); + } else { + intputSearch.setAttribute('placeholder', 'Search...'); + } + + intputSearch.addEventListener('click', (e) => { + e.preventDefault(); + }); return intputSearch; } diff --git a/src/index.js b/src/index.js index 2f2fe7b..5c11cf8 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ const dropdown = new DropDown({ placeholder: 'Выберите авто', lable: 'Выбор лучшего авто!', darkTheme: false, + searchMode: true, closeOnSelect: false, items: [ 'BMW', @@ -31,12 +32,20 @@ const dropdown = new DropDown({ // multiselectTag: true, }); +const ger = { + placeholder: 'searcH????', + textInListSearch: 'None', +}; + +dropdown.addLenguage(ger); + // ------------------------------URL-------------------- const dropdown3 = new DropDown({ selector: '.cg-dropdown_three', placeholder: 'URL', url: 'http://jsonplaceholder.typicode.com/users', searchMode: true, + lenguage: 'ru', styles: { head: { background: 'black', diff --git a/src/language/language.js b/src/language/language.js new file mode 100644 index 0000000..99d2ad5 --- /dev/null +++ b/src/language/language.js @@ -0,0 +1,9 @@ +export const ru = { + placeholder: 'Поиск...', + textInListSearch: 'Совпадений нет...', +}; + +export const en = { + placeholder: 'Search...', + textInListSearch: 'No matches...', +}; diff --git a/src/style/whiteTheme.scss b/src/style/whiteTheme.scss index 85f0f91..dc9bb30 100644 --- a/src/style/whiteTheme.scss +++ b/src/style/whiteTheme.scss @@ -1,6 +1,13 @@ +.selectWhite { + background: rgb(248, 248, 248) !important; +} + +.selectWhite, +.listWhite, +.inputWhite, +.pathBlack, .selectWhite { color: black !important; - background: rgb(248, 248, 248) !important; } .caretWhite { @@ -8,10 +15,13 @@ } .listWhite { - color: black !important; background-color: white !important; } +.inputWhite { + border-bottom: 1px solid black !important; +} + .pathWhite { color: white !important; }