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

[DE] Add check/radio form settings

Browse source
This commit is contained in:
Julia Radzhabova 2020-09-30 13:25:18 +03:00
parent 3234492ccc
commit b46ab4e0bd
2 changed files with 126 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
apps/documenteditor/main/app/template/FormSettings.template
View file

@ -4,13 +4,19 @@
<label class="header padding-small" id="form-settings-name"><%= scope.textField %></label>
</td>
</tr>
<tr>
<tr class="form-textfield form-checkbox form-list form-image">
<td class="padding-small">
<label class="input-label"><%= scope.textKey %></label>
<div id="form-combo-key" style="width: 100%;"></div>
</td>
</tr>
<tr class="form-panel-textfield">
<tr class="form-radiobox">
<td class="padding-small">
<label class="input-label"><%= scope.textGroupKey %></label>
<div id="form-combo-group-key" style="width: 100%;"></div>
</td>
</tr>
<tr class="form-placeholder">
<td class="padding-small">
<label class="input-label"><%= scope.textPlaceholder %></label>
<div id="form-txt-pholder"></div>
@ -22,23 +28,28 @@
<div id="form-txt-help"></div>
</td>
</tr>
<tr class="form-panel-textfield">
<tr class="form-textfield">
<td class="padding-small">
<div id="form-chb-max-chars" style="display: inline-block;margin-top: 4px;"></div>
<div id="form-spin-max-chars" style="display: inline-block;float: right;"></div>
</td>
</tr>
<tr class="form-panel-textfield">
<tr class="form-textfield">
<td class="padding-small">
<div id="form-chb-comb"></div>
</td>
</tr>
<tr class="form-panel-textfield">
<td class="padding-small" colspan="2">
<tr class="form-textfield">
<td class="padding-large" colspan="2">
<label class="input-label" style="margin-left: 22px;margin-top: 4px;"><%= scope.textWidth %></label>
<div id="form-spin-width" style="display: inline-block; float: right;"></div>
</td>
</tr>
<tr class="form-checkbox form-radiobox">
<td class="padding-large" colspan=2>
<div id="form-chb-selected"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div class="separator horizontal"></div>

120
apps/documenteditor/main/app/view/FormSettings.js
View file

@ -88,7 +88,12 @@ define([
scope: this
}));
this.textFieldContainer = el.find('.form-panel-textfield');
this.TextOnlySettings = el.find('.form-textfield');
this.PlaceholderSettings = el.find('.form-placeholder');
this.CheckOnlySettings = el.find('.form-checkbox');
this.RadioOnlySettings = el.find('.form-radiobox');
this.ListOnlySettings = el.find('.form-list');
this.ImageOnlySettings = el.find('.form-image');
},
createDelayedElements: function() {
@ -100,7 +105,7 @@ define([
this.labelFormName = $markup.findById('#form-settings-name');
// Short Size
// Common props
this.cmbKey = new Common.UI.ComboBox({
el: $markup.findById('#form-combo-key'),
cls: 'input-group-nr',
@ -129,13 +134,14 @@ define([
this.textareaHelp = new Common.UI.TextareaField({
el : $markup.findById('#form-txt-help'),
style : 'width: 100%; height: 90px;',
style : 'width: 100%; height: 60px;',
value : ''
});
this.lockedControls.push(this.textareaHelp);
this.textareaHelp.on('changed:after', this.onHelpChanged.bind(this));
this.textareaHelp.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
// Text props
this.chMaxChars = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-max-chars'),
labelText: this.textMaxChars
@ -177,6 +183,29 @@ define([
this.spnWidth.on('change', this.onWidthChange.bind(this));
this.spnWidth.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
// Check/Radio props
this.chSelected = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-selected'),
labelText: this.textChecked
});
this.chSelected.on('change', this.onChSelectedChanged.bind(this));
this.lockedControls.push(this.chSelected);
// Radio props
this.cmbGroupKey = new Common.UI.ComboBox({
el: $markup.findById('#form-combo-group-key'),
cls: 'input-group-nr',
menuStyle: 'min-width: 100%;',
editable: true,
data: [],
disabled: this._locked
});
this.cmbGroupKey.setValue('');
this.lockedControls.push(this.cmbGroupKey);
this.cmbGroupKey.on('selected', this.onGroupKeyChanged.bind(this));
this.cmbGroupKey.on('changed:after', this.onGroupKeyChanged.bind(this));
this.cmbGroupKey.on('hide:after', this.onHideMenus.bind(this));
this.btnRemForm = new Common.UI.Button({
parentEl: $markup.findById('#form-btn-delete'),
cls : 'btn-toolbar',
@ -313,6 +342,28 @@ define([
}
},
onChSelectedChanged: function(field, newValue, oldValue, eOpts){
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
var specProps = this._originalCheckProps || new AscCommon.CSdtCheckBoxPr();
// specProps.put_Selected(field.getValue()=='checked');
props.put_CheckBoxPr(specProps);
this.api.asc_SetContentControlProperties(props, this.internalId);
this.fireEvent('editcomplete', this);
}
},
onGroupKeyChanged: function(combo, record) {
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
var specProps = this._originalCheckProps || new AscCommon.CSdtCheckBoxPr();
specProps.put_GroupKey(record.value);
props.put_CheckBoxPr(specProps);
this.api.asc_SetContentControlProperties(props, this.internalId);
this.fireEvent('editcomplete', this);
}
},
ChangeSettings: function(props) {
if (this._initSettings)
this.createDelayedElements();
@ -363,7 +414,6 @@ define([
specProps = props.get_CheckBoxPr();
this._originalCheckProps = specProps;
}
this.type = type;
// form settings
@ -387,13 +437,18 @@ define([
if (type == Asc.c_oAscContentControlSpecificType.CheckBox && specProps) {
val = specProps.get_GroupKey();
if (this._state.groupkey!==val) {
this.txtGroupKey.setValue(val ? val : '');
this.cmbGroupKey.setValue(val ? val : '');
this._state.groupkey=val;
}
hidden = (typeof val !== 'string');
this.labelFormName.text(hidden ? this.textCheckbox : this.textRadiobox);
this.chSelected.setCaption(hidden ? this.textChecked : this.textSelected);
// val = formTextPr.get_Selected();
// if ( this._state.Selected!==val ) {
// this.chSelected.setValue(!!val, true);
// this._state.Selected=val;
// }
}
this.$el.find('.group-key').toggleClass('hidden', hidden);
}
var formTextPr = props.get_TextFormPr();
@ -420,6 +475,8 @@ define([
this.spnMaxChars.setValue(val && val>=0 ? val : 10);
}
this._noApply = false;
this.showHideControls(formTextPr, specProps);
}
},
@ -451,10 +508,48 @@ define([
this.btnRemForm.setDisabled(this._lockedControl || disable);
},
hideTextOnlySettings: function(value) {
if (this._state.HideTextOnlySettings !== value) {
this._state.HideTextOnlySettings = value;
this.TextOnlySettings.toggleClass('hidden', value==true);
showHideControls: function(textProps, specProps) {
var textOnly = false,
checkboxOnly = false,
radioboxOnly = false,
listOnly = false,
imageOnly = false;
if (this.type == Asc.c_oAscContentControlSpecificType.ComboBox || this.type == Asc.c_oAscContentControlSpecificType.DropDownList) {
listOnly = !!specProps;
} else if (this.type == Asc.c_oAscContentControlSpecificType.CheckBox) {
if (specProps) {
checkboxOnly = (typeof specProps.get_GroupKey() !== 'string');
radioboxOnly = !checkboxOnly;
}
} else if (this.type == Asc.c_oAscContentControlSpecificType.Picture) {
imageOnly = true;
} else if (this.type == Asc.c_oAscContentControlSpecificType.None) {
textOnly = !!textProps;
}
if (this._state.TextOnlySettings !== textOnly) {
this._state.TextOnlySettings = textOnly;
this.TextOnlySettings.toggleClass('hidden', !textOnly);
}
if (this._state.CheckOnlySettings !== checkboxOnly) {
this._state.CheckOnlySettings = checkboxOnly;
this.CheckOnlySettings.toggleClass('hidden', !checkboxOnly);
}
if (this._state.RadioOnlySettings !== radioboxOnly) {
this._state.RadioOnlySettings = radioboxOnly;
this.RadioOnlySettings.toggleClass('hidden', !radioboxOnly);
}
if (this._state.ListOnlySettings !== listOnly) {
this._state.ListOnlySettings = listOnly;
this.ListOnlySettings.toggleClass('hidden', !listOnly);
}
if (this._state.ImageOnlySettings !== imageOnly) {
this._state.ImageOnlySettings = imageOnly;
this.ImageOnlySettings.toggleClass('hidden', !imageOnly);
}
var value = !(checkboxOnly || radioboxOnly);
if (this._state.PlaceholderSettings !== value) {
this._state.PlaceholderSettings = value;
this.PlaceholderSettings.toggleClass('hidden', !value);
}
},
@ -472,7 +567,10 @@ define([
textCheckbox: 'Checkbox',
textCombobox: 'Combo box',
textDropDown: 'Dropdown',
textImage: 'Image'
textImage: 'Image',
textChecked: 'Checked by default',
textSelected: 'Selected by default',
textGroupKey: 'Group key'
}, DE.Views.FormSettings || {}));
});