Merge pull request #1204 from ONLYOFFICE/feature/Bug_44018

Feature/bug 44018

apps/documenteditor/mobile/locale/en.json

@@ -308,7 +308,27 @@
     "textTopAndBottom": "Top and Bottom",
     "textTotalRow": "Total Row",
     "textType": "Type",
-    "textWrap": "Wrap"
+    "textWrap": "Wrap",
+    "textSu": "Su",
+    "textMo": "Mo",
+    "textTu": "Tu",
+    "textWe": "We",
+    "textTh": "Th",
+    "textFr": "Fr",
+    "textSa": "Sa",
+    "textJanuary": "January",
+    "textFebruary": "February",
+    "textMarch": "March",
+    "textApril": "April",
+    "textMay": "May",
+    "textJune": "June",
+    "textJuly": "July",
+    "textAugust": "August",
+    "textSeptember": "September",
+    "textOctober": "October",
+    "textNovember": "November",
+    "textDecember": "December",
+    "textEmpty": "Empty"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",

apps/documenteditor/mobile/src/controller/DropdownList.jsx

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import { Device } from '../../../../common/mobile/utils/device';
+import { f7 } from "framework7-react";
+import { withTranslation } from "react-i18next";
+import DropdownList from "../view/DropdownList";
+
+class DropdownListController extends Component {
+    constructor(props) {
+        super(props);
+        this.onChangeItemList = this.onChangeItemList.bind(this);
+        
+        this.state = {
+            isOpen: false
+        };
+
+        Common.Notifications.on('openDropdownList', obj => {
+            this.initDropdownList(obj);
+        });
+    }
+
+    initDropdownList(obj) {
+        let type = obj.type;
+
+        this.propsObj = obj.pr;
+        this.specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.propsObj.get_ComboBoxPr() : this.propsObj.get_DropDownListPr();
+        this.isForm = !!this.propsObj.get_FormPr();
+        this.listItems = [];
+
+        this.initListItems();
+
+        this.setState({
+            isOpen: true
+        });
+    }
+
+    initListItems() {
+        const { t } = this.props;
+        const count = this.specProps.get_ItemsCount();
+
+        if(this.isForm) {
+            let text = this.propsObj.get_PlaceholderText();
+
+            this.listItems.push({
+                caption: text.trim() !== '' ? text : t('Edit.textEmpty'),
+                value: ''
+            });
+        }
+
+        for (let i = 0; i < count; i++) {
+            if(this.specProps.get_ItemValue(i) || !this.isForm) {
+                this.listItems.push({
+                    caption: this.specProps.get_ItemDisplayText(i), 
+                    value: this.specProps.get_ItemValue(i)
+                });
+            }
+        }
+
+        if (!this.isForm && this.listItems.length < 1) {
+            this.listItems.push({
+                caption: t('Edit.textEmpty'),
+                value: -1
+            });
+        }
+    }
+
+    closeModal() {
+        if(Device.isPhone) {
+            f7.sheet.close('#dropdown-list-sheet', true);
+        } else {
+            f7.popover.close('#dropdown-list-popover', true);
+        }
+
+        this.setState({isOpen: false});
+    }
+
+    onChangeItemList(value) {
+        const api = Common.EditorApi.get();
+        // const internalId = this.propsObj.get_InternalId;
+
+        if(value !== -1) {
+            this.closeModal();
+            api.asc_SelectContentControlListItem(value);
+        }
+    }
+
+    render() {
+        return (
+            this.state.isOpen &&
+                <DropdownList 
+                    listItems={this.listItems}
+                    onChangeItemList={this.onChangeItemList}
+                    closeModal={this.closeModal}
+                /> 
+        );
+    }
+}
+
+export default withTranslation()(DropdownListController);

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

@@ -17,6 +17,8 @@ import ErrorController from "./Error";
 import LongActionsController from "./LongActions";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
 import EncodingController from "./Encoding";
+import DropdownListController from "./DropdownList";
+import { Device } from '../../../../common/mobile/utils/device';
 @inject(
     "users",
     "storeAppOptions",
@@ -38,6 +40,7 @@ class MainController extends Component {
 
         this.LoadingDocument = -256;
         this.ApplyEditRights = -255;
+        this.boxSdk = $$('#editor_sdk');
 
         this._state = {
             licenseType: false,
@@ -536,7 +539,30 @@ class MainController extends Component {
             storeDocumentSettings.changeDocSize(w, h);
         });
 
-        //text settings
+        this.api.asc_registerCallback('asc_onShowContentControlsActions', (obj, x, y) => {
+            switch (obj.type) {
+                case Asc.c_oAscContentControlSpecificType.DateTime:
+                    this.onShowDateActions(obj, x, y);
+                    break;
+                case Asc.c_oAscContentControlSpecificType.Picture:
+                    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);
+                    break;
+                case Asc.c_oAscContentControlSpecificType.DropDownList:
+                case Asc.c_oAscContentControlSpecificType.ComboBox:
+                    this.onShowListActions(obj, x, y);
+                    break;
+            }
+        });
+
+        // text settings
         const storeTextSettings = this.props.storeTextSettings;
         storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts'));
 
@@ -648,6 +674,64 @@ class MainController extends Component {
         });
     }
 
+    onShowDateActions(obj, x, y) {
+        const { t } = this.props;
+        let props = obj.pr,
+            specProps = props.get_DateTimePr(),
+            isPhone = Device.isPhone;
+
+        this.controlsContainer = this.boxSdk.find('#calendar-target-element');
+        this._dateObj = props;
+
+        if (this.controlsContainer.length < 1) {
+            this.controlsContainer = $$('<div id="calendar-target-element" style="position: absolute;"></div>');
+            this.boxSdk.append(this.controlsContainer);
+        }
+
+        this.controlsContainer.css({left: `${x}px`, top: `${y}px`});
+
+        this.cmpCalendar = f7.calendar.create({
+            inputEl: '#calendar-target-element',
+            dayNamesShort: [t('Edit.textSu'), t('Edit.textMo'), t('Edit.textTu'), t('Edit.textWe'), t('Edit.textTh'), t('Edit.textFr'), t('Edit.textSa')],
+            monthNames: [t('Edit.textJanuary'), t('Edit.textFebruary'), t('Edit.textMarch'), t('Edit.textApril'), t('Edit.textMay'), t('Edit.textJune'), t('Edit.textJuly'), t('Edit.textAugust'), t('Edit.textSeptember'), t('Edit.textOctober'), t('Edit.textNovember'), t('Edit.textDecember')],
+            backdrop: isPhone ? false : true,
+            closeByBackdropClick: isPhone ? false : true,
+            value: [new Date(specProps ? specProps.get_FullDate() : undefined)],
+            openIn: isPhone ? 'sheet' : 'popover',
+            on: {
+                change: (calendar, value) => {
+                    if(calendar.initialized && value[0]) {
+                        let specProps = this._dateObj.get_DateTimePr();
+                        specProps.put_FullDate(new Date(value[0]));
+                        this.api.asc_SetContentControlDatePickerDate(specProps);
+                        calendar.close();
+                        this.api.asc_UncheckContentControlButtons();
+                    }
+                }
+            }
+        });
+
+        setTimeout(() => {
+            this.cmpCalendar.open();
+        }, 100)
+    }
+    
+        
+    onShowListActions(obj, x, y) {
+        if(!Device.isPhone) {
+            this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target');
+        
+            if (this.dropdownListTarget.length < 1) {
+                this.dropdownListTarget = $$('<div id="dropdown-list-target" style="position: absolute;"></div>');
+                this.boxSdk.append(this.dropdownListTarget);
+            }
+        
+            this.dropdownListTarget.css({left: `${x}px`, top: `${y}px`});
+        }
+
+        Common.Notifications.trigger('openDropdownList', obj);
+    }
+
     onProcessSaveResult (data) {
         this.api.asc_OnSaveEnd(data.result);
 
@@ -851,6 +935,7 @@ class MainController extends Component {
                 <ViewCommentsController />
                 <PluginsController />
                 <EncodingController />
+                <DropdownListController />
             </Fragment>
             )
     }

apps/documenteditor/mobile/src/view/DropdownList.jsx

@@ -0,0 +1,71 @@
+import React, {Component, useEffect, useState} from 'react';
+import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup, View, Link, Sheet } from "framework7-react";
+import { Device } from '../../../../common/mobile/utils/device';
+
+const PageDropdownList = props => {
+    const listItems = props.listItems;
+
+    return (
+        <View style={props.style}>
+            <Page>
+                <List>
+                    {listItems.length && listItems.map((elem, index) => (
+                        <ListItem key={index} className='no-indicator' title={elem.caption} onClick={() => props.onChangeItemList(elem.value)}></ListItem>
+                    ))} 
+                </List>
+            </Page>
+        </View>
+    );
+};
+
+class DropdownListView extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            Device.isPhone ? 
+                <Sheet id="dropdown-list-sheet" closeByOutsideClick={true} backdrop={false} closeByBackdropClick={false} swipeToStep={true} swipeToClose={true}> 
+                    <PageDropdownList
+                        listItems={this.props.listItems}
+                        onChangeItemList={this.props.onChangeItemList}
+                        closeModal={this.props.closeModal}
+                    />
+                </Sheet>
+            : 
+                <Popover id="dropdown-list-popover" className="popover__titled" closeByOutsideClick={false}>
+                    <PageDropdownList
+                        listItems={this.props.listItems}
+                        onChangeItemList={this.props.onChangeItemList}
+                        closeModal={this.props.closeModal}
+                        style={{height: '410px'}}
+                    />
+                </Popover>
+            
+        );
+    }
+}
+
+
+const DropdownList = props => {
+    useEffect(() => {
+        if(Device.isPhone) {
+            f7.sheet.open('#dropdown-list-sheet', true);
+        } else {
+            f7.popover.open('#dropdown-list-popover', '#dropdown-list-target');
+        }
+    
+        return () => {}
+    });
+
+    return (
+        <DropdownListView 
+            listItems={props.listItems}
+            onChangeItemList={props.onChangeItemList}
+            closeModal={props.closeModal}
+        />
+    );
+};
+
+export default DropdownList;