Пример использования AS.SERVICES.showWaitWindow/hideWaitWindow¶
Исходный код функции
AS.SERVICES.showWaitWindow = function () {
$("#app-wait-div").show();
};
AS.SERVICES.hideWaitWindow = function () {
$("#app-wait-div").hide();
};
Полный исходный код
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>WaitWindow Widget</title>
<script>
FORM_PLAYER_URL_PREFIX = "http://demoextfp.synergy.tm/Synergy/";
<!--служебная переменная для корректной работы компонента "HTD-редактор"-->
</script>
<link rel="stylesheet"
href="http://demoextfp.synergy.tm/Synergy/js/form.player.css"/>
<!--стандартный стиль компонентов формы-->
<script src="http://demoextfp.synergy.tm/Synergy/js/vendor.js"
type="text/javascript"></script>
<!--ссылка на сторонние библиотеки-->
<script src="http://demoextfp.synergy.tm/Synergy/js/form.player.js"
type="text/javascript"></script>
<!--ссылка на проигрыватель форм-->
<style>
#app-wait-div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.05);
display: none;
z-index: 1000;
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2em;
height: 2em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -1em;
color: darkorange;
font-size: 10px;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);user_for_scripting_uc
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;user_for_scripting_uc
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2em 0 -1em;user_for_scripting_uc
}
40% {
box-shadow: 0 2em 0 0;
}
}
@keyframes load7 {
0%,user_for_scripting_uc
80%,
100% {
box-shadow: 0 2em 0 -1em;
}
40% {
box-shadow: 0 2em 0 0;
}
}
</style>
</head>
<body>
<div id="form_player_container">
<div id="form_player_div"></div>
</div>
<div id="app-wait-div">
<div class="loader">Загрузка...</div>
</div>
<script>
'use strict';
AS.OPTIONS.locale = "ru";
AS.OPTIONS.coreUrl = "http://demoextfp.synergy.tm/Synergy/";
AS.SERVICES.showWaitWindow = function () {
$("#app-wait-div").show();
};
AS.SERVICES.hideWaitWindow = function () {
$("#app-wait-div").hide();
};
var portal = {
player: null,
/**
* очистить текущий проигрыватель форм
*/
clearPlayer: function () {
if (portal.player) {
portal.player.destroy();
}
},
/**
* добавить новый проигрыватель форм
*/
createPlayer: function (formCode) {
portal.clearPlayer();
portal.player = AS.FORMS.createPlayer();
portal.player.showFormByCode(formCode);
portal.player.view.setEditable(true);
portal.player.view.appendTo($('#form_player_div'));
AS.FORMS.bus.on(AS.FORMS.EVENT_TYPE.formShow, function (event, model, view) {
if (model.formCode === formCode) {
model.on(AS.FORMS.EVENT_TYPE.dataLoad, function () {
portal.main(portal.player.view.getViewWithId("textbox-cmp"), portal.player.model.getModelWithId("textbox-cmp"));
});
}
});
},
main: function (view, model) {
setTimeout(function run() {
AS.SERVICES.showWaitWindow();
setTimeout(AS.SERVICES.hideWaitWindow, 3000);
setTimeout(run, 6000);
}, 100);
}
};
$(document).ready(function () {
AS.OPTIONS.login = "1";
AS.OPTIONS.password = "1";
portal.createPlayer("sd-doc-widget-examples");
});
</script>
</body>
</html>