diff --git a/выборный-список|selection-list.js b/выборный-список|selection-list.js index bea07be..2df85c9 100644 --- a/выборный-список|selection-list.js +++ b/выборный-список|selection-list.js @@ -1,4 +1,4 @@ -ВыборныйСписок = function(родитель, настройки) +ВыборныйСписок = function(элемент, настройки) { if (!настройки) { @@ -10,98 +10,80 @@ `, }, + "отклик": {}, }; } - this.отобразить = () => + this.задатьЗаголовок = (заголовок) => { - this.показываем = true; - элемент.style.display = "block"; - this.преобразования.innerHTML = ` -#${элемент.id} -{ - opacity: 0; - animation: ${элемент.id}ПлавноОтобразить 0.4s ease; - animation-fill-mode: forwards; -} - `; + this.заголовок = заголовок; + this.__пересобрать(); }; - this.скрыть = () => + this.задатьСписок = (список) => { - this.показываем = false; - this.преобразования.innerHTML = ` -#${элемент.id} -{ - opacity: ${настройки.прозрачность}; - animation: ${элемент.id}ПлавноСкрыть 0.4s ease; - animation-fill-mode: forwards; -} - `; + this.список = список; + this.__пересобрать(); }; - this.__создатьКадры = () => + this.очиститьВыбор = () => { - this.кадры = document.createElement("style"); - document.head.appendChild(this.кадры); - this.кадры.innerHTML = ` -@keyframes ${элемент.id}ПлавноОтобразить -{ - 0% - { - opacity: 0; - } - 100% - { - opacity: ${настройки.прозрачность}; - } -} -@keyframes ${элемент.id}ПлавноСкрыть -{ - 0% + for (var номер in this.список) + { + var id = `${элемент.id}-${номер}`; + $(`#${id}`).removeClass("uk-active"); + } + }; + + this.выбратьЭлемент = (номер) => { - opacity: ${настройки.прозрачность}; - } - 100% + this.очиститьВыбор(); + $(`#${элемент.id}-${номер}`).addClass("uk-active"); + }; + + this.__пересобрать = () => { - opacity: 0; + this.__задатьЗаголовокИСписок(); + this.__отслеживатьВыбор(); } -} - `; - }; - this.__создатьПреобразования = () => + this.__задатьЗаголовокИСписок = () => { - this.преобразования = document.createElement("style"); - document.head.appendChild(this.преобразования); + var содержимое = ""; + for (var номер in this.список) + { + var название = this.список[номер]; + var id = `${элемент.id}-${номер}`; + var пункт = настройки.макет.элемент + .replace(/%название%/g, название) + .replace(/%id%/g, id) + ; + содержимое += пункт; + } + + if (this.заголовок && this.заголовок.length) + { + содержимое = ` +
  • ${this.заголовок}
  • +${содержимое} + `; + } + + элемент.innerHTML = содержимое; }; - this.__отслеживатьЗавершениеАнимации = () => + this.__отслеживатьВыбор = () => { - this.показываем = true; - var тут = this; - элемент.addEventListener( - "animationend", - function() - { - if (тут.показываем && настройки.отклик && настройки.отклик.отображение) - { - настройки.отклик.отображение(); - } - else if (!тут.показываем) + for (var номер in this.список) + { + var id = `${элемент.id}-${номер}`; + const номерПункта = номер; + $(`#${id}-ссылка`).click(function() { + if (настройки.отклик && настройки.отклик.выбор) { - элемент.style.display = "none"; - if (настройки.отклик && настройки.отклик.скрытие) - { - настройки.отклик.скрытие(); - } + настройки.отклик.выбор(номерПункта); } - } - ); + }); + } }; - - // Конструктор. - this.__создатьКадры(); - this.__создатьПреобразования(); - this.__отслеживатьЗавершениеАнимации(); }; \ No newline at end of file