Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE embedded] Show loader mask

Browse source
This commit is contained in:
Julia Radzhabova 2021-06-24 19:08:21 +03:00
parent 164e2c7815
commit 8766f4db61
10 changed files with 201 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/common/embed/lib/util/utils.js
View file

@ -84,6 +84,14 @@
_user.group && (_user.fullname = (_user.group).toString() + AscCommon.UserInfoParser.getSeparator() + _user.fullname);
_user.guest = !_user.name;
return _user;
},
fixedDigits: function(num, digits, fill) {
(fill===undefined) && (fill = '0');
var strfill = "",
str = num.toString();
for (var i=str.length; i<digits; i++) strfill += fill;
return strfill + str;
}
};
})();

99
apps/common/embed/lib/view/LoadMask.js Normal file
View file

@ -0,0 +1,99 @@
/*
*
* (c) Copyright Ascensio System SIA 2010-2021
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
* street, Riga, Latvia, EU, LV-1050.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* LoadMask.js
*
* Displays loading mask over selected element(s) or component. Accepts both single and multiple selectors.
*
* Created by Julia Radzhabova 24.06.2021
* Copyright (c) 2021 Ascensio System SIA. All rights reserved.
*
*/
!window.common && (window.common = {});
!common.view && (common.view = {});
common.view.LoadMask = function(owner) {
var tpl = '<div class="asc-loadmask-body" role="presentation" tabindex="-1">' +
'<i id="loadmask-spinner" class="asc-loadmask-image"></i>' +
'<div class="asc-loadmask-title"></div>' +
'</div>';
var ownerEl = owner || $(document.body),
loaderEl,
maskedEl,
title = '',
timerId = 0,
rendered = false;
return {
show: function(){
if (!loaderEl || !maskedEl) {
loaderEl = $(tpl);
maskedEl = $('<div class="asc-loadmask"></div>');
}
$('.asc-loadmask-title', loaderEl).html(title);
// show mask after 500 ms if it wont be hided
if (!rendered) {
timerId = setTimeout(function () {
ownerEl.append(maskedEl);
ownerEl.append(loaderEl);
loaderEl.css('min-width', $('.asc-loadmask-title', loaderEl).width() + 105);
},500);
}
},
hide: function() {
if (timerId) {
clearTimeout(timerId);
timerId = 0;
}
maskedEl && maskedEl.remove();
loaderEl && loaderEl.remove();
maskedEl = loaderEl = null;
},
setTitle: function(text) {
title = text;
if (ownerEl && loaderEl){
var el = $('.asc-loadmask-title', loaderEl);
el.html(title);
loaderEl.css('min-width', el.width() + 105);
}
}
}
};

2
apps/common/embed/resources/less/common.less
View file

@ -53,6 +53,8 @@
@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
@import "loadmask.less";
@toolbarBorderColor: #dbdbdb;
@toolbarBorderShadowColor: #FAFAFA;
@toolbarTopColor: #F7F7F7;

74
apps/common/embed/resources/less/loadmask.less Normal file
View file

@ -0,0 +1,74 @@
@loadmask-zindex: 10000;
@loadmask-image-height: 28px;
@loadmask-image-width: 28px;
@loadmask-small-image-height: 20px;
@loadmask-small-image-width: 20px;
@background-loader-ie: fade(#000, 65%);
@background-loader: fade(#181818, 90%);
@text-contrast-background-ie: #fff;
@text-contrast-background: #fff;
.asc-loadmask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
zoom: 1;
background-color: transparent;
z-index: @loadmask-zindex;
}
.asc-loadmask-body {
position: absolute;
z-index: @loadmask-zindex + 1;
padding: 24px;
line-height: @loadmask-image-height;
border: none;
background-image: none;
background-color: @background-loader-ie;
background-color: @background-loader;
color: @text-contrast-background-ie;
color: @text-contrast-background;
border-radius: 6px;
left: 50%;
top: 50%;
transform: translate(-50%);
& > div {
display: inline-block;
vertical-align: middle;
}
.asc-loadmask-image {
background-image: ~"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iMTAuMjUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCUsIDQwJSIgLz48L3N2Zz4=)";
height: 28px;
width: 28px;
float: left;
margin-left: 8px;
}
.asc-loadmask-title {
font-size: 13px;
margin: 0 8px 0 12px;
white-space: pre-wrap;
}
}
@keyframes rotation {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#loadmask-spinner {
animation-duration: .8s;
animation-name: rotation;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

6
apps/documenteditor/embed/index.html
View file

@ -222,11 +222,6 @@
</div>
</div>
<div id="id-loadmask" class="hide modal cmd-loader-body">
<div class="cmd-loader-image"></div>
<div class="cmd-loader-title">Please wait...</div>
</div>
<div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
<!--vendor-->
@ -257,6 +252,7 @@
<script type="text/javascript" src="../../common/Analytics.js"></script>
<script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
<script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
<script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
<script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
<script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
<script type="text/javascript" src="js/ApplicationView.js"></script>

5
apps/documenteditor/embed/index.html.deploy
View file

@ -214,11 +214,6 @@
</div>
</div>
<div id="id-loadmask" class="hide modal cmd-loader-body">
<div class="cmd-loader-image"></div>
<div class="cmd-loader-title">Please wait...</div>
</div>
<div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
<!--vendor-->

6
apps/documenteditor/embed/index_loader.html
View file

@ -323,11 +323,6 @@
</div>
</div>
<div id="id-loadmask" class="hide modal cmd-loader-body">
<div class="cmd-loader-image"></div>
<div class="cmd-loader-title">Please wait...</div>
</div>
<div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
<!--vendor-->
@ -351,6 +346,7 @@
<script type="text/javascript" src="../../common/Analytics.js"></script>
<script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
<script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
<script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
<script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
<script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
<script type="text/javascript" src="js/ApplicationView.js"></script>

5
apps/documenteditor/embed/index_loader.html.deploy
View file

@ -315,11 +315,6 @@
</div>
</div>
<div id="id-loadmask" class="hide modal cmd-loader-body">
<div class="cmd-loader-image"></div>
<div class="cmd-loader-title">Please wait...</div>
</div>
<div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
<!--vendor-->

30
apps/documenteditor/embed/js/ApplicationController.js
View file

@ -45,6 +45,8 @@ DE.ApplicationController = new(function(){
btnSubmit,
_submitFail, $submitedTooltip, $requiredTooltip;
var LoadingDocument = -256;
// Initialize analytics
// -------------------------
@ -168,14 +170,19 @@ DE.ApplicationController = new(function(){
btnSubmit.attr({disabled: true});
btnSubmit.css("pointer-events", "none");
break;
case LoadingDocument:
text = me.textLoadingDocument + ' ';
break;
default:
text = me.waitText;
break;
}
if (type == Asc.c_oAscAsyncActionType['BlockInteraction']) {
$('#id-loadmask .cmd-loader-title').html(text);
showMask();
if (!me.loadMask)
me.loadMask = new common.view.LoadMask();
me.loadMask.setTitle(text);
me.loadMask.show();
}
}
@ -192,7 +199,7 @@ DE.ApplicationController = new(function(){
$submitedTooltip.show();
}
}
hideMask();
me.loadMask && me.loadMask.hide();
}
function onDocMouseMoveStart() {
@ -272,6 +279,7 @@ DE.ApplicationController = new(function(){
function onDocumentContentReady() {
hidePreloader();
onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom) : -2);
(zf == -1) ? api.zoomFitToPage() : ((zf == -2) ? api.zoomFitToWidth() : api.zoom(zf>0 ? zf : 100));
@ -542,24 +550,15 @@ DE.ApplicationController = new(function(){
else
$parent.css('padding-right', _left_width - _right_width);
onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
api.asc_LoadDocument();
api.Resize();
}
function showMask() {
$('#id-loadmask').modal({
backdrop: 'static',
keyboard: false
});
}
function hideMask() {
$('#id-loadmask').modal('hide');
}
function onOpenDocument(progress) {
var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
$('#loadmask-text').html(me.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
me.loadMask && me.loadMask.setTitle(me.textLoadingDocument + ': ' + common.utils.fixedDigits(Math.min(Math.round(proc*100), 100), 3, " ") + '%');
}
function onError(id, level, errData) {
@ -574,6 +573,7 @@ DE.ApplicationController = new(function(){
}
hidePreloader();
onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
var message;

1
build/documenteditor.json
View file

@ -412,6 +412,7 @@
"../apps/common/Analytics.js",
"../apps/common/embed/lib/util/LocalStorage.js",
"../apps/common/embed/lib/util/utils.js",
"../apps/common/embed/lib/view/LoadMask.js",
"../apps/common/embed/lib/view/modals.js",
"../apps/common/embed/lib/controller/modals.js",
"../apps/documenteditor/embed/js/ApplicationView.js",