Merge pull request #2333 from ONLYOFFICE/fix/form-settings

Fix/form settings

apps/common/main/lib/component/InputField.js

@@ -667,7 +667,7 @@ define([
                 cls: '',
                 style: '',
                 value: '',
-                type: 'date',
+                type: 'text',
                 name: '',
                 validation: null,
                 allowBlank: true,
@@ -679,11 +679,18 @@ define([
                 validateOnBlur: true,
                 disabled: false,
                 editable: true,
-                iconCls: 'toolbar__icon btn-datetime',
+                iconCls: 'toolbar__icon btn-date',
                 btnHint: '',
                 menu: true
             },
 
+            initialize : function(options) {
+                options = options || {};
+                options.btnHint = options.btnHint || this.textDate;
+
+                Common.UI.InputFieldBtn.prototype.initialize.call(this, options);
+            },
+
             render: function (parentEl) {
                 var me = this;
                 Common.UI.InputFieldBtn.prototype.render.call(this, parentEl);
@@ -718,7 +725,9 @@ define([
             setDate: function(date) {
                 if (this.cmpCalendar && date && date instanceof Date && !isNaN(date))
                     this.cmpCalendar && this.cmpCalendar.setDate(date);
-            }
+            },
+
+            textDate: 'Select date'
         }
     })());
 });

apps/documenteditor/main/app/controller/Main.js

@@ -311,6 +311,7 @@ define([
                         if (event.target ) {
                             var target = $(event.target);
                             if (target.closest('.combobox').length>0 || target.closest('.dropdown-menu').length>0 ||
+                                target.closest('.input-field').length>0 || target.closest('.spinner').length>0 || target.closest('.textarea-field').length>0 ||
                                 target.closest('.ribtab').length>0 || target.closest('.combo-dataview').length>0) {
                                 event.preventDefault();
                             }

apps/documenteditor/main/app/template/FormSettings.template

@@ -51,6 +51,29 @@
             <div id="form-txt-help"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textDefValue %></label>
+            <div id="form-combo-def-value" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textDefValue %></label>
+            <div id="form-txt-def-value"></div>
+        </td>
+    </tr>
+    <tr class="form-datetime">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textDefValue %></label>
+            <div id="form-date-def-value"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr class="form-textfield">
         <td class="padding-small">
             <label class="input-label"><%= scope.textFormat %></label>
@@ -75,6 +98,11 @@
     </tr>
 </table>
 <table cols="2">
+    <tr class="form-list">
+        <td colspan="2" class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr class="form-list">
         <td colspan="2" class="padding-small">
             <label class="input-label"><%= scope.textValue %></label>
@@ -100,6 +128,11 @@
     </tr>
 </table>
 <table cols="1">
+    <tr class="form-datetime">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr class="form-datetime">
         <td class="padding-small">
             <label class="input-label"><%= scope.textDateFormat %></label>
@@ -114,6 +147,16 @@
     </tr>
 </table>
 <table cols="1">
+    <tr class="form-checkbox">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-checkbox">
+        <td class="padding-small">
+            <div id="form-chb-def-value"></div>
+        </td>
+    </tr>
     <tr class="form-fixed">
         <td class="padding-small">
             <div id="form-chb-fixed"></div>
@@ -160,13 +203,13 @@
             <div id="form-spin-width" style="float:right;"></div>
         </td>
     </tr>
-    <tr class="form-textfield">
-        <td colspan=2 class="padding-small">
+</table>
+<table cols="1">
+    <tr class="form-image">
+        <td 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>
@@ -201,6 +244,11 @@
     </tr>
 </table>
 <table cols="1">
+    <tr>
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td class="padding-small">
             <label class="input-label" style="margin-top: 4px;"><%= scope.textColor %></label>

apps/documenteditor/main/app/view/FormSettings.js

@@ -109,6 +109,8 @@ define([
             this.FixedSettings = el.find('.form-fixed');
             this.NotInComplexSettings = el.find('.form-not-in-complex');
             this.DateOnlySettings = el.find('.form-datetime');
+            this.DefValueText = el.find('#form-txt-def-value').closest('tr');
+            this.DefValueDropDown = el.find('#form-combo-def-value').closest('tr');
         },
 
         createDelayedElements: function() {
@@ -188,6 +190,68 @@ define([
             this.textareaHelp.on('changed:after', this.onHelpChanged.bind(this));
             this.textareaHelp.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
 
+            this.txtDefValue = new Common.UI.InputField({
+                el          : $markup.findById('#form-txt-def-value'),
+                allowBlank  : true,
+                validateOnChange: false,
+                validateOnBlur: false,
+                style       : 'width: 100%;',
+                value       : '',
+                dataHint    : '1',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+            this.lockedControls.push(this.txtDefValue);
+            this.txtDefValue.on('changed:after', this.onTxtDefChanged.bind(this));
+            this.txtDefValue.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
+            this.txtDefValue.cmpEl.on('focus', 'input.form-control', function() {
+                setTimeout(function(){me.txtDefValue._input && me.txtDefValue._input.select();}, 1);
+            });
+
+            this.txtDateDefValue = new Common.UI.InputFieldBtnCalendar({
+                el          : $markup.findById('#form-date-def-value'),
+                allowBlank  : true,
+                validateOnChange: false,
+                validateOnBlur: false,
+                style       : 'width: 100%;',
+                value       : '',
+                dataHint    : '1',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+            this.lockedControls.push(this.txtDateDefValue);
+            this.txtDateDefValue.on('changed:after', this.onTxtDefChanged.bind(this));
+            this.txtDateDefValue.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
+            this.txtDateDefValue.on('date:click', this.onDateDefClick.bind(this));
+            this.txtDateDefValue.cmpEl.on('focus', 'input.form-control', function() {
+                setTimeout(function(){me.txtDateDefValue._input && me.txtDateDefValue._input.select();}, 1);
+            });
+
+            this.cmbDefValue = new Common.UI.ComboBox({
+                el: $markup.findById('#form-combo-def-value'),
+                cls: 'input-group-nr',
+                menuCls: 'menu-absolute',
+                menuStyle: 'min-width: 195px; max-height: 190px;',
+                editable: false,
+                data: [],
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.cmbDefValue.setValue('');
+            this.lockedControls.push(this.cmbDefValue);
+            this.cmbDefValue.on('selected', this.onComboDefChanged.bind(this));
+
+            this.chDefValue = new Common.UI.CheckBox({
+                el: $markup.findById('#form-chb-def-value'),
+                labelText: this.textCheckDefault,
+                dataHint: '1',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+            this.chDefValue.on('change', this.onChDefValue.bind(this));
+            this.lockedControls.push(this.chDefValue);
+
             // Text props
             this.chMaxChars = new Common.UI.CheckBox({
                 el: $markup.findById('#form-chb-max-chars'),
@@ -746,6 +810,41 @@ define([
             }
         },
 
+        onTxtDefChanged: function(input, newValue, oldValue, e) {
+            if (this.api && !this._noApply && (newValue!==oldValue)) {
+                this.api.asc_SetFormValue(newValue, this.internalId);
+                if (!e.relatedTarget || (e.relatedTarget.localName != 'input' && e.relatedTarget.localName != 'textarea') || !/form-control/.test(e.relatedTarget.className))
+                    this.fireEvent('editcomplete', this);
+            }
+        },
+
+        onDateDefClick: function(input, date) {
+            if (this.api && !this._noApply) {
+                var props   = this._originalProps || new AscCommon.CContentControlPr();
+                var formDatePr = this._originalDateProps || new AscCommon.CSdtDatePickerPr();
+                formDatePr.put_FullDate(date);
+                props.put_DateTimePr(formDatePr);
+                props.put_PlaceholderText(formDatePr.get_String());
+                this.api.asc_SetContentControlProperties(props, this.internalId);
+
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
+        onComboDefChanged: function(combo, record) {
+            if (this.api && !this._noApply) {
+                this.api.asc_SetFormValue(record.value, this.internalId);
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
+        onChDefValue: function(field, newValue, oldValue, eOpts){
+            if (this.api && !this._noApply) {
+                this.api.asc_SetFormValue(field.getValue()=='checked', this.internalId);
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
         onChMaxCharsChanged: function(field, newValue, oldValue, eOpts){
             var checked = (field.getValue()=='checked');
             this.spnMaxChars.setDisabled(!checked || this._state.FormatType===Asc.TextFormFormatType.Mask || this._state.DisabledControls);
@@ -1197,6 +1296,23 @@ define([
                             this.btnListAdd.setDisabled(true);
                             this._state.listValue = this._state.listIndex = undefined;
                         }
+
+                        // fill default value combo
+                        if (type == Asc.c_oAscContentControlSpecificType.DropDownList) {
+                            arr.forEach(function(item) {
+                                item.value = item.displayValue = item.name;
+                            });
+                            (arr.length>0) && arr.unshift({value: '', displayValue: this.textNone});
+                            this.cmbDefValue.setData(arr);
+                            this.cmbDefValue.setDisabled(arr.length<1);
+                            this.cmbDefValue.setValue(this.api.asc_GetFormValue(this.internalId) || '');
+                        } else {
+                            val = this.api.asc_GetFormValue(this.internalId);
+                            if ( this._state.DefValue!==val ) {
+                                this.txtDefValue.setValue(val || '');
+                                this._state.DefValue=val;
+                            }
+                        }
                     }
                     this.disableListButtons();
                 } else if (type == Asc.c_oAscContentControlSpecificType.CheckBox) {
@@ -1273,6 +1389,13 @@ define([
                         }
 
                         this.labelFormName.text(ischeckbox ? this.textCheckbox : this.textRadiobox);
+                        this.chDefValue.setCaption(ischeckbox ? this.textCheckDefault : this.textRadioDefault);
+
+                        val = this.api.asc_GetFormValue(this.internalId);
+                        if (this._state.ChDefValue!==val) {
+                            this.chDefValue.setValue(!!val, true);
+                            this._state.ChDefValue=val;
+                        }
                     }
 
                     if (type !== Asc.c_oAscContentControlSpecificType.Picture) {
@@ -1466,6 +1589,12 @@ define([
                         this.spnMaxChars.setValue(val && val>=0 ? val : 10, true);
                         this._state.MaxChars=val;
                     }
+
+                    val = this.api.asc_GetFormValue(this.internalId);
+                    if ( this._state.DefValue!==val ) {
+                        this.txtDefValue.setValue(val || '');
+                        this._state.DefValue=val;
+                    }
                 } else
                     this._originalTextFormProps = null;
 
@@ -1483,6 +1612,13 @@ define([
                     var format = datePr.get_DateFormat();
                     this.cmbDateFormat.setValue(format, datePr.get_String());
                     this._state.DateFormat=format;
+
+                    val = this.api.asc_GetFormValue(this.internalId);
+                    if ( this._state.DefDateValue!==val ) {
+                        this.txtDateDefValue.setValue(val || '');
+                        this.txtDateDefValue.setDate(new Date(val));
+                        this._state.DefDateValue=val;
+                    }
                 }
 
                 var isComplex = !!props.get_ComplexFormPr(), // is complex form
@@ -1630,6 +1766,8 @@ define([
             this.FixedSettings.toggleClass('hidden', imageOnly || isSimpleInsideComplex);
             this.NotInComplexSettings.toggleClass('hidden', isSimpleInsideComplex);
             this.DateOnlySettings.toggleClass('hidden', !dateOnly);
+            this.DefValueText.toggleClass('hidden', !(type === Asc.c_oAscContentControlSpecificType.ComboBox || textOnly));
+            this.DefValueDropDown.toggleClass('hidden', type !== Asc.c_oAscContentControlSpecificType.DropDownList);
         },
 
         onSelectItem: function(listView, itemView, record) {
@@ -1844,7 +1982,10 @@ define([
         textCreditCard: 'Credit Card Number (e.g 4111-1111-1111-1111)',
         textDateField: 'Date & Time Field',
         textDateFormat: 'Display the date like this',
-        textLang: 'Language'
+        textLang: 'Language',
+        textDefValue: 'Default value',
+        textCheckDefault: 'Checkbox is checked by default',
+        textRadioDefault: 'Button is checked by default'
 
     }, DE.Views.FormSettings || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -340,6 +340,7 @@
   "Common.UI.HSBColorPicker.textNoColor": "No Color",
   "Common.UI.InputFieldBtnPassword.textHintHidePwd": "Hide password",
   "Common.UI.InputFieldBtnPassword.textHintShowPwd": "Show password",
+  "Common.UI.InputFieldBtnCalendar.textDate": "Select date",
   "Common.UI.SearchBar.textFind": "Find",
   "Common.UI.SearchBar.tipCloseSearch": "Close search",
   "Common.UI.SearchBar.tipNextResult": "Next result",
@@ -2193,6 +2194,9 @@
   "DE.Views.FormSettings.textValue": "Value Options",
   "DE.Views.FormSettings.textWidth": "Cell width",
   "DE.Views.FormSettings.textZipCodeUS": "US Zip Code (e.g. 92663 or 92663-1234)",
+  "DE.Views.FormSettings.textDefValue": "Default value",
+  "DE.Views.FormSettings.textCheckDefault": "Checkbox is checked by default",
+  "DE.Views.FormSettings.textRadioDefault": "Button is checked by default",
   "DE.Views.FormsTab.capBtnCheckBox": "Checkbox",
   "DE.Views.FormsTab.capBtnComboBox": "Combo Box",
   "DE.Views.FormsTab.capBtnComplex": "Complex Field",

apps/presentationeditor/main/app/controller/Main.js

@@ -274,6 +274,7 @@ define([
                         if (event.target ) {
                             var target = $(event.target);
                             if (target.closest('.combobox').length>0 || target.closest('.dropdown-menu').length>0 ||
+                                target.closest('.input-field').length>0 || target.closest('.spinner').length>0 || target.closest('.textarea-field').length>0 ||
                                 target.closest('.ribtab').length>0 || target.closest('.combo-dataview').length>0) {
                                 event.preventDefault();
                             }

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -310,6 +310,7 @@ define([
                     if (event.target ) {
                         var target = $(event.target);
                         if (target.closest('.combobox').length>0 || target.closest('.dropdown-menu').length>0 ||
+                            target.closest('.input-field').length>0 || target.closest('.spinner').length>0 || target.closest('.textarea-field').length>0 ||
                             target.closest('.ribtab').length>0 || target.closest('.combo-dataview').length>0) {
                             event.preventDefault();
                         }