From 85f899410dc6b074feb1d1a762582feeafdba7c0 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 4 Feb 2021 23:19:43 +0300 Subject: [PATCH 1/8] [DE] Add tab Forms in the fill forms mode. Add prev/next, submit buttons --- .../main/app/controller/FormsTab.js | 26 +- .../main/app/controller/Main.js | 1 + .../main/app/controller/Toolbar.js | 18 +- .../main/app/template/Toolbar.template | 23 -- apps/documenteditor/main/app/view/FormsTab.js | 361 ++++++++++++------ apps/documenteditor/main/locale/en.json | 7 + 6 files changed, 278 insertions(+), 158 deletions(-) diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index facf19713..62aaf4e98 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -79,8 +79,10 @@ define([ setConfig: function(config) { this.toolbar = config.toolbar; + this.appConfig = config.config; this.view = this.createView('FormsTab', { - toolbar: this.toolbar.toolbar + toolbar: this.toolbar.toolbar, + config: config.config }); this.addListeners({ 'FormsTab': { @@ -89,7 +91,9 @@ define([ 'forms:clear': this.onClearClick, 'forms:no-color': this.onNoControlsColor, 'forms:select-color': this.onSelectControlsColor, - 'forms:mode': this.onModeClick + 'forms:mode': this.onModeClick, + 'forms:goto': this.onGoTo, + 'forms:submit': this.onSubmitClick } }); }, @@ -98,6 +102,10 @@ define([ this.view && this.view.SetDisabled(state); }, + createToolbarPanel: function() { + return this.view.getPanel(); + }, + getView: function(name) { return !name && this.view ? this.view : Backbone.Controller.prototype.getView.call(this, name); @@ -108,7 +116,7 @@ define([ }, onApiFocusObject: function(selectedObjects) { - if (!this.toolbar.editMode) return; + if (!this.toolbar.editMode || this.appConfig.isRestrictedEdit) return; var pr, i = -1, type, paragraph_locked = false, @@ -215,6 +223,16 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.toolbar); }, + onGoTo: function(type) { + // (type=='prev') ? this.api.asc_GoToPrevForm() : this.api.asc_GoToNextForm(); + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + }, + + onSubmitClick: function() { + // this.api.asc_SubmitForm(); + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + }, + disableEditing: function(disable) { if (this._state.DisabledEditing != disable) { this._state.DisabledEditing = disable; @@ -242,7 +260,7 @@ define([ (new Promise(function (accept, reject) { accept(); })).then(function(){ - if (config.canEditContentControl) { + if (config.canEditContentControl && me.view.btnHighlight) { var clr = me.api.asc_GetSpecialFormsHighlightColor(); clr && (clr = Common.Utils.ThemeColor.getHexColor(clr.get_r(), clr.get_g(), clr.get_b())); me.view.btnHighlight.currentColor = clr; diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 748c97bad..e02aac692 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -1291,6 +1291,7 @@ define([ this.appOptions.canProtect = (this.appOptions.isSignatureSupport || this.appOptions.isPasswordSupport); this.appOptions.canEditContentControl = (this.permissions.modifyContentControl!==false); this.appOptions.canHelp = !((typeof (this.editorConfig.customization) == 'object') && this.editorConfig.customization.help===false); + this.appOptions.canSubmitForms = this.appOptions.canLicense && (typeof (this.editorConfig.customization) == 'object') && !!this.editorConfig.customization.submitForm; this.appOptions.canFillForms = this.appOptions.canLicense && ((this.permissions.fillForms===undefined) ? this.appOptions.isEdit : this.permissions.fillForms) && (this.editorConfig.mode !== 'view'); this.appOptions.isRestrictedEdit = !this.appOptions.isEdit && (this.appOptions.canComments || this.appOptions.canFillForms); if (this.appOptions.isRestrictedEdit && this.appOptions.canComments && this.appOptions.canFillForms) // must be one restricted mode, priority for filling forms diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 233b6b8eb..19582aed3 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -3098,15 +3098,19 @@ define([ var links = me.getApplication().getController('Links'); links.setApi(me.api).setConfig({toolbar: me}); Array.prototype.push.apply(me.toolbar.toolbarControls, links.getView('Links').getButtons()); - - if (config.canFeatureContentControl) { - tab = {caption: me.textTabForms, action: 'forms'}; - var forms = me.getApplication().getController('FormsTab'); - forms.setApi(me.api).setConfig({toolbar: me}); + } + if ( config.isEdit && config.canFeatureContentControl || config.isRestrictedEdit && config.canFillForms ) { + tab = {caption: me.textTabForms, action: 'forms'}; + var forms = me.getApplication().getController('FormsTab'); + forms.setApi(me.api).setConfig({toolbar: me, config: config}); + $panel = forms.createToolbarPanel(); + if ($panel) { me.toolbar.addTab(tab, $panel, 4); me.toolbar.setVisible('forms', true); - Array.prototype.push.apply(me.toolbar.toolbarControls, forms.getView('FormsTab').getButtons()); - me.onChangeSdtGlobalSettings(); + if (config.isEdit && config.canFeatureContentControl) { + Array.prototype.push.apply(me.toolbar.toolbarControls, forms.getView('FormsTab').getButtons()); + me.onChangeSdtGlobalSettings(); + } } } }, diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index 69a8c91ca..1c6b32745 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -174,29 +174,6 @@ -
-
- - - - - - -
-
-
-
- -
-
- -
-
-
-
- -
-
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js index a878e1756..1e7dcc883 100644 --- a/apps/documenteditor/main/app/view/FormsTab.js +++ b/apps/documenteditor/main/app/view/FormsTab.js @@ -47,33 +47,67 @@ define([ 'use strict'; DE.Views.FormsTab = Common.UI.BaseView.extend(_.extend((function(){ + var template = + '
' + + '
' + + '' + + '' + + '' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
'; + function setEvents() { var me = this; - this.btnTextField.on('click', function (b, e) { + this.btnTextField && this.btnTextField.on('click', function (b, e) { me.fireEvent('forms:insert', ['text']); }); - this.btnComboBox.on('click', function (b, e) { + this.btnComboBox && this.btnComboBox.on('click', function (b, e) { me.fireEvent('forms:insert', ['combobox']); }); - this.btnDropDown.on('click', function (b, e) { + this.btnDropDown && this.btnDropDown.on('click', function (b, e) { me.fireEvent('forms:insert', ['dropdown']); }); - this.btnCheckBox.on('click', function (b, e) { + this.btnCheckBox && this.btnCheckBox.on('click', function (b, e) { me.fireEvent('forms:insert', ['checkbox']); }); - this.btnRadioBox.on('click', function (b, e) { + this.btnRadioBox && this.btnRadioBox.on('click', function (b, e) { me.fireEvent('forms:insert', ['radiobox']); }); - this.btnImageField.on('click', function (b, e) { + this.btnImageField && this.btnImageField.on('click', function (b, e) { me.fireEvent('forms:insert', ['picture']); }); - this.btnViewForm.on('click', function (b, e) { + this.btnViewForm && this.btnViewForm.on('click', function (b, e) { me.fireEvent('forms:mode', [b.pressed]); }); + this.btnClearFields && this.btnClearFields.on('click', function (b, e) { + me.fireEvent('forms:clear'); + }); + this.btnClear && this.btnClear.on('click', function (b, e) { + me.fireEvent('forms:clear'); + }); if (this.mnuFormsColorPicker) { - this.btnClearFields.on('click', function (b, e) { - me.fireEvent('forms:clear'); - }); $('#id-toolbar-menu-new-form-color').on('click', function (b, e) { me.fireEvent('forms:new-color'); }); @@ -87,6 +121,15 @@ define([ me.fireEvent('forms:open-color', [color]); }); } + this.btnPrevForm && this.btnPrevForm.on('click', function (b, e) { + me.fireEvent('forms:goto', ['prev']); + }); + this.btnNextForm && this.btnNextForm.on('click', function (b, e) { + me.fireEvent('forms:goto', ['next']); + }); + this.btnSubmit && this.btnSubmit.on('click', function (b, e) { + me.fireEvent('forms:submit'); + }); } return { @@ -96,148 +139,211 @@ define([ initialize: function (options) { Common.UI.BaseView.prototype.initialize.call(this); this.toolbar = options.toolbar; + this.appConfig = options.config; this.paragraphControls = []; - var me = this, - $host = me.toolbar.$el; + var me = this; - this.btnTextField = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-form-field'), + if (this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) { + this.btnClear = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-clear', + caption: this.textClear + }); + } else { + this.btnTextField = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-text-field', + caption: this.capBtnText, + disabled: true + }); + this.paragraphControls.push(this.btnTextField); + + this.btnComboBox = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-combo-box', + caption: this.capBtnComboBox, + disabled: true + }); + this.paragraphControls.push(this.btnComboBox); + + this.btnDropDown = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-dropdown', + caption: this.capBtnDropDown, + disabled: true + }); + this.paragraphControls.push(this.btnDropDown); + + this.btnCheckBox = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-checkbox', + caption: this.capBtnCheckBox, + disabled: true + }); + this.paragraphControls.push(this.btnCheckBox); + + this.btnRadioBox = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-radio-button', + caption: this.capBtnRadioBox, + disabled: true + }); + this.paragraphControls.push(this.btnRadioBox); + + this.btnImageField = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-insertimage', + caption: this.capBtnImage, + disabled: true + }); + this.paragraphControls.push(this.btnImageField); + + this.btnViewForm = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-sheet-view', + caption: this.capBtnView, + enableToggle: true, + disabled: true + }); + this.paragraphControls.push(this.btnViewForm); + + this.btnClearFields = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-clearstyle', + caption : this.textClearFields, + disabled: true + }); + this.paragraphControls.push(this.btnClearFields); + + this.btnHighlight = new Common.UI.ButtonColored({ + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-highlight', + caption : this.textHighlight, + menu : true, + disabled: true + }); + this.paragraphControls.push(this.btnHighlight); + } + + this.btnPrevForm = new Common.UI.Button({ cls: 'btn-toolbar x-huge icon-top', - iconCls: 'toolbar__icon btn-text-field', - caption: this.capBtnText, - disabled: true + iconCls: 'toolbar__icon btn-review-prev', + caption: this.capBtnPrev }); - this.paragraphControls.push(this.btnTextField); + this.paragraphControls.push(this.btnPrevForm); - this.btnComboBox = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-form-combobox'), + this.btnNextForm = new Common.UI.Button({ cls: 'btn-toolbar x-huge icon-top', - iconCls: 'toolbar__icon btn-combo-box', - caption: this.capBtnComboBox, - disabled: true + iconCls: 'toolbar__icon btn-review-next', + caption: this.capBtnNext }); - this.paragraphControls.push(this.btnComboBox); + this.paragraphControls.push(this.btnNextForm); - this.btnDropDown = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-form-dropdown'), - cls: 'btn-toolbar x-huge icon-top', - iconCls: 'toolbar__icon btn-dropdown', - caption: this.capBtnDropDown, - disabled: true - }); - this.paragraphControls.push(this.btnDropDown); - - this.btnCheckBox = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-form-checkbox'), - cls: 'btn-toolbar x-huge icon-top', - iconCls: 'toolbar__icon btn-checkbox', - caption: this.capBtnCheckBox, - disabled: true - }); - this.paragraphControls.push(this.btnCheckBox); - - this.btnRadioBox = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-form-radiobox'), - cls: 'btn-toolbar x-huge icon-top', - iconCls: 'toolbar__icon btn-radio-button', - caption: this.capBtnRadioBox, - disabled: true - }); - this.paragraphControls.push(this.btnRadioBox); - - this.btnImageField = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-form-image'), - cls: 'btn-toolbar x-huge icon-top', - iconCls: 'toolbar__icon btn-insertimage', - caption: this.capBtnImage, - disabled: true - }); - this.paragraphControls.push(this.btnImageField); - - this.btnViewForm = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-form-view'), - cls: 'btn-toolbar x-huge icon-top', - iconCls: 'toolbar__icon btn-sheet-view', - caption: this.capBtnView, - enableToggle: true, - disabled: true - }); - this.paragraphControls.push(this.btnViewForm); - - this.btnClearFields = new Common.UI.Button({ - parentEl : $host.find('#slot-form-clear-fields'), - cls : 'btn-toolbar', - iconCls : 'toolbar__icon btn-clearstyle', - caption : this.textClearFields, - disabled: true - }); - this.paragraphControls.push(this.btnClearFields); - - this.btnHighlight = new Common.UI.ButtonColored({ - parentEl : $host.find('#slot-form-highlight'), - cls : 'btn-toolbar', - iconCls : 'toolbar__icon btn-highlight', - caption : this.textHighlight, - menu : true, - disabled: true - }); - this.paragraphControls.push(this.btnHighlight); + if (this.appConfig.canSubmitForms) { + this.btnSubmit = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-form-submit', + caption: this.capBtnSubmit + }); + this.paragraphControls.push(this.btnSubmit); + } this._state = {disabled: false}; Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); }, render: function (el) { + if ( el ) el.html( this.getPanel() ); + return this; }, - + onAppReady: function (config) { var me = this; (new Promise(function (accept, reject) { accept(); })).then(function(){ - if (config.canEditContentControl) { - me.btnHighlight.setMenu(new Common.UI.Menu({ - items: [ - me.mnuNoFormsColor = new Common.UI.MenuItem({ - id: 'id-toolbar-menu-no-highlight-form', - caption: me.textNoHighlight, - checkable: true, - checked: me.btnHighlight.currentColor === null - }), - {caption: '--'}, - {template: _.template('
')}, - {template: _.template('' + me.textNewColor + '')} - ] - })); - me.mnuFormsColorPicker = new Common.UI.ThemeColorPalette({ - el: $('#id-toolbar-menu-form-color'), - colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600', - '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', - '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', - '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' - ], - value: me.btnHighlight.currentColor - }); - me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent'); - } else { - me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide(); - } + if (config.isEdit && config.canFeatureContentControl) { + if (config.canEditContentControl) { + me.btnHighlight.setMenu(new Common.UI.Menu({ + items: [ + me.mnuNoFormsColor = new Common.UI.MenuItem({ + id: 'id-toolbar-menu-no-highlight-form', + caption: me.textNoHighlight, + checkable: true, + checked: me.btnHighlight.currentColor === null + }), + {caption: '--'}, + {template: _.template('
')}, + {template: _.template('' + me.textNewColor + '')} + ] + })); + me.mnuFormsColorPicker = new Common.UI.ThemeColorPalette({ + el: $('#id-toolbar-menu-form-color'), + colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600', + '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', + '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', + '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' + ], + value: me.btnHighlight.currentColor + }); + me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent'); + } else { + me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide(); + } - me.btnTextField.updateHint(me.tipTextField); - me.btnComboBox.updateHint(me.tipComboBox); - me.btnDropDown.updateHint(me.tipDropDown); - me.btnCheckBox.updateHint(me.tipCheckBox); - me.btnRadioBox.updateHint(me.tipRadioBox); - me.btnImageField.updateHint(me.tipImageField); - me.btnViewForm.updateHint(me.tipViewForm); + me.btnTextField.updateHint(me.tipTextField); + me.btnComboBox.updateHint(me.tipComboBox); + me.btnDropDown.updateHint(me.tipDropDown); + me.btnCheckBox.updateHint(me.tipCheckBox); + me.btnRadioBox.updateHint(me.tipRadioBox); + me.btnImageField.updateHint(me.tipImageField); + me.btnViewForm.updateHint(me.tipViewForm); + } else { + me.btnClear.updateHint(me.textClearFields); + + var separator_forms = me.$el.find('.separator.forms'); + separator_forms.prev('.group').hide(); + separator_forms.hide().next('.group').hide(); + !me.btnSubmit && me.$el.find('.separator.submit').hide().next('.group').hide(); + } + me.btnPrevForm.updateHint(me.tipPrevForm); + me.btnNextForm.updateHint(me.tipNextForm); + me.btnSubmit && me.btnSubmit.updateHint(me.tipSubmit); setEvents.call(me); }); }, + getPanel: function () { + this.$el = $(_.template(template)( {} )); + var $host = this.$el; + + if (this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) { + this.btnClear.render($host.find('#slot-btn-form-clear')); + } else { + this.btnTextField.render($host.find('#slot-btn-form-field')); + this.btnComboBox.render($host.find('#slot-btn-form-combobox')); + this.btnDropDown.render($host.find('#slot-btn-form-dropdown')); + this.btnCheckBox.render($host.find('#slot-btn-form-checkbox')); + this.btnRadioBox.render($host.find('#slot-btn-form-radiobox')); + this.btnImageField.render($host.find('#slot-btn-form-image')); + 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.btnPrevForm.render($host.find('#slot-btn-form-prev')); + this.btnNextForm.render($host.find('#slot-btn-form-next')); + + if (this.appConfig.canSubmitForms) { + this.btnSubmit.render($host.find('#slot-btn-form-submit')); + } + + return this.$el; + }, + show: function () { Common.UI.BaseView.prototype.show.call(this); this.fireEvent('show', this); @@ -273,7 +379,14 @@ define([ tipImageField: 'Insert image', tipViewForm: 'Fill form mode', textNoHighlight: 'No highlighting', - textNewColor: 'Add New Custom Color' + textNewColor: 'Add New Custom Color', + textClear: 'Clear Fields', + capBtnPrev: 'Previous Field', + capBtnNext: 'Next Field', + capBtnSubmit: 'Submit', + tipPrevForm: 'Go to the previous field', + tipNextForm: 'Go to the next field', + tipSubmit: 'Submit form' } }()), DE.Views.FormsTab || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index d54acf085..ce13ed06d 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -1739,6 +1739,13 @@ "DE.Views.FormsTab.tipRadioBox": "Insert radio button", "DE.Views.FormsTab.tipTextField": "Insert text field", "DE.Views.FormsTab.tipViewForm": "Fill form mode", + "DE.Views.FormsTab.textClear": "Clear Fields", + "DE.Views.FormsTab.capBtnPrev": "Previous Field", + "DE.Views.FormsTab.capBtnNext": "Next Field", + "DE.Views.FormsTab.capBtnSubmit": "Submit", + "DE.Views.FormsTab.tipPrevForm": "Go to the previous field", + "DE.Views.FormsTab.tipNextForm": "Go to the next field", + "DE.Views.FormsTab.tipSubmit": "Submit form", "DE.Views.HeaderFooterSettings.textBottomCenter": "Bottom center", "DE.Views.HeaderFooterSettings.textBottomLeft": "Bottom left", "DE.Views.HeaderFooterSettings.textBottomPage": "Bottom of Page", From e37b10ea233b39d325ea4a249505d3f6bc1f2454 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 5 Feb 2021 14:16:03 +0300 Subject: [PATCH 2/8] [DE] Go to form fields --- apps/documenteditor/main/app/controller/FormsTab.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index 62aaf4e98..8b1b602e3 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -224,7 +224,8 @@ define([ }, onGoTo: function(type) { - // (type=='prev') ? this.api.asc_GoToPrevForm() : this.api.asc_GoToNextForm(); + if (this.api) + this.api.asc_MoveToFillingForm(type=='next'); Common.NotificationCenter.trigger('edit:complete', this.toolbar); }, From 5308f61223c73fe3aceb7122353bdc535d67e95d Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sat, 6 Feb 2021 14:58:40 +0300 Subject: [PATCH 3/8] Submit form --- .../main/app/controller/FormsTab.js | 25 +++++++++++++++++++ apps/documenteditor/main/app/view/FormsTab.js | 3 ++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index 8b1b602e3..5a7e4c7bc 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -70,6 +70,8 @@ define([ Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this)); this.api.asc_registerCallback('asc_onChangeSpecialFormsGlobalSettings', _.bind(this.onChangeSpecialFormsGlobalSettings, this)); Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); + this.api.asc_registerCallback('asc_onStartAction', _.bind(this.onLongActionBegin, this)); + this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this)); // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this)); // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); @@ -256,6 +258,29 @@ define([ } }, + onLongActionBegin: function(type, id) { + if (id==Asc.c_oAscAsyncAction['Submit'] && this.view.btnSubmit) { + this.view.btnSubmit.setDisabled(true); + } + }, + + onLongActionEnd: function(type, id) { + if (id==Asc.c_oAscAsyncAction['Submit'] && this.view.btnSubmit) { + this.view.btnSubmit.setDisabled(false); + if (!this.submitedTooltip) { + this.submitedTooltip = new Common.UI.SynchronizeTip({ + text: this.view.textSubmited, + extCls: 'no-arrow', + target: $(document.body) + }); + this.submitedTooltip.on('closeclick', function () { + this.submitedTooltip.hide(); + }, this); + } + this.submitedTooltip.show(); + } + }, + onAppReady: function (config) { var me = this; (new Promise(function (accept, reject) { diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js index 1e7dcc883..8b0c8a7b0 100644 --- a/apps/documenteditor/main/app/view/FormsTab.js +++ b/apps/documenteditor/main/app/view/FormsTab.js @@ -386,7 +386,8 @@ define([ capBtnSubmit: 'Submit', tipPrevForm: 'Go to the previous field', tipNextForm: 'Go to the next field', - tipSubmit: 'Submit form' + tipSubmit: 'Submit form', + textSubmited: 'Form submitted successfully' } }()), DE.Views.FormsTab || {})); }); \ No newline at end of file From d3f8f5ddcb1145a675e7797ee69cae4042473137 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 8 Feb 2021 17:29:18 +0300 Subject: [PATCH 4/8] [DE] Refactoring --- apps/documenteditor/main/app/controller/FormsTab.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index 5a7e4c7bc..3d4969409 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -271,7 +271,9 @@ define([ this.submitedTooltip = new Common.UI.SynchronizeTip({ text: this.view.textSubmited, extCls: 'no-arrow', - target: $(document.body) + showLink: false, + target: $('#editor-container'), + placement: 'top' }); this.submitedTooltip.on('closeclick', function () { this.submitedTooltip.hide(); From 616f77d34de19d3dd2a6e7e430ea9b3b97c86a96 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 8 Feb 2021 19:19:19 +0300 Subject: [PATCH 5/8] [DE] Change synchronize tip: show at the bottom of toolbar --- apps/common/main/lib/component/SynchronizeTip.js | 2 ++ apps/documenteditor/main/app/controller/FormsTab.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/common/main/lib/component/SynchronizeTip.js b/apps/common/main/lib/component/SynchronizeTip.js index d012a2d97..e317f4044 100644 --- a/apps/common/main/lib/component/SynchronizeTip.js +++ b/apps/common/main/lib/component/SynchronizeTip.js @@ -111,6 +111,8 @@ define([ } else if (this.placement == 'top') this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'}); + else if (this.placement == 'bottom') + this.cmpEl.css({top : (showxy.top+5) + this.target.height() + 'px', left: showxy.left + (this.target.width() - this.cmpEl.width())/2 + 'px'}); else if (this.placement == 'target') { this.cmpEl.css({top : (showxy.top+5) + 'px', left: (showxy.left+5) + 'px'}); } else {// left or right diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index 3d4969409..f2288075b 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -272,8 +272,8 @@ define([ text: this.view.textSubmited, extCls: 'no-arrow', showLink: false, - target: $('#editor-container'), - placement: 'top' + target: $('.toolbar'), + placement: 'bottom' }); this.submitedTooltip.on('closeclick', function () { this.submitedTooltip.hide(); From bf07d08dca68c1a3fbd5a0b78e7ceed65a7d300f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 9 Feb 2021 13:31:05 +0300 Subject: [PATCH 6/8] [DE] Submit form --- .../main/app/controller/FormsTab.js | 18 ++++++++++++++---- .../documenteditor/main/app/controller/Main.js | 7 ++++++- apps/documenteditor/main/locale/en.json | 2 ++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index f2288075b..f8eaad23f 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -70,8 +70,9 @@ define([ Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this)); this.api.asc_registerCallback('asc_onChangeSpecialFormsGlobalSettings', _.bind(this.onChangeSpecialFormsGlobalSettings, this)); Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); - this.api.asc_registerCallback('asc_onStartAction', _.bind(this.onLongActionBegin, this)); - this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this)); + this.api.asc_registerCallback('asc_onStartAction', _.bind(this.onLongActionBegin, this)); + this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this)); + this.api.asc_registerCallback('asc_onError', _.bind(this.onError, this)); // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this)); // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); @@ -232,7 +233,7 @@ define([ }, onSubmitClick: function() { - // this.api.asc_SubmitForm(); + this.api.asc_SendForm(); Common.NotificationCenter.trigger('edit:complete', this.toolbar); }, @@ -260,6 +261,8 @@ define([ onLongActionBegin: function(type, id) { if (id==Asc.c_oAscAsyncAction['Submit'] && this.view.btnSubmit) { + this._submitFail = false; + this.submitedTooltip && this.submitedTooltip.hide(); this.view.btnSubmit.setDisabled(true); } }, @@ -279,7 +282,14 @@ define([ this.submitedTooltip.hide(); }, this); } - this.submitedTooltip.show(); + !this._submitFail && this.submitedTooltip.show(); + } + }, + + onError: function(id, level, errData) { + if (id==Asc.c_oAscError.ID.Submit) { + this._submitFail = true; + this.submitedTooltip && this.submitedTooltip.hide(); } }, diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index f5e99aedc..8c4cee411 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -1662,6 +1662,10 @@ define([ config.msg = this.errorSetPassword; break; + case Asc.c_oAscError.ID.Submit: + config.msg = this.errorSubmit; + break; + default: config.msg = (typeof id == 'string') ? id : this.errorDefaultMessage.replace('%1', id); break; @@ -2833,7 +2837,8 @@ define([ textRenameLabel: 'Enter a name to be used for collaboration', textRenameError: 'User name must not be empty.', textLongName: 'Enter a name that is less than 128 characters.', - textGuest: 'Guest' + textGuest: 'Guest', + errorSubmit: 'Submit failed.' } })(), DE.Controllers.Main || {})) }); \ No newline at end of file diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index e5e8955cd..d5e0db48f 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -818,6 +818,7 @@ "DE.Controllers.Main.warnNoLicense": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only.
Contact %1 sales team for personal upgrade terms.", "DE.Controllers.Main.warnNoLicenseUsers": "You've reached the user limit for %1 editors. Contact %1 sales team for personal upgrade terms.", "DE.Controllers.Main.warnProcessRightsChange": "You have been denied the right to edit the file.", + "DE.Controllers.Main.errorSubmit": "Submit failed.", "DE.Controllers.Navigation.txtBeginning": "Beginning of document", "DE.Controllers.Navigation.txtGotoBeginning": "Go to the beginning of the document", "DE.Controllers.Statusbar.textHasChanges": "New changes have been tracked", @@ -1749,6 +1750,7 @@ "DE.Views.FormsTab.tipPrevForm": "Go to the previous field", "DE.Views.FormsTab.tipNextForm": "Go to the next field", "DE.Views.FormsTab.tipSubmit": "Submit form", + "DE.Views.FormsTab.textSubmited": "Form submitted successfully", "DE.Views.HeaderFooterSettings.textBottomCenter": "Bottom center", "DE.Views.HeaderFooterSettings.textBottomLeft": "Bottom left", "DE.Views.HeaderFooterSettings.textBottomPage": "Bottom of Page", From 6f20bddf013a2bfdb63823564e6d7b96d7732495 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 9 Feb 2021 16:39:27 +0300 Subject: [PATCH 7/8] [DE] Forms: show fill mode layout by default --- apps/documenteditor/main/app/view/FormsTab.js | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js index 8b0c8a7b0..feb673745 100644 --- a/apps/documenteditor/main/app/view/FormsTab.js +++ b/apps/documenteditor/main/app/view/FormsTab.js @@ -49,7 +49,7 @@ define([ DE.Views.FormsTab = Common.UI.BaseView.extend(_.extend((function(){ var template = '
' + - '
' + + '' + - '
' + - '
' + + '' + + '' + - '
' + - '
' + + '' + + '' + @@ -303,11 +303,6 @@ define([ me.btnViewForm.updateHint(me.tipViewForm); } else { me.btnClear.updateHint(me.textClearFields); - - var separator_forms = me.$el.find('.separator.forms'); - separator_forms.prev('.group').hide(); - separator_forms.hide().next('.group').hide(); - !me.btnSubmit && me.$el.find('.separator.submit').hide().next('.group').hide(); } me.btnPrevForm.updateHint(me.tipPrevForm); me.btnNextForm.updateHint(me.tipNextForm); @@ -321,8 +316,13 @@ define([ this.$el = $(_.template(template)( {} )); var $host = this.$el; + if (this.appConfig.canSubmitForms) { + this.btnSubmit.render($host.find('#slot-btn-form-submit')); + } + if (this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) { this.btnClear.render($host.find('#slot-btn-form-clear')); + this.btnSubmit && $host.find('.separator.submit').show().next('.group').show(); } else { this.btnTextField.render($host.find('#slot-btn-form-field')); this.btnComboBox.render($host.find('#slot-btn-form-combobox')); @@ -333,14 +333,15 @@ 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')); + + var separator_forms = $host.find('.separator.forms'); + separator_forms.prev('.group').show(); + separator_forms.show().next('.group').show(); + $host.find('.separator.submit').show().next('.group').show(); } this.btnPrevForm.render($host.find('#slot-btn-form-prev')); this.btnNextForm.render($host.find('#slot-btn-form-next')); - if (this.appConfig.canSubmitForms) { - this.btnSubmit.render($host.find('#slot-btn-form-submit')); - } - return this.$el; }, From b7089a734486c33731682db1e4ba6165d45e9736 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 9 Feb 2021 17:21:02 +0300 Subject: [PATCH 8/8] [DE] Show Forms tab in fill form mode --- apps/documenteditor/main/app/controller/Toolbar.js | 6 ++++-- apps/documenteditor/main/app/controller/Viewport.js | 8 ++++---- apps/documenteditor/main/app/view/Toolbar.js | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 556f46a17..996f94b33 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -3053,8 +3053,8 @@ define([ onAppShowed: function (config) { var me = this; - var compactview = !config.isEdit; - if ( config.isEdit ) { + var compactview = !(config.isEdit || config.isRestrictedEdit && config.canFillForms); + if ( config.isEdit || config.isRestrictedEdit && config.canFillForms) { if ( Common.localStorage.itemExists("de-compact-toolbar") ) { compactview = Common.localStorage.getBool("de-compact-toolbar"); } else @@ -3112,6 +3112,8 @@ define([ if (config.isEdit && config.canFeatureContentControl) { Array.prototype.push.apply(me.toolbar.toolbarControls, forms.getView('FormsTab').getButtons()); me.onChangeSdtGlobalSettings(); + } else if (!compactview) { + me.toolbar.setTab('forms'); } } } diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js index 5780631da..5f44a908a 100644 --- a/apps/documenteditor/main/app/controller/Viewport.js +++ b/apps/documenteditor/main/app/controller/Viewport.js @@ -165,7 +165,7 @@ define([ me.viewport.$el.attr('applang', me.appConfig.lang.split(/[\-_]/)[0]); - if ( !config.isEdit || + if ( !(config.isEdit || config.isRestrictedEdit && config.canFillForms) || ( !Common.localStorage.itemExists("de-compact-toolbar") && config.customization && config.customization.compactToolbar )) { @@ -205,8 +205,8 @@ define([ onAppReady: function (config) { var me = this; if ( me.header.btnOptions ) { - var compactview = !config.isEdit; - if ( config.isEdit ) { + var compactview = !(config.isEdit || config.isRestrictedEdit && config.canFillForms); + if ( config.isEdit || config.isRestrictedEdit && config.canFillForms) { if ( Common.localStorage.itemExists("de-compact-toolbar") ) { compactview = Common.localStorage.getBool("de-compact-toolbar"); } else @@ -223,7 +223,7 @@ define([ if (!config.isEdit) { me.header.mnuitemCompactToolbar.hide(); Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){ - if ((action=='plugins' || action=='review') && visible) { + if ((action=='plugins' || action=='review' || action=='forms') && visible) { me.header.mnuitemCompactToolbar.show(); } }, this)); diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 01e9a82d1..a9fed7bb6 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1281,7 +1281,7 @@ define([ me.$el.html(me.rendererComponents(me.$layout)); } else { me.$layout.find('.canedit').hide(); - me.$layout.addClass('folded'); + me.isCompactView && me.$layout.addClass('folded'); me.$el.html(me.$layout); }