Merge branch 'feature/mobile-apps-on-reactjs-pe-edit-settings' into feature/mobile-apps-on-reactjs

apps/presentationeditor/mobile/locale/en.json

@@ -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": {

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -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() {

apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx

@@ -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};

apps/presentationeditor/mobile/src/store/focusObjects.js

@@ -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;
+        }
+    }
 }

apps/presentationeditor/mobile/src/store/linkSettings.js

@@ -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);
+            }
+        }
+    }
+
+}

apps/presentationeditor/mobile/src/view/edit/Edit.jsx

@@ -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 (

apps/presentationeditor/mobile/src/view/edit/EditLink.jsx

@@ -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}