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

2020-10-05 15:18:48 +03:00
parent b5abfa04d2
commit b95b5fe6a9
5 changed files with 212 additions and 11 deletions
--- a/выборный-список|selection-list.js
+++ b/выборный-список|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.__отслеживатьЗавершениеАнимации();
+};