Fixed language
This commit is contained in:
parent
1061d16669
commit
c1366ef5eb
@ -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}`);
|
||||||
|
@ -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',
|
||||||
|
@ -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...',
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user