From 1466cd61e4d4c4ecf0f75c24a25d90e5ec0777a5 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 16 Apr 2021 17:03:28 +0300 Subject: [PATCH 1/2] [PE mobile] Added preview slides --- apps/presentationeditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Preview.jsx | 94 ++++++++++++++++++- .../mobile/src/page/main.jsx | 93 +++++++++--------- .../mobile/src/view/Preview.jsx | 5 +- 4 files changed, 147 insertions(+), 48 deletions(-) diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 2651a9ccf..bcf17b851 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/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": { diff --git a/apps/presentationeditor/mobile/src/controller/Preview.jsx b/apps/presentationeditor/mobile/src/controller/Preview.jsx index babf81120..b072f6638 100644 --- a/apps/presentationeditor/mobile/src/controller/Preview.jsx +++ b/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 = () => { - console.log('preview'); +const PreviewController = props => { + 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 ( ) diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index e5e86581a..41ebdba85 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/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() { - const appOptions = this.props.storeAppOptions; - const config = appOptions.config; - const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo))); - return ( - - {/* Top Navbar */} - - {showLogo &&
} - - - - - - {/* Page content */} - + render() { + const appOptions = this.props.storeAppOptions; + const config = appOptions.config; + const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo))); - + return ( + + {this.state.previewVisible ? : null} + + {/* Top Navbar */} + + {showLogo &&
} + + + + + + {/* Page content */} + - { - !this.state.editOptionsVisible ? null : - - } - { - !this.state.addOptionsVisible ? null : - - } - { - !this.state.settingsVisible ? null : - - } - { - !this.state.collaborationVisible ? null : - - } - { - !this.state.previewVisible ? null : - - } - - - ) - } + + + { + !this.state.editOptionsVisible ? null : + + } + { + !this.state.addOptionsVisible ? null : + + } + { + !this.state.settingsVisible ? null : + + } + { + !this.state.collaborationVisible ? null : + + } + { + !this.state.previewVisible ? null : + + } + + + + ) + } } export default inject("storeAppOptions")(observer(MainPage)); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/Preview.jsx b/apps/presentationeditor/mobile/src/view/Preview.jsx index 5faae5f1a..96a618b42 100644 --- a/apps/presentationeditor/mobile/src/view/Preview.jsx +++ b/apps/presentationeditor/mobile/src/view/Preview.jsx @@ -2,8 +2,9 @@ import React from 'react'; const Preview = () => { return ( - <> - +
+
+
) }; From c7b2a9813d7ac39ffa7e4180e7f5534010342a8a Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 19 Apr 2021 19:09:15 +0300 Subject: [PATCH 2/2] [PE mobile] Refactoring preview --- apps/presentationeditor/mobile/src/controller/Preview.jsx | 3 +-- apps/presentationeditor/mobile/src/page/main.jsx | 6 +----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/Preview.jsx b/apps/presentationeditor/mobile/src/controller/Preview.jsx index b072f6638..df6cd83aa 100644 --- a/apps/presentationeditor/mobile/src/controller/Preview.jsx +++ b/apps/presentationeditor/mobile/src/controller/Preview.jsx @@ -92,8 +92,7 @@ const PreviewController = props => { // API Handlers const onEndDemonstration = () => { - if(props.previewVisible) - props.onClosePreview(); + props.onclosed(); }; return ( diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index 41ebdba85..4739278e2 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/apps/presentationeditor/mobile/src/page/main.jsx @@ -70,7 +70,7 @@ class MainPage extends Component { return ( - {this.state.previewVisible ? : null} + {!this.state.previewVisible ? null : } {/* Top Navbar */} @@ -101,10 +101,6 @@ class MainPage extends Component { !this.state.collaborationVisible ? null : } - { - !this.state.previewVisible ? null : - - }