From 2bf82e73a245a5405cdde0a558bab4d12c3367cd Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Wed, 7 Aug 2019 10:22:41 +0300 Subject: [PATCH] [PE] Change Paragraph - Advanced Settings --- .../main/app/controller/DocumentHolder.js | 13 + .../ParagraphSettingsAdvanced.template | 99 +++-- .../app/view/ParagraphSettingsAdvanced.js | 338 +++++++++++++++--- apps/presentationeditor/main/locale/en.json | 23 +- 4 files changed, 382 insertions(+), 91 deletions(-) diff --git a/apps/presentationeditor/main/app/controller/DocumentHolder.js b/apps/presentationeditor/main/app/controller/DocumentHolder.js index 48168be0d..e5bd95ede 100644 --- a/apps/presentationeditor/main/app/controller/DocumentHolder.js +++ b/apps/presentationeditor/main/app/controller/DocumentHolder.js @@ -63,6 +63,19 @@ var c_tableBorder = { BORDER_OUTER_TABLE: 13 // table border and outer cell borders }; +var c_paragraphTextAlignment = { + RIGHT: 0, + LEFT: 1, + CENTERED: 2, + JUSTIFIED: 3 +}; + +var c_paragraphSpecial = { + NONE_SPECIAL: 0, + FIRST_LINE: 1, + HANGING: 2 +}; + define([ 'core', 'presentationeditor/main/app/view/DocumentHolder' diff --git a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template index 961b81080..06eb74685 100644 --- a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template +++ b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template @@ -1,26 +1,57 @@
- - - - - - -
- -
- 		- -
- 		- -
-
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
- +
@@ -71,28 +102,28 @@
-
-
- -
-
-
+
+
-
-
+
+
+ +
+
+
+ +
+
-
- -
-
-
+
+
- - - + + +
\ No newline at end of file diff --git a/apps/presentationeditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/presentationeditor/main/app/view/ParagraphSettingsAdvanced.js index 8c16332fb..221196684 100644 --- a/apps/presentationeditor/main/app/view/ParagraphSettingsAdvanced.js +++ b/apps/presentationeditor/main/app/view/ParagraphSettingsAdvanced.js @@ -49,13 +49,14 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced PE.Views.ParagraphSettingsAdvanced = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { - contentWidth: 320, + contentWidth: 370, height: 394, toggleGroup: 'paragraph-adv-settings-group', storageName: 'pe-para-settings-adv-category' }, initialize : function(options) { + var me = this; _.extend(this.options, { title: this.textTitle, items: [ @@ -74,9 +75,43 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced this._noApply = true; this._tabListChanged = false; this.spinners = []; + this.FirstLine = undefined; + this.Spacing = null; this.api = this.options.api; this._originalProps = new Asc.asc_CParagraphProperty(this.options.paragraphProps); + + this._arrLineRule = [ + {displayValue: this.textAuto, defaultValue: 1, value: c_paragraphLinerule.LINERULE_AUTO, minValue: 0.5, step: 0.01, defaultUnit: ''}, + {displayValue: this.textExact, defaultValue: 5, value: c_paragraphLinerule.LINERULE_EXACT, minValue: 0.03, step: 0.01, defaultUnit: 'cm'} + ]; + + var curLineRule = this._originalProps.asc_getSpacing().get_LineRule(), + curItem = _.findWhere(this._arrLineRule, {value: curLineRule}); + this.CurLineRuleIdx = this._arrLineRule.indexOf(curItem); + + this._arrTextAlignment = [ + {displayValue: this.textLeft, value: c_paragraphTextAlignment.LEFT}, + {displayValue: this.textCentered, value: c_paragraphTextAlignment.CENTERED}, + {displayValue: this.textRight, value: c_paragraphTextAlignment.RIGHT}, + {displayValue: this.textJustified, value: c_paragraphTextAlignment.JUSTIFIED} + ]; + + this._arrSpecial = [ + {displayValue: this.textNoneSpecial, value: c_paragraphSpecial.NONE_SPECIAL, defaultValue: 0}, + {displayValue: this.textFirstLine, value: c_paragraphSpecial.FIRST_LINE, defaultValue: 12.7}, + {displayValue: this.textHanging, value: c_paragraphSpecial.HANGING, defaultValue: 12.7} + ]; + + this._arrTabAlign = [ + { value: 1, displayValue: this.textTabLeft }, + { value: 3, displayValue: this.textTabCenter }, + { value: 2, displayValue: this.textTabRight } + ]; + this._arrKeyTabAlign = []; + this._arrTabAlign.forEach(function(item) { + me._arrKeyTabAlign[item.value] = item.displayValue; + }); }, render: function() { @@ -86,24 +121,15 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced // Indents & Placement - this.numFirstLine = new Common.UI.MetricSpinner({ - el: $('#paragraphadv-spin-first-line'), - step: .1, - width: 85, - defaultUnit : "cm", - defaultValue : 0, - value: '0 cm', - maxValue: 55.87, - minValue: -55.87 + this.cmbTextAlignment = new Common.UI.ComboBox({ + el: $('#paragraphadv-spin-text-alignment'), + cls: 'input-group-nr', + editable: false, + data: this._arrTextAlignment, + style: 'width: 173px;', + menuStyle : 'min-width: 173px;' }); - this.numFirstLine.on('change', _.bind(function(field, newValue, oldValue, eOpts){ - if (this._changedProps) { - if (this._changedProps.get_Ind()===null || this._changedProps.get_Ind()===undefined) - this._changedProps.put_Ind(new Asc.asc_CParagraphInd()); - this._changedProps.get_Ind().put_FirstLine(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue())); - } - }, this)); - this.spinners.push(this.numFirstLine); + this.cmbTextAlignment.setValue(''); this.numIndentsLeft = new Common.UI.MetricSpinner({ el: $('#paragraphadv-spin-indent-left'), @@ -122,9 +148,6 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced this._changedProps.put_Ind(new Asc.asc_CParagraphInd()); this._changedProps.get_Ind().put_Left(Common.Utils.Metric.fnRecalcToMM(numval)); } - this.numFirstLine.setMinValue(-numval); - if (this.numFirstLine.getNumberValue() < -numval) - this.numFirstLine.setValue(-numval); }, this)); this.spinners.push(this.numIndentsLeft); @@ -147,6 +170,93 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced }, this)); this.spinners.push(this.numIndentsRight); + this.cmbSpecial = new Common.UI.ComboBox({ + el: $('#paragraphadv-spin-special'), + cls: 'input-group-nr', + editable: false, + data: this._arrSpecial, + style: 'width: 85px;', + menuStyle : 'min-width: 85px;' + }); + this.cmbSpecial.setValue(''); + this.cmbSpecial.on('selected', _.bind(this.onSpecialSelect, this)); + + this.numSpecialBy = new Common.UI.MetricSpinner({ + el: $('#paragraphadv-spin-special-by'), + step: .1, + width: 85, + defaultUnit : "cm", + defaultValue : 0, + value: '0 cm', + maxValue: 55.87, + minValue: 0 + }); + this.spinners.push(this.numSpecialBy); + this.numSpecialBy.on('change', _.bind(this.onFirstLineChange, this)); + + this.numSpacingBefore = new Common.UI.MetricSpinner({ + el: $('#paragraphadv-spin-spacing-before'), + step: .1, + width: 85, + value: '', + defaultUnit : "cm", + maxValue: 55.88, + minValue: 0, + allowAuto : true, + autoText : this.txtAutoText + }); + this.numSpacingBefore.on('change', _.bind(function (field, newValue, oldValue, eOpts) { + if (this.Spacing === null) { + var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty(); + this.Spacing = properties.asc_getSpacing(); + } + this.Spacing.Before = Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()); + }, this)); + this.spinners.push(this.numSpacingBefore); + + this.numSpacingAfter = new Common.UI.MetricSpinner({ + el: $('#paragraphadv-spin-spacing-after'), + step: .1, + width: 85, + value: '', + defaultUnit : "cm", + maxValue: 55.88, + minValue: 0, + allowAuto : true, + autoText : this.txtAutoText + }); + this.numSpacingAfter.on('change', _.bind(function (field, newValue, oldValue, eOpts) { + if (this.Spacing === null) { + var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty(); + this.Spacing = properties.asc_getSpacing(); + } + this.Spacing.After = Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()); + }, this)); + this.spinners.push(this.numSpacingAfter); + + this.cmbLineRule = new Common.UI.ComboBox({ + el: $('#paragraphadv-spin-line-rule'), + cls: 'input-group-nr', + editable: false, + data: this._arrLineRule, + style: 'width: 85px;', + menuStyle : 'min-width: 85px;' + }); + this.cmbLineRule.setValue(this.CurLineRuleIdx); + this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this)); + + this.numLineHeight = new Common.UI.MetricSpinner({ + el: $('#paragraphadv-spin-line-height'), + step: .01, + width: 85, + value: '', + defaultUnit : "", + maxValue: 132, + minValue: 0.5 + }); + this.spinners.push(this.numLineHeight); + this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this)); + // Font this.chStrike = new Common.UI.CheckBox({ @@ -211,7 +321,7 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced this.numTab = new Common.UI.MetricSpinner({ el: $('#paraadv-spin-tab'), step: .1, - width: 180, + width: 128, defaultUnit : "cm", value: '1.25 cm', maxValue: 55.87, @@ -222,7 +332,7 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced this.numDefaultTab = new Common.UI.MetricSpinner({ el: $('#paraadv-spin-default-tab'), step: .1, - width: 107, + width: 128, defaultUnit : "cm", value: '1.25 cm', maxValue: 55.87, @@ -238,7 +348,14 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced this.tabList = new Common.UI.ListView({ el: $('#paraadv-list-tabs'), emptyText: this.noTabs, - store: new Common.UI.DataViewStore() + store: new Common.UI.DataViewStore(), + template: _.template(['
'].join('')), + itemTemplate: _.template([ + '
', + '
<%= value %>
', + '
<%= displayTabAlign %>
', + '
' + ].join('')) }); this.tabList.store.comparator = function(rec) { return rec.get("tabPos"); @@ -253,24 +370,15 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced this.listenTo(this.tabList.store, 'remove', storechanged); this.listenTo(this.tabList.store, 'reset', storechanged); - this.radioLeft = new Common.UI.RadioBox({ - el: $('#paragraphadv-radio-left'), - labelText: this.textTabLeft, - name: 'asc-radio-tab', - checked: true - }); - - this.radioCenter = new Common.UI.RadioBox({ - el: $('#paragraphadv-radio-center'), - labelText: this.textTabCenter, - name: 'asc-radio-tab' - }); - - this.radioRight = new Common.UI.RadioBox({ - el: $('#paragraphadv-radio-right'), - labelText: this.textTabRight, - name: 'asc-radio-tab' + this.cmbAlign = new Common.UI.ComboBox({ + el : $('#paraadv-cmb-align'), + style : 'width: 128px;', + menuStyle : 'min-width: 128px;', + editable : false, + cls : 'input-group-nr', + data : this._arrTabAlign }); + this.cmbAlign.setValue(1); this.btnAddTab = new Common.UI.Button({ el: $('#paraadv-button-add-tab') @@ -299,18 +407,45 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced this._changedProps.get_Tabs().add_Tab(tab); }, this); } + + var horizontalAlign = this.cmbTextAlignment.getValue(); + this._changedProps.asc_putJc((horizontalAlign !== undefined && horizontalAlign !== null) ? horizontalAlign : c_paragraphTextAlignment.LEFT); + + if (this.Spacing !== null) { + this._changedProps.asc_putSpacing(this.Spacing); + } + return { paragraphProps: this._changedProps }; }, _setDefaults: function(props) { if (props ){ this._originalProps = new Asc.asc_CParagraphProperty(props); + this.FirstLine = (props.get_Ind() !== null) ? props.get_Ind().get_FirstLine() : null; this.numIndentsLeft.setValue((props.get_Ind() !== null && props.get_Ind().get_Left() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.get_Ind().get_Left()) : '', true); - this.numFirstLine.setMinValue(-this.numIndentsLeft.getNumberValue()); - this.numFirstLine.setValue((props.get_Ind() !== null && props.get_Ind().get_FirstLine() !== null ) ? Common.Utils.Metric.fnRecalcFromMM(props.get_Ind().get_FirstLine()) : '', true); this.numIndentsRight.setValue((props.get_Ind() !== null && props.get_Ind().get_Right() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.get_Ind().get_Right()) : '', true); + this.cmbTextAlignment.setValue((props.asc_getJc() !== undefined && props.asc_getJc() !== null) ? props.asc_getJc() : c_paragraphTextAlignment.CENTERED, true); + + if(this.CurSpecial === undefined) { + this.CurSpecial = (props.asc_getInd().get_FirstLine() === 0) ? c_paragraphSpecial.NONE_SPECIAL : ((props.asc_getInd().get_FirstLine() > 0) ? c_paragraphSpecial.FIRST_LINE : c_paragraphSpecial.HANGING); + } + this.cmbSpecial.setValue(this.CurSpecial); + this.numSpecialBy.setValue(this.FirstLine!== null ? Math.abs(Common.Utils.Metric.fnRecalcFromMM(this.FirstLine)) : '', true); + + this.numSpacingBefore.setValue((props.asc_getSpacing() !== null && props.asc_getSpacing().asc_getBefore() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.asc_getSpacing().asc_getBefore()) : '', true); + this.numSpacingAfter.setValue((props.asc_getSpacing() !== null && props.asc_getSpacing().asc_getAfter() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.asc_getSpacing().asc_getAfter()) : '', true); + + var linerule = props.asc_getSpacing().asc_getLineRule(); + this.cmbLineRule.setValue((linerule !== null) ? linerule : '', true); + + if(props.asc_getSpacing() !== null && props.asc_getSpacing().asc_getLine() !== null) { + this.numLineHeight.setValue((linerule==c_paragraphLinerule.LINERULE_AUTO) ? props.asc_getSpacing().asc_getLine() : Common.Utils.Metric.fnRecalcFromMM(props.asc_getSpacing().asc_getLine()), true); + } else { + this.numLineHeight.setValue('', true); + } + // Font this._noApply = true; this.chStrike.setValue((props.get_Strikeout() !== null && props.get_Strikeout() !== undefined) ? props.get_Strikeout() : 'indeterminate', true); @@ -339,7 +474,8 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced rec.set({ tabPos: pos, value: parseFloat(pos.toFixed(3)) + ' ' + Common.Utils.Metric.getCurrentMetricName(), - tabAlign: tab.get_Value() + tabAlign: tab.get_Value(), + displayTabAlign: this._arrKeyTabAlign[tab.get_Value()] }); arr.push(rec); } @@ -359,13 +495,19 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced for (var i=0; i 0 ) { + this.CurSpecial = c_paragraphSpecial.FIRST_LINE; + this.cmbSpecial.setValue(c_paragraphSpecial.FIRST_LINE); + } else if (value === 0) { + this.CurSpecial = c_paragraphSpecial.NONE_SPECIAL; + this.cmbSpecial.setValue(c_paragraphSpecial.NONE_SPECIAL); + } + this._changedProps.get_Ind().put_FirstLine(value); + } + }, + + onLineRuleSelect: function(combo, record) { + if (this.Spacing === null) { + var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty(); + this.Spacing = properties.asc_getSpacing(); + } + this.Spacing.LineRule = record.value; + var selectItem = _.findWhere(this._arrLineRule, {value: record.value}), + indexSelectItem = this._arrLineRule.indexOf(selectItem); + if ( this.CurLineRuleIdx !== indexSelectItem ) { + this.numLineHeight.setDefaultUnit(this._arrLineRule[indexSelectItem].defaultUnit); + this.numLineHeight.setMinValue(this._arrLineRule[indexSelectItem].minValue); + this.numLineHeight.setStep(this._arrLineRule[indexSelectItem].step); + if (this.Spacing.LineRule === c_paragraphLinerule.LINERULE_AUTO) { + this.numLineHeight.setValue(this._arrLineRule[indexSelectItem].defaultValue); + } else { + this.numLineHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(this._arrLineRule[indexSelectItem].defaultValue)); + } + this.CurLineRuleIdx = indexSelectItem; + } + }, + + onNumLineHeightChange: function(field, newValue, oldValue, eOpts) { + if ( this.cmbLineRule.getRawValue() === '' ) + return; + if (this.Spacing === null) { + var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty(); + this.Spacing = properties.asc_getSpacing(); + } + this.Spacing.Line = (this.cmbLineRule.getValue()==c_paragraphLinerule.LINERULE_AUTO) ? field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()); }, textTitle: 'Paragraph - Advanced Settings', strIndentsFirstLine: 'First line', - strIndentsLeftText: 'Left', - strIndentsRightText: 'Right', - strParagraphIndents: 'Indents & Placement', + strIndentsLeftText: 'Indent Left', + strIndentsRightText: 'Indent Right', + strParagraphIndents: 'Indents & Spacing', strParagraphFont: 'Font', cancelButtonText: 'Cancel', okButtonText: 'Ok', @@ -584,6 +797,23 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced textAlign: 'Alignment', textTabPosition: 'Tab Position', textDefault: 'Default Tab', - noTabs: 'The specified tabs will appear in this field' + noTabs: 'The specified tabs will appear in this field', + strIndentsTextAlignment: 'Text Alignment', + textLeft: 'Left', + textCentered: 'Centered', + textJustified: 'Justified', + textRight: 'Right', + strIndentsSpecial: 'Special', + textNoneSpecial: '(none)', + textFirstLine: 'First line', + textHanging: 'Hanging', + strIndentsSpecialBy: 'By', + strIndentsSpacingBefore: 'Spacing Before', + strIndentsSpacingAfter: 'Spacing After', + strIndentLineSpacingAt: 'At', + strIndentsLineSpacing: 'Line Spacing', + txtAutoText: 'Auto', + textAuto: 'Multiple', + textExact: 'Exactly' }, PE.Views.ParagraphSettingsAdvanced || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index ab8c21b38..893cae7f1 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -1326,10 +1326,10 @@ "PE.Views.ParagraphSettingsAdvanced.strAllCaps": "All caps", "PE.Views.ParagraphSettingsAdvanced.strDoubleStrike": "Double strikethrough", "PE.Views.ParagraphSettingsAdvanced.strIndentsFirstLine": "First Line", - "PE.Views.ParagraphSettingsAdvanced.strIndentsLeftText": "Left", - "PE.Views.ParagraphSettingsAdvanced.strIndentsRightText": "Right", + "PE.Views.ParagraphSettingsAdvanced.strIndentsLeftText": "Indent Left", + "PE.Views.ParagraphSettingsAdvanced.strIndentsRightText": "Indent Right", "PE.Views.ParagraphSettingsAdvanced.strParagraphFont": "Font", - "PE.Views.ParagraphSettingsAdvanced.strParagraphIndents": "Indents & Placement", + "PE.Views.ParagraphSettingsAdvanced.strParagraphIndents": "Indents & Spacing", "PE.Views.ParagraphSettingsAdvanced.strSmallCaps": "Small caps", "PE.Views.ParagraphSettingsAdvanced.strStrike": "Strikethrough", "PE.Views.ParagraphSettingsAdvanced.strSubscript": "Subscript", @@ -1347,6 +1347,23 @@ "PE.Views.ParagraphSettingsAdvanced.textTabPosition": "Tab Position", "PE.Views.ParagraphSettingsAdvanced.textTabRight": "Right", "PE.Views.ParagraphSettingsAdvanced.textTitle": "Paragraph - Advanced Settings", + "PE.Views.ParagraphSettingsAdvanced.strIndentsTextAlignment": "Text Alignment", + "PE.Views.ParagraphSettingsAdvanced.textLeft": "Left", + "PE.Views.ParagraphSettingsAdvanced.textCentered": "Centered", + "PE.Views.ParagraphSettingsAdvanced.textJustified": "Justified", + "PE.Views.ParagraphSettingsAdvanced.textRight": "Right", + "PE.Views.ParagraphSettingsAdvanced.strIndentsSpecial": "Special", + "PE.Views.ParagraphSettingsAdvanced.textNoneSpecial": "(none)", + "PE.Views.ParagraphSettingsAdvanced.textFirstLine": "First line", + "PE.Views.ParagraphSettingsAdvanced.textHanging": "Hanging", + "PE.Views.ParagraphSettingsAdvanced.strIndentsSpecialBy": "By", + "PE.Views.ParagraphSettingsAdvanced.strIndentsSpacingBefore": "Spacing Before", + "PE.Views.ParagraphSettingsAdvanced.strIndentsSpacingAfter": "Spacing After", + "PE.Views.ParagraphSettingsAdvanced.strIndentLineSpacingAt": "At", + "PE.Views.ParagraphSettingsAdvanced.strIndentsLineSpacing": "Line Spacing", + "PE.Views.ParagraphSettingsAdvanced.txtAutoText": "Auto", + "PE.Views.ParagraphSettingsAdvanced.textAuto": "Multiple", + "PE.Views.ParagraphSettingsAdvanced.textExact": "Exactly", "PE.Views.RightMenu.txtChartSettings": "Chart settings", "PE.Views.RightMenu.txtImageSettings": "Image settings", "PE.Views.RightMenu.txtParagraphSettings": "Text settings",
@@ -63,7 +94,7 @@
-
+