[DE mobile] Correct calendar and added dropdown list
This commit is contained in:
parent
f37b4ef8e0
commit
95c56cde77
|
@ -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.",
|
||||
|
|
82
apps/documenteditor/mobile/src/controller/DropdownList.jsx
Normal file
82
apps/documenteditor/mobile/src/controller/DropdownList.jsx
Normal file
|
@ -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 &&
|
||||
<DropdownList
|
||||
listItems={this.listItems}
|
||||
onChangeItemList={this.onChangeItemList}
|
||||
closeModal={this.closeModal}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DropdownListController;
|
|
@ -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 = $$('<div id="calendar-target-element" style="position: absolute;"></div>');
|
||||
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('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', 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([
|
||||
'<a id="<%= id %>" tabindex="-1" type="menuitem" style="<% if (options.value=="") { %> opacity: 0.6 <% } %>">',
|
||||
'<%= caption %>',
|
||||
'</a>'
|
||||
].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([
|
||||
'<a id="<%= id %>" style="<%= style %>" tabindex="-1" type="menuitem">',
|
||||
'<%= Common.Utils.String.htmlEncode(caption) %>',
|
||||
'</a>'
|
||||
].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 = $$('<div id="dropdown-list-target" style="position: absolute;"></div>');
|
||||
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 {
|
|||
<ViewCommentsController />
|
||||
<PluginsController />
|
||||
<EncodingController />
|
||||
<DropdownListController />
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
|
73
apps/documenteditor/mobile/src/view/DropdownList.jsx
Normal file
73
apps/documenteditor/mobile/src/view/DropdownList.jsx
Normal file
|
@ -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 (
|
||||
<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 ?
|
||||
<Popup id="dropdown-list-popup" style={{height: '410px'}}>
|
||||
<PageDropdownList
|
||||
listItems={this.props.listItems}
|
||||
onChangeItemList={this.props.onChangeItemList}
|
||||
closeModal={this.props.closeModal}
|
||||
style={{height: '100%'}}
|
||||
/>
|
||||
</Popup>
|
||||
:
|
||||
<Popover id="dropdown-list-popover" closeByOutsideClick={false} closeByBackdropClick={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.popup.open('#dropdown-list-popup', 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;
|
Loading…
Reference in a new issue