@@ -1,5 +1,6 @@ | |||||
Повторный пользовательский интерфейс | Repeating user interface | Повторный пользовательский интерфейс | Repeating user interface | ||||
1.0.0 | 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 @@ | |||||
пуск | |||||
поприветствовать мир |