[PE] Delay rendering controls on the right panel.
This commit is contained in:
Julia Radzhabova
parent
65afc4894c
commit
50a5653fb4
|
|
@ -64,7 +64,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
|
|
@ -83,7 +82,29 @@ define([
|
||||||
|
|
||||||
this.labelWidth = $(this.el).find('#image-label-width');
|
this.labelWidth = $(this.el).find('#image-label-width');
|
||||||
this.labelHeight = $(this.el).find('#image-label-height');
|
this.labelHeight = $(this.el).find('#image-label-height');
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function () {
|
||||||
|
var el = $(this.el);
|
||||||
|
el.html(this.template({
|
||||||
|
scope: this
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
setApi: function(api) {
|
||||||
|
this.api = api;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateMetricUnit: function() {
|
||||||
|
var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
|
||||||
|
this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||||
|
|
||||||
|
value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
|
||||||
|
this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||||
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
this.btnOriginalSize = new Common.UI.Button({
|
this.btnOriginalSize = new Common.UI.Button({
|
||||||
el: $('#image-button-original-size')
|
el: $('#image-button-original-size')
|
||||||
});
|
});
|
||||||
|
|
@ -114,33 +135,14 @@ define([
|
||||||
if (this.api) this.api.asc_pluginRun(this._originalProps.asc_getPluginGuid(), 0, this._originalProps.asc_getPluginData());
|
if (this.api) this.api.asc_pluginRun(this._originalProps.asc_getPluginGuid(), 0, this._originalProps.asc_getPluginData());
|
||||||
this.fireEvent('editcomplete', this);
|
this.fireEvent('editcomplete', this);
|
||||||
}, this));
|
}, this));
|
||||||
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function () {
|
|
||||||
var el = $(this.el);
|
|
||||||
el.html(this.template({
|
|
||||||
scope: this
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.linkAdvanced = $('#image-advanced-link');
|
this.linkAdvanced = $('#image-advanced-link');
|
||||||
this.lblReplace = $('#image-lbl-replace');
|
this.lblReplace = $('#image-lbl-replace');
|
||||||
},
|
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
|
||||||
setApi: function(api) {
|
|
||||||
this.api = api;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
updateMetricUnit: function() {
|
|
||||||
var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
|
|
||||||
this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
|
||||||
|
|
||||||
value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
|
|
||||||
this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -269,6 +271,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
|
|
@ -79,68 +78,6 @@ define([
|
||||||
this._locked = false;
|
this._locked = false;
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
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'}
|
|
||||||
];
|
|
||||||
|
|
||||||
// Short Size
|
|
||||||
this.cmbLineRule = new Common.UI.ComboBox({
|
|
||||||
el: $('#paragraph-combo-line-rule'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 85px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrLineRule
|
|
||||||
});
|
|
||||||
this.cmbLineRule.setValue(c_paragraphLinerule.LINERULE_AUTO);
|
|
||||||
this.lockedControls.push(this.cmbLineRule);
|
|
||||||
|
|
||||||
this.numLineHeight = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#paragraph-spin-line-height'),
|
|
||||||
step: .01,
|
|
||||||
width: 85,
|
|
||||||
value: '1.5',
|
|
||||||
defaultUnit : "",
|
|
||||||
maxValue: 132,
|
|
||||||
minValue: 0.5
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.numLineHeight);
|
|
||||||
|
|
||||||
this.numSpacingBefore = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#paragraph-spin-spacing-before'),
|
|
||||||
step: .1,
|
|
||||||
width: 85,
|
|
||||||
value: '0 cm',
|
|
||||||
defaultUnit : "cm",
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0,
|
|
||||||
allowAuto : true,
|
|
||||||
autoText : this.txtAutoText
|
|
||||||
});
|
|
||||||
this.spinners.push(this.numSpacingBefore);
|
|
||||||
this.lockedControls.push(this.numSpacingBefore);
|
|
||||||
|
|
||||||
this.numSpacingAfter = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#paragraph-spin-spacing-after'),
|
|
||||||
step: .1,
|
|
||||||
width: 85,
|
|
||||||
value: '0.35 cm',
|
|
||||||
defaultUnit : "cm",
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0,
|
|
||||||
allowAuto : true,
|
|
||||||
autoText : this.txtAutoText
|
|
||||||
});
|
|
||||||
this.spinners.push(this.numSpacingAfter);
|
|
||||||
this.lockedControls.push(this.numSpacingAfter);
|
|
||||||
|
|
||||||
this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this));
|
|
||||||
this.numSpacingBefore.on('change', _.bind(this.onNumSpacingBeforeChange, this));
|
|
||||||
this.numSpacingAfter.on('change', _.bind(this.onNumSpacingAfterChange, this));
|
|
||||||
this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this));
|
|
||||||
this.cmbLineRule.on('hide:after', _.bind(this.onHideMenus, this));
|
|
||||||
$(this.el).on('click', '#paragraph-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
|
|
@ -200,6 +137,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
_onLineSpacing: function(value) {
|
_onLineSpacing: function(value) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
var linerule = value.get_LineRule();
|
var linerule = value.get_LineRule();
|
||||||
var line = value.get_Line();
|
var line = value.get_Line();
|
||||||
|
|
||||||
|
|
@ -297,21 +236,90 @@ define([
|
||||||
spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
|
spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var rec = this.cmbLineRule.store.at(1);
|
if (this.cmbLineRule) {
|
||||||
rec.set({defaultUnit: Common.Utils.Metric.getCurrentMetricName(),
|
var rec = this.cmbLineRule.store.at(1);
|
||||||
minValue: parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2)),
|
rec.set({defaultUnit: Common.Utils.Metric.getCurrentMetricName(),
|
||||||
step: (Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt) ? 1 : 0.01});
|
minValue: parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2)),
|
||||||
|
step: (Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt) ? 1 : 0.01});
|
||||||
|
|
||||||
if (this._state.LineRule !== null) {
|
if (this._state.LineRule !== null) {
|
||||||
var obj;
|
var obj;
|
||||||
rec = this.cmbLineRule.store.findWhere((obj={}, obj['value']=this._state.LineRule, obj));
|
rec = this.cmbLineRule.store.findWhere((obj={}, obj['value']=this._state.LineRule, obj));
|
||||||
if (!rec) rec = this.cmbLineRule.store.at(0);
|
if (!rec) rec = this.cmbLineRule.store.at(0);
|
||||||
this.numLineHeight.setDefaultUnit(rec.get('defaultUnit'));
|
this.numLineHeight.setDefaultUnit(rec.get('defaultUnit'));
|
||||||
this.numLineHeight.setStep(rec.get('step'));
|
this.numLineHeight.setStep(rec.get('step'));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
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'}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Short Size
|
||||||
|
this.cmbLineRule = new Common.UI.ComboBox({
|
||||||
|
el: $('#paragraph-combo-line-rule'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 85px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrLineRule
|
||||||
|
});
|
||||||
|
this.cmbLineRule.setValue(c_paragraphLinerule.LINERULE_AUTO);
|
||||||
|
this.lockedControls.push(this.cmbLineRule);
|
||||||
|
|
||||||
|
this.numLineHeight = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#paragraph-spin-line-height'),
|
||||||
|
step: .01,
|
||||||
|
width: 85,
|
||||||
|
value: '1.5',
|
||||||
|
defaultUnit : "",
|
||||||
|
maxValue: 132,
|
||||||
|
minValue: 0.5
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.numLineHeight);
|
||||||
|
|
||||||
|
this.numSpacingBefore = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#paragraph-spin-spacing-before'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
value: '0 cm',
|
||||||
|
defaultUnit : "cm",
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0,
|
||||||
|
allowAuto : true,
|
||||||
|
autoText : this.txtAutoText
|
||||||
|
});
|
||||||
|
this.spinners.push(this.numSpacingBefore);
|
||||||
|
this.lockedControls.push(this.numSpacingBefore);
|
||||||
|
|
||||||
|
this.numSpacingAfter = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#paragraph-spin-spacing-after'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
value: '0.35 cm',
|
||||||
|
defaultUnit : "cm",
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0,
|
||||||
|
allowAuto : true,
|
||||||
|
autoText : this.txtAutoText
|
||||||
|
});
|
||||||
|
this.spinners.push(this.numSpacingAfter);
|
||||||
|
this.lockedControls.push(this.numSpacingAfter);
|
||||||
|
|
||||||
|
this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this));
|
||||||
|
this.numSpacingBefore.on('change', _.bind(this.onNumSpacingBeforeChange, this));
|
||||||
|
this.numSpacingAfter.on('change', _.bind(this.onNumSpacingAfterChange, this));
|
||||||
|
this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this));
|
||||||
|
this.cmbLineRule.on('hide:after', _.bind(this.onHideMenus, this));
|
||||||
|
$(this.el).on('click', '#paragraph-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -357,6 +365,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,7 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
TemplateId: 0,
|
TemplateId: 0,
|
||||||
|
|
@ -93,185 +93,6 @@ define([
|
||||||
this._noApply = false;
|
this._noApply = false;
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this.chHeader = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-header'),
|
|
||||||
labelText: this.textHeader
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chHeader);
|
|
||||||
|
|
||||||
this.chTotal = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-total'),
|
|
||||||
labelText: this.textTotal
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chTotal);
|
|
||||||
|
|
||||||
this.chBanded = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-banded'),
|
|
||||||
labelText: this.textBanded
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chBanded);
|
|
||||||
|
|
||||||
this.chFirst = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-first'),
|
|
||||||
labelText: this.textFirst
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chFirst);
|
|
||||||
|
|
||||||
this.chLast = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-last'),
|
|
||||||
labelText: this.textLast
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chLast);
|
|
||||||
|
|
||||||
this.chColBanded = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-col-banded'),
|
|
||||||
labelText: this.textBanded
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chColBanded);
|
|
||||||
|
|
||||||
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
|
|
||||||
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
|
|
||||||
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
|
|
||||||
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3));
|
|
||||||
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
|
|
||||||
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
|
|
||||||
|
|
||||||
this.cmbTableTemplate = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 70,
|
|
||||||
itemHeight: 50,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
cls: 'combo-template'
|
|
||||||
});
|
|
||||||
this.cmbTableTemplate.render($('#table-combo-template'));
|
|
||||||
this.cmbTableTemplate.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 175,
|
|
||||||
'max-width': 175
|
|
||||||
});
|
|
||||||
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
|
|
||||||
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.cmbTableTemplate);
|
|
||||||
|
|
||||||
var _arrBorderPosition = [
|
|
||||||
['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft],
|
|
||||||
['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
|
|
||||||
['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight],
|
|
||||||
['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop],
|
|
||||||
['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor],
|
|
||||||
['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom],
|
|
||||||
['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner],
|
|
||||||
['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter],
|
|
||||||
['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll],
|
|
||||||
['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone]
|
|
||||||
];
|
|
||||||
|
|
||||||
this._btnsBorderPosition = [];
|
|
||||||
_.each(_arrBorderPosition, function(item, index, list){
|
|
||||||
var _btn = new Common.UI.Button({
|
|
||||||
cls: 'btn-toolbar',
|
|
||||||
iconCls: item[1],
|
|
||||||
strId :item[0],
|
|
||||||
hint: item[3]
|
|
||||||
});
|
|
||||||
_btn.render( $('#'+item[2])) ;
|
|
||||||
_btn.on('click', _.bind(this.onBtnBordersClick, this));
|
|
||||||
this._btnsBorderPosition.push( _btn );
|
|
||||||
this.lockedControls.push(_btn);
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
this.cmbBorderSize = new Common.UI.ComboBorderSize({
|
|
||||||
el: $('#table-combo-border-size'),
|
|
||||||
style: "width: 93px;"
|
|
||||||
});
|
|
||||||
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
|
||||||
this.cmbBorderSize.setValue(this.BorderSize);
|
|
||||||
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
|
|
||||||
this.lockedControls.push(this.cmbBorderSize);
|
|
||||||
|
|
||||||
this.btnBorderColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="table-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBorderColor.on('render:after', function(btn) {
|
|
||||||
me.borderColor = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#table-border-color-menu')
|
|
||||||
});
|
|
||||||
me.borderColor.on('select', _.bind(me.onColorsBorderSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBorderColor.render( $('#table-border-color-btn'));
|
|
||||||
this.btnBorderColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
|
||||||
this.lockedControls.push(this.btnBorderColor);
|
|
||||||
|
|
||||||
this.btnBackColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="table-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBackColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#table-back-color-menu'),
|
|
||||||
transparent: true
|
|
||||||
});
|
|
||||||
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBackColor.render( $('#table-back-color-btn'));
|
|
||||||
$(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
|
||||||
this.lockedControls.push(this.btnBackColor);
|
|
||||||
|
|
||||||
this.btnEdit = new Common.UI.Button({
|
|
||||||
cls: 'btn-icon-default',
|
|
||||||
iconCls: 'btn-edit-table',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
items: [
|
|
||||||
{ caption: this.selectRowText, value: 0 },
|
|
||||||
{ caption: this.selectColumnText, value: 1 },
|
|
||||||
{ caption: this.selectCellText, value: 2 },
|
|
||||||
{ caption: this.selectTableText, value: 3 },
|
|
||||||
{ caption: '--' },
|
|
||||||
{ caption: this.insertRowAboveText, value: 4 },
|
|
||||||
{ caption: this.insertRowBelowText, value: 5 },
|
|
||||||
{ caption: this.insertColumnLeftText, value: 6 },
|
|
||||||
{ caption: this.insertColumnRightText, value: 7 },
|
|
||||||
{ caption: '--' },
|
|
||||||
{ caption: this.deleteRowText, value: 8 },
|
|
||||||
{ caption: this.deleteColumnText, value: 9 },
|
|
||||||
{ caption: this.deleteTableText, value: 10 },
|
|
||||||
{ caption: '--' },
|
|
||||||
{ caption: this.mergeCellsText, value: 11 },
|
|
||||||
{ caption: this.splitCellsText, value: 12 }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnEdit.render( $('#table-btn-edit')) ;
|
|
||||||
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
|
|
||||||
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
|
|
||||||
|
|
||||||
this.btnEdit.menu.on('show:after', _.bind( function(){
|
|
||||||
if (this.api) {
|
|
||||||
this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells());
|
|
||||||
this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells());
|
|
||||||
}
|
|
||||||
}, this));
|
|
||||||
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
|
|
||||||
this.lockedControls.push(this.btnEdit);
|
|
||||||
|
|
||||||
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
|
onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
|
||||||
|
|
@ -398,8 +219,6 @@ define([
|
||||||
el.html(this.template({
|
el.html(this.template({
|
||||||
scope: this
|
scope: this
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this.linkAdvanced = $('#table-advanced-link');
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setApi: function(o) {
|
setApi: function(o) {
|
||||||
|
|
@ -410,7 +229,135 @@ define([
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
this.chHeader = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-header'),
|
||||||
|
labelText: this.textHeader
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chHeader);
|
||||||
|
|
||||||
|
this.chTotal = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-total'),
|
||||||
|
labelText: this.textTotal
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chTotal);
|
||||||
|
|
||||||
|
this.chBanded = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-banded'),
|
||||||
|
labelText: this.textBanded
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chBanded);
|
||||||
|
|
||||||
|
this.chFirst = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-first'),
|
||||||
|
labelText: this.textFirst
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chFirst);
|
||||||
|
|
||||||
|
this.chLast = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-last'),
|
||||||
|
labelText: this.textLast
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chLast);
|
||||||
|
|
||||||
|
this.chColBanded = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-col-banded'),
|
||||||
|
labelText: this.textBanded
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chColBanded);
|
||||||
|
|
||||||
|
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
|
||||||
|
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
|
||||||
|
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
|
||||||
|
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3));
|
||||||
|
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
|
||||||
|
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
|
||||||
|
|
||||||
|
var _arrBorderPosition = [
|
||||||
|
['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft],
|
||||||
|
['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
|
||||||
|
['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight],
|
||||||
|
['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop],
|
||||||
|
['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor],
|
||||||
|
['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom],
|
||||||
|
['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner],
|
||||||
|
['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter],
|
||||||
|
['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll],
|
||||||
|
['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone]
|
||||||
|
];
|
||||||
|
|
||||||
|
this._btnsBorderPosition = [];
|
||||||
|
_.each(_arrBorderPosition, function(item, index, list){
|
||||||
|
var _btn = new Common.UI.Button({
|
||||||
|
cls: 'btn-toolbar',
|
||||||
|
iconCls: item[1],
|
||||||
|
strId :item[0],
|
||||||
|
hint: item[3]
|
||||||
|
});
|
||||||
|
_btn.render( $('#'+item[2])) ;
|
||||||
|
_btn.on('click', _.bind(this.onBtnBordersClick, this));
|
||||||
|
this._btnsBorderPosition.push( _btn );
|
||||||
|
this.lockedControls.push(_btn);
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
this.cmbBorderSize = new Common.UI.ComboBorderSize({
|
||||||
|
el: $('#table-combo-border-size'),
|
||||||
|
style: "width: 93px;"
|
||||||
|
});
|
||||||
|
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
||||||
|
this.cmbBorderSize.setValue(this.BorderSize);
|
||||||
|
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
|
||||||
|
this.lockedControls.push(this.cmbBorderSize);
|
||||||
|
|
||||||
|
this.btnEdit = new Common.UI.Button({
|
||||||
|
cls: 'btn-icon-default',
|
||||||
|
iconCls: 'btn-edit-table',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
items: [
|
||||||
|
{ caption: this.selectRowText, value: 0 },
|
||||||
|
{ caption: this.selectColumnText, value: 1 },
|
||||||
|
{ caption: this.selectCellText, value: 2 },
|
||||||
|
{ caption: this.selectTableText, value: 3 },
|
||||||
|
{ caption: '--' },
|
||||||
|
{ caption: this.insertRowAboveText, value: 4 },
|
||||||
|
{ caption: this.insertRowBelowText, value: 5 },
|
||||||
|
{ caption: this.insertColumnLeftText, value: 6 },
|
||||||
|
{ caption: this.insertColumnRightText, value: 7 },
|
||||||
|
{ caption: '--' },
|
||||||
|
{ caption: this.deleteRowText, value: 8 },
|
||||||
|
{ caption: this.deleteColumnText, value: 9 },
|
||||||
|
{ caption: this.deleteTableText, value: 10 },
|
||||||
|
{ caption: '--' },
|
||||||
|
{ caption: this.mergeCellsText, value: 11 },
|
||||||
|
{ caption: this.splitCellsText, value: 12 }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnEdit.render( $('#table-btn-edit')) ;
|
||||||
|
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
|
||||||
|
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
|
||||||
|
|
||||||
|
this.btnEdit.menu.on('show:after', _.bind( function(){
|
||||||
|
if (this.api) {
|
||||||
|
this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells());
|
||||||
|
this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells());
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
|
||||||
|
this.lockedControls.push(this.btnEdit);
|
||||||
|
|
||||||
|
this.linkAdvanced = $('#table-advanced-link');
|
||||||
|
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
},
|
||||||
|
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
|
if (this._initSettings)
|
||||||
|
this.createDelayedElements();
|
||||||
|
this._initSettings = false;
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
if (props )
|
if (props )
|
||||||
|
|
@ -580,19 +527,78 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
|
this.UpdateThemeColors();
|
||||||
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
if (this.colorsBack)
|
if (!this.btnBackColor) {
|
||||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.btnBorderColor = new Common.UI.ColorButton({
|
||||||
if (this.borderColor) {
|
style: "width:45px;",
|
||||||
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
menu : new Common.UI.Menu({
|
||||||
this.btnBorderColor.setColor(this.borderColor.getColor());
|
items: [
|
||||||
|
{ template: _.template('<div id="table-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBorderColor.render( $('#table-border-color-btn'));
|
||||||
|
this.btnBorderColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnBorderColor);
|
||||||
|
this.borderColor = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#table-border-color-menu')
|
||||||
|
});
|
||||||
|
this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||||
|
$(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
||||||
|
|
||||||
|
this.btnBackColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="table-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBackColor.render( $('#table-back-color-btn'));
|
||||||
|
this.lockedControls.push(this.btnBackColor);
|
||||||
|
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#table-back-color-menu'),
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||||
|
$(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||||
}
|
}
|
||||||
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
this.btnBorderColor.setColor(this.borderColor.getColor());
|
||||||
},
|
},
|
||||||
|
|
||||||
_onInitTemplates: function(Templates){
|
_onInitTemplates: function(Templates){
|
||||||
var self = this;
|
var self = this;
|
||||||
this._isTemplatesChanged = true;
|
this._isTemplatesChanged = true;
|
||||||
|
|
||||||
|
if (!this.cmbTableTemplate) {
|
||||||
|
this.cmbTableTemplate = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 70,
|
||||||
|
itemHeight: 50,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-template'
|
||||||
|
});
|
||||||
|
this.cmbTableTemplate.render($('#table-combo-template'));
|
||||||
|
this.cmbTableTemplate.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 175,
|
||||||
|
'max-width': 175
|
||||||
|
});
|
||||||
|
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
|
||||||
|
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
|
||||||
|
self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.cmbTableTemplate);
|
||||||
|
}
|
||||||
|
|
||||||
var count = self.cmbTableTemplate.menuPicker.store.length;
|
var count = self.cmbTableTemplate.menuPicker.store.length;
|
||||||
if (count>0 && count==Templates.length) {
|
if (count>0 && count==Templates.length) {
|
||||||
var data = self.cmbTableTemplate.menuPicker.store.models;
|
var data = self.cmbTableTemplate.menuPicker.store.models;
|
||||||
|
|
@ -649,6 +655,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue