Fixed language

This commit is contained in:
Макс Овсяников 2022-11-18 19:21:45 +03:00
parent 1061d16669
commit c1366ef5eb
3 changed files with 22 additions and 13 deletions

View File

@ -95,7 +95,7 @@ export class DropDown {
darkTheme: true/false, darkTheme: true/false,
searchMode: true/false, searchMode: true/false,
closeOnSelect: true/false, closeOnSelect: true/false,
lenguage: 'ru/en', language: 'ru/en',
styles: { styles: {
head: { head: {
background: '...', background: '...',
@ -251,14 +251,18 @@ export class DropDown {
/** /**
* Метод экземпляра класса DropDown * Метод экземпляра класса DropDown
* @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
* @method addLenguage * @method addLanguage
*/ */
addLenguage(lenguage) { addLanguage(language) {
const { placeholder, textInListSearch } = lenguage; const { placeholder, textInListSearch, selectPlaceholder } = language;
const { searchMode } = this.#options; const { searchMode } = this.#options;
const select = this.#element.querySelector('.selected');
const textNodeSelect = document.createTextNode(selectPlaceholder);
select.appendChild(textNodeSelect);
if (searchMode && searchMode == true) { if (searchMode && searchMode == true) {
const search = this.#element.querySelector('.inputSearch'); const search = this.#element.querySelector('.inputSearch');
const textNoRezult = this.#element.querySelector('.noRezult'); const textNoRezult = this.#element.querySelector('.noRezult');
@ -350,14 +354,18 @@ export class DropDown {
* @protected * @protected
*/ */
#initSelected(select) { #initSelected(select) {
const { styles, selected, placeholder, lable } = this.#options; const { styles, selected, placeholder, lable, language } = this.#options;
if (selected) { if (selected) {
createSelected(this.#element, selected); createSelected(this.#element, selected);
} else if (placeholder) { } else if (placeholder) {
createSelected(this.#element, placeholder); createSelected(this.#element, placeholder);
} else { } else {
createSelected(this.#element, 'Select...'); if (language && language === 'ru') {
createSelected(this.#element, ru.selectPlaceholder);
} else {
createSelected(this.#element, en.selectPlaceholder);
}
} }
if (select) { if (select) {
@ -387,7 +395,7 @@ export class DropDown {
* @description Рендер елементов в селекте. * @description Рендер елементов в селекте.
*/ */
#render(select) { #render(select) {
const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options; const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options;
const { list, search } = styles; const { list, search } = styles;
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
@ -406,7 +414,7 @@ export class DropDown {
this.random = random; this.random = random;
if (searchMode) { if (searchMode) {
if (lenguage === 'ru') { if (language === 'ru') {
intputSearch = createInputSearch(random, ru.placeholder); intputSearch = createInputSearch(random, ru.placeholder);
} else { } else {
intputSearch = createInputSearch(random, en.placeholder); intputSearch = createInputSearch(random, en.placeholder);
@ -734,14 +742,14 @@ export class DropDown {
* @method #searchMode * @method #searchMode
*/ */
#searchMode(random) { #searchMode(random) {
const { lenguage } = this.#options; const { language } = this.#options;
const input = this.#element.querySelector(`#searchSelect-${random}`); const input = this.#element.querySelector(`#searchSelect-${random}`);
const searchSelect = this.#element.querySelectorAll('.list__item'); const searchSelect = this.#element.querySelectorAll('.list__item');
const result = document.createElement('p'); const result = document.createElement('p');
let textNode = ''; let textNode = '';
if (lenguage === 'ru') { if (language && language === 'ru') {
textNode = document.createTextNode(`${ru.textInListSearch}`); textNode = document.createTextNode(`${ru.textInListSearch}`);
} else { } else {
textNode = document.createTextNode(`${en.textInListSearch}`); textNode = document.createTextNode(`${en.textInListSearch}`);

View File

@ -5,7 +5,6 @@ const dropdown = new DropDown({
selector: '.cg-dropdown_one', selector: '.cg-dropdown_one',
placeholder: 'Выберите авто', placeholder: 'Выберите авто',
lable: 'EXAMPLE', lable: 'EXAMPLE',
items: [ items: [
'BMW', 'BMW',
{ {
@ -41,7 +40,7 @@ const dropdown3 = new DropDown({
url: 'https://jsonplaceholder.typicode.com/users', url: 'https://jsonplaceholder.typicode.com/users',
searchMode: true, searchMode: true,
darkTheme: false, darkTheme: false,
lenguage: 'ru', language: 'ru',
styles: { styles: {
head: { head: {
width: '830px', width: '830px',

View File

@ -1,9 +1,11 @@
export const ru = { export const ru = {
selectPlaceholder: 'Выберите элемент...',
placeholder: 'Поиск...', placeholder: 'Поиск...',
textInListSearch: 'Совпадений нет...', textInListSearch: 'Совпадений нет...',
}; };
export const en = { export const en = {
selectPlaceholder: 'Select...',
placeholder: 'Search...', placeholder: 'Search...',
textInListSearch: 'No matches...', textInListSearch: 'No matches...',
}; };