[DE mobile] Add edit header settings

apps/documenteditor/mobile/locale/en.json

@@ -113,6 +113,12 @@
     "textRemoveLink": "Remove Link",
     "textLink": "Link",
     "textDisplay": "Display",
-    "textScreenTip": "Screen Tip"
+    "textScreenTip": "Screen Tip",
+    "textPageNumbering": "Page Numbering",
+    "textDifferentFirstPage": "Different first page",
+    "textDifferentOddAndEvenPages": "Different odd and even pages",
+    "textLinkToPrevious": "Link to Previous",
+    "textContinueFromPreviousSection": "Continue from previous section",
+    "textStartAt": "Start at"
   }
 }

apps/documenteditor/mobile/src/components/edit/Edit.jsx

@@ -12,6 +12,7 @@ import EditImageController from "./controller/EditImage";
 import EditTableController from "./controller/EditTable";
 import EditChartController from "./controller/EditChart";
 import EditHyperlinkController from "./controller/EditHyperlink";
+import EditHeaderController from "./controller/EditHeader";
 
 import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText";
 import {PageAdvancedSettings} from "./EditParagraph";
@@ -186,13 +187,13 @@ const EditTabs = props => {
                 component: <EditTableController />
             })
         }
-        /*if (settings.indexOf('header') > -1) {
+        if (settings.indexOf('header') > -1) {
             editors.push({
-                caption: headerType==2 ? _t.textFooter : _t.textHeader,
+                caption: headerType === 2 ? _t.textFooter : _t.textHeader,
                 id: 'edit-header',
-                component: <EditHeader />
+                component: <EditHeaderController />
             })
-        }*/
+        }
         if (settings.indexOf('shape') > -1) {
             editors.push({
                 caption: _t.textShape,

apps/documenteditor/mobile/src/components/edit/EditHeader.jsx

@@ -0,0 +1,51 @@
+import React, { Fragment, useState } from 'react';
+import { observer, inject } from "mobx-react";
+import { List, ListItem, Segmented, Button, Toggle, BlockTitle } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const EditHeader = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const headerObject = props.storeFocusObjects.headerObject;
+    const isDiffFirst = headerObject.get_DifferentFirst();
+    const isDiffOdd = headerObject.get_DifferentEvenOdd();
+    const linkToPrev = headerObject.get_LinkToPrevious();
+    const boolLinkToPrev = !!linkToPrev;
+    const startPageNumber = headerObject.get_StartPageNumber();
+    let _startAt = 1;
+    if (startPageNumber >= 0) {
+        _startAt = startPageNumber;
+    }
+    return (
+        <Fragment>
+            <List>
+                <ListItem title={_t.textDifferentFirstPage}>
+                    <Toggle checked={isDiffFirst} onToggleChange={() => {props.onDiffFirst(!isDiffFirst)}}/>
+                </ListItem>
+                <ListItem title={_t.textDifferentOddAndEvenPages}>
+                    <Toggle checked={isDiffOdd} onToggleChange={() => {props.onDiffOdd(!isDiffOdd)}}/>
+                </ListItem>
+                <ListItem title={_t.textLinkToPrevious} className={linkToPrev===null ? 'disabled' : ''}>
+                    <Toggle checked={boolLinkToPrev} onToggleChange={() => {props.onSameAs(!boolLinkToPrev)}}/>
+                </ListItem>
+            </List>
+            <BlockTitle>{_t.textPageNumbering}</BlockTitle>
+            <List>
+                <ListItem title={_t.textContinueFromPreviousSection}>
+                    <Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
+                </ListItem>
+                <ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}>
+                    <div slot='after-start'>{_startAt}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {props.onStartAt(_startAt, true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {props.onStartAt(_startAt, false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+            </List>
+        </Fragment>
+    )
+};
+
+export default inject("storeFocusObjects")(observer(EditHeader));

apps/documenteditor/mobile/src/components/edit/controller/EditHeader.jsx

@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+
+import EditHeader from '../EditHeader';
+
+class EditHeaderController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    onDiffFirst (value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.HeadersAndFooters_DifferentFirstPage(value);
+        }
+    }
+
+    onDiffOdd (value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.HeadersAndFooters_DifferentOddandEvenPage(value);
+        }
+    }
+
+    onSameAs (value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.HeadersAndFooters_LinkToPrevious(value);
+        }
+    }
+
+    onNumberingContinue (isChecked, value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.asc_SetSectionStartPage(isChecked ? -1 : value);
+        }
+    }
+
+    onStartAt (value, isDecrement) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            let start = value;
+            if (isDecrement) {
+                start = Math.max(1, --start);
+            } else {
+                start = Math.min(2147483646, ++start);
+            }
+            api.asc_SetSectionStartPage(start);
+        }
+    }
+
+    render () {
+        return (
+            <EditHeader onDiffFirst={this.onDiffFirst}
+                        onDiffOdd={this.onDiffOdd}
+                        onSameAs={this.onSameAs}
+                        onNumberingContinue={this.onNumberingContinue}
+                        onStartAt={this.onStartAt}
+            />
+        )
+    }
+}
+
+export default EditHeaderController;

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

@@ -9,7 +9,7 @@ export class storeFocusObjects {
     }
 
     @computed get settings() {
-        let _settings = [];
+        const _settings = [];
         for (let object of this._focusObjects) {
             let type = object.get_ObjectType();
             if (Asc.c_oAscTypeSelectElement.Paragraph === type) {
@@ -36,29 +36,43 @@ export class storeFocusObjects {
     }
     @computed get headerType() {
         for (let object of this._focusObjects) {
-            let type = object.get_ObjectType();
+            const type = object.get_ObjectType();
             if (Asc.c_oAscTypeSelectElement.Header === type) {
                 return object.get_ObjectValue().get_Type();
             }
         }
         return this._headerType;
     }
+    @computed get headerObject() {
+        const headers = [];
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) {
+                headers.push(object);
+            }
+        }
+        if (headers.length > 0) {
+            const object = headers[headers.length - 1]; // get top
+            return object.get_ObjectValue();
+        } else {
+            return undefined;
+        }
+    }
     @computed get paragraphObject() {
-        let paragraphs = [];
+        const paragraphs = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
                 paragraphs.push(object);
             }
         }
         if (paragraphs.length > 0) {
-            let object = paragraphs[paragraphs.length - 1]; // get top
+            const object = paragraphs[paragraphs.length - 1]; // get top
             return object.get_ObjectValue();
         } else {
             return undefined;
         }
     }
     @computed get shapeObject() {
-        let shapes = [];
+        const shapes = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
                 if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
@@ -67,14 +81,14 @@ export class storeFocusObjects {
             }
         }
         if (shapes.length > 0) {
-            let object = shapes[shapes.length - 1]; // get top
+            const object = shapes[shapes.length - 1]; // get top
             return object.get_ObjectValue();
         } else {
             return undefined;
         }
     }
     @computed get imageObject() {
-        let images = [];
+        const images = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
                 const imageObject = object.get_ObjectValue();
@@ -84,21 +98,21 @@ export class storeFocusObjects {
             }
         }
         if (images.length > 0) {
-            let object = images[images.length - 1]; // get top
+            const object = images[images.length - 1]; // get top
             return object.get_ObjectValue();
         } else {
             return undefined;
         }
     }
     @computed get tableObject() {
-        let tables = [];
+        const tables = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
                 tables.push(object);
             }
         }
         if (tables.length > 0) {
-            let object = tables[tables.length - 1]; // get top table
+            const object = tables[tables.length - 1]; // get top table
             return object.get_ObjectValue();
         } else {
             return undefined;
@@ -120,7 +134,7 @@ export class storeFocusObjects {
             }
         }
         if (charts.length > 0) {
-            let object = charts[charts.length - 1]; // get top table
+            const object = charts[charts.length - 1]; // get top table
             return object.get_ObjectValue();
         } else {
             return undefined;
@@ -134,7 +148,7 @@ export class storeFocusObjects {
             }
         }
         if (links.length > 0) {
-            let object = links[links.length - 1]; // get top
+            const object = links[links.length - 1]; // get top
             return  object.get_ObjectValue();
         } else {
             return undefined;