[DE mobile] Add editing a table of contents v.3
This commit is contained in:
SergeyEzhin
parent
a183de4c6e
commit
98ffebb52d
|
|
@ -353,7 +353,9 @@
|
|||
"textModern": "Modern",
|
||||
"textCancel": "Cancel",
|
||||
"textRefreshEntireTable": "Refresh entire table",
|
||||
"textRefreshPageNumbersOnly": "Refresh page numbers only"
|
||||
"textRefreshPageNumbersOnly": "Refresh page numbers only",
|
||||
"textStyles": "Styles",
|
||||
"textAmountOfLevels": "Amount of Levels"
|
||||
},
|
||||
"Error": {
|
||||
"convertationTimeoutText": "Conversion timeout exceeded.",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ import { EditTableContents } from '../../view/edit/EditTableContents';
|
|||
class EditTableContentsController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.startLevel = 1;
|
||||
this.endLevel = 3;
|
||||
this.fillTOCProps = this.fillTOCProps.bind(this);
|
||||
}
|
||||
|
||||
onStyle(value) {
|
||||
|
|
@ -41,7 +45,187 @@ class EditTableContentsController extends Component {
|
|||
|
||||
propsTableContents.put_TabLeader(value);
|
||||
api.asc_SetTableOfContentsPr(propsTableContents);
|
||||
}
|
||||
|
||||
onLevelsChange(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const propsTableContents = api.asc_GetTableOfContentsPr();
|
||||
|
||||
propsTableContents.clear_Styles();
|
||||
propsTableContents.put_OutlineRange(1, value);
|
||||
api.asc_SetTableOfContentsPr(propsTableContents);
|
||||
}
|
||||
|
||||
fillTOCProps(props) {
|
||||
const api = Common.EditorApi.get();
|
||||
const docStyles = api.asc_GetStylesArray();
|
||||
|
||||
let checkStyles = false,
|
||||
disableOutlines = false,
|
||||
styles = [];
|
||||
|
||||
docStyles.forEach(style => {
|
||||
let name = style.get_Name(),
|
||||
level = api.asc_GetHeadingLevel(name);
|
||||
|
||||
if (style.get_QFormat() || level >= 0) {
|
||||
styles.push({
|
||||
name: name,
|
||||
displayValue: style.get_TranslatedName(),
|
||||
allowSelected: false,
|
||||
checked: false,
|
||||
value: '',
|
||||
headerLevel: (level >= 0) ? level + 1 : -1
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
if(props) {
|
||||
let start = props.get_OutlineStart(),
|
||||
end = props.get_OutlineEnd(),
|
||||
count = props.get_StylesCount();
|
||||
|
||||
this.startLevel = start;
|
||||
this.endLevel = end;
|
||||
this.count = count;
|
||||
|
||||
if ((start < 0 || end < 0) && count < 1) {
|
||||
start = 1;
|
||||
end = 9;
|
||||
// this.spnLevels.setValue(end, true);
|
||||
}
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
let styleName = props.get_StyleName(i),
|
||||
level = props.get_StyleLevel(i),
|
||||
rec = styles.find(style => style.name == styleName);
|
||||
|
||||
if (rec) {
|
||||
rec.checked = true;
|
||||
rec.value = level;
|
||||
if (rec.headerLevel !== level)
|
||||
disableOutlines = true;
|
||||
} else {
|
||||
styles.push({
|
||||
name: styleName,
|
||||
displayValue: styleName,
|
||||
allowSelected: false,
|
||||
checked: true,
|
||||
value: level,
|
||||
headerLevel: -1
|
||||
});
|
||||
|
||||
disableOutlines = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (start > 0 && end > 0) {
|
||||
for (let i = start; i <= end; i++) {
|
||||
let rec = styles.find(style => style.headerLevel === i);
|
||||
|
||||
if (rec) {
|
||||
rec.checked = true;
|
||||
rec.value = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let newStart = -1,
|
||||
newEnd = -1,
|
||||
emptyIndex = -1;
|
||||
|
||||
for (let i = 0; i < 9; i++) {
|
||||
let rec = styles.find(style => style.headerLevel === i + 1);
|
||||
|
||||
if (rec) {
|
||||
let headerLevel = rec.headerLevel,
|
||||
level = rec.value;
|
||||
|
||||
if (headerLevel == level) {
|
||||
if (emptyIndex < 1) {
|
||||
if (newStart < 1)
|
||||
newStart = level;
|
||||
newEnd = level;
|
||||
} else {
|
||||
newStart = newEnd = -1;
|
||||
disableOutlines = true;
|
||||
break;
|
||||
}
|
||||
} else if (!rec.checked) {
|
||||
(newStart > 0) && (emptyIndex = i + 1);
|
||||
} else {
|
||||
newStart = newEnd = -1;
|
||||
disableOutlines = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// this.spnLevels.setValue(newEnd > 0 ? newEnd : '', true);
|
||||
checkStyles = (disableOutlines || newStart > 1);
|
||||
} else {
|
||||
for (let i = this.startLevel; i <= this.endLevel; i++) {
|
||||
let rec = styles.find(style => style.headerLevel === i);
|
||||
|
||||
if (rec) {
|
||||
rec.checked = true;
|
||||
rec.value = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
styles.sort(function(a, b) {
|
||||
let aname = a.displayValue.toLocaleLowerCase(),
|
||||
bname = b.displayValue.toLocaleLowerCase();
|
||||
if (aname < bname) return -1;
|
||||
if (aname > bname) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return {
|
||||
styles,
|
||||
start: this.startLevel,
|
||||
end: this.endLevel,
|
||||
count: this.count,
|
||||
disableOutlines,
|
||||
checkStyles
|
||||
}
|
||||
|
||||
// this.stylesLevels.reset(styles);
|
||||
// if (checkStyles) {
|
||||
// this._forceUpdateOutlineLevels = true;
|
||||
// this.radioStyles.setValue(true);
|
||||
// this.stylesList.scroller.update({alwaysVisibleY: true});
|
||||
// var rec = this.stylesLevels.findWhere({checked: true});
|
||||
// if (rec)
|
||||
// this.stylesList.scrollToRecord(rec);
|
||||
// }
|
||||
}
|
||||
|
||||
addStyles(styleName, value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const propsTableContents = api.asc_GetTableOfContentsPr();
|
||||
|
||||
propsTableContents.add_Style(styleName, value);
|
||||
|
||||
if (propsTableContents.get_StylesCount() > 0) {
|
||||
propsTableContents.put_OutlineRange(-1, -1);
|
||||
} else {
|
||||
propsTableContents.put_OutlineRange(1, 9);
|
||||
}
|
||||
|
||||
// api.asc_SetTableOfContentsPr(propsTableContents);
|
||||
}
|
||||
|
||||
changeCaption(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const propsTableContents = api.asc_GetTableOfContentsPr();
|
||||
|
||||
if(record) {
|
||||
propsTableContents.put_Caption(value);
|
||||
properties.clear_Styles();
|
||||
api.asc_SetTableOfContentsPr(propsTableContents);
|
||||
}
|
||||
}
|
||||
|
||||
onTableContentsUpdate(type, currentTOC) {
|
||||
|
|
@ -73,6 +257,10 @@ class EditTableContentsController extends Component {
|
|||
onPageNumbers={this.onPageNumbers}
|
||||
onRightAlign={this.onRightAlign}
|
||||
onLeader={this.onLeader}
|
||||
onLevelsChange={this.onLevelsChange}
|
||||
fillTOCProps={this.fillTOCProps}
|
||||
changeCaption={this.changeCaption}
|
||||
addStyles={this.addStyles}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShap
|
|||
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
|
||||
import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
|
||||
import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
|
||||
import { PageEditLeaderTableContents, PageEditStylesTableContents } from './EditTableContents';
|
||||
import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
|
||||
|
||||
const routes = [
|
||||
//Edit text
|
||||
|
|
@ -196,6 +196,10 @@ const routes = [
|
|||
{
|
||||
path: '/edit-leader-table-contents/',
|
||||
component: PageEditLeaderTableContents
|
||||
},
|
||||
{
|
||||
path: '/edit-structure-table-contents/',
|
||||
component: PageEditStructureTableContents
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,14 @@ const EditTableContents = props => {
|
|||
const _t = t('Edit', {returnObjects: true});
|
||||
const api = Common.EditorApi.get();
|
||||
const propsTableContents = api.asc_GetTableOfContentsPr();
|
||||
const count = propsTableContents.get_StylesCount();
|
||||
console.log(propsTableContents);
|
||||
const [type, setType] = useState(0);
|
||||
const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
|
||||
const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers());
|
||||
const [rightAlign, setRightAlign] = useState(propsTableContents.get_RightAlignTab());
|
||||
const [leaderValue, setLeaderValue] = useState(propsTableContents.get_TabLeader() ? propsTableContents.get_TabLeader() : Asc.c_oAscTabLeader.Dot);
|
||||
|
||||
const arrStyles = (type === 1) ? [
|
||||
{ displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOFStylesType.Current },
|
||||
{ displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOFStylesType.Simple },
|
||||
|
|
@ -31,6 +33,7 @@ const EditTableContents = props => {
|
|||
{ displayValue: t('Edit.textModern'), value: Asc.c_oAscTOCStylesType.Modern },
|
||||
{ displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOCStylesType.Classic }
|
||||
];
|
||||
|
||||
const arrLeaders = [
|
||||
{ value: Asc.c_oAscTabLeader.None, displayValue: t('Edit.textNone') },
|
||||
{ value: Asc.c_oAscTabLeader.Dot, displayValue: '....................' },
|
||||
|
|
@ -61,7 +64,7 @@ const EditTableContents = props => {
|
|||
}
|
||||
]
|
||||
]
|
||||
}).open()
|
||||
}).open();
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -100,7 +103,11 @@ const EditTableContents = props => {
|
|||
setLeaderValue
|
||||
}}></ListItem>
|
||||
}
|
||||
<ListItem title={t('Edit.textStructure')} link="/edit-table-contents-structure/" after={t('Edit.textLevels')}></ListItem>
|
||||
<ListItem title={t('Edit.textStructure')} link="/edit-structure-table-contents/" after={count ? t('Edit.textStyles') : t('Edit.textLevels')} routeProps={{
|
||||
onLevelsChange: props.onLevelsChange,
|
||||
fillTOCProps: props.fillTOCProps,
|
||||
addStyles: props.addStyles
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised'} title={t('Edit.textRefresh')}
|
||||
|
|
@ -173,8 +180,97 @@ const PageEditLeaderTableContents = props => {
|
|||
)
|
||||
}
|
||||
|
||||
const PageEditStructureTableContents = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const isAndroid = Device.android;
|
||||
const api = Common.EditorApi.get();
|
||||
const propsTableContents = api.asc_GetTableOfContentsPr();
|
||||
const {styles, start, end, count, disableOutlines, checkStyles} = props.fillTOCProps(propsTableContents);
|
||||
console.log(styles, start, end, count, disableOutlines, checkStyles);
|
||||
|
||||
const [structure, setStructure] = useState(count ? 1 : 0);
|
||||
const [amountLevels, setAmountLevels] = useState(end);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={t('Edit.textStructure')} backLink={_t.textBack}>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<List>
|
||||
<ListItem radio checked={structure === 0} title={t('Edit.textLevels')} onClick={() => setStructure(0)}></ListItem>
|
||||
<ListItem radio checked={structure === 1} title={t('Edit.textStyles')} onClick={() => setStructure(1)}></ListItem>
|
||||
</List>
|
||||
{structure === 0 ?
|
||||
<List>
|
||||
<ListItem title={t('Edit.textAmountOfLevels')}>
|
||||
{!isAndroid && <div slot='after-start'>{amountLevels}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {
|
||||
if(amountLevels > 1) {
|
||||
setAmountLevels(amountLevels - 1);
|
||||
props.onLevelsChange(amountLevels - 1);
|
||||
}
|
||||
}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{amountLevels}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {
|
||||
if(amountLevels < 9) {
|
||||
setAmountLevels(amountLevels + 1);
|
||||
props.onLevelsChange(amountLevels + 1);
|
||||
}
|
||||
}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
:
|
||||
<List>
|
||||
{styles.map((style, index) => {
|
||||
return (
|
||||
<ListItem checkbox key={index} title={style.displayValue} checked={style.checked}>
|
||||
{!isAndroid && <div slot='after-start'>{style.value}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {
|
||||
if(style.value > 1) {
|
||||
props.addStyles(style.name, style.value - 1);
|
||||
}
|
||||
}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{style.value}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {
|
||||
if(style.value < 9) {
|
||||
props.addStyles(style.name, style.value + 1);
|
||||
}
|
||||
}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
}
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
EditTableContents,
|
||||
PageEditStylesTableContents,
|
||||
PageEditLeaderTableContents
|
||||
PageEditLeaderTableContents,
|
||||
PageEditStructureTableContents
|
||||
};
|
||||
Loading…
Reference in a new issue