Изменения от Главреда ГитЖС | Changes of GitJS Glavred

0000

@@ -1,5 +1,6 @@
 Повторный пользовательский интерфейс | Repeating user interface
 1.0.0
+https://git.opengamestudio.org/mahjong/povtorniy-repeating-ui
 
-/привет|hello.череда
+x /выборный-список|selection-list.js
-x /привет|hello.js
+x /плавно-отобразить-скрыть|smoothly-show-hide.js

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

@@ -0,0 +1,107 @@
+ВыборныйСписок = function(родитель, настройки)
+{
+    if (!настройки)
+    {
+        настройки = {
+            "макет": {
+                "элемент": `
+<li id="%id%">
+    <a id="%id%-ссылка">%название%</a>
+</li>
+                `,
+            },
+        };
+    }
+
+    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.__отслеживатьЗавершениеАнимации();
+};

плавно-отобразить-скрыть|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.__отслеживатьЗавершениеАнимации();
+};

привет|hello.js

@@ -1,7 +0,0 @@
-ПоприветствоватьМир = function()
-{
-    console.log("Привет, мир!");
-    console.log("Hello, world!");
-    document.body.innerHTML += "<h1>Привет, мир!</h1>";
-    document.body.innerHTML += "<h1>Hello, world!</h1>";
-};

привет|hello.череда

@@ -1,2 +0,0 @@
-пуск
-    поприветствовать мир