[DE mobile] Add preloader for long actions
This commit is contained in:
JuliaSvinareva
parent
45bbe12dda
commit
bc7713368a
50
apps/common/mobile/utils/IrregularStack.js
Normal file
50
apps/common/mobile/utils/IrregularStack.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
export default class IrregularStack {
|
||||
constructor (config) {
|
||||
this._stack = [];
|
||||
|
||||
const _config = config || {};
|
||||
this._strongCompare = _config.strongCompare || this._compare;
|
||||
this._weakCompare = _config.weakCompare || this._compare;
|
||||
}
|
||||
|
||||
_compare (obj1, obj2) {
|
||||
if (typeof obj1 === 'object' && typeof obj2 === 'object' && window.JSON)
|
||||
return window.JSON.stringify(obj1) === window.JSON.stringify(obj2);
|
||||
return obj1 === obj2;
|
||||
};
|
||||
|
||||
_indexOf (obj, compare) {
|
||||
for (let i = this._stack.length - 1; i >= 0; i--) {
|
||||
if (compare(this._stack[i], obj))
|
||||
return i;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
push (obj) {
|
||||
this._stack.push(obj);
|
||||
}
|
||||
|
||||
pop (obj) {
|
||||
const index = this._indexOf(obj, this._strongCompare);
|
||||
if (index !== -1) {
|
||||
const removed = this._stack.splice(index, 1);
|
||||
return removed[0];
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
get (obj) {
|
||||
const index = this._indexOf(obj, this._weakCompare);
|
||||
if (index !== -1) {
|
||||
return this._stack[index];
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
exist (obj) {
|
||||
return !(this._indexOf(obj, this._strongCompare) < 0);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -44,7 +44,41 @@
|
|||
"textNoLicenseTitle": "License limit reached",
|
||||
"textPaidFeature": "Paid feature",
|
||||
"textCustomLoader": "Please note that according to the terms of the license you are not entitled to change the loader. Please contact our Sales Department to get a quote.",
|
||||
"textClose": "Close"
|
||||
"textClose": "Close",
|
||||
|
||||
"openTitleText": "Opening Document",
|
||||
"openTextText": "Opening document...",
|
||||
"saveTitleText": "Saving Document",
|
||||
"saveTextText": "Saving document...",
|
||||
"loadFontsTitleText": "Loading Data",
|
||||
"loadFontsTextText": "Loading data...",
|
||||
"loadImagesTitleText": "Loading Images",
|
||||
"loadImagesTextText": "Loading images...",
|
||||
"loadFontTitleText": "Loading Data",
|
||||
"loadFontTextText": "Loading data...",
|
||||
"loadImageTitleText": "Loading Image",
|
||||
"loadImageTextText": "Loading image...",
|
||||
"downloadTitleText": "Downloading Document",
|
||||
"downloadTextText": "Downloading document...",
|
||||
"printTitleText": "Printing Document",
|
||||
"printTextText": "Printing document...",
|
||||
"uploadImageTitleText": "Uploading Image",
|
||||
"uploadImageTextText": "Uploading image...",
|
||||
"applyChangesTitleText": "Loading Data",
|
||||
"applyChangesTextText": "Loading data...",
|
||||
"savePreparingText": "Preparing to save",
|
||||
"savePreparingTitle": "Preparing to save. Please wait...",
|
||||
"mailMergeLoadFileText": "Loading Data Source...",
|
||||
"mailMergeLoadFileTitle": "Loading Data Source",
|
||||
"downloadMergeTitle": "Downloading",
|
||||
"downloadMergeText": "Downloading...",
|
||||
"sendMergeTitle": "Sending Merge",
|
||||
"sendMergeText": "Sending Merge...",
|
||||
"waitText": "Please, wait...",
|
||||
"txtEditingMode": "Set editing mode...",
|
||||
"loadingDocumentTitleText": "Loading document",
|
||||
"loadingDocumentTextText": "Loading document...",
|
||||
"textLoadingDocument": "Loading document"
|
||||
},
|
||||
"Toolbar": {
|
||||
"dlgLeaveTitleText": "You leave the application",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {inject} from "mobx-react";
|
|||
import { f7 } from "framework7-react";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
|
||||
import IrregularStack from '../../../../common/mobile/utils/IrregularStack';
|
||||
import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx';
|
||||
import {InitReviewController as ReviewController} from '../../../../common/mobile/lib/controller/collaboration/Review.jsx';
|
||||
import { onAdvancedOptions } from './settings/Download.jsx';
|
||||
|
|
@ -35,8 +36,15 @@ class MainController extends Component {
|
|||
licenseType: false
|
||||
};
|
||||
|
||||
this.stackLongActions = new IrregularStack({
|
||||
strongCompare : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
|
||||
weakCompare : function(obj1, obj2){return obj1.type === obj2.type;}
|
||||
});
|
||||
|
||||
const { t } = this.props;
|
||||
this._t = t('Main', {returnObjects:true});
|
||||
|
||||
this.LoadingDocument = -256;
|
||||
}
|
||||
|
||||
initSdk() {
|
||||
|
|
@ -181,6 +189,9 @@ class MainController extends Component {
|
|||
Common.Notifications.trigger('document:ready');
|
||||
|
||||
this._isDocReady = true;
|
||||
|
||||
f7.dialog.close(this.loadMask.el);
|
||||
this.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
|
||||
};
|
||||
|
||||
const _process_array = (array, fn) => {
|
||||
|
|
@ -388,6 +399,10 @@ class MainController extends Component {
|
|||
}
|
||||
|
||||
bindEvents() {
|
||||
this.api.asc_registerCallback('asc_onStartAction', this.onLongActionBegin.bind(this));
|
||||
this.api.asc_registerCallback('asc_onEndAction', this.onLongActionEnd.bind(this));
|
||||
this.api.asc_registerCallback('asc_onOpenDocumentProgress', this.onOpenDocument.bind(this));
|
||||
|
||||
this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
|
||||
Common.Utils.ThemeColor.setColors(colors, standart_colors);
|
||||
});
|
||||
|
|
@ -519,6 +534,153 @@ class MainController extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
onLongActionBegin (type, id) {
|
||||
const action = {id: id, type: type};
|
||||
this.stackLongActions.push(action);
|
||||
this.setLongActionView(action);
|
||||
}
|
||||
|
||||
onLongActionEnd (type, id) {
|
||||
let action = {id: id, type: type};
|
||||
this.stackLongActions.pop(action);
|
||||
|
||||
//this.updateWindowTitle(true);
|
||||
|
||||
action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
|
||||
|
||||
if (action) {
|
||||
this.setLongActionView(action)
|
||||
}
|
||||
|
||||
action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
|
||||
|
||||
if (action) {
|
||||
this.setLongActionView(action)
|
||||
} else {
|
||||
this.loadMask.el && this.loadMask.el.classList.contains('modal-in') && f7.dialog.close(this.loadMask.el);
|
||||
}
|
||||
}
|
||||
|
||||
setLongActionView (action) {
|
||||
const _t = this._t;
|
||||
let title = '';
|
||||
let text = '';
|
||||
switch (action.id) {
|
||||
case Asc.c_oAscAsyncAction['Open']:
|
||||
title = _t.openTitleText;
|
||||
text = _t.openTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['Save']:
|
||||
title = _t.saveTitleText;
|
||||
text = _t.saveTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
|
||||
title = _t.loadFontsTitleText;
|
||||
text = _t.loadFontsTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['LoadDocumentImages']:
|
||||
title = _t.loadImagesTitleText;
|
||||
text = _t.loadImagesTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['LoadFont']:
|
||||
title = _t.loadFontTitleText;
|
||||
text = _t.loadFontTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['LoadImage']:
|
||||
title = _t.loadImageTitleText;
|
||||
text = _t.loadImageTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['DownloadAs']:
|
||||
title = _t.downloadTitleText;
|
||||
text = _t.downloadTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['Print']:
|
||||
title = _t.printTitleText;
|
||||
text = _t.printTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['UploadImage']:
|
||||
title = _t.uploadImageTitleText;
|
||||
text = _t.uploadImageTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['ApplyChanges']:
|
||||
title = _t.applyChangesTitleText;
|
||||
text = _t.applyChangesTextText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['PrepareToSave']:
|
||||
title = _t.savePreparingText;
|
||||
text = _t.savePreparingTitle;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['MailMergeLoadFile']:
|
||||
title = _t.mailMergeLoadFileText;
|
||||
text = _t.mailMergeLoadFileTitle;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['DownloadMerge']:
|
||||
title = _t.downloadMergeTitle;
|
||||
text = _t.downloadMergeText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['SendMailMerge']:
|
||||
title = _t.sendMergeTitle;
|
||||
text = _t.sendMergeText;
|
||||
break;
|
||||
|
||||
case Asc.c_oAscAsyncAction['Waiting']:
|
||||
title = _t.waitText;
|
||||
text = _t.waitText;
|
||||
break;
|
||||
|
||||
case ApplyEditRights:
|
||||
title = _t.txtEditingMode;
|
||||
text = _t.txtEditingMode;
|
||||
break;
|
||||
|
||||
case LoadingDocument:
|
||||
title = _t.loadingDocumentTitleText;
|
||||
text = _t.loadingDocumentTextText;
|
||||
break;
|
||||
default:
|
||||
if (typeof action.id == 'string'){
|
||||
title = action.id;
|
||||
text = action.id;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (action.type === Asc.c_oAscAsyncActionType['BlockInteraction']) {
|
||||
if (action.id === Asc.c_oAscAsyncAction['ApplyChanges']) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.loadMask && this.loadMask.el && this.loadMask.el.classList.contains('modal-in')) {
|
||||
this.loadMask.el.getElementsByClassName('dialog-title')[0].innerHTML = title;
|
||||
} else {
|
||||
this.loadMask = f7.dialog.preloader(title);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onOpenDocument (progress) {
|
||||
if (this.loadMask && this.loadMask.el) {
|
||||
const $title = this.loadMask.el.getElementsByClassName('dialog-title')[0];
|
||||
const proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
|
||||
|
||||
$title.innerHTML = `${this._t.textLoadingDocument}: ${Math.min(Math.round(proc * 100), 100)}%`;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
|
|
|
|||
Loading…
Reference in a new issue