From 683a9722e560443892f8bafd54aa1b6d6861e958 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Sun, 7 Feb 2021 18:12:18 +0300 Subject: [PATCH] [SSE mobile] Added the ability insert links --- .../mobile/resources/less/common-ios.less | 3 + apps/spreadsheeteditor/mobile/locale/en.json | 14 +- .../mobile/src/controller/add/AddLink.jsx | 121 ++++++++++++++ .../mobile/src/view/add/Add.jsx | 22 +++ .../mobile/src/view/add/AddLink.jsx | 151 ++++++++++++++++++ .../mobile/src/view/add/AddOther.jsx | 3 + 6 files changed, 313 insertions(+), 1 deletion(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 78de0f8d9..a03af5378 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -242,6 +242,9 @@ } } } + .list-input-right input { + text-align: right; + } } .tab-buttons { diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 9459c92b2..393c30b5c 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -32,7 +32,19 @@ "textPictureFromURL": "Picture from URL", "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "textEmptyImgUrl": "You need to specify image URL.", - "notcriticalErrorTitle": "Warning" + "notcriticalErrorTitle": "Warning", + "textLink": "Link", + "textAddLink": "Add Link", + "textLinkType": "Link Type", + "textExternalLink": "External Link", + "textInternalDataRange": "Internal Data Range", + "textSheet": "Sheet", + "textRange": "Range", + "textRequired": "Required", + "textDisplay": "Display", + "textScreenTip": "Screen Tip", + "textInsert": "Insert", + "textInvalidRange": "ERROR! Invalid cells range" }, "Edit" : { "textSelectObjectToEdit": "Select object to edit", diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx new file mode 100644 index 000000000..3d026852b --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx @@ -0,0 +1,121 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {withTranslation} from 'react-i18next'; + +import {AddLink} from '../../view/add/AddLink'; + +class AddLinkController extends Component { + constructor (props) { + super(props); + this.onInsertLink = this.onInsertLink.bind(this); + + const api = Common.EditorApi.get(); + const cell = api.asc_getCellInfo(); + const celltype = cell.asc_getSelectionType(); + + this.allowInternal = (celltype !== Asc.c_oAscSelectionType.RangeImage && celltype !== Asc.c_oAscSelectionType.RangeShape && + celltype !== Asc.c_oAscSelectionType.RangeShapeText && celltype !== Asc.c_oAscSelectionType.RangeChart && + celltype !== Asc.c_oAscSelectionType.RangeChartText); + + this.displayText = cell.asc_getLockText() ? 'locked' : cell.asc_getText(); + + // sheets + let items = []; + let wsc = api.asc_getWorksheetsCount(); + const aws = api.asc_getActiveWorksheetIndex(); + if (wsc > 0) { + items = []; + while ( !(--wsc < 0) ) { + if ( !api.asc_isWorksheetHidden(wsc) ) { + items.unshift({ + value: wsc, + caption: api.asc_getWorksheetName(wsc) + }); + if (wsc === aws) { + this.activeSheet = { + value: wsc, + caption: api.asc_getWorksheetName(wsc) + } + } + } + } + this.sheets = items; + } + } + + onInsertLink (args) { + const api = Common.EditorApi.get(); + const { t } = this.props; + const _t = t("View.Add", { returnObjects: true }); + + const link = new Asc.asc_CHyperlink(); + let display = ''; + + if (args.type == 'ext') { + let url = args.url; + const urltype = api.asc_getUrlType(url.trim()); + const isEmail = (urltype == 2); + + if (urltype < 1) { + f7.dialog.alert(_t.txtNotUrl, _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'), " "); + + link.asc_setType(Asc.c_oAscHyperlinkType.WebLink); + link.asc_setHyperlinkUrl(url); + display = url; + } else { + const isValid = api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.FormatTable, args.url, false); + + if (isValid !== Asc.c_oAscError.ID.No) { + f7.dialog.alert(_t.textInvalidRange, _t.notcriticalErrorTitle); + return; + } + + link.asc_setType(Asc.c_oAscHyperlinkType.RangeLink); + link.asc_setSheet(args.sheet); + link.asc_setRange(args.url); + + display = args.sheet + '!' + args.url; + } + + link.asc_setText(args.text == null ? null : !!args.text ? args.text : display); + link.asc_setTooltip(args.tooltip); + + api.asc_insertHyperlink(link); + + this.closeModal(); + } + + closeModal () { + if ( Device.phone ) { + f7.sheet.close('.add-popup', true); + } else { + f7.popover.close('#add-popover'); + } + } + + render () { + return ( + + ) + } +} + +const AddLinkWithTranslation = withTranslation()(AddLinkController); + +export {AddLinkWithTranslation as AddLinkController}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx index af4871a2d..83ae07067 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx @@ -12,6 +12,8 @@ import AddShapeController from "../../controller/add/AddShape"; import {AddOtherController} from "../../controller/add/AddOther"; import {AddImageController} from "../../controller/add/AddImage"; import {PageImageLinkSettings} from "./AddImage"; +import {AddLinkController} from "../../controller/add/AddLink"; +import {PageTypeLink, PageSheet} from "./AddLink"; const routes = [ // Functions @@ -31,6 +33,19 @@ const routes = [ { path: '/add-image-from-url/', component: PageImageLinkSettings + }, + // Link + { + path: '/add-link/', + component: AddLinkController + }, + { + path: '/add-link-type/', + component: PageTypeLink + }, + { + path: '/add-link-sheet/', + component: PageSheet } ]; @@ -110,6 +125,13 @@ const AddTabs = props => { component: }); } + if (showPanels && showPanels === 'hyperlink') { + tabs.push({ + caption: _t.textAddLink, + id: 'add-link', + component: + }); + } return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx new file mode 100644 index 000000000..9cf334900 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx @@ -0,0 +1,151 @@ +import React, {Fragment, useState} from 'react'; +import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from "../../../../../common/mobile/utils/device"; + +const PageTypeLink = ({curType, changeType}) => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + const [typeLink, setTypeLink] = useState(curType); + return ( + + + + {setTypeLink('ext'); changeType('ext');}}> + {setTypeLink('int'); changeType('int');}}> + + + ) +}; + +const PageSheet = ({curSheet, sheets, changeSheet}) => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + const [stateSheet, setSheet] = useState(curSheet.value); + return ( + + + + {sheets.map((sheet) => { + return( + { + setSheet(sheet.value); + changeSheet(sheet); + }} + /> + ) + })} + + + + ) +}; + +const AddLinkView = props => { + const isIos = Device.ios; + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + + const [typeLink, setTypeLink] = useState('ext'); + const textType = typeLink === 'ext' ? _t.textExternalLink : _t.textInternalDataRange; + const changeType = (newType) => { + setTypeLink(newType); + }; + + const [link, setLink] = useState(''); + + let displayText = props.displayText; + const displayDisabled = displayText === 'locked'; + displayText = displayDisabled ? _t.textSelectedRange : displayText; + const [stateDisplayText, setDisplayText] = useState(displayText); + + const [screenTip, setScreenTip] = useState(''); + + const activeSheet = props.activeSheet; + const [curSheet, setSheet] = useState(activeSheet); + const changeSheet = (sheet) => { + setSheet(sheet); + }; + + const [range, setRange] = useState(''); + + return ( + + + {props.allowInternal && + + } + {typeLink === 'ext' && + {setLink(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + } + {typeLink === 'int' && + + } + {typeLink === 'int' && + {setRange(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + } + {setDisplayText(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + {setScreenTip(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + + + {props.onInsertLink(typeLink === 'ext' ? + {type: 'ext', url: link, text: stateDisplayText, tooltip: screenTip} : + {type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText, tooltip: screenTip})}} + /> + + + ) +}; + +const AddLink = props => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + return ( + props.inTabs ? + : + + + + + ) +}; + +export {AddLink, PageTypeLink, PageSheet}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx index 779f8489b..f24a12367 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx @@ -10,6 +10,9 @@ const AddOther = props => { + + + ) };