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

[DE] Show new control settings

Browse source
This commit is contained in:
Julia Radzhabova 2020-06-23 17:50:08 +03:00
parent f6af816839
commit eb36fff041
2 changed files with 152 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -148,4 +148,41 @@
</tr>
</table>
</div>
</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>

122
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,50 @@ 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
});
this.afterRender();
},
@ -316,12 +362,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 +386,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 +407,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 +424,38 @@ 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) {
}
}
},
@ -404,9 +483,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 +496,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 +505,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 +518,24 @@ 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);
}
return props;
},
@ -636,7 +734,15 @@ 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'
}, DE.Views.ControlSettingsDialog || {}))
});