Ели не в ту тему, прошу не пинать, а перенести в нужную.
Имею несколько настенных планшетов, но все с разным разрешением, рисовать под каждый свою сцену, совершенно нет желания. Опция в настройках сцены автоматически менять размер сцены очень спасает. Но вот выглядит это все крайне... ну вы поняли) Решил это дело поправить и добавить прелоадер. Вообще не понимаю, почему его нет по умолчанию в системе.
Вот так это выглядит:
- 1AVQqMphpk.gif (2.06 МБ) 3254 просмотра
Итак по порядку.
1. Добавляем в элемент с самым высоким приоритетом на сцене, прелоадер должен отрисоваться раньше всех элементов (у меня это элемент general_CSS (only CSS)):
В HTLM добавляем:
Код: Выделить всё
<div id="preloader">
<div id="loader"></div>
</div>
В CSS:
Код: Выделить всё
#preloader {
background-color: #fff;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #ba55d3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #ff00ff;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
2. Теперь найдем JS функцию зуммирования страницы, и немного модифицируем ее. Находится она в файле scenes.tpl по пути \htdocs\templates\scenes. Но что бы при обновлениях системы он не перезатирался, скопировал его в папку templates_alt с сохранением пути.
Итак, ищем в файле функцию function sceneZoom() и добавляем в ее конец скрытие прелоадера, т.е. после того как страница будет отмасштабирована, наш прелоадер скроется.
Код: Выделить всё
var $preloader = $('#preloader');
$loader = $preloader.find('#loader');
$loader.fadeOut();
$preloader.fadeOut(350);
Вот так выглядит функция целиком:
Код: Выделить всё
function sceneZoom() {
var zoomMode = parseInt('{$SCENE_AUTO_SCALE}');
var zoomw = $(window).width();
if(window.innerWidth > 0 && window.innerWidth < zoomw) zoomw = window.innerWidth;
zoomw = zoomw/$("#slider").width()*100;
var zoomh = $(window).height();
if(window.innerHeight > 0 && window.innerHeight < zoomh) zoomh = window.innerHeight;
zoomh = zoomh/$("#slider").height()*100;
if (zoomMode == 3) { // height
document.body.style.zoom = zoomh+"%"
}
if (zoomMode == 2) { // width
document.body.style.zoom = zoomw+"%"
}
if (zoomMode == 1) { // both
if(zoomh < zoomw) {
document.body.style.zoom = zoomh+"%"
} else {
document.body.style.zoom = zoomw+"%"
}
}
var $preloader = $('#preloader');
$loader = $preloader.find('#loader');
$loader.fadeOut();
$preloader.fadeOut(350);
}
И так п1 добавляем на каждую страницу, на которой хотим видеть прелоадер. И теперь не сильно важно какого разрешения экран. Переход по страницам выглядит более менее приличным)