From 472427df94f4ed7fa04696cceaf98b4a5e80fd87 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Fri, 28 Jan 2022 17:01:31 +0300 Subject: [PATCH] [PE] Add placement tab in table advanced settings --- .../template/TableSettingsAdvanced.template | 56 +++++- .../main/app/view/DocumentHolder.js | 1 + .../main/app/view/TableSettings.js | 1 + .../main/app/view/TableSettingsAdvanced.js | 166 +++++++++++++++++- apps/presentationeditor/main/locale/en.json | 10 ++ 5 files changed, 231 insertions(+), 3 deletions(-) diff --git a/apps/presentationeditor/main/app/template/TableSettingsAdvanced.template b/apps/presentationeditor/main/app/template/TableSettingsAdvanced.template index 775b19368..bd404ed5d 100644 --- a/apps/presentationeditor/main/app/template/TableSettingsAdvanced.template +++ b/apps/presentationeditor/main/app/template/TableSettingsAdvanced.template @@ -1,4 +1,58 @@ -
+
+
+ + + + + + + + + +
+ +
+ +
+ 		+
+ 		+ +
+
+
+
+
+ + + + + + + + + + + + +
+ +
+ +
+ 		+ +
+
+ +
+ 		+ +
+
+
+
+
diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js index 11352f69c..13249995d 100644 --- a/apps/presentationeditor/main/app/view/DocumentHolder.js +++ b/apps/presentationeditor/main/app/view/DocumentHolder.js @@ -2484,6 +2484,7 @@ define([ (new PE.Views.TableSettingsAdvanced( { tableProps: elValue, + slideSize: PE.getController('Toolbar').currentPageSize, handler: function(result, value) { if (result == 'ok') { if (me.api) { diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js index d57f7764b..d08e62efb 100644 --- a/apps/presentationeditor/main/app/view/TableSettings.js +++ b/apps/presentationeditor/main/app/view/TableSettings.js @@ -763,6 +763,7 @@ define([ (new PE.Views.TableSettingsAdvanced( { tableProps: elValue, + slideSize: PE.getController('Toolbar').currentPageSize, handler: function(result, value) { if (result == 'ok') { if (me.api) { diff --git a/apps/presentationeditor/main/app/view/TableSettingsAdvanced.js b/apps/presentationeditor/main/app/view/TableSettingsAdvanced.js index 9e3f0b99b..48ea9b1a2 100644 --- a/apps/presentationeditor/main/app/view/TableSettingsAdvanced.js +++ b/apps/presentationeditor/main/app/view/TableSettingsAdvanced.js @@ -49,13 +49,15 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem alias: 'TableSettingsAdvanced', contentWidth: 280, height: 385, - storageName: 'pe-table-settings-adv-category' + storageName: 'pe-table-settings-adv-category', + sizeMax: {width: 142.24, height: 142.24}, }, initialize : function(options) { _.extend(this.options, { title: this.textTitle, items: [ + {panelId: 'id-adv-table-placement', panelCaption: this.textPlacement}, {panelId: 'id-adv-table-cell-props', panelCaption: this.textWidthSpaces}, {panelId: 'id-adv-table-alttext', panelCaption: this.textAlt} ], @@ -86,6 +88,7 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem this._initialMarginsDefault = false; // если для всех выделенных ячеек пришло одинаковое значение Flag=0 (Use Default Margins) this._originalProps = new Asc.CTableProp(this.options.tableProps); + this.slideSize = this.options.slideSize; }, render: function() { @@ -93,6 +96,113 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem var me = this; + // Placement + this.spnWidth = new Common.UI.MetricSpinner({ + el: $('#tableadv-spin-width'), + step: .1, + width: 100, + defaultUnit : "cm", + value: '3 cm', + maxValue: 142.24, + minValue: 0 + }); + this.spnWidth.on('change', _.bind(function(field){ + if (this.btnRatio.pressed) { + var w = field.getNumberValue(); + var h = w/this._nRatio; + if (h>this.sizeMax.height) { + h = this.sizeMax.height; + w = h * this._nRatio; + this.spnWidth.setValue(w, true); + } + this.spnHeight.setValue(h, true); + } + }, this)); + this.spinners.push(this.spnWidth); + + this.spnHeight = new Common.UI.MetricSpinner({ + el: $('#tableadv-spin-height'), + step: .1, + width: 100, + defaultUnit : "cm", + value: '3 cm', + maxValue: 142.24, + minValue: 0 + }); + this.spnHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + var h = field.getNumberValue(), w = null; + if (this.btnRatio.pressed) { + w = h * this._nRatio; + if (w>this.sizeMax.width) { + w = this.sizeMax.width; + h = w/this._nRatio; + this.spnHeight.setValue(h, true); + } + this.spnWidth.setValue(w, true); + } + }, this)); + this.spinners.push(this.spnHeight); + + this.btnRatio = new Common.UI.Button({ + parentEl: $('#tableadv-button-ratio'), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon advanced-btn-ratio', + style: 'margin-bottom: 1px;', + enableToggle: true, + hint: this.textKeepRatio + }); + this.btnRatio.on('click', _.bind(function(btn, e) { + if (btn.pressed && this.spnHeight.getNumberValue()>0) { + this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue(); + } + }, this)); + + this.spnX = new Common.UI.MetricSpinner({ + el: $('#tableadv-spin-x'), + step: .1, + width: 85, + defaultUnit : "cm", + defaultValue : 0, + value: '0 cm', + maxValue: 55.87, + minValue: -55.87 + }); + this.spinners.push(this.spnX); + + this.spnY = new Common.UI.MetricSpinner({ + el: $('#tableadv-spin-y'), + step: .1, + width: 85, + defaultUnit : "cm", + defaultValue : 0, + value: '0 cm', + maxValue: 55.87, + minValue: -55.87 + }); + this.spinners.push(this.spnY); + + this.cmbFromX = new Common.UI.ComboBox({ + el: $('#tableadv-combo-from-x'), + cls: 'input-group-nr', + style: "width: 100px;", + menuStyle: 'min-width: 100px;', + data: [ + { value: 'left', displayValue: this.textTopLeftCorner }, + { value: 'center', displayValue: this.textCenter } + ] + }); + + this.cmbFromY = new Common.UI.ComboBox({ + el: $('#tableadv-combo-from-y'), + cls: 'input-group-nr', + style: "width: 100px;", + menuStyle: 'min-width: 100px;', + data: [ + { value: 'left', displayValue: this.textTopLeftCorner }, + { value: 'center', displayValue: this.textCenter } + ] + }); + this._marginsChange = function(field, newValue, oldValue, eOpts, source, property){ if (source=='table') this.TableMargins[property] = field.getNumberValue(); @@ -352,6 +462,27 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem }, getSettings: function() { + if (this.spnHeight.getValue()!=='') + this._changedProps.put_FrameHeight(Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue())); + if (this.spnWidth.getValue()!=='') + this._changedProps.put_FrameWidth(Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue())); + //properties.asc_putLockAspect(this.btnRatio.pressed); + + if (this.spnX.getValue() !== '') { + var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue()); + if (this.cmbFromX.getValue() === 'center') { + x = (this.slideSize.width/36000)/2 + x; + } + this._changedProps.put_FrameX(x); + } + if (this.spnY.getValue() !== '') { + var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue()); + if (this.cmbFromY.getValue() === 'center') { + y = (this.slideSize.height/36000)/2 + y; + } + this._changedProps.put_FrameY(y); + } + if (this.isAltTitleChanged) this._changedProps.put_TableCaption(this.inputAltTitle.getValue()); @@ -365,6 +496,23 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem if (props ){ this._allTable = !props.get_CellSelect(); + // placement + this.spnWidth.setMaxValue(this.sizeMax.width); + this.spnHeight.setMaxValue(this.sizeMax.height); + this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_FrameWidth()).toFixed(2), true); + this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_FrameHeight()).toFixed(2), true); + + this.btnRatio.toggle(false); // to do + if (props.get_FrameHeight()>0) + this._nRatio = props.get_FrameWidth()/props.get_FrameHeight(); + + this.cmbFromX.setValue('left'); + this.cmbFromY.setValue('left'); + + var position = {x: props.get_FrameX(), y: props.get_FrameY()}; + this.spnX.setValue((position.x !== null && position.x !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(position.x) : '', true); + this.spnY.setValue((position.y !== null && position.y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(position.y) : '', true); + // margins var margins = props.get_DefaultMargins(); if (margins) { @@ -442,6 +590,10 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1); } } + this.sizeMax = { + width: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.width*10), + height: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.height*10) + }; }, textWidthSpaces: 'Margins', @@ -456,7 +608,17 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem textAlt: 'Alternative Text', textAltTitle: 'Title', textAltDescription: 'Description', - textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.' + textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.', + textPlacement: 'Placement', + textSize: 'Size', + textPosition: 'Position', + textHorizontal: 'Horizontal', + textVertical: 'Vertical', + textFrom: 'From', + textTopLeftCorner: 'Top Left Corner', + textCenter: 'Center', + textWidth: 'Width', + textHeight: 'Height' }, PE.Views.TableSettingsAdvanced || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index b480eb8b8..887436d59 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -2023,6 +2023,16 @@ "PE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings", "PE.Views.TableSettingsAdvanced.textTop": "Top", "PE.Views.TableSettingsAdvanced.textWidthSpaces": "Margins", + "PE.Views.TableSettingsAdvanced.textPlacement": "Placement", + "PE.Views.TableSettingsAdvanced.textSize": "Size", + "PE.Views.TableSettingsAdvanced.textWidth": "Width", + "PE.Views.TableSettingsAdvanced.textHeight": "Height", + "PE.Views.TableSettingsAdvanced.textPosition": "Position", + "PE.Views.TableSettingsAdvanced.textHorizontal": "Horizontal", + "PE.Views.TableSettingsAdvanced.textVertical": "Vertical", + "PE.Views.TableSettingsAdvanced.textFrom": "From", + "PE.Views.TableSettingsAdvanced.textTopLeftCorner": "Top Left Corner", + "PE.Views.TableSettingsAdvanced.textCenter": "Center", "PE.Views.TextArtSettings.strBackground": "Background color", "PE.Views.TextArtSettings.strColor": "Color", "PE.Views.TextArtSettings.strFill": "Fill",