[DE] Forms: add email, phone and complex field

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

@@ -144,7 +144,7 @@ define([
             (lock_type===undefined) && (lock_type = Asc.c_oAscSdtLockType.Unlocked);
             var content_locked = lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.ContentLocked;
             var arr = [ this.view.btnTextField, this.view.btnComboBox, this.view.btnDropDown, this.view.btnCheckBox,
-                        this.view.btnRadioBox, this.view.btnImageField ];
+                        this.view.btnRadioBox, this.view.btnImageField, this.view.btnEmailField, this.view.btnPhoneField, this.view.btnComplexField ];
             Common.Utils.lockControls(Common.enumLock.paragraphLock, paragraph_locked,   {array: arr});
             Common.Utils.lockControls(Common.enumLock.headerLock,    header_locked,      {array: arr});
             Common.Utils.lockControls(Common.enumLock.controlPlain,  control_plain,      {array: arr});
@@ -166,7 +166,7 @@ define([
             }
         },
 
-        onControlsSelect: function(type) {
+        onControlsSelect: function(type, options) {
             if (!(this.toolbar.mode && this.toolbar.mode.canFeatureContentControl && this.toolbar.mode.canFeatureForms)) return;
 
             var oPr,
@@ -182,7 +182,15 @@ define([
                 this.api.asc_AddContentControlList(type == 'combobox', oPr, oFormPr);
             else if (type == 'text') {
                 oPr = new AscCommon.CSdtTextFormPr();
+                if (options) {
+                    if (options.reg)
+                        oPr.put_RegExpFormat(options.reg);
+                    else if (options.mask)
+                        oPr.put_MaskFormat(options.mask);
+                }
                 this.api.asc_AddContentControlTextForm(oPr, oFormPr);
+            } else if (type == 'complex') {
+                this.api.asc_AddComplexForm();
             }
 
             var me = this;

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

@@ -1243,6 +1243,7 @@ define([
                 }
 
                 var formTextPr = props.get_TextFormPr();
+                var needUpdateTextControls = !!formTextPr && !this._originalTextFormProps || !formTextPr && !!this._originalTextFormProps;
                 if (formTextPr) {
                     this._originalTextFormProps = formTextPr;
 
@@ -1320,7 +1321,7 @@ define([
                 this.KeySettingsTd.toggleClass('padding-small', !connected);
                 this.ConnectedSettings.toggleClass('hidden', !connected);
                 this.TextOnlySettingsMask.toggleClass('hidden', !(type === Asc.c_oAscContentControlSpecificType.None && !!formTextPr) || !(this._state.FormatType===Asc.TextFormFormatType.Mask || this._state.FormatType===Asc.TextFormFormatType.RegExp));
-                if (this.type !== type || type == Asc.c_oAscContentControlSpecificType.CheckBox)
+                if (this.type !== type || needUpdateTextControls || type == Asc.c_oAscContentControlSpecificType.CheckBox)
                     this.showHideControls(type, formTextPr, specProps);
                 this.type = type;
 

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

@@ -56,6 +56,9 @@ define([
                 '<span class="btn-slot text x-huge" id="slot-btn-form-checkbox"></span>' +
                 '<span class="btn-slot text x-huge" id="slot-btn-form-radiobox"></span>' +
                 '<span class="btn-slot text x-huge" id="slot-btn-form-image"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-email"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-phone"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-complex"></span>' +
             '</div>' +
             '<div class="separator long forms" style="display: none;"></div>' +
             '<div class="group no-group-mask inner-elset small" style="display: none;">' +
@@ -99,6 +102,15 @@ define([
             this.btnImageField && this.btnImageField.on('click', function (b, e) {
                 me.fireEvent('forms:insert', ['picture']);
             });
+            this.btnComplexField && this.btnComplexField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['complex']);
+            });
+            this.btnEmailField && this.btnEmailField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['text', {reg: "\\S+@\\S+\\.\\S+"}]);
+            });
+            this.btnPhoneField && this.btnPhoneField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['text', {mask: "(999)999-9999"}]);
+            });
             this.btnViewForm && this.btnViewForm.on('click', function (b, e) {
                 me.fireEvent('forms:mode', [b.pressed]);
             });
@@ -217,6 +229,39 @@ define([
                     });
                     this.paragraphControls.push(this.btnImageField);
 
+                    this.btnEmailField = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon btn-text-field',
+                        lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart],
+                        caption: this.capBtnEmail,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
+                    });
+                    this.paragraphControls.push(this.btnEmailField);
+
+                    this.btnPhoneField = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon btn-text-field',
+                        lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart],
+                        caption: this.capBtnPhone,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
+                    });
+                    this.paragraphControls.push(this.btnPhoneField);
+
+                    this.btnComplexField = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon btn-text-field',
+                        lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart],
+                        caption: this.capBtnComplex,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
+                    });
+                    this.paragraphControls.push(this.btnComplexField);
+
                     this.btnViewForm = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-sheet-view',
@@ -349,6 +394,9 @@ define([
                         me.btnRadioBox.updateHint(me.tipRadioBox);
                         me.btnImageField.updateHint(me.tipImageField);
                         me.btnViewForm.updateHint(me.tipViewForm);
+                        me.btnEmailField.updateHint(me.tipEmailField);
+                        me.btnPhoneField.updateHint(me.tipPhoneField);
+                        me.btnComplexField.updateHint(me.tipComplexField);
                     } else {
                         me.btnClear.updateHint(me.textClearFields);
                     }
@@ -381,6 +429,9 @@ define([
                     this.btnViewForm.render($host.find('#slot-btn-form-view'));
                     this.btnClearFields.render($host.find('#slot-form-clear-fields'));
                     this.btnHighlight.render($host.find('#slot-form-highlight'));
+                    this.btnEmailField.render($host.find('#slot-btn-form-email'));
+                    this.btnPhoneField.render($host.find('#slot-btn-form-phone'));
+                    this.btnComplexField.render($host.find('#slot-btn-form-complex'));
 
                     var separator_forms = $host.find('.separator.forms');
                     separator_forms.prev('.group').show();
@@ -443,7 +494,13 @@ define([
             textCreateForm: 'Add fields and create a fillable OFORM document',
             textGotIt: 'Got it',
             capBtnDownloadForm: 'Download as oform',
-            tipDownloadForm: 'Download a file as a fillable OFORM document'
+            tipDownloadForm: 'Download a file as a fillable OFORM document',
+            capBtnEmail: 'Email Address',
+            capBtnPhone: 'Phone Number',
+            capBtnComplex: 'Complex Field',
+            tipEmailField: 'Insert email address',
+            tipPhoneField: 'Insert phone number',
+            tipComplexField: 'Insert complex field'
         }
     }()), DE.Views.FormsTab || {}));
 });