[DE] Forms: add width rule option

This commit is contained in:
Julia Radzhabova 2022-06-17 00:17:00 +03:00
parent 06ef607ed0
commit 937fb92e2c
3 changed files with 86 additions and 16 deletions

View file

@ -567,6 +567,10 @@ define([
this.options.defaultValue = value;
},
getDefaultValue: function() {
return this.options.defaultValue;
},
checkAutoText: function(value) {
if (this.options.allowAuto && typeof value == 'string') {
var val = value.toLowerCase();

View file

@ -94,17 +94,28 @@
<div id="form-chb-comb"></div>
</td>
</tr>
</table>
<table cols="2">
<tr class="form-textfield">
<td class="padding-small">
<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 colspan=2>
<label class="input-label"><%= scope.textWidth %></label>
</td>
</tr>
<tr class="form-textfield">
<td class="padding-small">
<td class="padding-small" width="50%">
<div id="form-combo-width-rule" style="width: 85px;"></div>
</td>
<td class="padding-small" width="50%">
<div id="form-spin-width"></div>
</td>
</tr>
<tr class="form-textfield">
<td colspan=2 class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
</table>
<table cols="1">
<tr class="form-image">
<td class="padding-small">
<label class="input-label"><%= scope.textScale %></label>

View file

@ -80,6 +80,12 @@ define([
this._originalFormProps = null;
this._originalProps = null;
this._arrWidthRule = [
{displayValue: this.textAuto, value: Asc.CombFormWidthRule.Auto},
{displayValue: this.textAtLeast, value: Asc.CombFormWidthRule.AtLeast},
{displayValue: this.textExact, value: Asc.CombFormWidthRule.Exact}
];
this.render();
},
@ -214,13 +220,26 @@ define([
this.chComb.on('change', this.onChCombChanged.bind(this));
this.lockedControls.push(this.chComb);
this.cmbWidthRule = new Common.UI.ComboBox({
el: $markup.findById('#form-combo-width-rule'),
cls: 'input-group-nr',
menuStyle: 'min-width: 85px;',
editable: false,
data: this._arrWidthRule,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbWidthRule.setValue('');
this.cmbWidthRule.on('selected', this.onWidthRuleSelect.bind(this));
this.spnWidth = new Common.UI.MetricSpinner({
el: $markup.findById('#form-spin-width'),
step: .1,
width: 64,
width: 85,
defaultUnit : "cm",
value: 'Auto',
allowAuto: true,
value: '',
allowAuto: false,
maxValue: 55.88,
minValue: 0.1,
dataHint: '1',
@ -547,6 +566,7 @@ define([
if (!checked) {
this.chComb.setValue(false, true);
this.spnWidth.setDisabled(true);
this.cmbWidthRule.setDisabled(true);
}
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
@ -576,7 +596,8 @@ define([
this.chMaxChars.setValue(true, true);
this.spnMaxChars.setDisabled(false || this._state.DisabledControls);
}
this.spnWidth.setDisabled(!checked || this._state.DisabledControls);
this.cmbWidthRule.setDisabled(!checked || this._state.Fixed || this._state.DisabledControls);
this.spnWidth.setDisabled(!checked || this._state.WidthRule===Asc.CombFormWidthRule.Auto || this._state.DisabledControls);
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr();
@ -610,6 +631,19 @@ define([
}
},
onWidthRuleSelect: function(combo, record) {
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr();
formTextPr.put_WidthRule(record.value);
// if (record.value === Asc.CombFormWidthRule.Auto)
// formTextPr.put_Width(this._state.WidthPlaceholder);
props.put_TextFormPr(formTextPr);
this.api.asc_SetContentControlProperties(props, this.internalId);
this.fireEvent('editcomplete', this);
}
},
onChRequired: function(field, newValue, oldValue, eOpts){
var checked = (field.getValue()=='checked');
if (this.api && !this._noApply) {
@ -648,6 +682,16 @@ define([
onChFixed: function(field, newValue, oldValue, eOpts){
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
if (field.getValue()=='checked') {
var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr();
formTextPr.put_WidthRule(Asc.CombFormWidthRule.Exact);
props.put_TextFormPr(formTextPr);
this.api.asc_SetContentControlProperties(props, this.internalId);
}
this.cmbWidthRule.setDisabled(!this._state.Comb || field.getValue()=='checked' || this._state.DisabledControls);
this.api.asc_SetFixedForm(this.internalId, field.getValue()=='checked');
this.fireEvent('editcomplete', this);
}
@ -1118,11 +1162,11 @@ define([
}
this.chAutofit.setDisabled(!this._state.Fixed || this._state.Comb || this._state.DisabledControls);
this.spnWidth.setDisabled(!this._state.Comb || this._state.DisabledControls);
val = formTextPr.get_Width();
if ( (val===undefined || this._state.Width===undefined)&&(this._state.Width!==val) || Math.abs(this._state.Width-val)>0.1) {
this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : -1, true);
this._state.Width=val;
this.cmbWidthRule.setDisabled(!this._state.Comb || this._state.Fixed || this._state.DisabledControls);
val = formTextPr.get_WidthRule();
if ( this._state.WidthRule!==val ) {
this.cmbWidthRule.setValue((val !== null && val !== undefined) ? val : '');
this._state.WidthRule=val;
}
val = this.api.asc_GetTextFormAutoWidth();
@ -1131,6 +1175,13 @@ define([
this._state.WidthPlaceholder=val;
}
this.spnWidth.setDisabled(!this._state.Comb || this._state.WidthRule===Asc.CombFormWidthRule.Auto || this._state.DisabledControls);
val = (this._state.WidthRule===Asc.CombFormWidthRule.Auto) ? this._state.WidthPlaceholder : formTextPr.get_Width();
if ( (val===undefined || this._state.Width===undefined)&&(this._state.Width!==val) || Math.abs(this._state.Width-val)>0.1) {
this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : this.spnWidth.getDefaultValue(), true);
this._state.Width=val;
}
val = formTextPr.get_MaxCharacters();
this.chMaxChars.setValue(val && val>=0);
this.spnMaxChars.setDisabled(!val || val<0 || this._state.DisabledControls);
@ -1161,7 +1212,7 @@ define([
}
var val = this._state.Width;
this.spnWidth && this.spnWidth.setMinValue(Common.Utils.Metric.fnRecalcFromMM(1));
this.spnWidth && this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : -1, true);
this.spnWidth && this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : '', true);
}
},
@ -1230,7 +1281,8 @@ define([
});
}
this.spnMaxChars.setDisabled(this.chMaxChars.getValue()!=='checked' || this._state.DisabledControls);
this.spnWidth.setDisabled(!this._state.Comb || this._state.DisabledControls);
this.cmbWidthRule.setDisabled(!this._state.Comb || this._state.Fixed || this._state.DisabledControls);
this.spnWidth.setDisabled(!this._state.Comb || this._state.WidthRule===Asc.CombFormWidthRule.Auto || this._state.DisabledControls);
this.chMulti.setDisabled(!this._state.Fixed || this._state.Comb || this._state.DisabledControls);
this.chAutofit.setDisabled(!this._state.Fixed || this._state.Comb || this._state.DisabledControls);
this.chAspect.setDisabled(this._state.scaleFlag === Asc.c_oAscPictureFormScaleFlag.Never || this._state.DisabledControls);
@ -1376,7 +1428,10 @@ define([
textTooSmall: 'Image is Too Small',
textScale: 'When to scale',
textBackgroundColor: 'Background Color',
textTag: 'Tag'
textTag: 'Tag',
textAuto: 'Auto',
textAtLeast: 'At least',
textExact: 'Exactly'
}, DE.Views.FormSettings || {}));
});