|
|
@@ -1,4 +1,4 @@ |
|
|
|
ВыборныйСписок = function(родитель, настройки) |
|
|
|
ВыборныйСписок = function(элемент, настройки) |
|
|
|
{ |
|
|
|
if (!настройки) |
|
|
|
{ |
|
|
@@ -10,98 +10,80 @@ |
|
|
|
</li> |
|
|
|
`, |
|
|
|
}, |
|
|
|
"отклик": {}, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
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) |
|
|
|
{ |
|
|
|
содержимое = ` |
|
|
|
<li class="uk-nav-header">${this.заголовок}</li> |
|
|
|
${содержимое} |
|
|
|
`; |
|
|
|
} |
|
|
|
|
|
|
|
элемент.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.__отслеживатьЗавершениеАнимации(); |
|
|
|
}; |