Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'feature/mobile-apps-on-reactjs-preview' into feature/mobile-apps-on-reactjs

Browse source
This commit is contained in:
JuliaSvinareva 2021-04-19 19:24:21 +03:00
parent 45a9058da4 c7b2a9813d
commit 1a2dca4872
4 changed files with 142 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/presentationeditor/mobile/locale/en.json
View file

@ -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": {

93
apps/presentationeditor/mobile/src/controller/Preview.jsx
View file

@ -4,8 +4,97 @@ 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 = () => {
props.onclosed();
};
return (
<Preview />
)

89
apps/presentationeditor/mobile/src/page/main.jsx
View file

@ -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,49 @@ 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 (
<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" />
render() {
const appOptions = this.props.storeAppOptions;
const config = appOptions.config;
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
<SearchSettings useSuspense={false} />
return (
<Fragment>
{!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
<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" />
{
!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.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
{
!this.state.previewVisible ? null :
<Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />
}
<ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
</Page>
)
}
<SearchSettings useSuspense={false} />
{
!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.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
<ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
</Page>
</Fragment>
)
}
}
export default inject("storeAppOptions")(observer(MainPage));

5
apps/presentationeditor/mobile/src/view/Preview.jsx
View file

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