diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 7f67e47549..d97c3edb41 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -51,6 +51,7 @@ "textPasteImageUrl": "Paste an image URL", "textPictureFromLibrary": "Picture from Library", "textPictureFromURL": "Picture from URL", + "textRemovePicture": "Remove picture", "textPosition": "Position", "textRecommended": "Recommended", "textRequired": "Required", diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index a415e39cee..f3aec73246 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -18,6 +18,7 @@ import LongActionsController from "./LongActions"; import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx'; import EncodingController from "./Encoding"; import DropdownListController from "./DropdownList"; +import AddFormImageController from './add/AddFormImage.jsx'; import { Device } from '../../../../common/mobile/utils/device'; import { processArrayScripts } from '../../../../common/mobile/utils/processArrayScripts.js'; import '../../../../common/main/lib/util/LanguageInfo.js' @@ -869,15 +870,7 @@ class MainController extends Component { break; case Asc.c_oAscContentControlSpecificType.Picture: case Asc.c_oAscContentControlSpecificType.Signature: - if (obj.pr && obj.pr.get_Lock) { - let lock = obj.pr.get_Lock(); - if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock == Asc.c_oAscSdtLockType.ContentLocked) - return; - } - this.api.asc_addImage(obj); - setTimeout(() => { - this.api.asc_UncheckContentControlButtons(); - }, 500); + this.onShowImageActions(obj, x, y); break; case Asc.c_oAscContentControlSpecificType.DropDownList: case Asc.c_oAscContentControlSpecificType.ComboBox: @@ -1202,6 +1195,29 @@ class MainController extends Component { }, 100) } + onShowImageActions(obj, x, y) { + if(!Device.isPhone) { + const boxSdk = $$('#editor_sdk'); + let dropdownListTarget = boxSdk.find('#dropdown-image-list-target'); + + if (dropdownListTarget.length < 1) { + dropdownListTarget = $$(''); + boxSdk.append(dropdownListTarget); + } + if (y > boxSdk.height()) { + y = boxSdk.height(); + } + dropdownListTarget.css({left: `${x}px`, top: `${y}px`}); + Common.Notifications.trigger('openFormImageListTablet', obj, x, y, boxSdk.height(), 260); + } else { + Common.Notifications.trigger('openFormImageListPhone', obj) + } + + setTimeout(() => { + this.api.asc_UncheckContentControlButtons(); + }, 500); + } + onShowListActions(obj, x, y) { if(!Device.isPhone) { const boxSdk = $$('#editor_sdk'); @@ -1636,6 +1652,7 @@ class MainController extends Component { + ) } diff --git a/apps/documenteditor/mobile/src/controller/add/AddFormImage.jsx b/apps/documenteditor/mobile/src/controller/add/AddFormImage.jsx new file mode 100644 index 0000000000..f6291695ce --- /dev/null +++ b/apps/documenteditor/mobile/src/controller/add/AddFormImage.jsx @@ -0,0 +1,110 @@ +import React, { Component } from 'react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { f7 } from "framework7-react"; +import { withTranslation } from "react-i18next"; +import FormImageList from "../../view/add/AddFormImage"; + +class AddFormImageController extends Component { + constructor(props) { + super(props); + this.closeModal = this.closeModal.bind(this); + this.addPictureFromLibrary = this.addPictureFromLibrary.bind(this); + this.onInsertByUrl = this.onInsertByUrl.bind(this); + this.deletePicture = this.deletePicture.bind(this); + + this.state = { + isOpen: false, + vertPos: null + }; + + Common.Notifications.on('openFormImageListPhone', obj => { + this.openModalPhone(obj); + }); + + Common.Notifications.on('openFormImageListTablet', (obj, x, y, boxHeight, popoverHeight) => { + this.openModalTablet(obj, x, y, boxHeight, popoverHeight); + }); + } + + openModalTablet(obj, x, y, boxHeight, popoverHeight) { + let vertPos = (boxHeight - y > 0) && (boxHeight - y >= popoverHeight) ? 'bottom' : 'top' + + this.setState({ + isOpen: true, + vertPos: vertPos + }); + } + + openModalPhone(obj) { + this.setState({ + isOpen: true, + }); + } + + closeModal() { + if(Device.isPhone) { + f7.popup.close('#dropdown-image-list-popup', true); + } else { + f7.popover.close('#dropdown-image-list-popover', true); + } + + f7.views.current.router.back(); + this.setState({isOpen: false}); + } + + addPictureFromLibrary() { + const api = Common.EditorApi.get(); + if (obj.pr && obj.pr.get_Lock) { + let lock = obj.pr.get_Lock(); + if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock == Asc.c_oAscSdtLockType.ContentLocked) + return; + } + api.asc_addImage(obj); + this.closeModal(); + } + + onInsertByUrl (value) { + const { t } = this.props; + const _t = t("Add", { returnObjects: true }); + + const _value = value.replace(/ /g, ''); + + if (_value) { + if ((/((^https?)|(^ftp)):\/\/.+/i.test(_value))) { + const api = Common.EditorApi.get(); + api.AddImageUrl([_value]); + this.closeModal(); + } else { + f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle); + } + } else { + f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle); + } + } + + deletePicture() { + const api = Common.EditorApi.get(); + if (api) { + var props = api.asc_IsContentControl() ? api.asc_GetContentControlProperties() : null; + if (props) { + api.asc_ClearContentControl(props.get_InternalId()); + this.closeModal(); + } + } + } + + render() { + return ( + this.state.isOpen && + + ); + } +} + +export default withTranslation()(AddFormImageController); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/add/AddFormImage.jsx b/apps/documenteditor/mobile/src/view/add/AddFormImage.jsx new file mode 100644 index 0000000000..c306bb9af6 --- /dev/null +++ b/apps/documenteditor/mobile/src/view/add/AddFormImage.jsx @@ -0,0 +1,158 @@ +import React, { useState, useEffect, Component } from 'react'; +import { f7, Sheet, PageContent, Navbar, List, Page, View, ListItem, ListInput, ListButton, NavRight, Link, BlockTitle, Icon, Popup, Popover } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { Device } from '../../../../../common/mobile/utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg?ios'; +import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg'; +import IconLinkIos from '@common-ios-icons/icon-link.svg?ios'; +import IconLinkAndroid from '@common-android-icons/icon-link.svg'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg?ios'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; + + +const AddImageFromUrlPage = ({ f7router, onInsertByUrl }) => { + const { t } = useTranslation(); + const _t = t('Add', { returnObjects: true }); + const [stateValue, setValue] = useState(''); + + return ( + + + + setValue(e.target.value)} + /> + + + { + if (stateValue.length > 0) { + onInsertByUrl(stateValue); + f7router.back(); + } + }} + /> + + + ); +}; + + +const PageSheetAddImage = ({ closeModal, onInsertByUrl, addPictureFromLibrary, deletePicture, style }) => { + const { t } = useTranslation(); + const _t = t('Add', { returnObjects: true }); + const routes = [ + { + path: '/add-form-image-from-url/', + component: AddImageFromUrlPage, + }, + ]; + + return ( + + + + {Device.phone && + + + {Device.ios ? + : + + } + + + } + + + addPictureFromLibrary()} + > + {Device.ios ? ( + + ) : ( + + )} + + + {Device.ios ? ( + + ) : ( + + )} + + + deletePicture()} className='button-red button-fill button-raised'> + + + + + ); +}; + +class SheetAddImageListView extends Component { + constructor(props) { + super(props); + } + + render() { + return ( + Device.isPhone ? + this.props.closeModal()}> + + + : + this.props.closeModal()}> + + + + ); + } +} + +const FormImageList = props => { + useEffect(() => { + if(Device.isPhone) { + f7.popup.open('#dropdown-image-list-popup', true); + } else { + f7.popover.open('#dropdown-image-list-popover', '#dropdown-image-list-target'); + } + + return () => {} + }); + + return ( + + ); +}; + +export default FormImageList;