Browse Source

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

master
Главред | Glavred 4 years ago
parent
commit
b95b5fe6a9
5 changed files with 212 additions and 11 deletions
  1. +3
    -2
      0000
  2. +107
    -0
      выборный-список|selection-list.js
  3. +102
    -0
      плавно-отобразить-скрыть|smoothly-show-hide.js
  4. +0
    -7
      привет|hello.js
  5. +0
    -2
      привет|hello.череда

+ 3
- 2
0000 View File

@@ -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

+ 107
- 0
выборный-список|selection-list.js View File

@@ -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.__отслеживатьЗавершениеАнимации();
};

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

@@ -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.__отслеживатьЗавершениеАнимации();
};

+ 0
- 7
привет|hello.js View File

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

+ 0
- 2
привет|hello.череда View File

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

Loading…
Cancel
Save