@@ -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 |
@@ -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.__отслеживатьЗавершениеАнимации(); | |||
}; |
@@ -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.__отслеживатьЗавершениеАнимации(); | |||
}; |
@@ -1,7 +0,0 @@ | |||
ПоприветствоватьМир = function() | |||
{ | |||
console.log("Привет, мир!"); | |||
console.log("Hello, world!"); | |||
document.body.innerHTML += "<h1>Привет, мир!</h1>"; | |||
document.body.innerHTML += "<h1>Hello, world!</h1>"; | |||
}; |
@@ -1,2 +0,0 @@ | |||
пуск | |||
поприветствовать мир |