Merge branch 'feature/mobile-apps-on-reactjs-pe-edit-settings' into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
4f3bf2729c
|
|
@ -229,7 +229,22 @@
|
|||
"textRemoveTable": "Remove Table",
|
||||
"textCellMargins": "Cell Margins",
|
||||
"textRemoveChart": "Remove Chart",
|
||||
"textNoStyles": "No styles for this type of charts."
|
||||
"textNoStyles": "No styles for this type of charts.",
|
||||
"textLinkType": "Link Type",
|
||||
"textExternalLink": "External Link",
|
||||
"textSlideInThisPresentation": "Slide in this Presentation",
|
||||
"textLink": "Link",
|
||||
"textLinkTo": "Link to",
|
||||
"textNextSlide": "Next Slide",
|
||||
"textPreviousSlide": "Previous Slide",
|
||||
"textFirstSlide": "First Slide",
|
||||
"textLastSlide": "Last Slide",
|
||||
"textSlideNumber": "Slide Number",
|
||||
"textEditLink": "Edit Link",
|
||||
"textRemoveLink": "Remove Link",
|
||||
"textDisplay": "Display",
|
||||
"textScreenTip": "Screen Tip",
|
||||
"textDefault": "Selected text"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
|
|
@ -322,6 +322,14 @@ class MainController extends Component {
|
|||
storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.getType()));
|
||||
}
|
||||
});
|
||||
|
||||
// Link settings
|
||||
|
||||
const storeLinkSettings = this.props.storeLinkSettings;
|
||||
|
||||
this.api.asc_registerCallback('asc_onCanAddHyperlink', (value) => {
|
||||
storeLinkSettings.canAddHyperlink(value);
|
||||
});
|
||||
}
|
||||
|
||||
_onDocumentContentReady() {
|
||||
|
|
|
|||
114
apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
Normal file
114
apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import React, { Component } from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { Device } from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
import { EditLink } from '../../view/edit/EditLink';
|
||||
|
||||
class EditLinkController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.onEditLink = this.onEditLink.bind(this);
|
||||
this.onRemoveLink = this.onRemoveLink.bind(this);
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('#edit-sheet', true);
|
||||
} else {
|
||||
f7.popover.close('#edit-popover');
|
||||
}
|
||||
}
|
||||
|
||||
onEditLink(type, linkInfo) {
|
||||
const api = Common.EditorApi.get();
|
||||
const { t } = this.props;
|
||||
const _t = t("View.Edit", { returnObjects: true });
|
||||
|
||||
const c_oHyperlinkType = {
|
||||
InternalLink: 0,
|
||||
WebLink: 1
|
||||
};
|
||||
|
||||
const display = linkInfo.display;
|
||||
const tip = linkInfo.tip;
|
||||
const props = new Asc.CHyperlinkProperty();
|
||||
let def_display = '';
|
||||
|
||||
if (type == c_oHyperlinkType.WebLink) {
|
||||
let url = linkInfo.url;
|
||||
const urltype = api.asc_getUrlType(url.trim());
|
||||
const isEmail = (urltype == 2);
|
||||
if (urltype < 1) {
|
||||
f7.dialog.alert(_t.textNotUrl, _t.notcriticalErrorTitle);
|
||||
return;
|
||||
}
|
||||
|
||||
url = url.replace(/^\s+|\s+$/g, '');
|
||||
if (!/(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url))
|
||||
url = (isEmail ? 'mailto:' : 'http://' ) + url;
|
||||
url = url.replace(new RegExp("%20", 'g'), " ");
|
||||
|
||||
props.put_Value(url);
|
||||
props.put_ToolTip(tip);
|
||||
def_display = url;
|
||||
} else {
|
||||
let url = "ppaction://hlink";
|
||||
let slidetip = '';
|
||||
switch (linkInfo.linkTo) {
|
||||
case 0:
|
||||
url = url + "showjump?jump=nextslide";
|
||||
slidetip = _t.textNextSlide;
|
||||
break;
|
||||
case 1:
|
||||
url = url + "showjump?jump=previousslide";
|
||||
slidetip = _t.textPrevSlide;
|
||||
break;
|
||||
case 2:
|
||||
url = url + "showjump?jump=firstslide";
|
||||
slidetip = _t.textFirstSlide;
|
||||
break;
|
||||
case 3:
|
||||
url = url + "showjump?jump=lastslide";
|
||||
slidetip = _t.textLastSlide;
|
||||
break;
|
||||
case 4:
|
||||
url = url + "sldjumpslide" + linkInfo.numberTo;
|
||||
slidetip = _t.textSlide + ' ' + (linkInfo.numberTo + 1);
|
||||
break;
|
||||
}
|
||||
props.put_Value(url);
|
||||
props.put_ToolTip(!tip ? slidetip : tip);
|
||||
def_display = slidetip;
|
||||
}
|
||||
|
||||
if (!linkInfo.displayDisabled) {
|
||||
props.put_Text(!display ? def_display : display);
|
||||
} else
|
||||
props.put_Text(null);
|
||||
|
||||
api.change_Hyperlink(props);
|
||||
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
onRemoveLink() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.remove_Hyperlink();
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditLink
|
||||
onEditLink={this.onEditLink}
|
||||
onRemoveLink={this.onRemoveLink}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const EditLinkWithTranslation = withTranslation()(EditLinkController);
|
||||
|
||||
export {EditLinkWithTranslation as EditLinkController};
|
||||
|
|
@ -163,4 +163,19 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@computed get linkObject() {
|
||||
const links = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
|
||||
links.push(object);
|
||||
}
|
||||
}
|
||||
if (links.length > 0) {
|
||||
const object = links[links.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,4 +5,68 @@ export class storeLinkSettings {
|
|||
@action canAddHyperlink (value) {
|
||||
this.canAddLink = value;
|
||||
}
|
||||
}
|
||||
|
||||
@observable typeLink;
|
||||
@action changeLinkType(value) {
|
||||
this.typeLink = value;
|
||||
}
|
||||
|
||||
@observable slideLink;
|
||||
@action changeSlideLink(value) {
|
||||
this.slideLink = value;
|
||||
}
|
||||
|
||||
@observable slideNum;
|
||||
@action changeSlideNum(value) {
|
||||
this.slideNum = value;
|
||||
}
|
||||
|
||||
@observable slideName;
|
||||
@action changeSlideName(value) {
|
||||
this.slideName = value;
|
||||
}
|
||||
|
||||
initCategory(linkObject) {
|
||||
const url = linkObject.get_Value();
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
let indAction;
|
||||
let slidesCount;
|
||||
let slideNum;
|
||||
|
||||
if(url === null || url === undefined || url === '') {
|
||||
this.changeLinkType(1);
|
||||
}
|
||||
else {
|
||||
indAction = url.indexOf("ppaction://hlink");
|
||||
if(0 == indAction) {
|
||||
if (url == "ppaction://hlinkshowjump?jump=firstslide") {
|
||||
this.changeSlideLink(2);
|
||||
} else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
|
||||
this.changeSlideLink(3);
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
|
||||
this.changeSlideLink(0);
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
|
||||
this.changeSlideLink(1);
|
||||
}
|
||||
else {
|
||||
this.changeSlideLink(4);
|
||||
slidesCount = api.getCountPages();
|
||||
let mask = "ppaction://hlinksldjumpslide",
|
||||
indSlide = url.indexOf(mask);
|
||||
if (0 == indSlide) {
|
||||
slideNum = parseInt(url.substring(mask.length));
|
||||
if (slideNum < 0) this.changeSlideNum(0);
|
||||
if (slideNum >= slidesCount) this.changeSlideNum(slidesCount - 1);
|
||||
} else this.changeSlideNum(0);
|
||||
}
|
||||
this.changeLinkType(0);
|
||||
} else {
|
||||
this.changeLinkType(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import EditShapeController from "../../controller/edit/EditShape";
|
|||
import EditImageController from "../../controller/edit/EditImage";
|
||||
import EditTableController from "../../controller/edit/EditTable";
|
||||
import EditChartController from "../../controller/edit/EditChart";
|
||||
import { EditLinkController } from "../../controller/edit/EditLink";
|
||||
|
||||
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
|
||||
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
|
||||
|
|
@ -18,7 +19,7 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder
|
|||
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
|
||||
import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
|
||||
import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
|
||||
//import EditLinkController from "../../controller/edit/EditLink";
|
||||
import { PageLinkTo, PageTypeLink } from './EditLink'
|
||||
|
||||
const routes = [
|
||||
|
||||
|
|
@ -194,6 +195,17 @@ const routes = [
|
|||
{
|
||||
path: '/edit-chart-custom-fill-color/',
|
||||
component: PageChartCustomFillColor
|
||||
},
|
||||
|
||||
// Link
|
||||
|
||||
{
|
||||
path: '/edit-link-type/',
|
||||
component: PageTypeLink
|
||||
},
|
||||
{
|
||||
path: '/edit-link-to/',
|
||||
component: PageLinkTo
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -303,14 +315,13 @@ const EditTabs = props => {
|
|||
component: <EditChartController />
|
||||
})
|
||||
}
|
||||
/*
|
||||
if (settings.indexOf('hyperlink') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textHyperlink,
|
||||
id: 'edit-link',
|
||||
component: <EditLinkController />
|
||||
})
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
187
apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
Normal file
187
apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
import React, {useState, useEffect} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
const PageTypeLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const typeLink = storeLinkSettings.typeLink;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkType} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {storeLinkSettings.changeLinkType(1);}}></ListItem>
|
||||
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {storeLinkSettings.changeLinkType(0);}}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageLinkTo = props => {
|
||||
const isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const api = Common.EditorApi.get();
|
||||
const slidesCount = api.getCountPages();
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const slideLink = storeLinkSettings.slideLink;
|
||||
// console.log(slideLink);
|
||||
// const slideNum = storeLinkSettings.slideNum;
|
||||
// const [stateTypeTo, setTypeTo] = useState(props.curTo);
|
||||
|
||||
const changeTypeTo = (type) => {
|
||||
storeLinkSettings.changeSlideLink(type);
|
||||
props.changeTo(type);
|
||||
};
|
||||
|
||||
const [stateNumberTo, setNumberTo] = useState(0);
|
||||
|
||||
const changeNumber = (curNumber, isDecrement) => {
|
||||
storeLinkSettings.changeSlideLink(4);
|
||||
let value;
|
||||
|
||||
if (isDecrement) {
|
||||
value = Math.max(0, --curNumber);
|
||||
} else {
|
||||
value = Math.min(slidesCount - 1, ++curNumber);
|
||||
}
|
||||
|
||||
setNumberTo(value);
|
||||
storeLinkSettings.changeSlideNum(value);
|
||||
props.changeTo(4, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkTo} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textNextSlide} radio checked={slideLink === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
|
||||
<ListItem title={_t.textPreviousSlide} radio checked={slideLink === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
|
||||
<ListItem title={_t.textFirstSlide} radio checked={slideLink === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
|
||||
<ListItem title={_t.textLastSlide} radio checked={slideLink === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
|
||||
<ListItem title={_t.textSlideNumber}>
|
||||
{!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {changeNumber(stateNumberTo, true);}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{stateNumberTo + 1}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {changeNumber(stateNumberTo, false);}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const linkObject = storeFocusObjects.linkObject;
|
||||
|
||||
useEffect(() => {
|
||||
storeLinkSettings.initCategory(linkObject);
|
||||
}, [linkObject]);
|
||||
|
||||
const url = linkObject.get_Value();
|
||||
const tooltip = linkObject.get_ToolTip();
|
||||
const display = linkObject.get_Text();
|
||||
const slideNum = storeLinkSettings.slideNum;
|
||||
const slideLink = storeLinkSettings.slideLink;
|
||||
const typeLink = storeLinkSettings.typeLink;
|
||||
|
||||
if(typeLink === 1) {
|
||||
storeLinkSettings.changeSlideName(_t.textNextSlide);
|
||||
storeLinkSettings.changeSlideLink(0);
|
||||
}
|
||||
|
||||
const textType = typeLink === 1 ? _t.textExternalLink : _t.textSlideInThisPresentation;
|
||||
const [link, setLink] = useState(typeLink !== 0 ? url : '');
|
||||
|
||||
const changeTo = (slideLink, number) => {
|
||||
switch (slideLink) {
|
||||
case 0 : storeLinkSettings.changeSlideName(_t.textNextSlide); break;
|
||||
case 1 : storeLinkSettings.changeSlideName(_t.textPreviousSlide); break;
|
||||
case 2 : storeLinkSettings.changeSlideName(_t.textFirstSlide); break;
|
||||
case 3 : storeLinkSettings.changeSlideName(_t.textLastSlide); break;
|
||||
case 4 : storeLinkSettings.changeSlideName(`${_t.textSlide} ${number + 1}`); storeLinkSettings.changeSlideNum(number);
|
||||
}
|
||||
}
|
||||
|
||||
changeTo(slideLink, slideNum);
|
||||
|
||||
const slideName = storeLinkSettings.slideName;
|
||||
const [screenTip, setScreenTip] = useState(tooltip);
|
||||
const displayDisabled = display !== false && display === null;
|
||||
const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : "");
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLink} backLink={_t.textBack}/>
|
||||
<List inlineLabels className='inputs-list'>
|
||||
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
curType: typeLink
|
||||
}} />
|
||||
{typeLink !== 0 ?
|
||||
<ListInput label={_t.textLink}
|
||||
type="text"
|
||||
placeholder={_t.textLink}
|
||||
value={link}
|
||||
onChange={(event) => {setLink(event.target.value)}}
|
||||
/> :
|
||||
<ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={slideName} routeProps={{
|
||||
changeTo: changeTo,
|
||||
curTo: slideLink
|
||||
}}/>
|
||||
}
|
||||
<ListInput label={_t.textDisplay}
|
||||
type="text"
|
||||
placeholder={_t.textDisplay}
|
||||
value={stateDisplay}
|
||||
disabled={displayDisabled}
|
||||
onChange={(event) => {setDisplay(event.target.value)}}
|
||||
/>
|
||||
<ListInput label={_t.textScreenTip}
|
||||
type="text"
|
||||
placeholder={_t.textScreenTip}
|
||||
value={screenTip}
|
||||
onChange={(event) => {setScreenTip(event.target.value)}}
|
||||
/>
|
||||
</List>
|
||||
<List>
|
||||
<ListButton title={_t.textEditLink}
|
||||
className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
|
||||
onClick={() => {
|
||||
props.onEditLink(typeLink, (typeLink === 1 ?
|
||||
{url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } :
|
||||
{linkTo: slideLink, numberTo: slideNum, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
|
||||
}}
|
||||
/>
|
||||
<ListButton title={_t.textRemoveLink}
|
||||
className={`button-fill button-red`}
|
||||
onClick={() => {
|
||||
props.onRemoveLink()
|
||||
}}
|
||||
/>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const EditLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLink));
|
||||
const LinkTo = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLinkTo));
|
||||
const TypeLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageTypeLink));
|
||||
|
||||
export {EditLink,
|
||||
LinkTo as PageLinkTo,
|
||||
TypeLink as PageTypeLink}
|
||||
Loading…
Reference in a new issue