Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #414 from ONLYOFFICE/feature/de-new-controls

Browse source 
Feature/de new controls
This commit is contained in:
Julia Radzhabova 2020-06-25 14:21:58 +03:00 committed by GitHub
parent f539f5cf9e 5a059744d2
commit 0b3ab16b83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 361 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -783,10 +783,10 @@ define([
toolbar.btnContentControls.setDisabled(paragraph_locked || header_locked);
if (!(paragraph_locked || header_locked)) {
var control_disable = control_plain || content_locked;
for (var i=0; i<7; i++)
for (var i=0; i<14; i++)
toolbar.btnContentControls.menu.items[i].setDisabled(control_disable);
toolbar.btnContentControls.menu.items[8].setDisabled(!in_control || lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.SdtLocked);
toolbar.btnContentControls.menu.items[10].setDisabled(!in_control);
toolbar.btnContentControls.menu.items[15].setDisabled(!in_control || lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.SdtLocked);
toolbar.btnContentControls.menu.items[17].setDisabled(!in_control);
}
var need_text_disable = paragraph_locked || header_locked || in_chart || rich_edit_lock || plain_edit_lock;
@ -1826,16 +1826,29 @@ define([
}
}
} else {
var isnew = (item.value.indexOf('new-')==0),
oPr, oFormPr;
if (isnew) {
oFormPr = new AscCommon.CSdtFormPr();
}
if (item.value == 'plain' || item.value == 'rich')
this.api.asc_AddContentControl((item.value=='plain') ? Asc.c_oAscSdtLevelType.Inline : Asc.c_oAscSdtLevelType.Block);
else if (item.value == 'picture')
this.api.asc_AddContentControlPicture();
else if (item.value == 'checkbox')
this.api.asc_AddContentControlCheckBox();
else if (item.value == 'date')
else if (item.value.indexOf('picture')>=0)
this.api.asc_AddContentControlPicture(oFormPr);
else if (item.value.indexOf('checkbox')>=0 || item.value.indexOf('radiobox')>=0) {
if (isnew) {
oPr = new AscCommon.CSdtCheckBoxPr();
(item.value.indexOf('radiobox')>=0) && oPr.put_GroupKey('Group 1');
}
this.api.asc_AddContentControlCheckBox(oPr, oFormPr);
} else if (item.value == 'date')
this.api.asc_AddContentControlDatePicker();
else if (item.value == 'combobox' || item.value == 'dropdown')
this.api.asc_AddContentControlList(item.value == 'combobox');
else if (item.value.indexOf('combobox')>=0 || item.value.indexOf('dropdown')>=0)
this.api.asc_AddContentControlList(item.value.indexOf('combobox')>=0, oPr, oFormPr);
else if (item.value == 'new-field') {
oPr = new AscCommon.CSdtTextFormPr();
this.api.asc_AddContentControlTextForm(oPr, oFormPr);
}
Common.component.Analytics.trackEvent('ToolBar', 'Add Content Control');
}

66
apps/documenteditor/main/app/template/ControlSettingsDialog.template
View file

@ -149,3 +149,69 @@
</table>
</div>
</div>
<div id="id-adv-control-settings-additional" class="settings-panel">
<div class="inner-content">
<table cols="1" style="width: 100%;">
<tr class="group-key">
<td class="padding-small">
<label class="input-label"><%= scope.textGroupKey %></label>
<div id="control-settings-txt-groupkey"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label"><%= scope.textKey %></label>
<div id="control-settings-txt-key"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label"><%= scope.textLabel %></label>
<div id="control-settings-txt-label"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textHelp %></label>
<textarea id="control-settings-txt-help" class="form-control" style="width: 100%; height: 90px;"></textarea>
</td>
</tr>
<tr>
<td class="padding-large">
<div id="control-settings-chb-required"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-adv-control-settings-field" class="settings-panel">
<div class="inner-content">
<table cols="2" style="width: auto;">
<tr>
<td class="padding-small" colspan="2">
<div id="control-settings-chb-max-chars" style="display: inline-block;margin-right: 10px;"></div>
<div id="control-settings-spin-max-chars" style="display: inline-block;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan="2">
<div id="control-settings-chb-comb"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label" style="margin-right: 10px;"><%= scope.textPlaceholderSymbol %></label>
</td>
<td class="padding-small">
<button type="button" class="btn btn-text-default" id="control-settings-btn-placeholder-edit" style="width:53px"></button>
</td>
</tr>
<tr>
<td class="padding-small" colspan="2">
<label class="input-label" style="margin-right: 10px;"><%= scope.textWidth %></label>
<div id="control-settings-spin-width" style=""></div>
</td>
</tr>
</table>
</div>
</div>

246
apps/documenteditor/main/app/view/ControlSettingsDialog.js
View file

@ -66,7 +66,9 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
{panelId: 'id-adv-control-settings-lock', panelCaption: this.textLock},
{panelId: 'id-adv-control-settings-list', panelCaption: this.textCombobox},
{panelId: 'id-adv-control-settings-date', panelCaption: this.textDate},
{panelId: 'id-adv-control-settings-checkbox',panelCaption: this.textCheckbox}
{panelId: 'id-adv-control-settings-checkbox',panelCaption: this.textCheckbox},
{panelId: 'id-adv-control-settings-field', panelCaption: this.textField},
{panelId: 'id-adv-control-settings-additional',panelCaption: this.textAdditional}
],
contentTemplate: _.template(contentTemplate)({
scope: this
@ -248,6 +250,99 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.btnEditUnchecked.cmpEl.css({'font-size': '16px', 'line-height': '16px'});
this.btnEditUnchecked.on('click', _.bind(this.onEditCheckbox, this, false));
// Additional
this.txtGroupKey = new Common.UI.InputField({
el : $('#control-settings-txt-groupkey'),
allowBlank : true,
validateOnChange: false,
validateOnBlur: false,
style : 'width: 100%;',
// maxLength: 64,
value : ''
});
this.txtKey = new Common.UI.InputField({
el : $('#control-settings-txt-key'),
allowBlank : true,
validateOnChange: false,
validateOnBlur: false,
style : 'width: 100%;',
// maxLength: 64,
value : ''
});
this.txtLabel = new Common.UI.InputField({
el : $('#control-settings-txt-label'),
allowBlank : true,
validateOnChange: false,
validateOnBlur: false,
style : 'width: 100%;',
// maxLength: 64,
value : ''
});
this.textareaHelp = this.$window.find('#control-settings-txt-help');
this.textareaHelp.keydown(function (event) {
if (event.keyCode == Common.UI.Keys.RETURN) {
event.stopPropagation();
}
me.isHelpChanged = true;
});
this.chRequired = new Common.UI.CheckBox({
el: $('#control-settings-chb-required'),
labelText: this.textRequired
});
// Text field
this.btnEditPlaceholder = new Common.UI.Button({
el: $('#control-settings-btn-placeholder-edit'),
hint: this.tipChange
});
this.btnEditPlaceholder.cmpEl.css({'font-size': '16px', 'line-height': '16px'});
this.btnEditPlaceholder.on('click', _.bind(this.onEditPlaceholder, this));
this.spnWidth = new Common.UI.MetricSpinner({
el: $('#control-settings-spin-width'),
step: .1,
width: 80,
defaultUnit : "cm",
value: '3 cm',
maxValue: 55.88,
minValue: 0.1
});
this.spnMaxChars = new Common.UI.MetricSpinner({
el: $('#control-settings-spin-max-chars'),
step: 1,
width: 53,
defaultUnit : "",
value: '10',
maxValue: 1000000,
minValue: 1
});
this.chMaxChars = new Common.UI.CheckBox({
el: $('#control-settings-chb-max-chars'),
labelText: this.textMaxChars
});
this.chMaxChars.on('change', _.bind(function(field, newValue, oldValue, eOpts){
this.spnMaxChars.setDisabled(field.getValue()!='checked');
}, this));
this.chComb = new Common.UI.CheckBox({
el: $('#control-settings-chb-comb'),
labelText: this.textComb
});
this.chComb.on('change', _.bind(function(field, newValue, oldValue, eOpts){
var checked = (field.getValue()=='checked');
if (checked) {
this.chMaxChars.setValue(true);
}
this.btnEditPlaceholder.setDisabled(!checked);
this.spnWidth.setDisabled(!checked);
}, this));
this.afterRender();
},
@ -272,6 +367,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
afterRender: function() {
this.updateThemeColors();
this.updateMetricUnit();
this._setDefaults(this.props);
if (this.storageName) {
var value = Common.localStorage.getItem(this.storageName);
@ -316,12 +412,13 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.chLockEdit.setValue(val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.ContentLocked);
var type = props.get_SpecificType();
var specProps;
//for list controls
this.btnsCategory[2].setVisible(type == Asc.c_oAscContentControlSpecificType.ComboBox || type == Asc.c_oAscContentControlSpecificType.DropDownList);
if (type == Asc.c_oAscContentControlSpecificType.ComboBox || type == Asc.c_oAscContentControlSpecificType.DropDownList) {
this.btnsCategory[2].setCaption(type == Asc.c_oAscContentControlSpecificType.ComboBox ? this.textCombobox : this.textDropDown);
var specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr();
specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr();
if (specProps) {
var count = specProps.get_ItemsCount();
var arr = [];
@ -339,7 +436,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
//for date picker
this.btnsCategory[3].setVisible(type == Asc.c_oAscContentControlSpecificType.DateTime);
if (type == Asc.c_oAscContentControlSpecificType.DateTime) {
var specProps = props.get_DateTimePr();
specProps = props.get_DateTimePr();
if (specProps) {
this.datetime = specProps;
var lang = specProps.get_LangId() || this.options.controlLang;
@ -360,7 +457,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
// for check box
this.btnsCategory[4].setVisible(type == Asc.c_oAscContentControlSpecificType.CheckBox);
if (type == Asc.c_oAscContentControlSpecificType.CheckBox) {
var specProps = props.get_CheckBoxPr();
specProps = props.get_CheckBoxPr();
if (specProps) {
var code = specProps.get_CheckedSymbol(),
font = specProps.get_CheckedFont();
@ -377,6 +474,56 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
}
this.type = type;
// form settings
var formPr = props.get_FormPr();
this.btnsCategory[6].setVisible(!!formPr);
if (formPr) {
val = formPr.get_Key();
this.txtKey.setValue(val ? val : '');
val = formPr.get_Label();
this.txtLabel.setValue(val ? val : '');
val = formPr.get_HelpText();
this.textareaHelp.val(val ? val : '');
val = formPr.get_Required();
this.chRequired.setValue(!!val);
var hidden = true;
if (type == Asc.c_oAscContentControlSpecificType.CheckBox && specProps) {
val = specProps.get_GroupKey();
this.txtGroupKey.setValue(val ? val : '');
hidden = (typeof val !== 'string');
!hidden && this.btnsCategory[4].setCaption(this.textRadiobox);
}
this.$window.find('.group-key').toggleClass('hidden', hidden);
}
var formTextPr = props.get_TextFormPr();
this.btnsCategory[5].setVisible(!!formTextPr);
if (formTextPr) {
var code = formTextPr.get_PlaceHolderSymbol(),
font = formTextPr.get_PlaceHolderFont();
font && this.btnEditPlaceholder.cmpEl.css('font-family', font);
code && this.btnEditPlaceholder.setCaption(String.fromCharCode(code));
this.placeholder = {code: code, font: font};
val = formTextPr.get_Comb();
this.chComb.setValue(!!val, true);
this.btnEditPlaceholder.setDisabled(!val);
this.spnWidth.setDisabled(!val);
val = formTextPr.get_MaxCharacters();
this.chMaxChars.setValue(val && val>=0, true);
this.spnMaxChars.setDisabled(!val || val<0);
this.spnMaxChars.setValue(val && val>=0 ? val : 10);
val = formTextPr.get_Width();
this.spnWidth.setValue(val ? val : '', true);
}
}
},
@ -404,9 +551,10 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
lock = Asc.c_oAscSdtLockType.ContentLocked;
props.put_Lock(lock);
var specProps;
// for list controls
if (this.type == Asc.c_oAscContentControlSpecificType.ComboBox || this.type == Asc.c_oAscContentControlSpecificType.DropDownList) {
var specProps = (this.type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.props.get_ComboBoxPr() : this.props.get_DropDownListPr();
specProps = (this.type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.props.get_ComboBoxPr() : this.props.get_DropDownListPr();
specProps.clear();
this.list.store.each(function (item, index) {
specProps.add_Item(item.get('name'), item.get('value'));
@ -416,7 +564,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
//for date picker
if (this.type == Asc.c_oAscContentControlSpecificType.DateTime) {
var specProps = this.props.get_DateTimePr();
specProps = this.props.get_DateTimePr();
specProps.put_DateFormat(this.txtDate.getValue());
specProps.put_LangId(this.cmbLang.getValue());
props.put_DateTimePr(specProps);
@ -425,7 +573,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
// for check box
if (this.type == Asc.c_oAscContentControlSpecificType.CheckBox) {
if (this.checkedBox && this.checkedBox.changed || this.uncheckedBox && this.uncheckedBox.changed) {
var specProps = this.props.get_CheckBoxPr();
specProps = this.props.get_CheckBoxPr();
if (this.checkedBox) {
specProps.put_CheckedSymbol(this.checkedBox.code);
specProps.put_CheckedFont(this.checkedBox.font);
@ -438,6 +586,43 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
}
}
if (this.btnsCategory[6].isVisible()) {
var formPr = new AscCommon.CSdtFormPr();
formPr.put_Key(this.txtKey.getValue());
formPr.put_Label(this.txtLabel.getValue());
formPr.put_Required(this.chRequired.getValue()=='checked');
if (this.isHelpChanged)
formPr.put_HelpText(this.textareaHelp.val());
if (this.type == Asc.c_oAscContentControlSpecificType.CheckBox && !this.$window.find('.group-key').hasClass('hidden')) {
specProps = this.props.get_CheckBoxPr();
if (specProps) {
specProps.put_GroupKey(this.txtGroupKey.getValue());
props.put_CheckBoxPr(specProps);
}
}
props.put_FormPr(formPr);
}
if (this.btnsCategory[5].isVisible()) {
var formTextPr = new AscCommon.CSdtTextFormPr();
if (this.spnWidth.getValue())
formTextPr.put_Width(this.spnWidth.getNumberValue());
if (this.placeholder && this.placeholder.changed) {
formTextPr.put_PlaceHolderSymbol(this.placeholder.code);
formTextPr.put_PlaceHolderFont(this.placeholder.font);
}
formTextPr.put_Comb(this.chComb.getValue()=='checked');
var checked = (this.chMaxChars.getValue()=='checked' || this.chComb.getValue()=='checked');
formTextPr.put_MaxCharacters(checked);
if (checked)
formTextPr.put_MaxCharacters(this.spnMaxChars.getNumberValue() || 12);
props.put_TextFormPr(formTextPr);
}
return props;
},
@ -601,11 +786,44 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
}
},
onEditPlaceholder: function() {
if (this.api) {
var me = this,
props = me.placeholder,
cmp = me.btnEditPlaceholder,
handler = function(dlg, result, settings) {
if (result == 'ok') {
props.changed = true;
props.code = settings.code;
props.font = settings.font;
props.font && cmp.cmpEl.css('font-family', props.font);
settings.symbol && cmp.setCaption(settings.symbol);
}
},
win = new Common.Views.SymbolTableDialog({
api: me.api,
lang: me.options.interfaceLang,
modal: true,
type: 0,
font: props.font,
code: props.code,
handler: handler
});
win.show();
win.on('symbol:dblclick', handler);
}
},
onSelectFormat: function(lisvView, itemView, record) {
if (!record) return;
this.txtDate.setValue(record.get('format'));
},
updateMetricUnit: function() {
this.spnWidth.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
this.spnWidth.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
},
textTitle: 'Content Control Settings',
textName: 'Title',
textTag: 'Tag',
@ -636,7 +854,19 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
textChecked: 'Checked symbol',
textUnchecked: 'Unchecked symbol',
tipChange: 'Change symbol',
textPlaceholder: 'Placeholder'
textPlaceholder: 'Placeholder',
textAdditional: 'Additional',
textField: 'Text field',
textKey: 'Key',
textLabel: 'Label',
textHelp: 'Help text',
textRequired: 'Required',
textGroupKey: 'Group key',
textRadiobox: 'Radio box',
textWidth: 'Width',
textPlaceholderSymbol: 'Placeholder symbol',
textMaxChars: 'Characters limit',
textComb: 'Comb of characters'
}, DE.Views.ControlSettingsDialog || {}))
});

35
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -643,6 +643,31 @@ define([
value: 'checkbox'
},
{caption: '--'},
{
caption: this.textNewFieldControl,
value: 'new-field'
},
{
caption: this.textNewPictureControl,
value: 'new-picture'
},
{
caption: this.textNewComboboxControl,
value: 'new-combobox'
},
{
caption: this.textNewDropdownControl,
value: 'new-dropdown'
},
{
caption: this.textNewCheckboxControl,
value: 'new-checkbox'
},
{
caption: this.textNewRadioboxControl,
value: 'new-radiobox'
},
{caption: '--'},
{
caption: this.textRemoveControl,
// iconCls: 'menu__icon cc-remove',
@ -1957,7 +1982,7 @@ define([
this.btnMailRecepients.setVisible(mode.canCoAuthoring == true && mode.canUseMailMerge);
this.listStylesAdditionalMenuItem.setVisible(mode.canEditStyles);
this.btnContentControls.menu.items[10].setVisible(mode.canEditContentControl);
this.btnContentControls.menu.items[17].setVisible(mode.canEditContentControl);
this.mnuInsertImage.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
},
@ -2321,7 +2346,13 @@ define([
mniEraseTable: 'Erase Table',
textListSettings: 'List Settings',
capBtnDateTime: 'Date & Time',
tipDateTime: 'Insert current date and time'
tipDateTime: 'Insert current date and time',
textNewFieldControl: 'New text field',
textNewPictureControl: 'New picture',
textNewComboboxControl: 'New combo box',
textNewCheckboxControl: 'New check box',
textNewRadioboxControl: 'New radio box',
textNewDropdownControl: 'New drop-down list'
}
})(), DE.Views.Toolbar || {}));
});