[DE mobile] Add edit hyperlink settings
This commit is contained in:
parent
3a651b451c
commit
4f68996dd6
|
@ -103,6 +103,11 @@
|
||||||
"textResizeToFitContent": "Resize to Fit Content",
|
"textResizeToFitContent": "Resize to Fit Content",
|
||||||
"textCellMargins": "Cell Margins",
|
"textCellMargins": "Cell Margins",
|
||||||
"textFlow": "Flow",
|
"textFlow": "Flow",
|
||||||
"textRemoveChart": "Remove Chart"
|
"textRemoveChart": "Remove Chart",
|
||||||
|
"textEditLink": "Edit Link",
|
||||||
|
"textRemoveLink": "Remove Link",
|
||||||
|
"textLink": "Link",
|
||||||
|
"textDisplay": "Display",
|
||||||
|
"textScreenTip": "Screen Tip"
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -11,6 +11,7 @@ import EditShapeController from "./controller/EditShape";
|
||||||
import EditImageController from "./controller/EditImage";
|
import EditImageController from "./controller/EditImage";
|
||||||
import EditTableController from "./controller/EditTable";
|
import EditTableController from "./controller/EditTable";
|
||||||
import EditChartController from "./controller/EditChart";
|
import EditChartController from "./controller/EditChart";
|
||||||
|
import EditHyperlinkController from "./controller/EditHyperlink";
|
||||||
|
|
||||||
import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText";
|
import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText";
|
||||||
import {PageAdvancedSettings} from "./EditParagraph";
|
import {PageAdvancedSettings} from "./EditParagraph";
|
||||||
|
@ -213,13 +214,13 @@ const EditTabs = props => {
|
||||||
component: <EditChartController />
|
component: <EditChartController />
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
/*if (settings.indexOf('hyperlink') > -1) {
|
if (settings.indexOf('hyperlink') > -1) {
|
||||||
editors.push({
|
editors.push({
|
||||||
caption: _t.textHyperlink,
|
caption: _t.textHyperlink,
|
||||||
id: 'edit-link',
|
id: 'edit-link',
|
||||||
component: <EditHyperlink />
|
component: <EditHyperlinkController />
|
||||||
})
|
})
|
||||||
}*/
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React, {Fragment, useState} from 'react';
|
||||||
|
import {observer, inject} from "mobx-react";
|
||||||
|
import {List, ListInput, ListButton} from 'framework7-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
const EditHyperlink = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('Edit', {returnObjects: true});
|
||||||
|
const linkObject = props.storeFocusObjects.linkObject;
|
||||||
|
const link = linkObject.get_Value() ? linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20") : '';
|
||||||
|
const display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : '';
|
||||||
|
const tip = linkObject.get_ToolTip();
|
||||||
|
const [stateLink, setLink] = useState(link);
|
||||||
|
const [stateDisplay, setDisplay] = useState(display);
|
||||||
|
const [stateTip, setTip] = useState(tip);
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<List inlineLabels>
|
||||||
|
<ListInput
|
||||||
|
label={_t.textLink}
|
||||||
|
type="text"
|
||||||
|
placeholder={_t.textLink}
|
||||||
|
value={stateLink}
|
||||||
|
onChange={(event) => {setLink(event.target.value)}}
|
||||||
|
></ListInput>
|
||||||
|
<ListInput
|
||||||
|
label={_t.textDisplay}
|
||||||
|
type="text"
|
||||||
|
placeholder={_t.textDisplay}
|
||||||
|
value={stateDisplay}
|
||||||
|
onChange={(event) => {setDisplay(event.target.value)}}
|
||||||
|
></ListInput>
|
||||||
|
<ListInput
|
||||||
|
label={_t.textScreenTip}
|
||||||
|
type="text"
|
||||||
|
placeholder={_t.textScreenTip}
|
||||||
|
value={stateTip}
|
||||||
|
onChange={(event) => {setTip(event.target.value)}}
|
||||||
|
></ListInput>
|
||||||
|
</List>
|
||||||
|
<List>
|
||||||
|
<ListButton className={stateLink.length < 1 ? 'disabled' : ''} title={_t.textEditLink} onClick={() => {
|
||||||
|
props.onEditLink(stateLink, stateDisplay, stateTip)
|
||||||
|
}}></ListButton>
|
||||||
|
<ListButton title={_t.textRemoveLink} onClick={() => {props.onRemoveLink()}}></ListButton>
|
||||||
|
</List>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject("storeFocusObjects")(observer(EditHyperlink));
|
|
@ -0,0 +1,70 @@
|
||||||
|
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 EditHyperlink from '../EditHyperlink';
|
||||||
|
|
||||||
|
class EditHyperlinkController extends Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
this.onRemoveLink = this.onRemoveLink.bind(this);
|
||||||
|
this.onEditLink = this.onEditLink.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
closeModal () {
|
||||||
|
if ( Device.phone ) {
|
||||||
|
f7.sheet.close('#edit-sheet', true);
|
||||||
|
} else {
|
||||||
|
f7.popover.close('#edit-popover');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditLink (link, display, tip) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
if (api) {
|
||||||
|
const urltype = api.asc_getUrlType(link.trim());
|
||||||
|
const isEmail = (urltype == 2);
|
||||||
|
if (urltype < 1) {
|
||||||
|
const { t } = this.props;
|
||||||
|
f7.dialog.alert(t('Edit.textNotUrl'), t('Edit.notcriticalErrorTitle'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let url = link.replace(/^\s+|\s+$/g,'');
|
||||||
|
if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) {
|
||||||
|
url = (isEmail ? 'mailto:' : 'http://') + url;
|
||||||
|
}
|
||||||
|
url = url.replace(new RegExp("%20",'g')," ");
|
||||||
|
const props = new Asc.CHyperlinkProperty();
|
||||||
|
props.put_Value(url);
|
||||||
|
props.put_Text(display.trim().length < 1 ? url : display);
|
||||||
|
props.put_ToolTip(tip);
|
||||||
|
const linkObject = this.props.storeFocusObjects.linkObject;
|
||||||
|
if (linkObject) {
|
||||||
|
props.put_InternalHyperlink(linkObject.get_InternalHyperlink());
|
||||||
|
}
|
||||||
|
api.change_Hyperlink(props);
|
||||||
|
this.closeModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onRemoveLink () {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
if (api) {
|
||||||
|
const linkObject = this.props.storeFocusObjects.linkObject;
|
||||||
|
api.remove_Hyperlink(linkObject);
|
||||||
|
this.closeModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<EditHyperlink onEditLink={this.onEditLink}
|
||||||
|
onRemoveLink={this.onRemoveLink}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withTranslation()(inject("storeFocusObjects")(observer(EditHyperlinkController)));
|
|
@ -126,4 +126,18 @@ export class storeFocusObjects {
|
||||||
return undefined;
|
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) {
|
||||||
|
let object = links[links.length - 1]; // get top
|
||||||
|
return object.get_ObjectValue();
|
||||||
|
} else {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue