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

плавно-отобразить-скрыть|smoothly-show-hide.js

@@ -1,13 +1,5 @@
-ПлавноОтобразитьСкрыть = function(элемент, настройки)
+ПлавноОтобразитьСкрыть = function(элемент, настройки = null)
 {
-    if (!настройки)
-    {
-        настройки = {
-            "прозрачность": 1,
-            "отклик": {},
-        };
-    }
-
     this.отобразить = () =>
     {
         this.показываем = true;
@@ -18,6 +10,7 @@
     opacity: 0;
     animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
     animation-fill-mode: forwards;
+    animation-delay: ${this.настройки.задержка}s;
 }
         `;
     };
@@ -28,13 +21,38 @@
         this.преобразования.innerHTML = `
 #${элемент.id}
 {
-    opacity: ${настройки.прозрачность};
+    opacity: ${this.настройки.прозрачность};
     animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
     animation-fill-mode: forwards;
+    animation-delay: ${this.настройки.задержка}s;
 }
         `;
     };
     
+    this.__задатьНастройкиПоУмолчанию = () =>
+    {
+        var умолчание = {
+            "задержка": 0,
+            "прозрачность": 1,
+            "отклик": {},
+        };
+        if (!настройки)
+        {
+            this.настройки = умолчание;
+        }
+        else
+        {
+            this.настройки = настройки;
+        }
+        for (var ключ in умолчание)
+        {
+            if (!(ключ in this.настройки))
+            {
+                this.настройки[ключ] = умолчание[ключ];
+            }
+        }
+    };
+    
     this.__создатьКадры = () =>
     {
         this.кадры = document.createElement("style");
@@ -48,14 +66,14 @@
     }
     100%
     {
-        opacity: ${настройки.прозрачность};
+        opacity: ${this.настройки.прозрачность};
     }
 }
 @keyframes ${элемент.id}ПлавноСкрыть
 {
     0%
     {
-        opacity: ${настройки.прозрачность};
+        opacity: ${this.настройки.прозрачность};
     }
     100%
     {
@@ -79,16 +97,16 @@
             "animationend",
             function()
             {
-                if (тут.показываем && настройки.отклик && настройки.отклик.отображение)
+                if (тут.показываем && тут.настройки.отклик.отображение)
                 {
-                    настройки.отклик.отображение();
+                    тут.настройки.отклик.отображение();
                 }
                 else if (!тут.показываем)
                 {
                     элемент.style.display = "none";
-                    if (настройки.отклик && настройки.отклик.скрытие)
+                    if (тут.настройки.отклик.скрытие)
                     {
-                        настройки.отклик.скрытие();
+                        тут.настройки.отклик.скрытие();
                     }
                 }
             }
@@ -96,6 +114,7 @@
     };
     
     // Конструктор.
+    this.__задатьНастройкиПоУмолчанию();
     this.__создатьКадры();
     this.__создатьПреобразования();
     this.__отслеживатьЗавершениеАнимации();
@@ -106,18 +125,12 @@
 // 常用的单线变型
 // Frequently used single line variants.
 
-плавноСкрытьИУдалить = id =>
+плавноСкрытьИУдалить = (id, настройки = null) =>
 {
     var элемент = $(`#${id}`);
-    function окончание() {
+    var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
+    плавно.настройки.отклик.скрытие = function() {
         элемент.remove();
     };
-    var настройки = {
-        "прозрачность": 1,
-        "отклик": {
-            "скрытие": окончание,
-        },
-    };
-    var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
     плавно.скрыть();
 };