[PE mobile] Added preview slides

apps/presentationeditor/mobile/locale/en.json

@@ -274,7 +274,8 @@
       "textCaseSensitive": "Case Sensitive",
       "textHighlight": "Highlight Results",
       "textNoTextFound": "Text not Found",
-      "textSelectObjectToEdit": "Select object to edit"
+      "textSelectObjectToEdit": "Select object to edit",
+      "textFinalMessage": "The end of slide preview. Click to exit."
     }
   },
   "Common": {

apps/presentationeditor/mobile/src/controller/Preview.jsx

@@ -4,8 +4,98 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import Preview from "../view/Preview";
 
-const PreviewController = () => {
+const PreviewController = props => {
-    console.log('preview');
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true})
+
+    let _view, _touches, _touchStart, _touchEnd;
+
+    _view = $$('#pe-preview');
+
+    useEffect(() => {
+        const onDocumentReady = () => {
+            const api = Common.EditorApi.get();
+
+            api.asc_registerCallback('asc_onEndDemonstration', onEndDemonstration);
+            api.DemonstrationEndShowMessage(_t.textFinalMessage);
+        };
+
+        show();
+        onDocumentReady();
+
+        _view.on('touchstart', onTouchStart);
+        _view.on('touchmove', onTouchMove);
+        _view.on('touchend', onTouchEnd);
+        _view.on('click', onClick);
+
+        return () => {
+            const api = Common.EditorApi.get();
+
+            api.asc_unregisterCallback('asc_onEndDemonstration', onEndDemonstration);
+        
+            _view.off('touchstart', onTouchStart);
+            _view.off('touchmove', onTouchMove);
+            _view.off('touchend', onTouchEnd);
+            _view.off('click', onClick);
+        };
+    }, []);
+
+    const show = () => {
+        const api = Common.EditorApi.get();
+        api.StartDemonstration('presentation-preview', api.getCurrentPage());
+    };
+
+    const onTouchStart = e => {
+        e.preventDefault();
+
+        _touches = [];
+
+        for (let i = 0; i < e.touches.length; i++) {
+            _touches.push([e.touches[i].pageX, e.touches[i].pageY]);
+        }
+        _touchEnd = _touchStart = [e.touches[0].pageX, e.touches[0].pageY];
+    };
+
+    const onTouchMove = e => {
+        e.preventDefault();
+
+        const api = Common.EditorApi.get();
+
+        _touchEnd = [e.touches[0].pageX, e.touches[0].pageY];
+
+        if (e.touches.length < 2 ) return;
+
+        for (let i = 0; i < e.touches.length; i++) {
+            if (Math.abs(e.touches[i].pageX - _touches[i][0]) > 20 || Math.abs(e.touches[i].pageY - _touches[i][1]) > 20 ) {
+                api.EndDemonstration();
+                break;
+            }
+        }
+    };
+
+    const onTouchEnd = e => {
+        e.preventDefault();
+
+        const api = Common.EditorApi.get();
+
+        if (_touchEnd[0] - _touchStart[0] > 20)
+            api.DemonstrationPrevSlide();
+        else if (_touchStart[0] - _touchEnd[0] > 20)
+            api.DemonstrationNextSlide();
+    };
+
+    const onClick = e => {
+        const api = Common.EditorApi.get();
+        api.DemonstrationNextSlide();
+    };
+
+    // API Handlers
+
+    const onEndDemonstration = () => {
+        if(props.previewVisible)
+            props.onClosePreview();
+    };
+
     return (
         <Preview />
     )

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
 
@@ -10,7 +10,6 @@ import { Preview } from "../controller/Preview";
 import { Search, SearchSettings } from '../controller/Search';
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
-
 class MainPage extends Component {
     constructor(props) {
         super(props);
@@ -23,6 +22,10 @@ class MainPage extends Component {
         };
     }
 
+    onClosePreview = () => {
+        this.setState({previewVisible: false});
+    }
+
     handleClickToOpenOptions = (opts, showOpts) => {
         ContextMenu.closeContextMenu();
 
@@ -60,49 +63,53 @@ class MainPage extends Component {
         })();
     };
 
-  render() {
+    render() {
-      const appOptions = this.props.storeAppOptions;
+        const appOptions = this.props.storeAppOptions;
-      const config = appOptions.config;
+        const config = appOptions.config;
-      const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
+        const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
-      return (
-         <Page name="home" className={showLogo && 'page-with-logo'}>
-            {/* Top Navbar */}
-            <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
-                {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
-                <Subnavbar>
-                    <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
-                    <Search useSuspense={false}/>
-                </Subnavbar>
-            </Navbar>
-            {/* Page content */}
-            <View id="editor_sdk" />
 
-            <SearchSettings useSuspense={false} />
+        return (
+            <Fragment>
+                {this.state.previewVisible ? <Preview onClosePreview={this.onClosePreview} previewVisible={this.state.previewVisible} /> : null}
+                <Page name="home" className={showLogo && 'page-with-logo'}>
+                    {/* Top Navbar */}
+                    <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
+                        {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
+                        <Subnavbar>
+                            <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
+                            <Search useSuspense={false}/>
+                        </Subnavbar>
+                    </Navbar>
+                    {/* Page content */}
+                    <View id="editor_sdk" />
 
-            {
+                    <SearchSettings useSuspense={false} />
-                !this.state.editOptionsVisible ? null :
+
-                    <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+                    {
-            }
+                        !this.state.editOptionsVisible ? null :
-            {
+                            <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
-                !this.state.addOptionsVisible ? null :
+                    }
-                    <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                    {
-            }
+                        !this.state.addOptionsVisible ? null :
-            {
+                            <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
-                !this.state.settingsVisible ? null :
+                    }
-                    <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                    {
-            }
+                        !this.state.settingsVisible ? null :
-            {
+                            <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-                !this.state.collaborationVisible ? null :
+                    }
-                    <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
+                    {
-            }
+                        !this.state.collaborationVisible ? null :
-             {
+                            <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
-                 !this.state.previewVisible ? null :
+                    }
-                     <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />
+                    {
-             }
+                        !this.state.previewVisible ? null :
-            <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
+                            <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />
-         </Page>
+                    }
-    )
+                    <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
-  }
+                </Page>
+            </Fragment>
+        )
+    }
 }
 
 export default inject("storeAppOptions")(observer(MainPage));

apps/presentationeditor/mobile/src/view/Preview.jsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 const Preview = () => {
     return (
-        <>
+        <div id="pe-preview" style={{position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: 1000}}>
-        </>
+            <div id="presentation-preview" style={{width: '100%', height: '100%'}}></div>
+        </div>
     )
 };