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

[common] added timeout to show 'long operation' loader

Browse source
This commit is contained in:
Maxim Kadushkin 2020-02-17 17:36:04 +03:00
parent cb81a41fe5
commit a7988dc7ec
1 changed files with 46 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
apps/common/main/lib/component/LoadMask.js
View file

@ -71,7 +71,9 @@ define([
var ownerEl, var ownerEl,
maskeEl, maskeEl,
loaderEl; loaderEl;
var timerId = 0;
maskeEl = $('<div class="asc-loadmask"></div>');
return { return {
options : { options : {
cls : '', cls : '',
@ -91,10 +93,15 @@ define([
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
this.template = this.options.template || this.template; this.template = this.options.template || this.template;
this.cls = this.options.cls;
this.style = this.options.style;
this.title = this.options.title; this.title = this.options.title;
this.owner = this.options.owner;
ownerEl = (this.options.owner instanceof Common.UI.BaseView) ? $(this.options.owner.el) : $(this.options.owner);
loaderEl = $(this.template({
id : this.id,
cls : this.options.cls,
style : this.options.style,
title : this.title
}));
}, },
render: function() { render: function() {
@ -102,60 +109,61 @@ define([
}, },
show: function(){ show: function(){
if (maskeEl || loaderEl) // if (maskeEl || loaderEl)
return; // return;
ownerEl = (this.owner instanceof Common.UI.BaseView) ? $(this.owner.el) : $(this.owner);
// The owner is already masked // The owner is already masked
if (ownerEl.hasClass('masked')) if (!!ownerEl.ismasked)
return this; return this;
ownerEl.ismasked = true;
var me = this; var me = this;
if (me.title != me.options.title) {
me.options.title = me.title;
$('.asc-loadmask-title', loaderEl).html(me.title);
}
maskeEl = $('<div class="asc-loadmask"></div>'); // show mask after 500 ms if it wont be hided
loaderEl = $(this.template({ timerId = setTimeout(function () {
id : me.id,
cls : me.cls,
style : me.style,
title : me.title
}));
ownerEl.addClass('masked');
ownerEl.append(maskeEl); ownerEl.append(maskeEl);
ownerEl.append(loaderEl); ownerEl.append(loaderEl);
loaderEl.css({ loaderEl.css({
top : Math.round(ownerEl.height() / 2 - (loaderEl.height() + parseInt(loaderEl.css('padding-top')) + parseInt(loaderEl.css('padding-bottom'))) / 2) + 'px', top : Math.round(ownerEl.height() / 2 - (loaderEl.height() + parseInt(loaderEl.css('padding-top')) + parseInt(loaderEl.css('padding-bottom'))) / 2) + 'px',
left: Math.round(ownerEl.width() / 2 - (loaderEl.width() + parseInt(loaderEl.css('padding-left')) + parseInt(loaderEl.css('padding-right'))) / 2) + 'px' left: Math.round(ownerEl.width() / 2 - (loaderEl.width() + parseInt(loaderEl.css('padding-left')) + parseInt(loaderEl.css('padding-right'))) / 2) + 'px'
}); });
if (ownerEl.height()<1 || ownerEl.width()<1) // if (ownerEl.height()<1 || ownerEl.width()<1)
loaderEl.css({visibility: 'hidden'}); // loaderEl.css({visibility: 'hidden'});
if (ownerEl && ownerEl.closest('.asc-window.modal').length==0) if (ownerEl && ownerEl.closest('.asc-window.modal').length==0)
Common.util.Shortcuts.suspendEvents(); Common.util.Shortcuts.suspendEvents();
},500);
return this; return this;
}, },
hide: function() { hide: function() {
ownerEl && ownerEl.removeClass('masked'); if (timerId) {
clearTimeout(timerId);
timerId = 0;
}
if (ownerEl && ownerEl.ismasked) {
if (ownerEl.closest('.asc-window.modal').length==0)
Common.util.Shortcuts.resumeEvents();
maskeEl && maskeEl.remove(); maskeEl && maskeEl.remove();
loaderEl && loaderEl.remove(); loaderEl && loaderEl.remove();
maskeEl = null; }
loaderEl = null; delete ownerEl.ismasked;
if (ownerEl && ownerEl.closest('.asc-window.modal').length==0)
Common.util.Shortcuts.resumeEvents();
}, },
setTitle: function(title) { setTitle: function(title) {
this.title = title; this.title = title;
if (ownerEl && ownerEl.hasClass('masked') && loaderEl){ if (ownerEl && ownerEl.ismasked && loaderEl){
$('.asc-loadmask-title', loaderEl).html(title); $('.asc-loadmask-title', loaderEl).html(title);
} }
}, },
isVisible: function() { isVisible: function() {
@ -163,7 +171,7 @@ define([
}, },
updatePosition: function() { updatePosition: function() {
if (ownerEl && ownerEl.hasClass('masked') && loaderEl){ if (ownerEl && ownerEl.ismasked && loaderEl){
loaderEl.css({ loaderEl.css({
top : Math.round(ownerEl.height() / 2 - (loaderEl.height() + parseInt(loaderEl.css('padding-top')) + parseInt(loaderEl.css('padding-bottom'))) / 2) + 'px', top : Math.round(ownerEl.height() / 2 - (loaderEl.height() + parseInt(loaderEl.css('padding-top')) + parseInt(loaderEl.css('padding-bottom'))) / 2) + 'px',
left: Math.round(ownerEl.width() / 2 - (loaderEl.width() + parseInt(loaderEl.css('padding-left')) + parseInt(loaderEl.css('padding-right'))) / 2) + 'px' left: Math.round(ownerEl.width() / 2 - (loaderEl.width() + parseInt(loaderEl.css('padding-left')) + parseInt(loaderEl.css('padding-right'))) / 2) + 'px'