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

[DE] Add form control settings to the right panel

Browse source
This commit is contained in:
Julia Radzhabova 2020-09-28 19:06:12 +03:00
parent 3d65a3fa88
commit 1f04c90813
6 changed files with 474 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/common/main/lib/util/utils.js
View file

@ -106,7 +106,8 @@ Common.Utils = _.extend(new(function() {
Signature : 9,
Pivot : 10,
Cell : 11,
Slicer : 12
Slicer : 12,
Form : 13
},
importTextType = {
DRM: 0,

4
apps/documenteditor/main/app/controller/RightMenu.js
View file

@ -80,6 +80,7 @@ define([
this._settings[Common.Utils.documentSettingsType.Chart] = {panelId: "id-chart-settings", panel: rightMenu.chartSettings, btn: rightMenu.btnChart, hidden: 1, locked: false};
this._settings[Common.Utils.documentSettingsType.MailMerge] = {panelId: "id-mail-merge-settings", panel: rightMenu.mergeSettings, btn: rightMenu.btnMailMerge, hidden: 1, props: {}, locked: false};
this._settings[Common.Utils.documentSettingsType.Signature] = {panelId: "id-signature-settings", panel: rightMenu.signatureSettings, btn: rightMenu.btnSignature, hidden: 1, props: {}, locked: false};
this._settings[Common.Utils.documentSettingsType.Form] = {panelId: "id-form-settings", panel: rightMenu.formSettings, btn: rightMenu.btnForm, hidden: 1, props: {}, locked: false};
},
setApi: function(api) {
@ -262,6 +263,7 @@ define([
this.rightmenu.chartSettings.updateMetricUnit();
this.rightmenu.imageSettings.updateMetricUnit();
this.rightmenu.tableSettings.updateMetricUnit();
this.rightmenu.formSettings && this.rightmenu.formSettings.updateMetricUnit();
},
createDelayedElements: function() {
@ -347,6 +349,7 @@ define([
this.rightmenu.headerSettings.disableControls(disabled);
this.rightmenu.tableSettings.disableControls(disabled);
this.rightmenu.imageSettings.disableControls(disabled);
this.rightmenu.formSettings && this.rightmenu.formSettings.disableControls(disabled);
if (!allowMerge && this.rightmenu.mergeSettings) {
this.rightmenu.mergeSettings.disableControls(disabled);
disabled && this.rightmenu.btnMailMerge.setDisabled(disabled);
@ -365,6 +368,7 @@ define([
this.rightmenu.btnShape.setDisabled(disabled);
this.rightmenu.btnTextArt.setDisabled(disabled);
this.rightmenu.btnChart.setDisabled(disabled);
this.rightmenu.btnForm && this.rightmenu.btnForm.setDisabled(disabled);
} else {
var selectedElements = this.api.getSelectedElements();
if (selectedElements.length > 0)

57
apps/documenteditor/main/app/template/FormSettings.template Normal file
View file

@ -0,0 +1,57 @@
<table cols="1">
<tr>
<td>
<label class="header" id="form-settings-name"><%= scope.textField %></label>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label"><%= scope.textKey %></label>
<div id="form-combo-key" style="width: 100%;"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label"><%= scope.textPlaceholder %></label>
<div id="form-txt-pholder"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textTip %></label>
<textarea id="form-txt-help" class="form-control" style="width: 100%; height: 90px;"></textarea>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="form-chb-max-chars" style="display: inline-block;margin-right: 10px;"></div>
<div id="form-spin-max-chars" style="display: inline-block;"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="form-chb-comb"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan="2">
<label class="input-label" style="margin-right: 10px;"><%= scope.textWidth %></label>
<div id="form-spin-width" style=""></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="form-btn-delete" style="width:100%;"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="form-btn-lock" style="width:100%;"></div>
</td>
</tr>
</table>

3
apps/documenteditor/main/app/template/RightMenu.template
View file

@ -18,6 +18,8 @@
</div>
<div id="id-signature-settings" class="settings-panel">
</div>
<div id="id-form-settings" class="settings-panel">
</div>
</div>
<div class="tool-menu-btns">
<div class="ct-btn-category arrow-left"></div>
@ -30,5 +32,6 @@
<button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
<button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button>
<button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
<button id="id-right-menu-form" class="btn btn-category arrow-left hidden" content-target="id-form-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
</div>
</div>

388
apps/documenteditor/main/app/view/FormSettings.js Normal file
View file

@ -0,0 +1,388 @@
/*
*
* (c) Copyright Ascensio System SIA 2010-2020
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
* street, Riga, Latvia, EU, LV-1050.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* FormSettings.js
*
* Created by Julia Radzhabova on 28/09/20
* Copyright (c) 2020 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!documenteditor/main/app/template/FormSettings.template',
'jquery',
'underscore',
'backbone',
'common/main/lib/component/ComboBox',
'common/main/lib/component/MetricSpinner',
'common/main/lib/component/CheckBox'
], function (menuTemplate, $, _, Backbone) {
'use strict';
DE.Views.FormSettings = Backbone.View.extend(_.extend({
el: '#id-form-settings',
// Compile our stats template
template: _.template(menuTemplate),
// Delegated events for creating new items, and clearing completed ones.
events: {
},
options: {
alias: 'FormSettings'
},
initialize: function () {
this._initSettings = true;
this._state = {
DisabledControls: true
};
this.spinners = [];
this.lockedControls = [];
this._locked = true;
this.render();
},
render: function () {
var el = this.$el || $(this.el);
el.html(this.template({
scope: this
}));
this.FillColorContainer = $('#shape-panel-color-fill');
this.FillImageContainer = $('#shape-panel-image-fill');
this.FillPatternContainer = $('#shape-panel-pattern-fill');
this.FillGradientContainer = $('#shape-panel-gradient-fill');
this.TransparencyContainer = $('#shape-panel-transparent-fill');
this.ShapeOnlySettings = $('.shape-only');
this.CanChangeType = $('.change-type');
},
createDelayedElements: function() {
var $markup = this.$el || $(this.el);
var me = this;
this.labelFormName = $markup.findById('#form-settings-name');
// Short Size
this.cmbKey = new Common.UI.ComboBox({
el: $markup.findById('#form-combo-key'),
cls: 'input-group-nr',
menuStyle: 'min-width: 85px;',
editable: true,
data: [],
disabled: this._locked
});
this.cmbKey.setValue('');
this.lockedControls.push(this.cmbKey);
this.cmbKey.on('selected', this.onKeySelect.bind(this));
this.cmbKey.on('changed:after', this.onKeyChanged.bind(this));
this.cmbKey.on('hide:after', this.onHideMenus.bind(this));
this.txtPlaceholder = new Common.UI.InputField({
el : $markup.findById('#form-txt-pholder'),
allowBlank : true,
validateOnChange: false,
validateOnBlur: false,
style : 'width: 100%;',
value : ''
});
this.lockedControls.push(this.txtPlaceholder);
this.txtPlaceholder.on('changed:after', this.onPlaceholderChanged.bind(this));
this.textareaHelp = $markup.findById('#form-txt-help');
this.textareaHelp.keydown(function (event) {
if (event.keyCode == Common.UI.Keys.RETURN) {
event.stopPropagation();
}
me.isHelpChanged = true;
});
this.chMaxChars = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-max-chars'),
labelText: this.textMaxChars
});
this.chMaxChars.on('change', this.onChMaxCharsChanged.bind(this));
this.lockedControls.push(this.chMaxChars);
this.spnMaxChars = new Common.UI.MetricSpinner({
el: $markup.findById('#form-spin-max-chars'),
step: 1,
width: 53,
defaultUnit : "",
value: '10',
maxValue: 1000000,
minValue: 1
});
this.lockedControls.push(this.spnMaxChars);
this.spnMaxChars.on('change', this.onMaxCharsChange.bind(this));
this.spnMaxChars.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
this.chComb = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-comb'),
labelText: this.textComb
});
this.chComb.on('change', this.onChCombChanged.bind(this));
this.lockedControls.push(this.chComb);
this.spnWidth = new Common.UI.MetricSpinner({
el: $markup.findById('#form-spin-width'),
step: .1,
width: 80,
defaultUnit : "cm",
value: '3 cm',
maxValue: 55.88,
minValue: 0.1
});
this.lockedControls.push(this.spnWidth);
this.spnWidth.on('change', this.onWidthChange.bind(this));
this.spnWidth.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
this.updateMetricUnit();
},
setApi: function(api) {
this.api = api;
if (this.api) {
// this.api.asc_registerCallback('asc_onParaSpacingLine', _.bind(this._onLineSpacing, this));
}
return this;
},
onKeySelect: function(combo, record) {
if (this.api)
this.api.put_PrLineSpacing(record.value, record.defaultValue);
this.numLineHeight.setDefaultUnit(this._arrLineRule[record.value].defaultUnit);
this.numLineHeight.setMinValue(this._arrLineRule[record.value].minValue);
this.numLineHeight.setStep(this._arrLineRule[record.value].step);
this.fireEvent('editcomplete', this);
},
onKeyChanged: function(combo, record) {
if (me._changedProps) {
me._changedProps.put_XAlign(undefined);
me._changedProps.put_X(Common.Utils.Metric.fnRecalcToMM(Common.Utils.String.parseFloat(record.value)));
}
this.fireEvent('editcomplete', this);
},
onPlaceholderChanged: function(input, newValue, oldValue, e) {
var val = parseInt(me.txtFieldNum.getValue());
if (val !== parseInt(oldValue)) {
me.api.asc_PreviewMailMergeResult(val-1);
me.fireEvent('editcomplete', me);
}
},
onChMaxCharsChanged: function(field, newValue, oldValue, eOpts){
this.spnMaxChars.setDisabled(field.getValue()!='checked');
},
onMaxCharsChange: function(field, newValue, oldValue, eOpts){
if ( this.cmbLineRule.getRawValue() === '' )
return;
var type = c_paragraphLinerule.LINERULE_AUTO;
if (this.api)
this.api.put_PrLineSpacing(this.cmbLineRule.getValue(), (this.cmbLineRule.getValue()==c_paragraphLinerule.LINERULE_AUTO) ? field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
},
onChCombChanged: function(field, newValue, oldValue, eOpts){
var checked = (field.getValue()=='checked');
if (checked) {
this.chMaxChars.setValue(true);
}
this.spnWidth.setDisabled(!checked);
if (this.api)
this.api.put_AddSpaceBetweenPrg((field.getValue()=='checked'));
this.fireEvent('editcomplete', this);
},
onNumSpacingBeforeChange: function(field, newValue, oldValue, eOpts){
if (this.api) {
var num = field.getNumberValue();
this._state.LineSpacingBefore = (num<0) ? -1 : Common.Utils.Metric.fnRecalcToMM(num);
this.api.put_LineSpacingBeforeAfter(0, this._state.LineSpacingBefore);
}
},
onNumSpacingAfterChange: function(field, newValue, oldValue, eOpts){
if (this.api){
var num = field.getNumberValue();
this._state.LineSpacingAfter = (num<0) ? -1 : Common.Utils.Metric.fnRecalcToMM(num);
this.api.put_LineSpacingBeforeAfter(1, this._state.LineSpacingAfter);
}
},
onAddIntervalChange: function(field, newValue, oldValue, eOpts){
if (this.api)
this.api.put_AddSpaceBetweenPrg((field.getValue()=='checked'));
this.fireEvent('editcomplete', this);
},
ChangeSettings: function(props) {
if (this._initSettings)
this.createDelayedElements();
this.disableControls(this._locked);
if (props) {
var val = props.get_PlaceholderText();
this.txtPlaceholder.setValue(val ? val : '');
val = props.get_Lock();
(val===undefined) && (val = Asc.c_oAscSdtLockType.Unlocked);
// this.btnLock.setValue(val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.SdtLocked || val==Asc.c_oAscSdtLockType.ContentLocked);
var type = props.get_SpecificType();
var specProps;
//for list controls
if (type == Asc.c_oAscContentControlSpecificType.ComboBox || type == Asc.c_oAscContentControlSpecificType.DropDownList) {
this.labelFormName.text(type == Asc.c_oAscContentControlSpecificType.ComboBox ? this.textCombobox : this.textDropDown);
specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr();
if (specProps) {
var count = specProps.get_ItemsCount();
var arr = [];
for (var i=0; i<count; i++) {
arr.push({
value: specProps.get_ItemValue(i),
name: specProps.get_ItemDisplayText(i)
});
}
this.list.store.reset(arr);
}
this.disableListButtons();
}
if (type == Asc.c_oAscContentControlSpecificType.CheckBox) {
specProps = props.get_CheckBoxPr();
}
this.type = type;
// form settings
var formPr = props.get_FormPr();
if (formPr) {
val = formPr.get_Key();
this.cmbKey.setValue(val ? val : '');
val = formPr.get_HelpText();
this.textareaHelp.val(val ? val : '');
var hidden = true;
if (type == Asc.c_oAscContentControlSpecificType.CheckBox && specProps) {
val = specProps.get_GroupKey();
this.txtGroupKey.setValue(val ? val : '');
hidden = (typeof val !== 'string');
this.labelFormName.text(hidden ? this.textCheckBox : this.textRadiobox);
}
this.$el.find('.group-key').toggleClass('hidden', hidden);
}
var formTextPr = props.get_TextFormPr();
if (formTextPr) {
this.labelFormName.text(this.textField);
val = formTextPr.get_Comb();
if ( this._state.Comb!==val ) {
this.chComb.setValue(!!val, true);
this._state.Comb=val;
}
this.spnWidth.setDisabled(!val);
val = formTextPr.get_Width();
if ( Math.abs(this._state.Width-val)>0.1) {
this.spnWidth.setValue(val ? val : '', true);
this._state.Width=val;
}
val = formTextPr.get_MaxCharacters();
if ( Math.abs(this._state.MaxChars-val)>0.1) {
this.chMaxChars.setValue(val && val>=0, true);
this.spnMaxChars.setDisabled(!val || val<0);
this.spnMaxChars.setValue(val && val>=0 ? val : 10, true);
this._state.MaxChars=val;
}
}
}
},
updateMetricUnit: function() {
if (this.spinners) {
for (var i=0; i<this.spinners.length; i++) {
var spinner = this.spinners[i];
spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
}
}
},
onHideMenus: function(menu, e, isFromInputControl){
if (!isFromInputControl) this.fireEvent('editcomplete', this);
},
setLocked: function (locked) {
this._locked = locked;
},
disableControls: function(disable) {
if (this._state.DisabledControls!==disable) {
this._state.DisabledControls = disable;
_.each(this.lockedControls, function(item) {
item.setDisabled(disable);
});
this.textTip.toggleClass('disabled', disable);
}
},
hideTextOnlySettings: function(value) {
if (this._state.HideTextOnlySettings !== value) {
this._state.HideTextOnlySettings = value;
this.TextOnlySettings.toggleClass('hidden', value==true);
}
},
textField: 'Text field',
textKey: 'Key',
textPlaceholder: 'Placeholder',
textTip: 'Tip',
textMaxChars: 'Characters limit',
textComb: 'Comb of characters',
textWidth: 'Width',
textDelete: 'Delete',
textLock: 'Lock'
}, DE.Views.FormSettings || {}));
});

21
apps/documenteditor/main/app/view/RightMenu.js
View file

@ -58,6 +58,7 @@ define([
'documenteditor/main/app/view/MailMergeSettings',
'documenteditor/main/app/view/TextArtSettings',
'documenteditor/main/app/view/SignatureSettings',
'documenteditor/main/app/view/FormSettings',
'common/main/lib/component/Scroller'
], function (menuTemplate, $, _, Backbone) {
'use strict';
@ -210,6 +211,22 @@ define([
this.signatureSettings = new DE.Views.SignatureSettings();
}
if (mode && mode.canFeatureContentControl && mode.canEditContentControl) {
this.btnForm = new Common.UI.Button({
hint: this.txtFormSettings,
asctype: Common.Utils.documentSettingsType.Form,
enableToggle: true,
disabled: true,
toggleGroup: 'tabpanelbtnsGroup',
allowMouseEventsOnDisabled: true
});
this._settings[Common.Utils.documentSettingsType.Form] = {panel: "id-form-settings", btn: this.btnForm};
this.btnForm.setElement($markup.findById('#id-right-menu-form'), false); this.btnForm.render().setVisible(true);
this.btnForm.on('click', this.onBtnMenuClick.bind(this));
this.formSettings = new DE.Views.FormSettings();
}
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.right-panel'),
@ -242,6 +259,7 @@ define([
this.textartSettings.setApi(api).on('editcomplete', _fire_editcomplete);
if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _fire_editcomplete);
if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _fire_editcomplete);
if (this.formSettings) this.formSettings.setApi(api).on('editcomplete', _fire_editcomplete);
},
setMode: function(mode) {
@ -326,6 +344,7 @@ define([
txtTextArtSettings: 'Text Art Settings',
txtChartSettings: 'Chart Settings',
txtMailMergeSettings: 'Mail Merge Settings',
txtSignatureSettings: 'Signature Settings'
txtSignatureSettings: 'Signature Settings',
txtFormSettings: 'Form Settings'
}, DE.Views.RightMenu || {}));
});