[PE] Add placement tab in table advanced settings

This commit is contained in:
JuliaSvinareva 2022-01-28 17:01:31 +03:00
parent 966722826f
commit 472427df94
5 changed files with 231 additions and 3 deletions

View file

@ -1,4 +1,58 @@
<div id="id-adv-table-cell-props" class="settings-panel active"> <div id="id-adv-table-placement" class="settings-panel active">
<div class="inner-content">
<table cols="3">
<tr>
<td colspan="3" width="88px" class="padding-small">
<label class="header"><%= scope.textSize %></label>
</td>
</tr>
<tr>
<td width="108px">
<label class="input-label"><%= scope.textWidth %></label>
<div id="tableadv-spin-width"></div>
</td>
<td width="28px" style="vertical-align: bottom;">
<div id="tableadv-button-ratio"></div>
</td>
<td width="108px">
<label class="input-label"><%= scope.textHeight %></label>
<div id="tableadv-spin-height"></div>
</td>
</tr>
</table>
</div>
<div class="padding-large"></div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
<td colspan="4" width="88px" class="padding-small">
<label class="header"><%= scope.textPosition %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="115px">
<label class="input-label"><%= scope.textHorizontal %></label>
<div id="tableadv-spin-x"></div>
</td>
<td class="padding-small">
<label class="input-label"><%= scope.textFrom %></label>
<div id="tableadv-combo-from-x"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="input-label"><%= scope.textVertical %></label>
<div id="tableadv-spin-y"></div>
</td>
<td class="padding-small">
<label class="input-label"><%= scope.textFrom %></label>
<div id="tableadv-combo-from-y"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-adv-table-cell-props" class="settings-panel">
<div class="inner-content"> <div class="inner-content">
<table cols="2" style="width: 100%;"> <table cols="2" style="width: 100%;">
<tr> <tr>

View file

@ -2484,6 +2484,7 @@ define([
(new PE.Views.TableSettingsAdvanced( (new PE.Views.TableSettingsAdvanced(
{ {
tableProps: elValue, tableProps: elValue,
slideSize: PE.getController('Toolbar').currentPageSize,
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { if (result == 'ok') {
if (me.api) { if (me.api) {

View file

@ -763,6 +763,7 @@ define([
(new PE.Views.TableSettingsAdvanced( (new PE.Views.TableSettingsAdvanced(
{ {
tableProps: elValue, tableProps: elValue,
slideSize: PE.getController('Toolbar').currentPageSize,
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { if (result == 'ok') {
if (me.api) { if (me.api) {

View file

@ -49,13 +49,15 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
alias: 'TableSettingsAdvanced', alias: 'TableSettingsAdvanced',
contentWidth: 280, contentWidth: 280,
height: 385, height: 385,
storageName: 'pe-table-settings-adv-category' storageName: 'pe-table-settings-adv-category',
sizeMax: {width: 142.24, height: 142.24},
}, },
initialize : function(options) { initialize : function(options) {
_.extend(this.options, { _.extend(this.options, {
title: this.textTitle, title: this.textTitle,
items: [ items: [
{panelId: 'id-adv-table-placement', panelCaption: this.textPlacement},
{panelId: 'id-adv-table-cell-props', panelCaption: this.textWidthSpaces}, {panelId: 'id-adv-table-cell-props', panelCaption: this.textWidthSpaces},
{panelId: 'id-adv-table-alttext', panelCaption: this.textAlt} {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._initialMarginsDefault = false; // если для всех выделенных ячеек пришло одинаковое значение Flag=0 (Use Default Margins)
this._originalProps = new Asc.CTableProp(this.options.tableProps); this._originalProps = new Asc.CTableProp(this.options.tableProps);
this.slideSize = this.options.slideSize;
}, },
render: function() { render: function() {
@ -93,6 +96,113 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
var me = this; 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){ this._marginsChange = function(field, newValue, oldValue, eOpts, source, property){
if (source=='table') if (source=='table')
this.TableMargins[property] = field.getNumberValue(); this.TableMargins[property] = field.getNumberValue();
@ -352,6 +462,27 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
}, },
getSettings: function() { 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) if (this.isAltTitleChanged)
this._changedProps.put_TableCaption(this.inputAltTitle.getValue()); this._changedProps.put_TableCaption(this.inputAltTitle.getValue());
@ -365,6 +496,23 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
if (props ){ if (props ){
this._allTable = !props.get_CellSelect(); 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 // margins
var margins = props.get_DefaultMargins(); var margins = props.get_DefaultMargins();
if (margins) { 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); 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', textWidthSpaces: 'Margins',
@ -456,7 +608,17 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
textAlt: 'Alternative Text', textAlt: 'Alternative Text',
textAltTitle: 'Title', textAltTitle: 'Title',
textAltDescription: 'Description', 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 || {})); }, PE.Views.TableSettingsAdvanced || {}));
}); });

View file

@ -2023,6 +2023,16 @@
"PE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings", "PE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings",
"PE.Views.TableSettingsAdvanced.textTop": "Top", "PE.Views.TableSettingsAdvanced.textTop": "Top",
"PE.Views.TableSettingsAdvanced.textWidthSpaces": "Margins", "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.strBackground": "Background color",
"PE.Views.TextArtSettings.strColor": "Color", "PE.Views.TextArtSettings.strColor": "Color",
"PE.Views.TextArtSettings.strFill": "Fill", "PE.Views.TextArtSettings.strFill": "Fill",