From 79c022cc5d6913ef7029c764c6eefeee3e8ace40 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Sat, 18 Sep 2021 16:48:27 +0300 Subject: [PATCH 1/5] [DE mobile] Add content controls --- .../mobile/src/controller/Main.jsx | 194 ++++++++++++++++++ 1 file changed, 194 insertions(+) diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 99215476c..7496a690e 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -38,6 +38,7 @@ class MainController extends Component { this.LoadingDocument = -256; this.ApplyEditRights = -255; + this.boxSdk = $$('#editor_sdk'); this._state = { licenseType: false, @@ -536,6 +537,39 @@ class MainController extends Component { storeDocumentSettings.changeDocSize(w, h); }); + const storeAppOptions = this.props.storeAppOptions; + + // if(storeAppOptions.canFillForms) { + 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; + } + }); + this.api.asc_registerCallback('asc_onHideContentControlsActions', () => { + if (this.cmpCalendar) { + this.cmpCalendar.close(); + } + }); + this.api.asc_SetHighlightRequiredFields(true); + // } + //text settings const storeTextSettings = this.props.storeTextSettings; storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts')); @@ -648,6 +682,166 @@ class MainController extends Component { }); } + onShowDateActions(obj, x, y) { + console.log(obj, x, y); + let props = obj.pr, + specProps = props.get_DateTimePr(); + // controlsContainer = this.boxSdk.find('#calendar-control-container'); + + this._dateObj = props; + + // if (controlsContainer.length < 1) { + // controlsContainer = $$('
'); + // this.boxSdk.append(controlsContainer); + // } + + // Common.UI.Menu.Manager.hideAll(); + + // controlsContainer.css({left: x, top : y}); + // controlsContainer.show(); + + if (!this.cmpCalendar) { + this.cmpCalendar = f7.calendar.create({ + inputEl: this.boxSdk.find('#id-document-calendar-control'), + backgrop: false, + closeByBackdropClick: false, + firstday: 1, + value: new Date(specProps ? specProps.get_FullDate() : undefined), + // openIn: 'sheet', + header: true, + footer: true, + }).open(); + + // this.cmpCalendar = this.boxSdk.find('#id-document-calendar-control'); + + this.cmpCalendar.on('change', (calendar, value) => { + let specProps = this._dateObj.get_DateTimePr(); + specProps.put_FullDate(new Date(value)); + this.api.asc_SetContentControlDatePickerDate(specProps); + controlsContainer.hide(); + this.api.asc_UncheckContentControlButtons(); + }); + + } + + // this.cmpCalendar.setValue([new Date(specProps ? specProps.get_FullDate() : undefined)]); + + // Align + + // let offset = controlsContainer.offset(), + // docW = Common.Utils.innerWidth(), + // docH = Common.Utils.innerHeight() - 10, + // menuW = this.cmpCalendar.outerWidth(), + // menuH = this.cmpCalendar.outerHeight(), + // buttonOffset = 22, + // left = offset.left - menuW, + // top = offset.top; + + // if (top + menuH > docH) { + // top = docH - menuH; + // left -= buttonOffset; + // } + + // if (top < 0) + // top = 0; + + // if (left + menuW > docW) + // left = docW - menuW; + + // this.cmpCalendar.css({left: left, top : top}); + // this._preventClick = true; + } + + onShowListActions(obj, x, y) { + let type = obj.type, + props = obj.pr, + specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr(), + isForm = !!props.get_FormPr(), + menu = this.listControlMenu, + menuContainer = menu ? this.boxSdk.find(Common.Utils.String.format('#menu-container-{0}', menu.id)) : null; + + this._listObj = props; + + this._fromShowContentControls = true; + // Common.UI.Menu.Manager.hideAll(); + + if (!menu) { + this.listControlMenu = menu = new Common.UI.Menu({ + maxHeight: 207, + menuAlign: 'tr-bl', + items: [] + }); + + menu.on('item:click', (menu, item) => { + setTimeout(() => { + (item.value !== -1) && this.api.asc_SelectContentControlListItem(item.value, this._listObj.get_InternalId()); + }, 1); + }); + + // Prepare menu container + + if (!menuContainer || menuContainer.length < 1) { + menuContainer = $$(Common.Utils.String.format('', menu.id)); + this.boxSdk.append(menuContainer); + } + + menu.render(menuContainer); + menu.cmpEl.attr({tabindex: "-1"}); + + menu.on('hide:after', () => { + this.listControlMenu.removeAll(); + if (!this._fromShowContentControls) + this.api.asc_UncheckContentControlButtons(); + }); + } + if (specProps) { + if (isForm) { // for dropdown and combobox form control always add placeholder item + let text = props.get_PlaceholderText(); + + menu.addItem(new Common.UI.MenuItem({ + caption: (text.trim()!=='') ? text : this.txtEmpty, + value: '', + template: _.template([ + ' opacity: 0.6 <% } %>">', + '<%= caption %>', + '' + ].join('')) + })); + } + + let count = specProps.get_ItemsCount(); + + for (let i=0; i < count; i++) { + (specProps.get_ItemValue(i)!=='' || !isForm) && menu.addItem(new Common.UI.MenuItem({ + caption: specProps.get_ItemDisplayText(i), + value: specProps.get_ItemValue(i), + template: _.template([ + '', + '<%= Common.Utils.String.htmlEncode(caption) %>', + '' + ].join('')) + })); + } + + if (!isForm && menu.items.length < 1) { + menu.addItem(new Common.UI.MenuItem({ + caption: this.txtEmpty, + value: -1 + })); + } + } + + menuContainer.css({left: x, top : y}); + menuContainer.attr('data-value', 'prevent-canvas-click'); + this._preventClick = true; + menu.show(); + + // _.delay(function() { + // menu.cmpEl.focus(); + // }, 10); + this._fromShowContentControls = false; + } + onProcessSaveResult (data) { this.api.asc_OnSaveEnd(data.result); From 4c685403d4158250c0b9738e34f93723775bcdce Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 22 Sep 2021 21:36:35 +0300 Subject: [PATCH 2/5] [DE mobile] Added calendar for tablet version --- .../mobile/src/controller/Main.jsx | 148 +++++++----------- 1 file changed, 59 insertions(+), 89 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 7496a690e..3ab16ace8 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -17,6 +17,7 @@ import ErrorController from "./Error"; import LongActionsController from "./LongActions"; import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx'; import EncodingController from "./Encoding"; +import { Device } from '../../../../common/mobile/utils/device'; @inject( "users", "storeAppOptions", @@ -539,38 +540,41 @@ class MainController extends Component { const storeAppOptions = this.props.storeAppOptions; - // if(storeAppOptions.canFillForms) { - 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; - } - }); - this.api.asc_registerCallback('asc_onHideContentControlsActions', () => { - if (this.cmpCalendar) { - this.cmpCalendar.close(); - } - }); - this.api.asc_SetHighlightRequiredFields(true); + // if (storeAppOptions.isEdit) { + 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; + } + }); + + this.api.asc_registerCallback('asc_onHideContentControlsActions', () => { + if (this.cmpCalendar) { + this.controlsContainer.remove(); + this.cmpCalendar.destroy(); + } + }); + + this.api.asc_SetHighlightRequiredFields(true); // } - //text settings + // text settings const storeTextSettings = this.props.storeTextSettings; storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts')); @@ -683,75 +687,42 @@ class MainController extends Component { } onShowDateActions(obj, x, y) { - console.log(obj, x, y); let props = obj.pr, specProps = props.get_DateTimePr(); - // controlsContainer = this.boxSdk.find('#calendar-control-container'); + this.controlsContainer = this.boxSdk.find('#calendar-control-container'); this._dateObj = props; - // if (controlsContainer.length < 1) { - // controlsContainer = $$('
'); - // this.boxSdk.append(controlsContainer); - // } - - // Common.UI.Menu.Manager.hideAll(); - - // controlsContainer.css({left: x, top : y}); - // controlsContainer.show(); - - if (!this.cmpCalendar) { + if (this.controlsContainer.length < 1) { + this.controlsContainer = $$('
'); + this.controlsContainer.css({left: `${x}px`, top: `${y}px`}); + this.boxSdk.append(this.controlsContainer); + } + + if(!Device.isPhone) { this.cmpCalendar = f7.calendar.create({ - inputEl: this.boxSdk.find('#id-document-calendar-control'), - backgrop: false, - closeByBackdropClick: false, - firstday: 1, - value: new Date(specProps ? specProps.get_FullDate() : undefined), - // openIn: 'sheet', - header: true, + inputEl: '#calendar-target-element', + firstday: 0, + value: [new Date(specProps ? specProps.get_FullDate() : undefined)], + openIn: 'popover', footer: true, - }).open(); - - // this.cmpCalendar = this.boxSdk.find('#id-document-calendar-control'); - - this.cmpCalendar.on('change', (calendar, value) => { - let specProps = this._dateObj.get_DateTimePr(); - specProps.put_FullDate(new Date(value)); - this.api.asc_SetContentControlDatePickerDate(specProps); - controlsContainer.hide(); - this.api.asc_UncheckContentControlButtons(); + on: { + change: (calendar, value) => { + if(value[0]) { + let specProps = this._dateObj.get_DateTimePr(); + // console.log(new Date(value[0])); + specProps.put_FullDate(new Date(value[0])); + this.api.asc_SetContentControlDatePickerDate(specProps); + this.api.asc_UncheckContentControlButtons(); + } + } + } }); + this.cmpCalendar.open(); } - - // this.cmpCalendar.setValue([new Date(specProps ? specProps.get_FullDate() : undefined)]); - - // Align - - // let offset = controlsContainer.offset(), - // docW = Common.Utils.innerWidth(), - // docH = Common.Utils.innerHeight() - 10, - // menuW = this.cmpCalendar.outerWidth(), - // menuH = this.cmpCalendar.outerHeight(), - // buttonOffset = 22, - // left = offset.left - menuW, - // top = offset.top; - - // if (top + menuH > docH) { - // top = docH - menuH; - // left -= buttonOffset; - // } - - // if (top < 0) - // top = 0; - - // if (left + menuW > docW) - // left = docW - menuW; - - // this.cmpCalendar.css({left: left, top : top}); - // this._preventClick = true; } - + onShowListActions(obj, x, y) { let type = obj.type, props = obj.pr, @@ -763,7 +734,6 @@ class MainController extends Component { this._listObj = props; this._fromShowContentControls = true; - // Common.UI.Menu.Manager.hideAll(); if (!menu) { this.listControlMenu = menu = new Common.UI.Menu({ From f37b4ef8e014a598fad38dacec417d8755aa9a5f Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 23 Sep 2021 16:32:01 +0300 Subject: [PATCH 3/5] [DE mobile] Change calendar --- .../mobile/src/controller/Main.jsx | 61 +++++++++++-------- 1 file changed, 35 insertions(+), 26 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 3ab16ace8..316ae4dd3 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -542,6 +542,7 @@ class MainController extends Component { // if (storeAppOptions.isEdit) { this.api.asc_registerCallback('asc_onShowContentControlsActions', (obj, x, y) => { + console.log(obj, x, y); switch (obj.type) { case Asc.c_oAscContentControlSpecificType.DateTime: this.onShowDateActions(obj, x, y); @@ -565,13 +566,18 @@ class MainController extends Component { }); this.api.asc_registerCallback('asc_onHideContentControlsActions', () => { - if (this.cmpCalendar) { - this.controlsContainer.remove(); - this.cmpCalendar.destroy(); - } + console.log(true); + // console.log(this.cmpCalendar); + // if (this.cmpCalendar) { + // console.log(1); + // // this.controlsContainer.remove(); + // $$('#calendar-target-element').remove(); + // this.cmpCalendar.destroy(); + // console.log(this.cmpCalendar); + // } }); - this.api.asc_SetHighlightRequiredFields(true); + // this.api.asc_SetHighlightRequiredFields(true); // } // text settings @@ -688,9 +694,10 @@ class MainController extends Component { onShowDateActions(obj, x, y) { let props = obj.pr, - specProps = props.get_DateTimePr(); + specProps = props.get_DateTimePr(), + isPhone = Device.isPhone; - this.controlsContainer = this.boxSdk.find('#calendar-control-container'); + this.controlsContainer = this.boxSdk.find('#calendar-target-element'); this._dateObj = props; if (this.controlsContainer.length < 1) { @@ -699,29 +706,31 @@ class MainController extends Component { this.boxSdk.append(this.controlsContainer); } - if(!Device.isPhone) { - this.cmpCalendar = f7.calendar.create({ - inputEl: '#calendar-target-element', - firstday: 0, - value: [new Date(specProps ? specProps.get_FullDate() : undefined)], - openIn: 'popover', - footer: true, - on: { - change: (calendar, value) => { - if(value[0]) { - let specProps = this._dateObj.get_DateTimePr(); - // console.log(new Date(value[0])); - specProps.put_FullDate(new Date(value[0])); - this.api.asc_SetContentControlDatePickerDate(specProps); - this.api.asc_UncheckContentControlButtons(); - } + this.cmpCalendar = f7.calendar.create({ + inputEl: '#calendar-target-element', + firstDay: 0, + // backdrop: false, + // closeByBackdropClick: false, + // closeByOutsideClick: true, + value: [new Date(specProps ? specProps.get_FullDate() : undefined)], + openIn: 'sheet', + footer: true, + on: { + change: (calendar, value) => { + if(calendar.initialized && value[0]) { + let specProps = this._dateObj.get_DateTimePr(); + console.log(value[0]); + specProps.put_FullDate(new Date(value[0])); + this.api.asc_SetContentControlDatePickerDate(specProps); + this.api.asc_UncheckContentControlButtons(); } } - }); + } + }); - this.cmpCalendar.open(); - } + this.cmpCalendar.open(); } + onShowListActions(obj, x, y) { let type = obj.type, From 95c56cde77ea103daf82a477be1375641dca25bc Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 24 Sep 2021 02:27:43 +0300 Subject: [PATCH 4/5] [DE mobile] Correct calendar and added dropdown list --- apps/documenteditor/mobile/locale/en.json | 21 ++- .../mobile/src/controller/DropdownList.jsx | 82 +++++++++++ .../mobile/src/controller/Main.jsx | 130 +++--------------- .../mobile/src/view/DropdownList.jsx | 73 ++++++++++ 4 files changed, 197 insertions(+), 109 deletions(-) create mode 100644 apps/documenteditor/mobile/src/controller/DropdownList.jsx create mode 100644 apps/documenteditor/mobile/src/view/DropdownList.jsx diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 21a4728b3..30b7efda7 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -307,7 +307,26 @@ "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" }, "Error": { "convertationTimeoutText": "Conversion timeout exceeded.", diff --git a/apps/documenteditor/mobile/src/controller/DropdownList.jsx b/apps/documenteditor/mobile/src/controller/DropdownList.jsx new file mode 100644 index 000000000..4bc961b9c --- /dev/null +++ b/apps/documenteditor/mobile/src/controller/DropdownList.jsx @@ -0,0 +1,82 @@ +import React, { Component } from 'react'; +import { Device } from '../../../../common/mobile/utils/device'; +import { f7 } from "framework7-react"; +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, x, y) => { + this.initDropdownList(obj, x, y); + }); + } + + initDropdownList(obj, x, y) { + let type = obj.type; + + this.left = x; + this.top = y; + this.props = obj.pr; + this.specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.props.get_ComboBoxPr() : this.props.get_DropDownListPr(); + this.isForm = !!this.props.get_FormPr(); + this.listItems = []; + + this.initListItems(); + + this.setState({ + isOpen: true + }); + } + + initListItems() { + let count = this.specProps.get_ItemsCount(); + + 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) + }); + } + } + } + + closeModal() { + if(Device.isPhone) { + f7.popup.close('#dropdown-list-popup', true); + } else { + f7.popover.close('#dropdown-list-popover', true); + } + + this.setState({isOpen: false}); + } + + onChangeItemList(value) { + const api = Common.EditorApi.get(); + // const internalId = this.props.get_InternalId; + + if(value !== -1) { + this.closeModal() + api.asc_SelectContentControlListItem(value); + } + } + + render() { + return ( + this.state.isOpen && + + ); + } +} + +export default DropdownListController; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 316ae4dd3..e3cb559b3 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -17,6 +17,7 @@ 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", @@ -538,11 +539,7 @@ class MainController extends Component { storeDocumentSettings.changeDocSize(w, h); }); - const storeAppOptions = this.props.storeAppOptions; - - // if (storeAppOptions.isEdit) { this.api.asc_registerCallback('asc_onShowContentControlsActions', (obj, x, y) => { - console.log(obj, x, y); switch (obj.type) { case Asc.c_oAscContentControlSpecificType.DateTime: this.onShowDateActions(obj, x, y); @@ -567,19 +564,8 @@ class MainController extends Component { this.api.asc_registerCallback('asc_onHideContentControlsActions', () => { console.log(true); - // console.log(this.cmpCalendar); - // if (this.cmpCalendar) { - // console.log(1); - // // this.controlsContainer.remove(); - // $$('#calendar-target-element').remove(); - // this.cmpCalendar.destroy(); - // console.log(this.cmpCalendar); - // } }); - // this.api.asc_SetHighlightRequiredFields(true); - // } - // text settings const storeTextSettings = this.props.storeTextSettings; storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts')); @@ -693,6 +679,7 @@ class MainController extends Component { } onShowDateActions(obj, x, y) { + const { t } = this.props; let props = obj.pr, specProps = props.get_DateTimePr(), isPhone = Device.isPhone; @@ -702,123 +689,49 @@ class MainController extends Component { if (this.controlsContainer.length < 1) { this.controlsContainer = $$('
'); - this.controlsContainer.css({left: `${x}px`, top: `${y}px`}); this.boxSdk.append(this.controlsContainer); } - + + this.controlsContainer.css({left: `${x}px`, top: `${y}px`}); + this.cmpCalendar = f7.calendar.create({ inputEl: '#calendar-target-element', - firstDay: 0, - // backdrop: false, - // closeByBackdropClick: false, - // closeByOutsideClick: true, + 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: 'sheet', - footer: true, + openIn: isPhone ? 'sheet' : 'popover', on: { change: (calendar, value) => { if(calendar.initialized && value[0]) { let specProps = this._dateObj.get_DateTimePr(); - console.log(value[0]); specProps.put_FullDate(new Date(value[0])); this.api.asc_SetContentControlDatePickerDate(specProps); + calendar.close(); this.api.asc_UncheckContentControlButtons(); } } } }); - this.cmpCalendar.open(); + setTimeout(() => { + this.cmpCalendar.open(); + }, 100) } onShowListActions(obj, x, y) { - let type = obj.type, - props = obj.pr, - specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr(), - isForm = !!props.get_FormPr(), - menu = this.listControlMenu, - menuContainer = menu ? this.boxSdk.find(Common.Utils.String.format('#menu-container-{0}', menu.id)) : null; - - this._listObj = props; - - this._fromShowContentControls = true; - - if (!menu) { - this.listControlMenu = menu = new Common.UI.Menu({ - maxHeight: 207, - menuAlign: 'tr-bl', - items: [] - }); - - menu.on('item:click', (menu, item) => { - setTimeout(() => { - (item.value !== -1) && this.api.asc_SelectContentControlListItem(item.value, this._listObj.get_InternalId()); - }, 1); - }); - - // Prepare menu container - - if (!menuContainer || menuContainer.length < 1) { - menuContainer = $$(Common.Utils.String.format('', menu.id)); - this.boxSdk.append(menuContainer); - } - - menu.render(menuContainer); - menu.cmpEl.attr({tabindex: "-1"}); - - menu.on('hide:after', () => { - this.listControlMenu.removeAll(); - if (!this._fromShowContentControls) - this.api.asc_UncheckContentControlButtons(); - }); - } - if (specProps) { - if (isForm) { // for dropdown and combobox form control always add placeholder item - let text = props.get_PlaceholderText(); - - menu.addItem(new Common.UI.MenuItem({ - caption: (text.trim()!=='') ? text : this.txtEmpty, - value: '', - template: _.template([ - ' opacity: 0.6 <% } %>">', - '<%= caption %>', - '' - ].join('')) - })); - } - - let count = specProps.get_ItemsCount(); - - for (let i=0; i < count; i++) { - (specProps.get_ItemValue(i)!=='' || !isForm) && menu.addItem(new Common.UI.MenuItem({ - caption: specProps.get_ItemDisplayText(i), - value: specProps.get_ItemValue(i), - template: _.template([ - '', - '<%= Common.Utils.String.htmlEncode(caption) %>', - '' - ].join('')) - })); - } - - if (!isForm && menu.items.length < 1) { - menu.addItem(new Common.UI.MenuItem({ - caption: this.txtEmpty, - value: -1 - })); - } + this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target'); + + if (this.dropdownListTarget.length < 1) { + this.dropdownListTarget = $$(''); + this.boxSdk.append(this.dropdownListTarget); } - menuContainer.css({left: x, top : y}); - menuContainer.attr('data-value', 'prevent-canvas-click'); - this._preventClick = true; - menu.show(); + this.dropdownListTarget.css({left: `${x}px`, top: `${y}px`}); - // _.delay(function() { - // menu.cmpEl.focus(); - // }, 10); - this._fromShowContentControls = false; + Common.Notifications.trigger('openDropdownList', obj, x, y); } onProcessSaveResult (data) { @@ -1024,6 +937,7 @@ class MainController extends Component { + ) } diff --git a/apps/documenteditor/mobile/src/view/DropdownList.jsx b/apps/documenteditor/mobile/src/view/DropdownList.jsx new file mode 100644 index 000000000..bd14d5b39 --- /dev/null +++ b/apps/documenteditor/mobile/src/view/DropdownList.jsx @@ -0,0 +1,73 @@ +import React, {Component, useEffect, useState} from 'react'; +import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup, View, Link, Actions, ActionsGroup } from "framework7-react"; +import { useTranslation } from "react-i18next"; +import { Device } from '../../../../common/mobile/utils/device'; + +const PageDropdownList = props => { + const listItems = props.listItems; + + return ( + + + + {listItems.length && listItems.map((elem, index) => ( + props.onChangeItemList(elem.value)}> + ))} + + + + ); +}; + +class DropdownListView extends Component { + constructor(props) { + super(props); + } + + render() { + return ( + Device.isPhone ? + + + + : + + + + + ); + } +} + + +const DropdownList = props => { + useEffect(() => { + if(Device.isPhone) { + f7.popup.open('#dropdown-list-popup', true); + } else { + f7.popover.open('#dropdown-list-popover', '#dropdown-list-target'); + } + + return () => {} + }); + + return ( + + ); +}; + +export default DropdownList; \ No newline at end of file From ee5dab8cb0dfe94f2b161eeb1557f93e23e37bf0 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 24 Sep 2021 16:16:20 +0300 Subject: [PATCH 5/5] [DE mobile] Correct content controls --- apps/documenteditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/DropdownList.jsx | 42 +++++++++++++------ .../mobile/src/controller/Main.jsx | 22 +++++----- .../mobile/src/view/DropdownList.jsx | 12 +++--- 4 files changed, 46 insertions(+), 33 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 30b7efda7..8bdd0b3d4 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -326,7 +326,8 @@ "textSeptember": "September", "textOctober": "October", "textNovember": "November", - "textDecember": "December" + "textDecember": "December", + "textEmpty": "Empty" }, "Error": { "convertationTimeoutText": "Conversion timeout exceeded.", diff --git a/apps/documenteditor/mobile/src/controller/DropdownList.jsx b/apps/documenteditor/mobile/src/controller/DropdownList.jsx index 4bc961b9c..60293aa37 100644 --- a/apps/documenteditor/mobile/src/controller/DropdownList.jsx +++ b/apps/documenteditor/mobile/src/controller/DropdownList.jsx @@ -1,6 +1,7 @@ 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 { @@ -12,19 +13,17 @@ class DropdownListController extends Component { isOpen: false }; - Common.Notifications.on('openDropdownList', (obj, x, y) => { - this.initDropdownList(obj, x, y); + Common.Notifications.on('openDropdownList', obj => { + this.initDropdownList(obj); }); } - initDropdownList(obj, x, y) { + initDropdownList(obj) { let type = obj.type; - this.left = x; - this.top = y; - this.props = obj.pr; - this.specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.props.get_ComboBoxPr() : this.props.get_DropDownListPr(); - this.isForm = !!this.props.get_FormPr(); + 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(); @@ -35,7 +34,17 @@ class DropdownListController extends Component { } initListItems() { - let count = this.specProps.get_ItemsCount(); + 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) { @@ -45,11 +54,18 @@ class DropdownListController extends Component { }); } } + + if (!this.isForm && this.listItems.length < 1) { + this.listItems.push({ + caption: t('Edit.textEmpty'), + value: -1 + }); + } } closeModal() { if(Device.isPhone) { - f7.popup.close('#dropdown-list-popup', true); + f7.sheet.close('#dropdown-list-sheet', true); } else { f7.popover.close('#dropdown-list-popover', true); } @@ -59,10 +75,10 @@ class DropdownListController extends Component { onChangeItemList(value) { const api = Common.EditorApi.get(); - // const internalId = this.props.get_InternalId; + // const internalId = this.propsObj.get_InternalId; if(value !== -1) { - this.closeModal() + this.closeModal(); api.asc_SelectContentControlListItem(value); } } @@ -79,4 +95,4 @@ class DropdownListController extends Component { } } -export default DropdownListController; \ No newline at end of file +export default withTranslation()(DropdownListController); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index e3cb559b3..cf25cd52b 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -562,10 +562,6 @@ class MainController extends Component { } }); - this.api.asc_registerCallback('asc_onHideContentControlsActions', () => { - console.log(true); - }); - // text settings const storeTextSettings = this.props.storeTextSettings; storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts')); @@ -722,16 +718,18 @@ class MainController extends Component { onShowListActions(obj, x, y) { - this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target'); - - if (this.dropdownListTarget.length < 1) { - this.dropdownListTarget = $$(''); - this.boxSdk.append(this.dropdownListTarget); + if(!Device.isPhone) { + this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target'); + + if (this.dropdownListTarget.length < 1) { + this.dropdownListTarget = $$(''); + this.boxSdk.append(this.dropdownListTarget); + } + + this.dropdownListTarget.css({left: `${x}px`, top: `${y}px`}); } - this.dropdownListTarget.css({left: `${x}px`, top: `${y}px`}); - - Common.Notifications.trigger('openDropdownList', obj, x, y); + Common.Notifications.trigger('openDropdownList', obj); } onProcessSaveResult (data) { diff --git a/apps/documenteditor/mobile/src/view/DropdownList.jsx b/apps/documenteditor/mobile/src/view/DropdownList.jsx index bd14d5b39..527c29313 100644 --- a/apps/documenteditor/mobile/src/view/DropdownList.jsx +++ b/apps/documenteditor/mobile/src/view/DropdownList.jsx @@ -1,6 +1,5 @@ import React, {Component, useEffect, useState} from 'react'; -import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup, View, Link, Actions, ActionsGroup } from "framework7-react"; -import { useTranslation } from "react-i18next"; +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 => { @@ -27,16 +26,15 @@ class DropdownListView extends Component { render() { return ( Device.isPhone ? - + - + : - + { useEffect(() => { if(Device.isPhone) { - f7.popup.open('#dropdown-list-popup', true); + f7.sheet.open('#dropdown-list-sheet', true); } else { f7.popover.open('#dropdown-list-popover', '#dropdown-list-target'); }