[DE] Insert content controls.

apps/common/main/resources/less/toolbar.less

@@ -293,3 +293,4 @@
 .button-normal-icon(btn-img-bkwd,         27, @toolbar-big-icon-size);
 .button-normal-icon(btn-img-frwd,         28, @toolbar-big-icon-size);
 .button-normal-icon(btn-img-wrap,         29, @toolbar-big-icon-size);
+.button-normal-icon(btn-controls,         18, @toolbar-big-icon-size);

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

@@ -56,7 +56,8 @@ define([
     'documenteditor/main/app/view/PageSizeDialog',
     'documenteditor/main/app/view/NoteSettingsDialog',
     'documenteditor/main/app/controller/PageLayout',
-    'documenteditor/main/app/view/CustomColumnsDialog'
+    'documenteditor/main/app/view/CustomColumnsDialog',
+    'documenteditor/main/app/view/ControlSettingsDialog'
 ], function () {
     'use strict';
 
@@ -283,6 +284,7 @@ define([
             toolbar.btnInsertText.on('click',                           _.bind(this.onBtnInsertTextClick, this));
             toolbar.btnInsertShape.menu.on('hide:after',                _.bind(this.onInsertShapeHide, this));
             toolbar.btnDropCap.menu.on('item:click',                    _.bind(this.onDropCapSelect, this));
+            toolbar.btnContentControls.menu.on('item:click',            _.bind(this.onControlsSelect, this));
             toolbar.mnuDropCapAdvanced.on('click',                      _.bind(this.onDropCapAdvancedClick, this));
             toolbar.btnColumns.menu.on('item:click',                    _.bind(this.onColumnsSelect, this));
             toolbar.btnPageOrient.menu.on('item:click',                 _.bind(this.onPageOrientSelect, this));
@@ -640,7 +642,8 @@ define([
                 in_chart = false,
                 in_equation = false,
                 btn_eq_state = false,
-                in_image = false;
+                in_image = false,
+                in_control = false;
 
             while (++i < selectedObjects.length) {
                 type = selectedObjects[i].get_ObjectType();
@@ -720,6 +723,19 @@ define([
             if ( !toolbar.btnDropCap.isDisabled() )
                 toolbar.mnuDropCapAdvanced.setDisabled(disable_dropcapadv);
 
+            if (!paragraph_locked && !header_locked) {
+                in_control = this.api.asc_IsContentControl();
+                var control_props = in_control ? this.api.asc_GetContentControlProperties() : null,
+                    lock_type = (in_control&&control_props) ? control_props.get_Lock() : AscCommonWord.sdtlock_Unlocked,
+                    control_plain = (in_control&&control_props) ? (control_props.get_ContentControlType()==AscCommonWord.sdttype_InlineLevel) : false;
+                (lock_type===undefined) && (lock_type = AscCommonWord.sdtlock_Unlocked);
+
+                toolbar.btnContentControls.menu.items[0].setDisabled(control_plain || lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_ContentLocked);
+                toolbar.btnContentControls.menu.items[1].setDisabled(control_plain || lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_ContentLocked);
+                toolbar.btnContentControls.menu.items[2].setDisabled(!in_control || lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_SdtLocked);
+                toolbar.btnContentControls.menu.items[4].setDisabled(!in_control);
+            }
+
             need_disable = !can_add_table || header_locked || in_equation;
             toolbar.btnInsertTable.setDisabled(need_disable);
 
@@ -1667,6 +1683,40 @@ define([
             }
         },
 
+        onControlsSelect: function(menu, item) {
+            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,
+                                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 {
+                this.api.asc_AddContentControl(item.value);
+                Common.component.Analytics.trackEvent('ToolBar', 'Add Content Control');
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
         onColumnsSelect: function(menu, item) {
             if (_.isUndefined(item.value))
                 return;

apps/documenteditor/main/app/template/Toolbar.template

@@ -138,6 +138,10 @@
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-dropcap"></span>
                 </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-controls"></span>
+                </div>
             </section>
             <section class="panel" data-tab="layout">
                 <div class="group">

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

@@ -0,0 +1,207 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+
+/**
+ *  ControlSettingsDialog.js.js
+ *
+ *  Created by Julia Radzhabova on 12.12.2017
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/CheckBox',
+    'common/main/lib/component/InputField',
+    'common/main/lib/view/AdvancedSettingsWindow'
+], function () { 'use strict';
+
+    DE.Views.ControlSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+        options: {
+            contentWidth: 300,
+            height: 250
+        },
+
+        initialize : function(options) {
+            var me = this;
+
+            _.extend(this.options, {
+                title: this.textTitle,
+                template: [
+                    '<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
+                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
+                            '<div class="settings-panel active">',
+                                '<table cols="1" style="width: 100%;">',
+                                '<tr>',
+                                    '<td class="padding-large">',
+                                        '<label class="input-label">', me.textName, '</label>',
+                                        '<div id="control-settings-txt-name"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '<tr>',
+                                    '<td class="padding-large">',
+                                        '<label class="input-label">', me.textTag, '</label>',
+                                        '<div id="control-settings-txt-tag"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '<tr>',
+                                    '<td class="padding-small">',
+                                        '<div id="control-settings-chb-lock-delete"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '<tr>',
+                                    '<td class="padding-small">',
+                                        '<div id="control-settings-chb-lock-edit"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '</table>',
+                            '</div></div>',
+                        '</div>',
+                    '</div>',
+                    '<div class="footer center">',
+                    '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + me.okButtonText + '</button>',
+                    '<button class="btn normal dlg-btn" result="cancel">' + me.cancelButtonText + '</button>',
+                    '</div>'
+                ].join('')
+            }, options);
+
+            this.api        = options.api;
+            this.handler    = options.handler;
+            this.props      = options.props;
+
+            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+        },
+
+        render: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+            var me = this;
+
+            this.txtName = new Common.UI.InputField({
+                el          : $('#control-settings-txt-name'),
+                allowBlank  : true,
+                validateOnChange: false,
+                validateOnBlur: false,
+                style       : 'width: 100%;',
+                value       : ''
+            });
+
+            this.txtTag = new Common.UI.InputField({
+                el          : $('#control-settings-txt-tag'),
+                allowBlank  : true,
+                validateOnChange: false,
+                validateOnBlur: false,
+                style       : 'width: 100%;',
+                value       : ''
+            });
+
+            this.chLockDelete = new Common.UI.CheckBox({
+                el: $('#control-settings-chb-lock-delete'),
+                labelText: this.txtLockDelete
+            });
+
+            this.chLockEdit = new Common.UI.CheckBox({
+                el: $('#control-settings-chb-lock-edit'),
+                labelText: this.txtLockEdit
+            });
+
+            this.afterRender();
+        },
+
+        afterRender: function() {
+            this._setDefaults(this.props);
+        },
+
+        show: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+        },
+
+        _setDefaults: function (props) {
+            if (props) {
+                var val = props.get_Id();
+                this.txtName.setValue(val ? val : '');
+
+                val = props.get_Tag();
+                this.txtTag.setValue(val ? val : '');
+
+                val = props.get_Lock();
+                (val===undefined) && (val = AscCommonWord.sdtlock_Unlocked);
+                this.chLockDelete.setValue(val==AscCommonWord.sdtlock_SdtContentLocked || val==AscCommonWord.sdtlock_SdtLocked);
+                this.chLockEdit.setValue(val==AscCommonWord.sdtlock_SdtContentLocked || val==AscCommonWord.sdtlock_ContentLocked);
+            }
+        },
+
+        getSettings: function () {
+            var props   = new AscCommonWord.CContentControlPr();
+
+
+            props.put_Id(this.txtName.getValue());
+            props.put_Tag(this.txtTag.getValue());
+
+
+            var lock = AscCommonWord.sdtlock_Unlocked;
+
+            if (this.chLockDelete.getValue()=='checked' && this.chLockEdit.getValue()=='checked')
+                lock = AscCommonWord.sdtlock_SdtContentLocked;
+            else if (this.chLockDelete.getValue()=='checked')
+                lock = AscCommonWord.sdtlock_SdtLocked;
+            else if (this.chLockEdit.getValue()=='checked')
+                lock = AscCommonWord.sdtlock_ContentLocked;
+            props.put_Lock(lock);
+
+            return props;
+        },
+
+        onDlgBtnClick: function(event) {
+            var me = this;
+            var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event;
+            if (state == 'ok') {
+                this.handler && this.handler.call(this, state, this.getSettings());
+            }
+
+            this.close();
+        },
+
+        onPrimary: function() {
+            return true;
+        },
+
+        textTitle:    'Content Control Settings',
+        textName: 'Title',
+        textTag: 'Tag',
+        txtLockDelete: 'Content control cannot be deleted',
+        txtLockEdit: 'Contents cannot be edited',
+        cancelButtonText: 'Cancel',
+        okButtonText: 'Ok'
+
+    }, DE.Views.ControlSettingsDialog || {}))
+});

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

@@ -608,6 +608,36 @@ define([
                 });
                 this.paragraphControls.push(this.btnDropCap);
 
+                this.btnContentControls = new Common.UI.Button({
+                    id: 'tlbtn-controls',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-controls',
+                    caption: me.capBtnInsControls,
+                    menu: new Common.UI.Menu({
+                        cls: 'ppm-toolbar',
+                        items: [
+                            {
+                                caption: this.textRichControl,
+                                value: AscCommonWord.sdttype_BlockLevel
+                            },
+                            {
+                                caption: this.textPlainControl,
+                                value: AscCommonWord.sdttype_InlineLevel
+                            },
+                            {
+                                caption: this.textRemoveControl,
+                                value: 'remove'
+                            },
+                            {caption: '--'},
+                            {
+                                caption: this.mniEditControls,
+                                value: 'settings'
+                            }
+                        ]
+                    })
+                });
+                this.paragraphControls.push(this.btnContentControls);
+
                 this.btnColumns = new Common.UI.Button({
                     id: 'tlbtn-columns',
                     cls: 'btn-toolbar x-huge icon-top',
@@ -1270,6 +1300,7 @@ define([
                 _injectComponent('#slot-btn-instext', this.btnInsertText);
                 _injectComponent('#slot-btn-instextart', this.btnInsertTextArt);
                 _injectComponent('#slot-btn-dropcap', this.btnDropCap);
+                _injectComponent('#slot-btn-controls', this.btnContentControls);
                 _injectComponent('#slot-btn-columns', this.btnColumns);
                 _injectComponent('#slot-btn-inshyperlink', this.btnInsertHyperlink);
                 _injectComponent('#slot-btn-editheader', this.btnEditHeader);
@@ -1527,6 +1558,7 @@ define([
                 this.btnInsertShape.updateHint(this.tipInsertShape);
                 this.btnInsertEquation.updateHint(this.tipInsertEquation);
                 this.btnDropCap.updateHint(this.tipDropCap);
+                this.btnContentControls.updateHint(this.tipControls);
                 this.btnColumns.updateHint(this.tipColumns);
                 this.btnPageOrient.updateHint(this.tipPageOrient);
                 this.btnPageSize.updateHint(this.tipPageSize);
@@ -2470,7 +2502,13 @@ define([
             capBtnComment: 'Comment',
             textColumnsCustom: 'Custom Columns',
             textSurface: 'Surface',
-            textTabProtect: 'Protection'
+            textTabProtect: 'Protection',
+            capBtnInsControls: 'Content Controls',
+            textRichControl: 'Insert rich text content control',
+            textPlainControl: 'Insert plain text content control',
+            textRemoveControl: 'Remove content control',
+            mniEditControls: 'Control Settings',
+            tipControls: 'Insert content controls'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -783,6 +783,13 @@
   "DE.Views.ChartSettings.txtTight": "Tight",
   "DE.Views.ChartSettings.txtTitle": "Chart",
   "DE.Views.ChartSettings.txtTopAndBottom": "Top and bottom",
+  "DE.Views.ControlSettingsDialog.textTitle": "Content Control Settings",
+  "DE.Views.ControlSettingsDialog.textName": "Title",
+  "DE.Views.ControlSettingsDialog.textTag": "Tag",
+  "DE.Views.ControlSettingsDialog.txtLockDelete": "Content control cannot be deleted",
+  "DE.Views.ControlSettingsDialog.txtLockEdit": "Contents cannot be edited",
+  "DE.Views.ControlSettingsDialog.cancelButtonText": "Cancel",
+  "DE.Views.ControlSettingsDialog.okButtonText": "Ok",
   "DE.Views.CustomColumnsDialog.cancelButtonText": "Cancel",
   "DE.Views.CustomColumnsDialog.okButtonText": "Ok",
   "DE.Views.CustomColumnsDialog.textColumns": "Number of columns",
@@ -1791,5 +1798,11 @@
   "DE.Views.Toolbar.txtScheme6": "Concourse",
   "DE.Views.Toolbar.txtScheme7": "Equity",
   "DE.Views.Toolbar.txtScheme8": "Flow",
-  "DE.Views.Toolbar.txtScheme9": "Foundry"
+  "DE.Views.Toolbar.txtScheme9": "Foundry",
+  "DE.Views.Toolbar.capBtnInsControls": "Content Controls",
+  "DE.Views.Toolbar.textRichControl": "Insert rich text content control",
+  "DE.Views.Toolbar.textPlainControl": "Insert plain text content control",
+  "DE.Views.Toolbar.textRemoveControl": "Remove content control",
+  "DE.Views.Toolbar.mniEditControls": "Control Settings",
+  "DE.Views.Toolbar.tipControls": "Insert content controls"
 }

apps/documenteditor/sdk_dev_scripts.js

@@ -12,6 +12,7 @@ var sdk_dev_scrpipts = [
 	"../../../../sdkjs/common/HistoryCommon.js",
 	"../../../../sdkjs/common/TableId.js",
 	"../../../../sdkjs/common/TableIdChanges.js",
+	"../../../../sdkjs/common/macros.js",
 	"../../../../sdkjs/common/NumFormat.js",
     "../../../../sdkjs/common/SerializeChart.js",
     "../../../../sdkjs/common/AdvancedOptions.js",