[SSE] Show font settings for header/footer

This commit is contained in:
Julia Radzhabova 2019-01-30 15:43:30 +03:00
parent 4ae17d2d35
commit 47f508b0b2

View file

@ -315,7 +315,8 @@ define([
this.cmbInsertF.setValue(this.textInsert); this.cmbInsertF.setValue(this.textInsert);
this.footerControls.push(this.cmbInsertF); this.footerControls.push(this.cmbInsertF);
this.cmbFontsH = new Common.UI.ComboBoxFonts({ this.cmbFonts = [];
this.cmbFonts.push(new Common.UI.ComboBoxFonts({
el : $('#id-dlg-h-fonts'), el : $('#id-dlg-h-fonts'),
cls : 'input-group-nr', cls : 'input-group-nr',
style : 'width: 142px;', style : 'width: 142px;',
@ -324,10 +325,11 @@ define([
store : new Common.Collections.Fonts(), store : new Common.Collections.Fonts(),
recent : 0, recent : 0,
hint : this.tipFontName hint : this.tipFontName
}).on('selected', _.bind(this.onFontSelect, this)); }));
this.headerControls.push(this.cmbFontsH); this.cmbFonts[0].on('selected', _.bind(this.onFontSelect, this));
this.headerControls.push(this.cmbFonts[0]);
this.cmbFontsF = new Common.UI.ComboBoxFonts({ this.cmbFonts.push(new Common.UI.ComboBoxFonts({
el : $('#id-dlg-f-fonts'), el : $('#id-dlg-f-fonts'),
cls : 'input-group-nr', cls : 'input-group-nr',
style : 'width: 142px;', style : 'width: 142px;',
@ -336,8 +338,9 @@ define([
store : new Common.Collections.Fonts(), store : new Common.Collections.Fonts(),
recent : 0, recent : 0,
hint : this.tipFontName hint : this.tipFontName
}).on('selected', _.bind(this.onFontSelect, this)); }));
this.footerControls.push(this.cmbFontsF); this.cmbFonts[1].on('selected', _.bind(this.onFontSelect, this));
this.footerControls.push(this.cmbFonts[1]);
data = [ data = [
{ value: 8, displayValue: "8" }, { value: 8, displayValue: "8" },
@ -357,7 +360,8 @@ define([
{ value: 48, displayValue: "48" }, { value: 48, displayValue: "48" },
{ value: 72, displayValue: "72" } { value: 72, displayValue: "72" }
]; ];
this.cmbFontSizeH = new Common.UI.ComboBox({ this.cmbFontSize = [];
this.cmbFontSize.push(new Common.UI.ComboBox({
el: $('#id-dlg-h-font-size'), el: $('#id-dlg-h-font-size'),
cls: 'input-group-nr', cls: 'input-group-nr',
style: 'width: 55px;', style: 'width: 55px;',
@ -365,11 +369,12 @@ define([
menuStyle: 'min-width: 55px;max-height: 270px;', menuStyle: 'min-width: 55px;max-height: 270px;',
hint: this.tipFontSize, hint: this.tipFontSize,
data: data data: data
}).on('selected', _.bind(this.onFontSizeSelect, this)); }));
this.cmbFontSizeH.setValue(this._state.fontsize); this.cmbFontSize[0].on('selected', _.bind(this.onFontSizeSelect, this));
this.headerControls.push(this.cmbFontSizeH); this.cmbFontSize[0].setValue(this._state.fontsize);
this.headerControls.push(this.cmbFontSize[0]);
this.cmbFontSizeF = new Common.UI.ComboBox({ this.cmbFontSize.push(new Common.UI.ComboBox({
el: $('#id-dlg-f-font-size'), el: $('#id-dlg-f-font-size'),
cls: 'input-group-nr', cls: 'input-group-nr',
style: 'width: 55px;', style: 'width: 55px;',
@ -377,133 +382,140 @@ define([
menuStyle: 'min-width: 55px;max-height: 270px;', menuStyle: 'min-width: 55px;max-height: 270px;',
hint: this.tipFontSize, hint: this.tipFontSize,
data: data data: data
}).on('selected', _.bind(this.onFontSizeSelect, this)); }));
this.cmbFontSizeF.setValue(this._state.fontsize); this.cmbFontSize[1].on('selected', _.bind(this.onFontSizeSelect, this));
this.footerControls.push(this.cmbFontSizeF); this.cmbFontSize[1].setValue(this._state.fontsize);
this.footerControls.push(this.cmbFontSize[1]);
this.btnBoldH = new Common.UI.Button({ this.btnBold = [];
this.btnBold.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-bold', iconCls: 'btn-bold',
enableToggle: true, enableToggle: true,
hint: this.textBold hint: this.textBold
}); }));
this.btnBoldH.render($('#id-dlg-h-bold')) ; this.btnBold[0].render($('#id-dlg-h-bold')) ;
this.btnBoldH.on('click', _.bind(this.onBoldClick, this)); this.btnBold[0].on('click', _.bind(this.onBoldClick, this));
this.headerControls.push(this.btnBoldH); this.headerControls.push(this.btnBold[0]);
this.btnBoldF = new Common.UI.Button({ this.btnBold.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-bold', iconCls: 'btn-bold',
enableToggle: true, enableToggle: true,
hint: this.textBold hint: this.textBold
}); }));
this.btnBoldF.render($('#id-dlg-f-bold')) ; this.btnBold[1].render($('#id-dlg-f-bold')) ;
this.btnBoldF.on('click', _.bind(this.onBoldClick, this)); this.btnBold[1].on('click', _.bind(this.onBoldClick, this));
this.footerControls.push(this.btnBoldF); this.footerControls.push(this.btnBold[1]);
this.btnItalicH = new Common.UI.Button({ this.btnItalic = [];
this.btnItalic.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-italic', iconCls: 'btn-italic',
enableToggle: true, enableToggle: true,
hint: this.textItalic hint: this.textItalic
}); }));
this.btnItalicH.render($('#id-dlg-h-italic')) ; this.btnItalic[0].render($('#id-dlg-h-italic')) ;
this.btnItalicH.on('click', _.bind(this.onItalicClick, this)); this.btnItalic[0].on('click', _.bind(this.onItalicClick, this));
this.headerControls.push(this.btnItalicH); this.headerControls.push(this.btnItalic[0]);
this.btnItalicF = new Common.UI.Button({ this.btnItalic.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-italic', iconCls: 'btn-italic',
enableToggle: true, enableToggle: true,
hint: this.textItalic hint: this.textItalic
}); }));
this.btnItalicF.render($('#id-dlg-f-italic')) ; this.btnItalic[1].render($('#id-dlg-f-italic')) ;
this.btnItalicF.on('click', _.bind(this.onItalicClick, this)); this.btnItalic[1].on('click', _.bind(this.onItalicClick, this));
this.footerControls.push(this.btnItalicF); this.footerControls.push(this.btnItalic[1]);
this.btnUnderlineH = new Common.UI.Button({ this.btnUnderline = [];
this.btnUnderline.push(new Common.UI.Button({
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-underline', iconCls : 'btn-underline',
enableToggle: true, enableToggle: true,
hint: this.textUnderline hint: this.textUnderline
}); }));
this.btnUnderlineH.render($('#id-dlg-h-underline')) ; this.btnUnderline[0].render($('#id-dlg-h-underline')) ;
this.btnUnderlineH.on('click', _.bind(this.onUnderlineClick, this)); this.btnUnderline[0].on('click', _.bind(this.onUnderlineClick, this));
this.headerControls.push(this.btnUnderlineH); this.headerControls.push(this.btnUnderline[0]);
this.btnUnderlineF = new Common.UI.Button({ this.btnUnderline.push(new Common.UI.Button({
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-underline', iconCls : 'btn-underline',
enableToggle: true, enableToggle: true,
hint: this.textUnderline hint: this.textUnderline
}); }));
this.btnUnderlineF.render($('#id-dlg-f-underline')) ; this.btnUnderline[1].render($('#id-dlg-f-underline')) ;
this.btnUnderlineF.on('click', _.bind(this.onUnderlineClick, this)); this.btnUnderline[1].on('click', _.bind(this.onUnderlineClick, this));
this.footerControls.push(this.btnUnderlineF); this.footerControls.push(this.btnUnderline[1]);
this.btnStrikeoutH = new Common.UI.Button({ this.btnStrikeout = [];
this.btnStrikeout.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-strikeout', iconCls: 'btn-strikeout',
enableToggle: true, enableToggle: true,
hint: this.textStrikeout hint: this.textStrikeout
}); }));
this.btnStrikeoutH.render($('#id-dlg-h-strikeout')) ; this.btnStrikeout[0].render($('#id-dlg-h-strikeout')) ;
this.btnStrikeoutH.on('click',_.bind(this.onStrikeoutClick, this)); this.btnStrikeout[0].on('click',_.bind(this.onStrikeoutClick, this));
this.headerControls.push(this.btnStrikeoutH); this.headerControls.push(this.btnStrikeout[0]);
this.btnStrikeoutF = new Common.UI.Button({ this.btnStrikeout.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-strikeout', iconCls: 'btn-strikeout',
enableToggle: true, enableToggle: true,
hint: this.textStrikeout hint: this.textStrikeout
}); }));
this.btnStrikeoutF.render($('#id-dlg-f-strikeout')) ; this.btnStrikeout[1].render($('#id-dlg-f-strikeout')) ;
this.btnStrikeoutF.on('click',_.bind(this.onStrikeoutClick, this)); this.btnStrikeout[1].on('click',_.bind(this.onStrikeoutClick, this));
this.footerControls.push(this.btnStrikeoutF); this.footerControls.push(this.btnStrikeout[1]);
this.btnSuperscriptH = new Common.UI.Button({ this.btnSuperscript = [];
this.btnSuperscript.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-superscript', iconCls: 'btn-superscript',
enableToggle: true, enableToggle: true,
toggleGroup: 'superscriptHFGroup', toggleGroup: 'superscriptHFGroup',
hint: this.textSuperscript hint: this.textSuperscript
}); }));
this.btnSuperscriptH.render($('#id-dlg-h-superscript')) ; this.btnSuperscript[0].render($('#id-dlg-h-superscript')) ;
this.btnSuperscriptH.on('click', _.bind(this.onSuperscriptClick, this)); this.btnSuperscript[0].on('click', _.bind(this.onSuperscriptClick, this));
this.headerControls.push(this.btnSuperscriptH); this.headerControls.push(this.btnSuperscript[0]);
this.btnSuperscriptF = new Common.UI.Button({ this.btnSuperscript.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-superscript', iconCls: 'btn-superscript',
enableToggle: true, enableToggle: true,
toggleGroup: 'superscriptHFGroup', toggleGroup: 'superscriptHFGroup',
hint: this.textSuperscript hint: this.textSuperscript
}); }));
this.btnSuperscriptF.render($('#id-dlg-f-superscript')) ; this.btnSuperscript[1].render($('#id-dlg-f-superscript')) ;
this.btnSuperscriptF.on('click', _.bind(this.onSuperscriptClick, this)); this.btnSuperscript[1].on('click', _.bind(this.onSuperscriptClick, this));
this.footerControls.push(this.btnSuperscriptF); this.footerControls.push(this.btnSuperscript[1]);
this.btnSubscriptH = new Common.UI.Button({ this.btnSubscript = [];
this.btnSubscript.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-subscript', iconCls: 'btn-subscript',
enableToggle: true, enableToggle: true,
toggleGroup: 'superscriptHFGroup', toggleGroup: 'superscriptHFGroup',
hint: this.textSubscript hint: this.textSubscript
}); }));
this.btnSubscriptH.render($('#id-dlg-h-subscript')) ; this.btnSubscript[0].render($('#id-dlg-h-subscript')) ;
this.btnSubscriptH.on('click', _.bind(this.onSubscriptClick, this)); this.btnSubscript[0].on('click', _.bind(this.onSubscriptClick, this));
this.headerControls.push(this.btnSubscriptH); this.headerControls.push(this.btnSubscript[0]);
this.btnSubscriptF = new Common.UI.Button({ this.btnSubscript.push(new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-subscript', iconCls: 'btn-subscript',
enableToggle: true, enableToggle: true,
toggleGroup: 'superscriptHFGroup', toggleGroup: 'superscriptHFGroup',
hint: this.textSubscript hint: this.textSubscript
}); }));
this.btnSubscriptF.render($('#id-dlg-f-subscript')) ; this.btnSubscript[1].render($('#id-dlg-f-subscript')) ;
this.btnSubscriptF.on('click', _.bind(this.onSubscriptClick, this)); this.btnSubscript[1].on('click', _.bind(this.onSubscriptClick, this));
this.footerControls.push(this.btnSubscriptF); this.footerControls.push(this.btnSubscript[1]);
var initNewColor = function(btn, picker_el) { var initNewColor = function(btn, picker_el) {
if (btn && btn.cmpEl) { if (btn && btn.cmpEl) {
@ -520,7 +532,8 @@ define([
picker.on('select', _.bind(me.onColorSelect, me, btn)); picker.on('select', _.bind(me.onColorSelect, me, btn));
return picker; return picker;
}; };
this.btnTextColorH = new Common.UI.Button({ this.btnTextColor = [];
this.btnTextColor.push(new Common.UI.Button({
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-fontcolor', iconCls : 'btn-fontcolor',
hint : this.textColor, hint : this.textColor,
@ -530,12 +543,13 @@ define([
{ template: _.template('<a id="id-dlg-h-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') } { template: _.template('<a id="id-dlg-h-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
] ]
}) })
}); }));
this.btnTextColorH.render($('#id-dlg-h-textcolor')); this.btnTextColor[0].render($('#id-dlg-h-textcolor'));
this.mnuTextColorPickerH = initNewColor(this.btnTextColorH, "#id-dlg-h-menu-fontcolor"); this.mnuTextColorPicker = [];
this.headerControls.push(this.btnTextColorH); this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0], "#id-dlg-h-menu-fontcolor"));
this.headerControls.push(this.btnTextColor[0]);
this.btnTextColorF = new Common.UI.Button({ this.btnTextColor.push(new Common.UI.Button({
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-fontcolor', iconCls : 'btn-fontcolor',
hint : this.textColor, hint : this.textColor,
@ -545,10 +559,10 @@ define([
{ template: _.template('<a id="id-dlg-f-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') } { template: _.template('<a id="id-dlg-f-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
] ]
}) })
}); }));
this.btnTextColorF.render($('#id-dlg-f-textcolor')); this.btnTextColor[1].render($('#id-dlg-f-textcolor'));
this.mnuTextColorPickerF = initNewColor(this.btnTextColorF, "#id-dlg-f-menu-fontcolor"); this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[1], "#id-dlg-f-menu-fontcolor"));
this.footerControls.push(this.btnTextColorF); this.footerControls.push(this.btnTextColor[1]);
this.btnOk = new Common.UI.Button({ this.btnOk = new Common.UI.Button({
el: $window.find('.primary') el: $window.find('.primary')
@ -602,10 +616,10 @@ define([
afterRender: function () { afterRender: function () {
this.api.asc_registerCallback('asc_onEditorSelectionChanged', this.wrapEvents.onApiEditorSelectionChanged); this.api.asc_registerCallback('asc_onEditorSelectionChanged', this.wrapEvents.onApiEditorSelectionChanged);
this.cmbFontsH.fillFonts(this.fontStore); this.cmbFonts[0].fillFonts(this.fontStore);
this.cmbFontsH.selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); this.cmbFonts[0].selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0));
this.cmbFontsF.fillFonts(this.fontStore); this.cmbFonts[1].fillFonts(this.fontStore);
this.cmbFontsF.selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); this.cmbFonts[1].selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0));
this.updateThemeColors(); this.updateThemeColors();
this.HFObject = new AscCommonExcel.CHeaderFooterEditor(['header-left-img', 'header-center-img', 'header-right-img', 'footer-left-img', 'footer-center-img', 'footer-right-img'], 205); this.HFObject = new AscCommonExcel.CHeaderFooterEditor(['header-left-img', 'header-center-img', 'header-right-img', 'footer-left-img', 'footer-center-img', 'footer-right-img'], 205);
@ -638,8 +652,8 @@ define([
}, },
updateThemeColors: function() { updateThemeColors: function() {
this.mnuTextColorPickerH.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.mnuTextColorPicker[0].updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.mnuTextColorPickerF.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.mnuTextColorPicker[1].updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
}, },
getSettings: function () { getSettings: function () {
@ -676,15 +690,6 @@ define([
onCanvasClick: function(id, event){ onCanvasClick: function(id, event){
if (!this.HFObject) return; if (!this.HFObject) return;
id = id || 'header-left-img'; id = id || 'header-left-img';
if (event) {
var parent = $(event.currentTarget).parent(),
offset = parent.offset();
this.HFObject.click(id, event.pageX*Common.Utils.zoom() - offset.left, event.pageY*Common.Utils.zoom() - offset.top + parent.scrollTop());
} else
this.HFObject.click(id, 0, 0);
this.scrollerUpdate();
this.currentCanvas = id; this.currentCanvas = id;
this.isFooter = (id == '#footer-left-img' || id == '#footer-center-img' || id == '#footer-right-img'); this.isFooter = (id == '#footer-left-img' || id == '#footer-center-img' || id == '#footer-right-img');
@ -695,6 +700,15 @@ define([
this.footerControls.forEach(function(item){ this.footerControls.forEach(function(item){
item.setDisabled(!me.isFooter); item.setDisabled(!me.isFooter);
}); });
if (event) {
var parent = $(event.currentTarget).parent(),
offset = parent.offset();
this.HFObject.click(id, event.pageX*Common.Utils.zoom() - offset.left, event.pageY*Common.Utils.zoom() - offset.top + parent.scrollTop());
} else
this.HFObject.click(id, 0, 0);
this.scrollerUpdate();
}, },
onPresetSelect: function(footer, combo, record) { onPresetSelect: function(footer, combo, record) {
@ -783,7 +797,70 @@ define([
}, },
onApiEditorSelectionChanged: function(fontobj) { onApiEditorSelectionChanged: function(fontobj) {
var idx = this.isFooter ? 1 : 0,
val;
/* read font name */
var fontparam = fontobj.asc_getName();
if (fontparam != this.cmbFonts[idx].getValue()) {
Common.NotificationCenter.trigger('fonts:change', fontobj);
}
/* read font params */
val = fontobj.asc_getBold();
if (this.btnBold[idx].isActive() !== val)
this.btnBold[idx].toggle(val === true, true);
val = fontobj.asc_getItalic();
if (this.btnItalic[idx].isActive() !== val)
this.btnItalic[idx].toggle(val === true, true);
val = fontobj.asc_getUnderline();
if (this.btnUnderline[idx].isActive() !== val)
this.btnUnderline[idx].toggle(val === true, true);
val = fontobj.asc_getStrikeout();
if (this.btnStrikeout[idx].isActive() !== val)
this.btnStrikeout[idx].toggle(val === true, true);
val = fontobj.asc_getSubscript();
if (this.btnSubscript[idx].isActive() !== val)
this.btnSubscript[idx].toggle(val === true, true);
val = fontobj.asc_getSuperscript();
if (this.btnSuperscript[idx].isActive() !== val)
this.btnSuperscript[idx].toggle(val === true, true);
/* read font size */
var str_size = fontobj.asc_getSize();
if (this.cmbFontSize[idx].getValue() !== str_size)
this.cmbFontSize[idx].setValue((str_size!==undefined) ? str_size : '');
/* read font color */
var clr,
color,
fontColorPicker = this.mnuTextColorPicker[idx];
color = fontobj.asc_getColor();
if (color) {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
} else {
clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
}
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
fontColorPicker.select(clr, true);
isselected = true;
break;
}
}
if (!isselected) fontColorPicker.clearSelection();
} else {
fontColorPicker.select(clr, true);
}
}, },
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',