From b95b5fe6a93b8388086d594cb36dcaf8f0bc9f34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=93=D0=BB=D0=B0=D0=B2=D1=80=D0=B5=D0=B4=20=7C=20Glavred?= Date: Mon, 5 Oct 2020 15:18:48 +0300 Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D0=BE=D1=82=20=D0=93=D0=BB=D0=B0=D0=B2=D1=80?= =?UTF-8?q?=D0=B5=D0=B4=D0=B0=20=D0=93=D0=B8=D1=82=D0=96=D0=A1=20|=20Chang?= =?UTF-8?q?es=20of=20GitJS=20Glavred?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 0000 | 5 +- ...орный-список|selection-list.js | 107 ++++++++++++++++++ ...ить-скрыть|smoothly-show-hide.js | 102 +++++++++++++++++ привет|hello.js | 7 -- привет|hello.череда | 2 - 5 files changed, 212 insertions(+), 11 deletions(-) create mode 100644 выборный-список|selection-list.js create mode 100644 плавно-отобразить-скрыть|smoothly-show-hide.js delete mode 100644 привет|hello.js delete mode 100644 привет|hello.череда diff --git a/0000 b/0000 index 07438d1..7124592 100644 --- a/0000 +++ b/0000 @@ -1,5 +1,6 @@ Повторный пользовательский интерфейс | Repeating user interface 1.0.0 +https://git.opengamestudio.org/mahjong/povtorniy-repeating-ui -/привет|hello.череда -x /привет|hello.js +x /выборный-список|selection-list.js +x /плавно-отобразить-скрыть|smoothly-show-hide.js \ No newline at end of file diff --git a/выборный-список|selection-list.js b/выборный-список|selection-list.js new file mode 100644 index 0000000..bea07be --- /dev/null +++ b/выборный-список|selection-list.js @@ -0,0 +1,107 @@ +ВыборныйСписок = function(родитель, настройки) +{ + if (!настройки) + { + настройки = { + "макет": { + "элемент": ` +
  • + %название% +
    • + `, + }, + }; + } + + 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.__отслеживатьЗавершениеАнимации(); +}; \ No newline at end of file diff --git a/плавно-отобразить-скрыть|smoothly-show-hide.js b/плавно-отобразить-скрыть|smoothly-show-hide.js new file mode 100644 index 0000000..8462dcf --- /dev/null +++ b/плавно-отобразить-скрыть|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.__отслеживатьЗавершениеАнимации(); +}; \ No newline at end of file diff --git a/привет|hello.js b/привет|hello.js deleted file mode 100644 index 14b90ca..0000000 --- a/привет|hello.js +++ /dev/null @@ -1,7 +0,0 @@ -ПоприветствоватьМир = function() -{ - console.log("Привет, мир!"); - console.log("Hello, world!"); - document.body.innerHTML += "

    Привет, мир!

    "; - document.body.innerHTML += "

    Hello, world!

    "; -}; diff --git a/привет|hello.череда b/привет|hello.череда deleted file mode 100644 index 278573b..0000000 --- a/привет|hello.череда +++ /dev/null @@ -1,2 +0,0 @@ -пуск - поприветствовать мир