diff --git a/0000 b/0000
index 07438d1..7124592 100644
--- a/0000
+++ b/0000
@@ -1,5 +1,6 @@
Повторный пользовательский интерфейс | Repeating user interface
1.0.0
+https://git.opengamestudio.org/mahjong/povtorniy-repeating-ui
-/привет|hello.череда
-x /привет|hello.js
+x /выборный-список|selection-list.js
+x /плавно-отобразить-скрыть|smoothly-show-hide.js
\ No newline at end of file
diff --git a/выборный-список|selection-list.js b/выборный-список|selection-list.js
new file mode 100644
index 0000000..bea07be
--- /dev/null
+++ b/выборный-список|selection-list.js
@@ -0,0 +1,107 @@
+ВыборныйСписок = function(родитель, настройки)
+{
+ if (!настройки)
+ {
+ настройки = {
+ "макет": {
+ "элемент": `
+
+ %название%
+
+ `,
+ },
+ };
+ }
+
+ this.отобразить = () =>
+ {
+ this.показываем = true;
+ элемент.style.display = "block";
+ this.преобразования.innerHTML = `
+#${элемент.id}
+{
+ opacity: 0;
+ animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
+ animation-fill-mode: forwards;
+}
+ `;
+ };
+
+ this.скрыть = () =>
+ {
+ this.показываем = false;
+ this.преобразования.innerHTML = `
+#${элемент.id}
+{
+ opacity: ${настройки.прозрачность};
+ animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
+ animation-fill-mode: forwards;
+}
+ `;
+ };
+
+ this.__создатьКадры = () =>
+ {
+ this.кадры = document.createElement("style");
+ document.head.appendChild(this.кадры);
+ this.кадры.innerHTML = `
+@keyframes ${элемент.id}ПлавноОтобразить
+{
+ 0%
+ {
+ opacity: 0;
+ }
+ 100%
+ {
+ opacity: ${настройки.прозрачность};
+ }
+}
+@keyframes ${элемент.id}ПлавноСкрыть
+{
+ 0%
+ {
+ opacity: ${настройки.прозрачность};
+ }
+ 100%
+ {
+ opacity: 0;
+ }
+}
+ `;
+ };
+
+ this.__создатьПреобразования = () =>
+ {
+ this.преобразования = document.createElement("style");
+ document.head.appendChild(this.преобразования);
+ };
+
+ this.__отслеживатьЗавершениеАнимации = () =>
+ {
+ this.показываем = true;
+ var тут = this;
+ элемент.addEventListener(
+ "animationend",
+ function()
+ {
+ if (тут.показываем && настройки.отклик && настройки.отклик.отображение)
+ {
+ настройки.отклик.отображение();
+ }
+ else if (!тут.показываем)
+ {
+ элемент.style.display = "none";
+ if (настройки.отклик && настройки.отклик.скрытие)
+ {
+ настройки.отклик.скрытие();
+ }
+ }
+ }
+ );
+ };
+
+ // Конструктор.
+ this.__создатьКадры();
+ this.__создатьПреобразования();
+ this.__отслеживатьЗавершениеАнимации();
+};
\ No newline at end of file
diff --git a/плавно-отобразить-скрыть|smoothly-show-hide.js b/плавно-отобразить-скрыть|smoothly-show-hide.js
new file mode 100644
index 0000000..8462dcf
--- /dev/null
+++ b/плавно-отобразить-скрыть|smoothly-show-hide.js
@@ -0,0 +1,102 @@
+ПлавноОтобразитьСкрыть = function(элемент, настройки)
+{
+ if (!настройки)
+ {
+ настройки = {
+ "прозрачность": 1,
+ "отклик": {},
+ };
+ }
+
+ this.отобразить = () =>
+ {
+ this.показываем = true;
+ элемент.style.display = "block";
+ this.преобразования.innerHTML = `
+#${элемент.id}
+{
+ opacity: 0;
+ animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
+ animation-fill-mode: forwards;
+}
+ `;
+ };
+
+ this.скрыть = () =>
+ {
+ this.показываем = false;
+ this.преобразования.innerHTML = `
+#${элемент.id}
+{
+ opacity: ${настройки.прозрачность};
+ animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
+ animation-fill-mode: forwards;
+}
+ `;
+ };
+
+ this.__создатьКадры = () =>
+ {
+ this.кадры = document.createElement("style");
+ document.head.appendChild(this.кадры);
+ this.кадры.innerHTML = `
+@keyframes ${элемент.id}ПлавноОтобразить
+{
+ 0%
+ {
+ opacity: 0;
+ }
+ 100%
+ {
+ opacity: ${настройки.прозрачность};
+ }
+}
+@keyframes ${элемент.id}ПлавноСкрыть
+{
+ 0%
+ {
+ opacity: ${настройки.прозрачность};
+ }
+ 100%
+ {
+ opacity: 0;
+ }
+}
+ `;
+ };
+
+ this.__создатьПреобразования = () =>
+ {
+ this.преобразования = document.createElement("style");
+ document.head.appendChild(this.преобразования);
+ };
+
+ this.__отслеживатьЗавершениеАнимации = () =>
+ {
+ this.показываем = true;
+ var тут = this;
+ элемент.addEventListener(
+ "animationend",
+ function()
+ {
+ if (тут.показываем && настройки.отклик && настройки.отклик.отображение)
+ {
+ настройки.отклик.отображение();
+ }
+ else if (!тут.показываем)
+ {
+ элемент.style.display = "none";
+ if (настройки.отклик && настройки.отклик.скрытие)
+ {
+ настройки.отклик.скрытие();
+ }
+ }
+ }
+ );
+ };
+
+ // Конструктор.
+ this.__создатьКадры();
+ this.__создатьПреобразования();
+ this.__отслеживатьЗавершениеАнимации();
+};
\ No newline at end of file
diff --git a/привет|hello.js b/привет|hello.js
deleted file mode 100644
index 14b90ca..0000000
--- a/привет|hello.js
+++ /dev/null
@@ -1,7 +0,0 @@
-ПоприветствоватьМир = function()
-{
- console.log("Привет, мир!");
- console.log("Hello, world!");
- document.body.innerHTML += "Привет, мир!
";
- document.body.innerHTML += "Hello, world!
";
-};
diff --git a/привет|hello.череда b/привет|hello.череда
deleted file mode 100644
index 278573b..0000000
--- a/привет|hello.череда
+++ /dev/null
@@ -1,2 +0,0 @@
-пуск
- поприветствовать мир