[DE mobile] Correct navigation view
This commit is contained in:
SergeyEzhin
parent
27343ca36a
commit
63db8da5d4
|
|
@ -1,11 +1,13 @@
|
|||
import React, { Component } from "react";
|
||||
import Navigation from "../../view/settings/Navigation";
|
||||
import NavigationView from "../../view/settings/Navigation";
|
||||
import { Device } from '../../../../../common/mobile/utils/device';
|
||||
import { f7, Sheet } from 'framework7-react';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
class NavigationController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.updateNavigation = this.updateNavigation.bind(this);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
|
|
@ -16,6 +18,51 @@ class NavigationController extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
updateNavigation() {
|
||||
const api = Common.EditorApi.get();
|
||||
const navigationObject = api.asc_ShowDocumentOutline();
|
||||
|
||||
if (!navigationObject) return;
|
||||
|
||||
const count = navigationObject.get_ElementsCount();
|
||||
const { t } = this.props;
|
||||
|
||||
let arrHeaders = [],
|
||||
prevLevel = -1,
|
||||
headerLevel = -1,
|
||||
firstHeader = !navigationObject.isFirstItemNotHeader();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
let level = navigationObject.get_Level(i),
|
||||
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: navigationObject.get_Text(i),
|
||||
level: level,
|
||||
index: i,
|
||||
hasParent: hasParent,
|
||||
isEmptyItem: navigationObject.isEmptyItem(i)
|
||||
});
|
||||
|
||||
prevLevel = level;
|
||||
}
|
||||
|
||||
if (count > 0 && !firstHeader) {
|
||||
arrHeaders[0]['hasSubItems'] = false;
|
||||
arrHeaders[0]['isNotHeader'] = true;
|
||||
arrHeaders[0]['name'] = t('Settings.textBeginningDocument');
|
||||
}
|
||||
|
||||
return arrHeaders;
|
||||
}
|
||||
|
||||
onSelectItem(index) {
|
||||
const api = Common.EditorApi.get();
|
||||
const navigationObject = api.asc_ShowDocumentOutline();
|
||||
|
|
@ -27,9 +74,13 @@ class NavigationController extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Navigation onSelectItem={this.onSelectItem} />
|
||||
<NavigationView
|
||||
onSelectItem={this.onSelectItem}
|
||||
updateNavigation={this.updateNavigation}
|
||||
closeModal={this.closeModal}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NavigationController
|
||||
export default withTranslation()(NavigationController);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, Component } 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';
|
||||
|
|
@ -9,52 +9,12 @@ const Navigation = props => {
|
|||
const android = Device.android;
|
||||
const api = Common.EditorApi.get();
|
||||
const navigationObject = api.asc_ShowDocumentOutline();
|
||||
const count = navigationObject.get_ElementsCount();
|
||||
const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition());
|
||||
const arrHeaders = [];
|
||||
|
||||
const updateNavigation = () => {
|
||||
if (!navigationObject) return;
|
||||
|
||||
let prevLevel = -1,
|
||||
headerLevel = -1,
|
||||
firstHeader = !navigationObject.isFirstItemNotHeader();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
let level = navigationObject.get_Level(i),
|
||||
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: navigationObject.get_Text(i),
|
||||
level: level,
|
||||
index: i,
|
||||
hasParent: hasParent,
|
||||
isEmptyItem: navigationObject.isEmptyItem(i)
|
||||
});
|
||||
|
||||
prevLevel = level;
|
||||
}
|
||||
|
||||
if (count > 0 && !firstHeader) {
|
||||
arrHeaders[0]['hasSubItems'] = false;
|
||||
arrHeaders[0]['isNotHeader'] = true;
|
||||
arrHeaders[0]['name'] = t('Settings.textBeginningDocument');
|
||||
}
|
||||
}
|
||||
|
||||
updateNavigation();
|
||||
// console.log(navigationObject);
|
||||
const arrHeaders = props.updateNavigation();
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />
|
||||
{!Device.phone && <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />}
|
||||
{!arrHeaders.length
|
||||
?
|
||||
<div className="empty-screens">
|
||||
|
|
@ -81,60 +41,48 @@ const Navigation = props => {
|
|||
)
|
||||
}
|
||||
|
||||
const NavigationSheet = () => {
|
||||
const NavigationSheetView = props => {
|
||||
useEffect(() => {
|
||||
f7.sheet.open('#view-navigation-sheet');
|
||||
if(Device.phone) {
|
||||
f7.sheet.open('#view-navigation-sheet', true);
|
||||
}
|
||||
|
||||
return () => {}
|
||||
});
|
||||
|
||||
const [stateHeight, setHeight] = useState('45%');
|
||||
const [stateOpacity, setOpacity] = useState(1);
|
||||
|
||||
const [stateStartY, setStartY] = useState();
|
||||
const [isNeedClose, setNeedClose] = useState(false);
|
||||
|
||||
const handleTouchStart = (event) => {
|
||||
const touchObj = event.changedTouches[0];
|
||||
setStartY(parseInt(touchObj.clientY));
|
||||
};
|
||||
|
||||
const handleTouchMove = (event) => {
|
||||
const touchObj = event.changedTouches[0];
|
||||
const dist = parseInt(touchObj.clientY) - stateStartY;
|
||||
|
||||
if (dist < 0) { // to top
|
||||
setHeight('90%');
|
||||
setOpacity(1);
|
||||
setNeedClose(false);
|
||||
} else if (dist < 80) {
|
||||
setHeight('45%');
|
||||
setOpacity(1);
|
||||
setNeedClose(false);
|
||||
} else {
|
||||
setNeedClose(true);
|
||||
setOpacity(0.6);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = (event) => {
|
||||
const touchObj = event.changedTouches[0];
|
||||
const swipeEnd = parseInt(touchObj.clientY);
|
||||
const dist = swipeEnd - stateStartY;
|
||||
|
||||
if (isNeedClose) {
|
||||
closeCurComments();
|
||||
} else if (stateHeight === '90%' && dist > 20) {
|
||||
setHeight('45%');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Sheet id='view-navigation-sheet' style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
|
||||
<div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
|
||||
<Sheet id="view-navigation-sheet" swipeToClose>
|
||||
{/* <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
|
||||
<Icon icon='icon-swipe' />
|
||||
</div>
|
||||
<Navigation />
|
||||
</div> */}
|
||||
<Navigation
|
||||
updateNavigation={props.updateNavigation}
|
||||
onSelectItem={props.onSelectItem}
|
||||
closeModal={props.closeModal}
|
||||
/>
|
||||
</Sheet>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export default Navigation;
|
||||
const NavigationView = props => {
|
||||
|
||||
return (
|
||||
!Device.phone
|
||||
?
|
||||
<Navigation
|
||||
updateNavigation={props.updateNavigation}
|
||||
onSelectItem={props.onSelectItem}
|
||||
closeModal={props.closeModal}
|
||||
/>
|
||||
|
||||
:
|
||||
<NavigationSheetView
|
||||
updateNavigation={props.updateNavigation}
|
||||
onSelectItem={props.onSelectItem}
|
||||
closeModal={props.closeModal}
|
||||
/>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default NavigationView;
|
||||
Loading…
Reference in a new issue