povtorniy-repeating-ui/выборный-список|selection-list.js

ВыборныйСписок = 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 (настройки.отклик && настройки.отклик.выбор)
                {
                    настройки.отклик.выбор(номерПункта);
                }
            });
        }
    };
};