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