From c35bf4bdcdd7cba88ad211ed44aafb79b2016ae7 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 7 Oct 2020 10:43:34 +0300 Subject: [PATCH] [DE] Add Forms tab --- apps/documenteditor/main/app.js | 2 + .../main/app/controller/FormsTab.js | 252 +++++++++++++++++ .../main/app/controller/Toolbar.js | 8 +- .../main/app/template/Toolbar.template | 23 ++ apps/documenteditor/main/app/view/FormsTab.js | 261 ++++++++++++++++++ apps/documenteditor/main/app/view/Toolbar.js | 6 +- apps/documenteditor/main/app_dev.js | 2 + 7 files changed, 550 insertions(+), 4 deletions(-) create mode 100644 apps/documenteditor/main/app/controller/FormsTab.js create mode 100644 apps/documenteditor/main/app/view/FormsTab.js diff --git a/apps/documenteditor/main/app.js b/apps/documenteditor/main/app.js index bd53d3271..87306dd58 100644 --- a/apps/documenteditor/main/app.js +++ b/apps/documenteditor/main/app.js @@ -151,6 +151,7 @@ require([ 'Toolbar', 'Statusbar', 'Links', + 'FormsTab', 'Navigation', 'RightMenu', 'LeftMenu', @@ -176,6 +177,7 @@ require([ 'documenteditor/main/app/controller/DocumentHolder', 'documenteditor/main/app/controller/Toolbar', 'documenteditor/main/app/controller/Statusbar', + 'documenteditor/main/app/controller/FormsTab', 'documenteditor/main/app/controller/Links', 'documenteditor/main/app/controller/Navigation', 'documenteditor/main/app/controller/RightMenu', diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js new file mode 100644 index 000000000..3ce0ed8f9 --- /dev/null +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -0,0 +1,252 @@ +/* + * + * (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 + * + */ + +/** + * FormsTab.js + * + * Created by Julia Radzhabova on 06.10.2020 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core', + 'documenteditor/main/app/view/FormsTab' +], function () { + 'use strict'; + + DE.Controllers.FormsTab = Backbone.Controller.extend(_.extend({ + models : [], + collections : [ + ], + views : [ + 'FormsTab' + ], + sdkViewName : '#id_main', + + initialize: function () { + + this.addListeners({ + 'FormsTab': { + 'forms:insert': this.onControlsSelect, + 'forms:new-color': this.onNewControlsColor, + 'forms:clear': this.onClearClick, + 'forms:no-color': this.onNoControlsColor, + 'forms:select-color': this.onSelectControlsColor, + 'forms:mode': this.onModeClick + } + }); + }, + onLaunch: function () { + this._state = { + prcontrolsdisable:undefined, + in_object: false + }; + }, + + setApi: function (api) { + if (api) { + this.api = api; + this.api.asc_registerCallback('asc_onFocusObject', this.onApiFocusObject.bind(this)); + this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this)); + Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this)); + // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this)); + // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); + } + return this; + }, + + setConfig: function(config) { + this.toolbar = config.toolbar; + this.view = this.createView('FormsTab', { + toolbar: this.toolbar.toolbar + }); + }, + + SetDisabled: function(state) { + this.view && this.view.SetDisabled(state); + }, + + getView: function(name) { + return !name && this.view ? + this.view : Backbone.Controller.prototype.getView.call(this, name); + }, + + onCoAuthoringDisconnect: function() { + this.SetDisabled(true); + }, + + onApiFocusObject: function(selectedObjects) { + if (!this.toolbar.editMode) return; + + var pr, i = -1, type, + paragraph_locked = false, + header_locked = false, + in_header = false, + in_equation = false, + in_image = false, + in_table = false, + frame_pr = null; + + while (++i < selectedObjects.length) { + type = selectedObjects[i].get_ObjectType(); + pr = selectedObjects[i].get_ObjectValue(); + + if (type === Asc.c_oAscTypeSelectElement.Paragraph) { + paragraph_locked = pr.get_Locked(); + frame_pr = pr; + } else if (type === Asc.c_oAscTypeSelectElement.Header) { + header_locked = pr.get_Locked(); + in_header = true; + } else if (type === Asc.c_oAscTypeSelectElement.Image) { + in_image = true; + } else if (type === Asc.c_oAscTypeSelectElement.Math) { + in_equation = true; + } else if (type === Asc.c_oAscTypeSelectElement.Table) { + in_table = true; + } + } + this._state.prcontrolsdisable = paragraph_locked || header_locked; + this._state.in_object = in_image || in_table || in_equation; + + var control_props = this.api.asc_IsContentControl() ? this.api.asc_GetContentControlProperties() : null, + control_plain = (control_props) ? (control_props.get_ContentControlType()==Asc.c_oAscSdtLevelType.Inline) : false, + lock_type = control_props ? control_props.get_Lock() : Asc.c_oAscSdtLockType.Unlocked, + content_locked = lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.ContentLocked; + var rich_del_lock = (frame_pr) ? !frame_pr.can_DeleteBlockContentControl() : false, + rich_edit_lock = (frame_pr) ? !frame_pr.can_EditBlockContentControl() : false, + plain_del_lock = (frame_pr) ? !frame_pr.can_DeleteInlineContentControl() : false, + plain_edit_lock = (frame_pr) ? !frame_pr.can_EditInlineContentControl() : false; + + + var need_disable = paragraph_locked || in_equation || in_image || in_header || control_plain || rich_edit_lock || plain_edit_lock; + }, + + onControlsSelect: function(type) { + if (!(this.mode && this.mode.canFeatureContentControl)) return; + + if (item.value == 'settings' || item.value == 'remove') { + if (this.api.asc_IsContentControl()) { + var props = this.api.asc_GetContentControlProperties(); + if (props) { + var id = props.get_InternalId(); + if (item.value == 'settings') { + var me = this; + (new DE.Views.ControlSettingsDialog({ + props: props, + api: me.api, + controlLang: me._state.lang, + interfaceLang: me.mode.lang, + handler: function(result, value) { + if (result == 'ok') { + me.api.asc_SetContentControlProperties(value, id); + } + + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + } + })).show(); + + } else { + this.api.asc_RemoveContentControlWrapper(id); + Common.component.Analytics.trackEvent('ToolBar', 'Remove Content Control'); + } + } + } + } else { + var isnew = (item.value.indexOf('new-')==0), + oPr, oFormPr; + if (isnew) { + oFormPr = new AscCommon.CSdtFormPr(); + this.toolbar.fireEvent('insertcontrol', this.toolbar); + } + if (item.value == 'plain' || item.value == 'rich') + this.api.asc_AddContentControl((item.value=='plain') ? Asc.c_oAscSdtLevelType.Inline : Asc.c_oAscSdtLevelType.Block); + else if (item.value.indexOf('picture')>=0) + this.api.asc_AddContentControlPicture(oFormPr); + else if (item.value.indexOf('checkbox')>=0 || item.value.indexOf('radiobox')>=0) { + if (isnew) { + oPr = new AscCommon.CSdtCheckBoxPr(); + (item.value.indexOf('radiobox')>=0) && oPr.put_GroupKey('Group 1'); + } + this.api.asc_AddContentControlCheckBox(oPr, oFormPr); + } else if (item.value == 'date') + this.api.asc_AddContentControlDatePicker(); + else if (item.value.indexOf('combobox')>=0 || item.value.indexOf('dropdown')>=0) + this.api.asc_AddContentControlList(item.value.indexOf('combobox')>=0, oPr, oFormPr); + else if (item.value == 'new-field') { + oPr = new AscCommon.CSdtTextFormPr(); + this.api.asc_AddContentControlTextForm(oPr, oFormPr); + } + + Common.component.Analytics.trackEvent('ToolBar', 'Add Content Control'); + } + + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + }, + + onModeClick: function(state) { + if (this.api) { + + } + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + }, + + onClearClick: function() { + if (this.api) { + // this.api.asc_ClearControls(); + } + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + }, + + onNewControlsColor: function() { + this.view.mnuControlsColorPicker.addNewColor(); + }, + + onNoControlsColor: function(item) { + if (!item.isChecked()) + this.api.asc_SetGlobalContentControlShowHighlight(true, 220, 220, 220); + else + this.api.asc_SetGlobalContentControlShowHighlight(false); + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + }, + + onSelectControlsColor: function(color) { + var clr = Common.Utils.ThemeColor.getRgbColor(color); + if (this.api) { + this.api.asc_SetGlobalContentControlShowHighlight(true, clr.get_r(), clr.get_g(), clr.get_b()); + } + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + } + + }, DE.Controllers.FormsTab || {})); +}); \ No newline at end of file diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index c4a38d633..a21c44062 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -2981,7 +2981,7 @@ define([ var tab = {action: 'review', caption: me.toolbar.textTabCollaboration}; var $panel = me.application.getController('Common.Controllers.ReviewChanges').createToolbarPanel(); if ( $panel ) - me.toolbar.addTab(tab, $panel, 4); + me.toolbar.addTab(tab, $panel, 5); if ( config.isEdit ) { me.toolbar.setMode(config); @@ -3005,13 +3005,17 @@ define([ tab = {action: 'protect', caption: me.toolbar.textTabProtect}; $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel(); - if ($panel) me.toolbar.addTab(tab, $panel, 5); + if ($panel) me.toolbar.addTab(tab, $panel, 6); } } var links = me.getApplication().getController('Links'); links.setApi(me.api).setConfig({toolbar: me}); Array.prototype.push.apply(me.toolbar.toolbarControls, links.getView('Links').getButtons()); + + var forms = me.getApplication().getController('FormsTab'); + forms.setApi(me.api).setConfig({toolbar: me}); + Array.prototype.push.apply(me.toolbar.toolbarControls, forms.getView('FormsTab').getButtons()); } }, diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index ad2a425a7..ffc080110 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -161,6 +161,29 @@ +
+
+ + + + + + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js new file mode 100644 index 000000000..1ee02e88f --- /dev/null +++ b/apps/documenteditor/main/app/view/FormsTab.js @@ -0,0 +1,261 @@ +/* + * + * (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 + * + */ + +/** + * FormsTab.js + * + * Created by Julia Radzhabova on 06.10.2020 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/util/utils', + 'common/main/lib/component/BaseView', + 'common/main/lib/component/Layout' +], function () { + 'use strict'; + + DE.Views.FormsTab = Common.UI.BaseView.extend(_.extend((function(){ + function setEvents() { + var me = this; + this.btnTextField.on('click', function (b, e) { + me.fireEvent('forms:insert', ['text']); + }); + this.btnComboBox.on('click', function (b, e) { + me.fireEvent('forms:insert', ['combobox']); + }); + this.btnDropDown.on('click', function (b, e) { + me.fireEvent('forms:insert', ['dropdown']); + }); + this.btnCheckBox.on('click', function (b, e) { + me.fireEvent('forms:insert', ['checkbox']); + }); + this.btnRadioBox.on('click', function (b, e) { + me.fireEvent('forms:insert', ['radiobox']); + }); + this.btnImageField.on('click', function (b, e) { + me.fireEvent('forms:insert', ['image']); + }); + this.btnViewForm.on('click', function (b, e) { + me.fireEvent('forms:mode', [b.pressed]); + }); + 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'); + }); + this.mnuNoControlsColor.on('click', function (item) { + me.fireEvent('forms:no-color', [item]); + }); + this.mnuControlsColorPicker.on('select', function(picker, color) { + me.fireEvent('forms:select-color', [color]); + }); + } + + return { + + options: {}, + + initialize: function (options) { + Common.UI.BaseView.prototype.initialize.call(this); + this.toolbar = options.toolbar; + + this.paragraphControls = []; + + var me = this, + $host = me.toolbar.$el; + + this.btnTextField = new Common.UI.Button({ + parentEl: $host.find('#slot-btn-form-field'), + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-update', + caption: this.capBtnText, + disabled: true + }); + this.paragraphControls.push(this.btnTextField); + + this.btnComboBox = new Common.UI.Button({ + parentEl: $host.find('#slot-btn-form-combobox'), + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-update', + caption: this.capBtnComboBox, + disabled: true + }); + this.paragraphControls.push(this.btnComboBox); + + this.btnDropDown = new Common.UI.Button({ + parentEl: $host.find('#slot-btn-form-dropdown'), + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-update', + 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-update', + 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-update', + 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-update', + 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-update', + 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.Button({ + parentEl : $host.find('#slot-form-highlight'), + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-highlight', + caption : this.textHighlight, + disabled: true + }); + this.paragraphControls.push(this.btnHighlight); + + this._state = {disabled: false}; + Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); + }, + + render: function (el) { + return this; + }, + + onAppReady: function (config) { + var me = this; + (new Promise(function (accept, reject) { + accept(); + })).then(function(){ + me.btnHighlight.setMenu(new Common.UI.Menu({ + items: [ + me.mnuNoControlsColor = new Common.UI.MenuItem({ + id: 'id-toolbar-menu-no-highlight-form', + caption: me.textNoHighlight, + checkable: true + }), + {caption: '--'}, + {template: _.template('
')}, + {template: _.template('' + me.textNewColor + '')} + ] + })); + me.mnuControlsColorPicker = new Common.UI.ThemeColorPalette({ + el: $('#id-toolbar-menu-form-color') + }); + + 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); + + setEvents.call(me); + }); + }, + + show: function () { + Common.UI.BaseView.prototype.show.call(this); + this.fireEvent('show', this); + }, + + getButtons: function() { + return this.paragraphControls; + }, + + SetDisabled: function (state) { + this._state.disabled = state; + this.paragraphControls.forEach(function(button) { + if ( button ) { + button.setDisabled(state); + } + }, this); + }, + + capBtnText: 'Text Field', + capBtnComboBox: 'Combo Box', + capBtnDropDown: 'Dropdown', + capBtnCheckBox: 'Checkbox', + capBtnRadioBox: 'Radio Button', + capBtnImage: 'Image', + capBtnView: 'View Form', + textClearFields: 'Clear All Fields', + textHighlight: 'Highlight Settings', + tipTextField: 'Insert text field', + tipComboBox: 'Insert combo box', + tipDropDown: 'Insert dropdown list', + tipCheckBox: 'Insert checkbox', + tipRadioBox: 'Insert radio button', + tipImageField: 'Insert image', + tipViewForm: 'Fill form mode', + textNoHighlight: 'No highlighting', + textNewColor: 'Add New Custom Color' + } + }()), DE.Views.FormsTab || {})); +}); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 029d2ac39..da506268a 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -113,7 +113,8 @@ define([ {caption: me.textTabHome, action: 'home', extcls: 'canedit'}, {caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}, {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}, - {caption: me.textTabLinks, action: 'links', extcls: 'canedit'} + {caption: me.textTabLinks, action: 'links', extcls: 'canedit'}, + {caption: me.textTabForms, action: 'forms', extcls: 'canedit'} ] } ); @@ -2362,7 +2363,8 @@ define([ textNewComboboxControl: 'New combo box', textNewCheckboxControl: 'New check box', textNewRadioboxControl: 'New radio box', - textNewDropdownControl: 'New drop-down list' + textNewDropdownControl: 'New drop-down list', + textTabForms: 'Forms' } })(), DE.Views.Toolbar || {})); }); diff --git a/apps/documenteditor/main/app_dev.js b/apps/documenteditor/main/app_dev.js index ea9a07eba..b0333ef3f 100644 --- a/apps/documenteditor/main/app_dev.js +++ b/apps/documenteditor/main/app_dev.js @@ -141,6 +141,7 @@ require([ 'Toolbar', 'Statusbar', 'Links', + 'FormsTab', 'Navigation', 'RightMenu', 'LeftMenu', @@ -166,6 +167,7 @@ require([ 'documenteditor/main/app/controller/DocumentHolder', 'documenteditor/main/app/controller/Toolbar', 'documenteditor/main/app/controller/Links', + 'documenteditor/main/app/controller/FormsTab', 'documenteditor/main/app/controller/Navigation', 'documenteditor/main/app/controller/Statusbar', 'documenteditor/main/app/controller/RightMenu',