[PE] Add placement tab in table advanced settings
This commit is contained in:
JuliaSvinareva
parent
966722826f
commit
472427df94
|
|
@ -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">
|
||||
<table cols="2" style="width: 100%;">
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 || {}));
|
||||
});
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue