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

[DE mobile] Make toolbar controller

Browse source
This commit is contained in:
JuliaSvinareva 2021-03-30 23:11:49 +03:00
parent d1c32d886f
commit d64eae031a
7 changed files with 246 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/common/mobile/lib/store/users.js
View file

@ -1,5 +1,5 @@
import {makeObservable, observable, action} from 'mobx';
import {makeObservable, observable, action, computed} from 'mobx';
export class storeUsers {
constructor() {
@ -10,7 +10,8 @@ export class storeUsers {
setCurrentUser: action,
connection: action,
isDisconnected: observable,
resetDisconnected: action
resetDisconnected: action,
hasEditUsers: computed
})
}
@ -80,4 +81,14 @@ export class storeUsers {
});
return user;
}
get hasEditUsers () {
let length = 0;
this.users.forEach((item) => {
if ((item.asc_getState()!==false) && !item.asc_getView()) {
length++;
}
});
return (length >= 1);
}
}

3
apps/common/mobile/resources/less/common-ios.less
View file

@ -31,6 +31,9 @@
}
.navbar {
a.btn-doc-back {
width: 22px;
}
background-color: var(--f7-navbar-bg-color);
.title {
font-weight: 600;

6
apps/documenteditor/mobile/locale/en.json
View file

@ -27,6 +27,12 @@
"footnote text": "Footnote Text"
}
},
"Toolbar": {
"dlgLeaveTitleText": "You leave the application",
"dlgLeaveMsgText": "You have unsaved changes in this document. Click \\'Stay on this Page\\' to await the autosave of the document. Click \\'Leave this Page\\' to discard all the unsaved changes.",
"leaveButtonText": "Leave this Page",
"stayButtonText": "Stay on this Page"
},
"Common": {
"ThemeColorPalette": {
"textThemeColors": "Theme Colors",

14
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -124,13 +124,13 @@ class MainController extends Component {
// Common.SharedSettings.set('document', data.doc);
// if (data.doc) {
// DE.getController('Toolbar').setDocumentTitle(data.doc.title);
// if (data.doc.info) {
// data.doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
// data.doc.info.created && console.log("Obsolete: The 'created' parameter of the document 'info' section is deprecated. Please use 'uploaded' instead.");
// }
// }
if (data.doc) {
Common.Notifications.trigger('setdoctitle', data.doc.title);
if (data.doc.info) {
data.doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
data.doc.info.created && console.log("Obsolete: The 'created' parameter of the document 'info' section is deprecated. Please use 'uploaded' instead.");
}
}
};
const onEditorPermissions = params => {

184
apps/documenteditor/mobile/src/controller/Toolbar.jsx Normal file
View file

@ -0,0 +1,184 @@
import React, { useEffect, useState } from 'react';
import { inject } from 'mobx-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import ToolbarView from "../view/Toolbar";
const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(props => {
const {t} = useTranslation();
const _t = t("Toolbar", { returnObjects: true });
const appOptions = props.storeAppOptions;
const isDisconnected = props.users.isDisconnected;
const displayMode = props.storeReview.displayMode;
const stateDisplayMode = displayMode == "final" || displayMode == "original" ? true : false;
const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments || appOptions.canReview || appOptions.canViewReview;
useEffect(() => {
const onDocumentReady = () => {
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
api.asc_registerCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
};
if ( !Common.EditorApi ) {
Common.Notifications.on('document:ready', onDocumentReady);
Common.Notifications.on('setdoctitle', setDocTitle);
Common.Gateway.on('init', loadConfig);
} else {
onDocumentReady();
}
return () => {
Common.Notifications.off('document:ready', onDocumentReady);
Common.Notifications.off('setdoctitle', setDocTitle);
Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
api.asc_unregisterCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
}
});
const [docTitle, resetDocTitle] = useState('');
const setDocTitle = (title) => {
resetDocTitle(title);
}
// Back button
const [isShowBack, setShowBack] = useState(false);
const loadConfig = (data) => {
if (data && data.config && data.config.canBackToFolder !== false &&
data.config.customization && data.config.customization.goback &&
(data.config.customization.goback.url || data.config.customization.goback.requestClose && data.config.canRequestClose)) {
setShowBack(true);
}
};
const onBack = () => {
const api = Common.EditorApi.get();
if (api.isDocumentModified()) {
f7.dialog.create({
title : _t.dlgLeaveTitleText,
text : _t.dlgLeaveMsgText,
verticalButtons: true,
buttons : [
{
text: _t.leaveButtonText,
onClick: function() {
goBack();
}
},
{
text: _t.stayButtonText,
bold: true
}
]
}).open();
} else {
goBack();
}
};
const goBack = (current) => {
if (appOptions.customization.goback.requestClose && appOptions.canRequestClose) {
Common.Gateway.requestClose();
} else {
const href = appOptions.customization.goback.url;
if (!current && appOptions.customization.goback.blank !== false) {
window.open(href, "_blank");
} else {
parent.location.href = href;
}
}
}
// Undo and Redo
const [isCanUndo, setCanUndo] = useState(true);
const [isCanRedo, setCanRedo] = useState(true);
const onApiCanUndo = (can) => {
if (isDisconnected) return;
setCanUndo(can);
};
const onApiCanRedo = (can) => {
if (isDisconnected) return;
setCanRedo(can);
};
const onUndo = () => {
const api = Common.EditorApi.get();
if (api) {
api.Undo();
}
};
const onRedo = () => {
const api = Common.EditorApi.get();
if (api) {
api.Redo();
}
}
const [isObjectLocked, setObjectLocked] = useState(false);
const onApiFocusObject = (objects) => {
if (isDisconnected) return;
if (objects.length > 0) {
const getTopObject = (objects) => {
const arrObj = objects.reverse();
let obj;
for (let i=0; i<arrObj.length; i++) {
if (arrObj[i].get_ObjectType() != Asc.c_oAscTypeSelectElement.SpellCheck) {
obj = arrObj[i];
break;
}
}
return obj;
};
const topObject = getTopObject(objects);
const topObjectValue = topObject.get_ObjectValue();
const objectLocked = (typeof topObjectValue.get_Locked === 'function') ? topObjectValue.get_Locked() : false;
setObjectLocked(objectLocked);
}
};
const [disabledEditControls, setDisabledEditControls] = useState(false);
const [disabledSettings, setDisabledSettings] = useState(false);
const deactivateEditControls = (enableDownload) => {
setDisabledEditControls(true);
if (enableDownload) {
//DE.getController('Settings').setMode({isDisconnected: true, enableDownload: enableDownload});
} else {
setDisabledSettings(true);
}
};
const onCoAuthoringDisconnect = (enableDownload) => {
deactivateEditControls(enableDownload);
setCanUndo(false);
setCanRedo(false);
//props.closeOptions('add');
//props.closeOptions('edit');
//props.closeOptions('settings');
};
return (
<ToolbarView openOptions={props.openOptions}
docTitle={docTitle}
isShowBack={isShowBack}
onBack={onBack}
isCanUndo={isCanUndo}
isCanRedo={isCanRedo}
onUndo={onUndo}
onRedo={onRedo}
isObjectLocked={isObjectLocked}
stateDisplayMode={stateDisplayMode}
disabledEditControls={disabledEditControls}
disabledSettings={disabledSettings}
displayCollaboration={displayCollaboration}
/>
)
});
export {ToolbarController as Toolbar};

20
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { f7 } from 'framework7-react';
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
import { Page, View } from 'framework7-react';
import { inject } from "mobx-react";
import EditOptions from '../view/edit/Edit';
@ -11,6 +11,7 @@ import Collaboration from '../../../../common/mobile/lib/view/collaboration/Coll
import { Device } from '../../../../common/mobile/utils/device'
import { Search, SearchSettings } from '../controller/Search';
import ContextMenu from '../controller/ContextMenu';
import { Toolbar } from "../controller/Toolbar";
export default class MainPage extends Component {
constructor(props) {
@ -64,22 +65,7 @@ export default class MainPage extends Component {
return (
<Page name="home">
{/* Top Navbar */}
<Navbar id='editor-navbar'>
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
<NavLeft>
<Link icon='icon-undo'></Link>
<Link icon='icon-redo'></Link>
</NavLeft>
<NavRight>
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
<Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight>
{/* { Device.phone ? null : <Search /> } */}
<Search useSuspense={false} />
</Navbar>
<Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
{/* Page content */}
<View id="editor_sdk">

30
apps/documenteditor/mobile/src/view/Toolbar.jsx Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
import {Navbar, NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device';
import {Search} from "../controller/Search";
const ToolbarView = props => {
const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls;
return (
<Navbar id='editor-navbar'>
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
<NavLeft>
{props.isShowBack && <Link className='btn-doc-back' icon='icon-back' onClick={props.onBack}></Link>}
<Link icon='icon-undo' className={!props.isCanUndo && 'disabled'} onClick={props.onUndo}></Link>
<Link icon='icon-redo' className={!props.isCanRedo && 'disabled'} onClick={props.onRedo}></Link>
</NavLeft>
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
<NavRight>
<Link className={disableEditBtn && 'disabled'} id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => props.openOptions('edit')}></Link>
<Link className={disableEditBtn && 'disabled'} id='btn-add' icon='icon-plus' href={false} onClick={e => props.openOptions('add')}></Link>
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link>}
<Link className={props.disabledSettings && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
</NavRight>
{/* { Device.phone ? null : <Search /> } */}
<Search useSuspense={false} />
</Navbar>
)
};
export default ToolbarView;