From d62145b4843de64b18ff22185ad20550c5bf0d0c Mon Sep 17 00:00:00 2001
From: Julia Svinareva <julia.svinaryova@onlyoffice.com>
Date: Fri, 20 Sep 2019 10:08:10 +0300
Subject: [PATCH] [DE] Caption Dialog (textcaption, add label, delete label)

---
 .../main/app/view/CaptionDialog.js            | 95 ++++++++++++++++---
 1 file changed, 84 insertions(+), 11 deletions(-)

diff --git a/apps/documenteditor/main/app/view/CaptionDialog.js b/apps/documenteditor/main/app/view/CaptionDialog.js
index 68b63cddc..5ee7f3958 100644
--- a/apps/documenteditor/main/app/view/CaptionDialog.js
+++ b/apps/documenteditor/main/app/view/CaptionDialog.js
@@ -145,6 +145,9 @@ define([
                 allowBlank  : false,
                 value       : ''
             });
+            var $captionInput = this.txtCaption.$el.find('input');
+            $captionInput.on('mouseup', _.bind(this.checkStartPosition, this, 'mouse'));
+            $captionInput.on('keydown', _.bind(this.checkStartPosition, this, 'key'));
 
             this.cmbPosition = new Common.UI.ComboBox({
                 el: $('#caption-combo-position'),
@@ -179,32 +182,72 @@ define([
             this.cmbLabel = new Common.UI.ComboBox({
                 el: $('#caption-combo-label'),
                 cls: 'input-group-nr',
-                menuStyle: 'min-width: 160px;max-height:135px;',
+                menuStyle: 'min-width: 160px;max-height:155px;',
                 editable: true,
-                data: this.arrLabel
+                data: this.arrLabel,
+                alwaysVisibleY: true
             });
+            this.cmbLabel.scroller = new Common.UI.Scroller({
+                el: this.cmbLabel.$el.find('ul'),
+                useKeyboard: true,
+                alwaysVisibleY: true
+            });
+            this.cmbLabel.scroller.update({alwaysVisibleY: true});
             this.cmbLabel.on('selected', function(combo, record) {
-                me.props.put_Label(record.value);
+                var value = record.value;
+                me.props.put_Label(value);
                 me.props.updateName();
                 me.txtCaption.setValue(me.props.get_Name());
-                var custom = (record.type==1);
-                me.btnAdd.setDisabled(true);
+                var custom = (record.type==1),
+                    find = _.findWhere(me.arrLabel, {value: value}) ? true : false;
+                me.btnAdd.setDisabled(find);
                 me.btnDelete.setDisabled(!custom);
+                me.currentLabel = value;
+                me.positionCaption = me.txtCaption.getValue().length;
             });
+            this.cmbLabel.on('changed:before', _.bind(function(field) {
+                var value = field.getRawValue(),
+                    disebled = _.findWhere(this.arrLabel, {value: value}) ? true : false;
+                if (!value) {
+                    Common.UI.error({
+                        msg  : this.textLabelError
+                    });
+                    this.cmbLabel.setValue(this.currentLabel);
+                    disebled = true;
+                }
+                this.btnAdd.setDisabled(disebled);
+            }, this));
             this.cmbLabel.selectRecord(this.cmbLabel.store.at(this.arrLabel.length-1));
 
             this.btnAdd = new Common.UI.Button({
                 el: $('#caption-btn-add'),
                 disabled: true
             });
-            // this.btnAdd.on('click', _.bind(this.addLabel, this));
+            this.btnAdd.on('click', _.bind(function (e) {
+                var value = this.cmbLabel.getRawValue();
+                if (value) {
+                    var rec = { displayValue: value,  value: value, type: 1 };
+                    this.arrLabel.unshift(rec);
+                    this.cmbLabel.setData(this.arrLabel);
+                    this.cmbLabel.setValue(value);
+                    this.cmbLabel.trigger('selected', this.cmbLabel, rec);
+                    this.cmbLabel.scroller.update({alwaysVisibleY: true});
+                }
+            }, this));
 
             this.btnDelete = new Common.UI.Button({
                 el: $('#caption-btn-delete'),
                 disabled: true
             });
-            this.btnDelete.on('click', function() {
-            });
+            this.btnDelete.on('click', _.bind(function (e) {
+                var value = this.cmbLabel.getValue();
+                this.arrLabel = _.reject(this.arrLabel, function (item) {
+                    return item.value === value;
+                });
+                this.cmbLabel.setData(this.arrLabel);
+                this.cmbLabel.setValue(this.arrLabel[0].value);
+                this.cmbLabel.trigger('selected', this.cmbLabel, this.arrLabel[0]);
+            }, this));
 
             this.chExclude = new Common.UI.CheckBox({
                 el: $('#caption-checkbox-exclude'),
@@ -303,7 +346,7 @@ define([
         },
 
         close: function() {
-            var val = _.pluck(_.where(this.arrLabel, {value: 1}), 'displayValue').join(';');
+            var val = _.pluck(_.where(this.arrLabel, {type: 1}), 'displayValue').join(';');
             Common.localStorage.setItem("de-settings-captions", val);
             Common.Utils.InternalSettings.set("de-settings-captions", val);
 
@@ -313,7 +356,8 @@ define([
         _setDefaults: function (props) {
             this.props = new Asc.CAscCaptionProperties();
             this.props.put_Before(!!this.cmbPosition.getValue());
-            this.props.put_Label(this.cmbLabel.getValue());
+            var valueLabel = this.cmbLabel.getValue();
+            this.props.put_Label(valueLabel);
             var value = this.cmbLabel.getSelectedRecord();
             this.btnDelete.setDisabled(!value || value.type==0);
             this.props.put_ExcludeLabel(this.chExclude.getValue()=='checked');
@@ -323,6 +367,8 @@ define([
             this.props.put_Separator(this.cmbSeparator.getValue());
             this.props.updateName();
             this.txtCaption.setValue(this.props.get_Name());
+            this.currentLabel = valueLabel;
+            this.positionCaption = this.txtCaption.getValue().length;
         },
 
         getSettings: function () {
@@ -343,6 +389,32 @@ define([
             this.close();
         },
 
+        checkStartPosition: function (type, event) {
+            var me = this,
+                key = event.key,
+                start = event.target.selectionStart,
+                end = event.target.selectionEnd;
+            if (type === 'mouse' || key === 'ArrowLeft' || key === 'ArrowDown') {
+                setTimeout(function () {
+                    if (start < me.positionCaption + 1) {
+                        event.target.selectionStart = me.positionCaption;
+                    }
+                }, );
+            } else if (key === 'ArrowUp') {
+                setTimeout(function () {
+                    event.target.selectionStart = me.positionCaption;
+                }, );
+            }  else if (key === 'Backspace') {
+                if ((start === end && start < me.positionCaption + 1) || start < me.positionCaption - 1) {
+                    event.preventDefault();
+                }
+            } else if (key === 'Delete') {
+                if (start < me.positionCaption - 1) {
+                    event.preventDefault();
+                }
+            }
+        },
+
         textTitle:    'Insert Caption',
         textCaption: 'Caption',
         textInsert: 'Insert',
@@ -364,7 +436,8 @@ define([
         textEquation: 'Equation',
         textFigure: 'Figure',
         textTable: 'Table',
-        textExclude: 'Exclude label from caption'
+        textExclude: 'Exclude label from caption',
+        textLabelError: 'The entered value is incorrect.'
 
     }, DE.Views.CaptionDialog || {}))
 });
\ No newline at end of file