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

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

@@ -1,4 +1,4 @@
-ВыборныйСписок = function(родитель, настройки)
+ВыборныйСписок = function(элемент, настройки)
 {
     if (!настройки)
     {
@@ -10,98 +10,80 @@
 </li>
                 `,
             },
+            "отклик": {},
         };
     }
 
-    this.отобразить = () =>
+    this.задатьЗаголовок = (заголовок) =>
     {
-        this.показываем = true;
+        this.заголовок = заголовок;
-        элемент.style.display = "block";
+        this.__пересобрать();
-        this.преобразования.innerHTML = `
-#${элемент.id}
-{
-    opacity: 0;
-    animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
-    animation-fill-mode: forwards;
-}
-        `;
     };
     
-    this.скрыть = () =>
+    this.задатьСписок = (список) =>
     {
-        this.показываем = false;
+        this.список = список;
-        this.преобразования.innerHTML = `
+        this.__пересобрать();
-#${элемент.id}
-{
-    opacity: ${настройки.прозрачность};
-    animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
-    animation-fill-mode: forwards;
-}
-        `;
     };
     
-    this.__создатьКадры = () =>
+    this.очиститьВыбор = () =>
     {
-        this.кадры = document.createElement("style");
+        for (var номер in this.список)
-        document.head.appendChild(this.кадры);
+        {
-        this.кадры.innerHTML = `
+            var id = `${элемент.id}-${номер}`;
-@keyframes ${элемент.id}ПлавноОтобразить
+            $(`#${id}`).removeClass("uk-active");
-{
+        }
-    0%
-    {
-        opacity: 0;
-    }
-    100%
-    {
-        opacity: ${настройки.прозрачность};
-    }
-}
-@keyframes ${элемент.id}ПлавноСкрыть
-{
-    0%
-    {
-        opacity: ${настройки.прозрачность};
-    }
-    100%
-    {
-        opacity: 0;
-    }
-}
-        `;
     };
     
-    this.__создатьПреобразования = () =>
+    this.выбратьЭлемент = (номер) =>
     {
-        this.преобразования = document.createElement("style");
+        this.очиститьВыбор();
-        document.head.appendChild(this.преобразования);
+        $(`#${элемент.id}-${номер}`).addClass("uk-active");
     };
     
-    this.__отслеживатьЗавершениеАнимации = () =>
+    this.__пересобрать = () =>
     {
-        this.показываем = true;
+        this.__задатьЗаголовокИСписок();
-        var тут = this;
+        this.__отслеживатьВыбор();
-        элемент.addEventListener(
+    }
-            "animationend",
+    
-            function()
+    this.__задатьЗаголовокИСписок = () =>
-            {
+    {
-                if (тут.показываем && настройки.отклик && настройки.отклик.отображение)
+        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.__отслеживатьВыбор = () =>
+    {
+        for (var номер in this.список)
+        {
+            var id = `${элемент.id}-${номер}`;
+            const номерПункта = номер;
+            $(`#${id}-ссылка`).click(function() {
+                if (настройки.отклик && настройки.отклик.выбор)
                 {
-                    настройки.отклик.отображение();
+                    настройки.отклик.выбор(номерПункта);
                 }
-                else if (!тут.показываем)
+            });
-                {
+        }
-                    элемент.style.display = "none";
-                    if (настройки.отклик && настройки.отклик.скрытие)
-                    {
-                        настройки.отклик.скрытие();
-                    }
-                }
-            }
-        );
     };
-    
-    // Конструктор.
-    this.__создатьКадры();
-    this.__создатьПреобразования();
-    this.__отслеживатьЗавершениеАнимации();
 };