Merge pull request #1841 from ONLYOFFICE/feature/fix-bugs

Feature/fix bugs

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

@@ -31,7 +31,8 @@ import { Device } from '../../../../common/mobile/utils/device';
     "storeChartSettings",
     "storeApplicationSettings",
     "storeLinkSettings",
-    "storeToolbarSettings"
+    "storeToolbarSettings",
+    "storeNavigation"
     )
 class MainController extends Component {
     constructor(props) {
@@ -750,6 +751,12 @@ class MainController extends Component {
         });
 
         this.api.asc_registerCallback('asc_onReplaceAll', this.onApiTextReplaced.bind(this));
+
+        const storeNavigation = this.props.storeNavigation;
+
+        this.api.asc_registerCallback('asc_onViewerBookmarksUpdate', (bookmarks) => {
+            storeNavigation.initBookmarks(bookmarks);
+        });
     }
 
     onApiTextReplaced(found, replaced) {

apps/documenteditor/mobile/src/controller/settings/Navigation.jsx

@@ -9,6 +9,46 @@ class NavigationController extends Component {
         this.updateNavigation = this.updateNavigation.bind(this);
     }
 
+    updateViewerNavigation(bookmarks) {
+        let count = bookmarks.length,
+            prevLevel = -1,
+            headerLevel = -1,
+            firstHeader = true,
+            arrHeaders = [];
+
+        for (let i = 0; i < count; i++) {
+            let level = bookmarks[i].level - 1,
+                hasParent = true;
+
+            if (level > prevLevel && i > 0)
+                arrHeaders[i - 1]['hasSubItems'] = true;
+
+            if (headerLevel < 0 || level <= headerLevel) {
+                if (i > 0 || firstHeader)
+                    headerLevel = level;
+                hasParent = false;
+            }
+
+            arrHeaders.push({
+                name: bookmarks[i].description,
+                level: level,
+                index: i,
+                hasParent: hasParent,
+                isEmptyItem: !bookmarks[i].description
+            });
+
+            prevLevel = level;
+        }
+
+        if (count > 0 && !firstHeader) {
+            arrHeaders[0]['hasSubItems'] = false;
+            arrHeaders[0]['isNotHeader'] =  true;
+            arrHeaders[0]['name'] = t('Settings.textBeginningDocument');
+        }
+
+        return arrHeaders;
+    }
+
     updateNavigation() {
         const api = Common.EditorApi.get();
         const navigationObject = api.asc_ShowDocumentOutline();
@@ -60,6 +100,8 @@ class NavigationController extends Component {
 
         if (navigationObject) {
             navigationObject.goto(index);
+        } else {
+            api.asc_viewerNavigateTo(index);
         }
     };
 
@@ -69,11 +111,13 @@ class NavigationController extends Component {
                 <NavigationPopover
                     onSelectItem={this.onSelectItem} 
                     updateNavigation={this.updateNavigation}
+                    updateViewerNavigation={this.updateViewerNavigation}
                 />
             :
                 <NavigationSheet
                     onSelectItem={this.onSelectItem} 
                     updateNavigation={this.updateNavigation}
+                    updateViewerNavigation={this.updateViewerNavigation}
                     onclosed={this.props.onclosed}
                 /> 
         );

apps/documenteditor/mobile/src/store/mainStore.js

@@ -16,6 +16,7 @@ import {storePalette} from "./palette";
 import {storeReview} from '../../../../common/mobile/lib/store/review';
 import {storeComments} from "../../../../common/mobile/lib/store/comments";
 import {storeToolbarSettings} from "./toolbar";
+import { storeNavigation } from './navigation';
 
 export const stores = {
     storeAppOptions: new storeAppOptions(),
@@ -35,5 +36,6 @@ export const stores = {
     storeReview: new storeReview(),
     storeComments: new storeComments(),
     storeToolbarSettings: new storeToolbarSettings(),
+    storeNavigation: new storeNavigation()
 };
 

apps/documenteditor/mobile/src/store/navigation.js

@@ -0,0 +1,16 @@
+import {action, observable, makeObservable} from 'mobx';
+
+export class storeNavigation { 
+    constructor() {
+        makeObservable(this, {
+            bookmarks: observable,
+            initBookmarks: action
+        });
+    }
+
+    bookmarks = [];
+
+    initBookmarks(bookmarks) {
+        this.bookmarks = bookmarks;
+    }
+}

apps/documenteditor/mobile/src/view/settings/Navigation.jsx

@@ -2,17 +2,22 @@ import React, { useState, useEffect } from "react";
 import { Device } from '../../../../../common/mobile/utils/device';
 import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
+import { inject, observer } from "mobx-react";
 
-const NavigationPopover = props => {
+const NavigationPopover = inject('storeNavigation')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Settings', {returnObjects: true});
     const api = Common.EditorApi.get();
+    const storeNavigation = props.storeNavigation;
+    const bookmarks = storeNavigation.bookmarks;
     const navigationObject = api.asc_ShowDocumentOutline();
-    const [currentPosition, setCurrentPosition] = useState(navigationObject ? navigationObject.get_CurrentPosition() : null);
+    const [currentPosition, setCurrentPosition] = useState(navigationObject ? navigationObject.get_CurrentPosition() : bookmarks.length ? bookmarks[0] : null);
     let arrHeaders = [];
 
-    if(currentPosition) {
+    if(navigationObject) {
         arrHeaders = props.updateNavigation();
+    } else if(bookmarks.length) {
+        arrHeaders = props.updateViewerNavigation(bookmarks);
     }
 
     return (
@@ -37,17 +42,21 @@ const NavigationPopover = props => {
             }
         </Page>
     )
-}
+}));
 
-const NavigationSheet = props => {
+const NavigationSheet = inject('storeNavigation')(observer(props => {
     const { t } = useTranslation();
     const api = Common.EditorApi.get();
+    const storeNavigation = props.storeNavigation;
+    const bookmarks = storeNavigation.bookmarks;
     const navigationObject = api.asc_ShowDocumentOutline();
-    const [currentPosition, setCurrentPosition] = useState(navigationObject ? navigationObject.get_CurrentPosition() : null);
+    const [currentPosition, setCurrentPosition] = useState(navigationObject ? navigationObject.get_CurrentPosition() : bookmarks.length ? bookmarks[0] : null);
     let arrHeaders = [];
 
-    if(currentPosition) {
+    if(navigationObject) {
         arrHeaders = props.updateNavigation();
+    } else if(bookmarks.length) {
+        arrHeaders = props.updateViewerNavigation(bookmarks);
     }
 
     const [stateHeight, setHeight] = useState('45%');
@@ -122,7 +131,7 @@ const NavigationSheet = props => {
             }
         </Sheet>
     )
-}
+}));
 
 export {
     NavigationPopover,

apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx

@@ -48,7 +48,7 @@ const PageApplicationSettings = props => {
                         </ListItem>
                         <ListItem title={t('View.Settings.textDarkTheme')}>
                             <Toggle checked={isThemeDark}
-                                onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
+                                onToggleChange={() => {Themes.switchDarkTheme(!isThemeDark), setIsThemeDark(!isThemeDark)}}>
                             </Toggle>
                         </ListItem>
                     </List>

apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx

@@ -93,7 +93,7 @@ const PageApplicationSettings = props => {
                     </ListItem>
                     <ListItem title={t('View.Settings.textDarkTheme')}>
                         <Toggle checked={isThemeDark}
-                            onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
+                            onToggleChange={() => {Themes.switchDarkTheme(!isThemeDark), setIsThemeDark(!isThemeDark)}}>
                         </Toggle>
                     </ListItem>
                 </List>