[DE mobile] Add content controls
This commit is contained in:
SergeyEzhin
parent
9a19df0254
commit
79c022cc5d
|
|
@ -38,6 +38,7 @@ class MainController extends Component {
|
||||||
|
|
||||||
this.LoadingDocument = -256;
|
this.LoadingDocument = -256;
|
||||||
this.ApplyEditRights = -255;
|
this.ApplyEditRights = -255;
|
||||||
|
this.boxSdk = $$('#editor_sdk');
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
licenseType: false,
|
licenseType: false,
|
||||||
|
|
@ -536,6 +537,39 @@ class MainController extends Component {
|
||||||
storeDocumentSettings.changeDocSize(w, h);
|
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
|
//text settings
|
||||||
const storeTextSettings = this.props.storeTextSettings;
|
const storeTextSettings = this.props.storeTextSettings;
|
||||||
storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts'));
|
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 = $$('<div id="calendar-control-container" style="position: absolute;z-index: 1000;"><div id="id-document-calendar-control" style="position: fixed; left: -1000px; top: -1000px;"></div></div>');
|
||||||
|
// 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('<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
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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) {
|
onProcessSaveResult (data) {
|
||||||
this.api.asc_OnSaveEnd(data.result);
|
this.api.asc_OnSaveEnd(data.result);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue