89 lines
2.6 KiB
JavaScript
89 lines
2.6 KiB
JavaScript
ВыборныйСписок = function(элемент, настройки)
|
||
{
|
||
if (!настройки)
|
||
{
|
||
настройки = {
|
||
"макет": {
|
||
"элемент": `
|
||
<li id="%id%">
|
||
<a id="%id%-ссылка">%название%</a>
|
||
</li>
|
||
`,
|
||
},
|
||
"отклик": {},
|
||
};
|
||
}
|
||
|
||
this.задатьЗаголовок = (заголовок) =>
|
||
{
|
||
this.заголовок = заголовок;
|
||
this.__пересобрать();
|
||
};
|
||
|
||
this.задатьСписок = (список) =>
|
||
{
|
||
this.список = список;
|
||
this.__пересобрать();
|
||
};
|
||
|
||
this.очиститьВыбор = () =>
|
||
{
|
||
for (var номер in this.список)
|
||
{
|
||
var id = `${элемент.id}-${номер}`;
|
||
$(`#${id}`).removeClass("uk-active");
|
||
}
|
||
};
|
||
|
||
this.выбратьЭлемент = (номер) =>
|
||
{
|
||
this.очиститьВыбор();
|
||
$(`#${элемент.id}-${номер}`).addClass("uk-active");
|
||
};
|
||
|
||
this.__пересобрать = () =>
|
||
{
|
||
this.__задатьЗаголовокИСписок();
|
||
this.__отслеживатьВыбор();
|
||
}
|
||
|
||
this.__задатьЗаголовокИСписок = () =>
|
||
{
|
||
var содержимое = "";
|
||
for (var номер in this.список)
|
||
{
|
||
var название = this.список[номер];
|
||
var id = `${элемент.id}-${номер}`;
|
||
var пункт = настройки.макет.элемент
|
||
.replace(/%название%/g, название)
|
||
.replace(/%id%/g, id)
|
||
;
|
||
содержимое += пункт;
|
||
}
|
||
|
||
if (this.заголовок && this.заголовок.length)
|
||
{
|
||
содержимое = `
|
||
<li class="uk-nav-header">${this.заголовок}</li>
|
||
${содержимое}
|
||
`;
|
||
}
|
||
|
||
элемент.innerHTML = содержимое;
|
||
};
|
||
|
||
this.__отслеживатьВыбор = () =>
|
||
{
|
||
for (var номер in this.список)
|
||
{
|
||
var id = `${элемент.id}-${номер}`;
|
||
const номерПункта = номер;
|
||
$(`#${id}-ссылка`).click(function() {
|
||
if (настройки.отклик && настройки.отклик.выбор)
|
||
{
|
||
настройки.отклик.выбор(номерПункта);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
}; |