[DE mobile] Make toolbar controller

apps/common/mobile/lib/store/users.js

@@ -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);
+    }
 }

apps/common/mobile/resources/less/common-ios.less

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

apps/documenteditor/mobile/locale/en.json

@@ -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",

apps/documenteditor/mobile/src/controller/Main.jsx

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

apps/documenteditor/mobile/src/controller/Toolbar.jsx

@@ -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};

apps/documenteditor/mobile/src/page/main.jsx

@@ -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'>
+              <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
-                  <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>
               {/* Page content */}
               <View id="editor_sdk">
             

apps/documenteditor/mobile/src/view/Toolbar.jsx

@@ -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;