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

0000

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

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

@@ -0,0 +1,91 @@
+ВыборныйСписок = function(элемент, настройки)
+{
+    // Конструктор.
+    this.отклик = {};
+    if (!настройки)
+    {
+        настройки = {
+            "макет": {
+                "элемент": `
+<li id="%id%">
+    <a id="%id%-ссылка">%название%</a>
+</li>
+                `,
+            },
+        };
+    }
+
+    this.задатьЗаголовок = (заголовок) =>
+    {
+        this.заголовок = заголовок;
+        this.__пересобрать();
+    };
+    
+    this.задатьСписок = (список) =>
+    {
+        this.список = список;
+        this.__пересобрать();
+    };
+    
+    this.очиститьВыбор = () =>
+    {
+        for (var номер in this.список)
+        {
+            var id = `${элемент.id}-${номер}`;
+            $(`#${id}`).removeClass("uk-active");
+        }
+    };
+    
+    this.выбратьЭлемент = (номер) =>
+    {
+        this.очиститьВыбор();
+        $(`#${элемент.id}-${номер}`).addClass("uk-active");
+    };
+    
+    this.__пересобрать = () =>
+    {
+        this.__задатьЗаголовокИСписок();
+        this.__отслеживатьВыбор();
+    }
+    
+    this.__задатьЗаголовокИСписок = () =>
+    {
+        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.__отслеживатьВыбор = () =>
+    {
+        var тут = this;
+        for (var номер in this.список)
+        {
+            var id = `${элемент.id}-${номер}`;
+            const номерПункта = номер;
+            $(`#${id}-ссылка`).click(function() {
+                if (тут.отклик && тут.отклик.выбор)
+                {
+                    тут.отклик.выбор(номерПункта);
+                }
+            });
+        }
+    };
+};

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

@@ -0,0 +1,147 @@
+ПлавноОтобразитьСкрыть = function(элемент, настройки = null)
+{
+    this.отобразить = () =>
+    {
+        this.показываем = true;
+        элемент.style.display = "block";
+        this.преобразования.innerHTML = `
+#${элемент.id}
+{
+    opacity: 0;
+    animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
+    animation-fill-mode: forwards;
+    animation-delay: ${this.настройки.задержка}s;
+}
+        `;
+    };
+    
+    this.скрыть = () =>
+    {
+        this.показываем = false;
+        this.преобразования.innerHTML = `
+#${элемент.id}
+{
+    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");
+        document.head.appendChild(this.кадры);
+        this.кадры.innerHTML = `
+@keyframes ${элемент.id}ПлавноОтобразить
+{
+    0%
+    {
+        opacity: 0;
+    }
+    100%
+    {
+        opacity: ${this.настройки.прозрачность};
+    }
+}
+@keyframes ${элемент.id}ПлавноСкрыть
+{
+    0%
+    {
+        opacity: ${this.настройки.прозрачность};
+    }
+    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.__создатьПреобразования();
+    this.__отслеживатьЗавершениеАнимации();
+};
+
+
+// Часто используемые варианты в одну строку.
+// 常用的单线变型
+// Frequently used single line variants.
+
+плавноСкрытьИУдалить = (id, настройки = null) =>
+{
+    var элемент = $(`#${id}`);
+    var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
+    плавно.настройки.отклик.скрытие = function() {
+        элемент.remove();
+    };
+    плавно.скрыть();
+};
+
+
+// // // //
+
+
+плавноСкрыть = (id, настройки = null) =>
+{
+    var элемент = $(`#${id}`);
+    var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
+    плавно.скрыть();
+};

привет.js

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

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

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

пуск|run.js

@@ -0,0 +1,135 @@
+const БИБЛИОТЕКИ = [
+    "https://bitbucket.org/gitjs/jquery/raw/3.5.1/0000",
+    "https://bitbucket.org/gitjs/uikit/raw/3.2.0/0000",
+];
+
+
+// // // //
+
+
+ОтобразитьВыборСтрокиТаблицы = мир =>
+{
+    // Очистить выбор для всех.
+    for (var номер in мир.таблица.строки)
+    {
+        var элемент = мир.таблица.элемент(номер);
+        элемент.removeClass("пример-выбора-таблицы");
+    }
+    // Задать выбор выбранному элементу.
+    var элемент = мир.таблица.элемент(мир.номерВыбраннойСтроки);
+    элемент.addClass("пример-выбора-таблицы");
+};
+
+
+// // // //
+
+
+СоздатьПримерТаблицы = мир =>
+{
+    console.log("СоздатьПримерТаблицы");
+    мир.таблица = new Таблица("пример-таблицы");
+    мир.таблица.задатьЗаголовки(["№", "", "", "Название ⚬ 标题 ⚬ Name"]);
+    var строки = [];
+    for (var номер = 0; номер < 10; ++номер)
+    {
+        var строка = [
+            String(номер+1),
+            номер == 5 ? "v" : "",
+            "",
+            "Название_" + номер,
+        ];
+        строки.push(строка);
+    }
+    мир.таблица.задатьСтроки(строки);
+    мир.таблица.выбор = (номер) =>
+    {
+        console.debug("Выбрали номер:", номер);
+        мир.номерВыбраннойСтроки = номер;
+        мир.уведомить("выбрали строку таблицы");
+    };
+    
+    var вид = document.createElement("style");
+    document.head.appendChild(вид);
+    вид.innerHTML = `
+#родитель-примера-таблицы
+{
+    display: inline-block;
+}
+
+.пример-выбора-таблицы
+{
+    background: #eeeeee;
+}
+    `;
+};
+
+
+// // // //
+
+
+СоздатьПримерОкна = мир =>
+{
+    var окно = document.createElement("div");
+    окно.classList.add("окно-на-весь-экран-с-отступом");
+    окно.style.display = "none";
+    document.body.appendChild(окно);
+
+    окно.style.display = "block";
+
+    окно.innerHTML = `
+<center>
+    <span class="uk-text-large">Окно</span>
+    ⚬ <span class="uk-text-large uk-text-bold">窗</span> ⚬
+    <span class="uk-text-large">Window</span>
+</center>
+<div id="родитель-примера-таблицы" class="прокрутка">
+    <table id="пример-таблицы" class="uk-table uk-table-divider"></table>
+</div>
+    `;
+    
+    var вид = document.createElement("style");
+    document.head.appendChild(вид);
+    вид.innerHTML = `
+.окно-на-весь-экран-с-отступом
+{
+    position: fixed;
+    left: 1em;
+    top: 1em;
+    bottom: 1em;
+    right: 1em;
+}
+
+.прокрутка
+{
+    overflow: auto;
+    height: 100%;
+}
+    `;
+    
+    /*
+    var элементСписок = document.getElementById(мир.окна.раскладки.список);
+    мир.окна.раскладки.выборныйСписок = new ВыборныйСписок(элементСписок);
+*/
+};
+
+
+// // // //
+
+
+Очистить = мир =>
+{
+    document.body.innerHTML = "";
+};
+
+
+// // // //
+
+
+ЗагрузитьБиблиотеки = мир =>
+{
+    мир.модули.использовали.подписатьРаз(function() {
+        мир.уведомить("ручной пуск");
+        мир.уведомить("загрузили библиотеки");
+    });
+    мир.модули.использовать(БИБЛИОТЕКИ);
+};

пуск|run.череда

@@ -0,0 +1,8 @@
+пуск
+    загрузить библиотеки
+загрузили библиотеки
+    очистить
+    создать пример окна
+    создать пример таблицы
+выбрали строку таблицы
+    отобразить выбор строки таблицы

таблица|table.js

@@ -0,0 +1,85 @@
+Таблица = function(id)
+{
+    this.задатьЗаголовки = (заголовки) =>
+    {
+        this.заголовки = заголовки;
+        this.__пересобрать();
+    };
+
+    this.задатьСтроки = (строки) =>
+    {
+        this.строки = строки;
+        this.__пересобрать();
+    };
+    
+    this.элемент = (номер) =>
+    {
+        return $(`#${id}-${номер}`);
+    };
+
+    this.__пересобрать = () =>
+    {
+        this.__задатьСодержимое();
+        this.__отслеживатьВыбор();
+    };
+
+    this.__задатьСодержимое = () =>
+    {
+        var содержимое = "";
+        if (this.заголовки && this.заголовки.length)
+        {
+            var заголовок = "";
+            for (var номер in this.заголовки)
+            {
+                var значение = this.заголовки[номер];
+                заголовок += `<th>${значение}</th>`
+            }
+            содержимое += `
+<thead>
+    <tr>
+        ${заголовок}
+    </tr>
+</thead>
+            `;
+        }
+        
+        if (this.строки && this.строки.length)
+        {
+            var тело = "";
+            for (var номер in this.строки)
+            {
+                var столбцы = this.строки[номер];
+                var строка = "";
+                for (var н in столбцы)
+                {
+                    var значение = столбцы[н];
+                    строка += `<td>${значение}</td>`;
+                }
+                тело += `<tr id="${id}-${номер}">${строка}</tr>`;
+            }
+            содержимое += `<tbody>${тело}</tbody>`;
+        }
+        
+        $(`#${id}`).html(содержимое);
+    };
+    
+    this.__отслеживатьВыбор = () =>
+    {
+        if (!(this.строки && this.строки.length))
+        {
+            return;
+        }
+        var тут = this;
+        for (var номер in this.строки)
+        {
+            const номерСтроки = номер;
+            $(`#${id}-${номер}`).click(function() {
+                if (тут.выбор)
+                {
+                    тут.выбор(номерСтроки);
+                }
+            });
+        }
+    };
+
+};