From aff4b5d35cf72115e082b46d6c0cf27a6a431273 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 11 Oct 2018 14:25:53 +0300 Subject: [PATCH 01/20] [SSE] Add dialog for editing header/footer --- .../main/app/controller/Toolbar.js | 38 +- .../main/app/template/Toolbar.template | 1 + .../main/app/view/HeaderFooterDialog.js | 348 ++++++++++++++++++ .../main/app/view/Toolbar.js | 31 +- 4 files changed, 415 insertions(+), 3 deletions(-) create mode 100644 apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index cb0e1540d8..1cb3213a40 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -54,7 +54,8 @@ define([ 'spreadsheeteditor/main/app/view/NamedRangePasteDlg', 'spreadsheeteditor/main/app/view/NameManagerDlg', 'spreadsheeteditor/main/app/view/FormatSettingsDialog', - 'spreadsheeteditor/main/app/view/PageMarginsDialog' + 'spreadsheeteditor/main/app/view/PageMarginsDialog', + 'spreadsheeteditor/main/app/view/HeaderFooterDialog' ], function () { 'use strict'; SSE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({ @@ -365,6 +366,7 @@ define([ toolbar.btnImgAlign.menu.on('item:click', _.bind(this.onImgAlignSelect, this)); toolbar.btnImgForward.on('click', this.onImgArrangeSelect.bind(this, 'forward')); toolbar.btnImgBackward.on('click', this.onImgArrangeSelect.bind(this, 'backward')); + toolbar.btnEditHeader.menu.on('item:click', _.bind(this.onEditHeaderClick, this)); this.onSetupCopyStyleButton(); } @@ -3298,6 +3300,40 @@ define([ this.toolbar.btnPrintArea.menu.items[2].setVisible(this.api.asc_CanAddPrintArea()); }, + onEditHeaderClick: function(menu, item) { + var me = this; + if (_.isUndefined(me.fontStore)) { + me.fontStore = new Common.Collections.Fonts(); + var fonts = me.toolbar.cmbFontName.store.toJSON(); + var arr = []; + _.each(fonts, function(font, index){ + if (!font.cloneid) { + arr.push(_.clone(font)); + } + }); + me.fontStore.add(arr); + } + + var win = new SSE.Views.HeaderFooterDialog({ + api: me.api, + fontStore: me.fontStore, + type: item.value, + handler: function(dlg, result) { + if (result == 'ok') { + var props = dlg.getSettings(); + // if (item.value == 'header') + // me.api.asc_editHeader(props); + // else + // me.api.asc_editFooter(props); + } + Common.NotificationCenter.trigger('edit:complete'); + } + }); + win.show(); + + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + }, + textEmptyImgUrl : 'You need to specify image URL.', warnMergeLostData : 'Operation can destroy data in the selected cells.
Continue?', textWarning : 'Warning', diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template index d6054321ab..69e9851633 100644 --- a/apps/spreadsheeteditor/main/app/template/Toolbar.template +++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template @@ -142,6 +142,7 @@ +
diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js new file mode 100644 index 0000000000..df546246f1 --- /dev/null +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -0,0 +1,348 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2018 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * +*/ +/** + * HeaderFooterDialog.js + * + * Created by Julia Radzhabova on 10/111/18 + * Copyright (c) 2018 Ascensio System SIA. All rights reserved. + * + */ + + +define([ + 'common/main/lib/util/utils', + 'common/main/lib/component/InputField', + 'common/main/lib/component/Window', + 'common/main/lib/component/ComboBoxFonts' +], function () { 'use strict'; + + SSE.Views.HeaderFooterDialog = Common.UI.Window.extend(_.extend({ + options: { + width: 654, + style: 'min-width: 350px;', + cls: 'modal-dlg' + }, + + initialize : function(options) { + _.extend(this.options, { + title: (this.options.type == 'header') ? this.textHeader : this.textFooter + }, options || {}); + + this.api = this.options.api; + this.type = this.options.type || 'header'; + this.fontStore = this.options.fontStore; + this.font = { + size: 11, + name: 'Arial', + bold: false, + italic: false + }; + + this.template = [ + '
', + '
', + '
', + '
','
', + '
','
', + '
','
', + '
', + '
', + '', + '
', + '
', + '
', + '
', + '
', + '', + '
', + '
', + '
', + '
', + '
', + '', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '', + '', + '
' + ].join(''); + + this.options.tpl = _.template(this.template)(this.options); + Common.UI.Window.prototype.initialize.call(this, this.options); + }, + + render: function() { + Common.UI.Window.prototype.render.call(this); + + var me = this, + $window = this.getChild(); + + me.cmbFonts = new Common.UI.ComboBoxFonts({ + el : $('#id-dlg-sign-fonts'), + cls : 'input-group-nr', + style : 'width: 234px;', + menuCls : 'scrollable-menu', + menuStyle : 'min-width: 234px;max-height: 270px;', + store : new Common.Collections.Fonts(), + recent : 0, + hint : me.tipFontName + }).on('selected', function(combo, record) { + if (me.signObject) { + me.signObject.setText('Some text', record.name, me.font.size, me.font.italic, me.font.bold); + me.scrollerUpdate(); + } + me.font.name = record.name; + }); + + this.cmbFontSize = new Common.UI.ComboBox({ + el: $('#id-dlg-sign-font-size'), + cls: 'input-group-nr', + style: 'width: 55px;', + menuCls : 'scrollable-menu', + menuStyle: 'min-width: 55px;max-height: 270px;', + hint: this.tipFontSize, + data: [ + { value: 8, displayValue: "8" }, + { value: 9, displayValue: "9" }, + { value: 10, displayValue: "10" }, + { value: 11, displayValue: "11" }, + { value: 12, displayValue: "12" }, + { value: 14, displayValue: "14" }, + { value: 16, displayValue: "16" }, + { value: 18, displayValue: "18" }, + { value: 20, displayValue: "20" }, + { value: 22, displayValue: "22" }, + { value: 24, displayValue: "24" }, + { value: 26, displayValue: "26" }, + { value: 28, displayValue: "28" }, + { value: 36, displayValue: "36" }, + { value: 48, displayValue: "48" }, + { value: 72, displayValue: "72" } + ] + }).on('selected', function(combo, record) { + if (me.signObject) { + me.signObject.setText('Some text', me.font.name, record.value, me.font.italic, me.font.bold); + me.scrollerUpdate(); + } + me.font.size = record.value; + }); + this.cmbFontSize.setValue(this.font.size); + + me.btnBold = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-bold', + enableToggle: true, + hint: me.textBold + }); + me.btnBold.render($('#id-dlg-sign-bold')) ; + me.btnBold.on('click', function(btn, e) { + if (me.signObject) { + me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, btn.pressed); + me.scrollerUpdate(); + } + me.font.bold = btn.pressed; + }); + + me.btnItalic = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-italic', + enableToggle: true, + hint: me.textItalic + }); + me.btnItalic.render($('#id-dlg-sign-italic')) ; + me.btnItalic.on('click', function(btn, e) { + if (me.signObject) { + me.signObject.setText('Some text', me.font.name, me.font.size, btn.pressed, me.font.bold); + me.scrollerUpdate(); + } + me.font.italic = btn.pressed; + }); + + me.btnUnderline = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-underline', + enableToggle: true, + hint: me.textUnderline + }); + me.btnUnderline.render($('#id-dlg-sign-underline')) ; + me.btnUnderline.on('click', function(btn, e) { + if (me.signObject) { + me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + me.scrollerUpdate(); + } + me.font.underline = btn.pressed; + }); + + me.btnStrikeout = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-strikeout', + enableToggle: true, + hint: me.textStrikeout + }); + me.btnStrikeout.render($('#id-dlg-sign-strikeout')) ; + me.btnStrikeout.on('click', function(btn, e) { + if (me.signObject) { + me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + me.scrollerUpdate(); + } + me.font.strikeout = btn.pressed; + }); + + this.btnSuperscript = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-superscript', + enableToggle: true, + toggleGroup: 'superscriptHFGroup', + hint: me.textSuperscript + }); + me.btnSuperscript.render($('#id-dlg-sign-superscript')) ; + me.btnSuperscript.on('click', function(btn, e) { + if (me.signObject) { + me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + me.scrollerUpdate(); + } + me.font.superscript = btn.pressed; + }); + + this.btnSubscript = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-subscript', + enableToggle: true, + toggleGroup: 'superscriptHFGroup', + hint: me.textSubscript + }); + me.btnSubscript.render($('#id-dlg-sign-subscript')) ; + me.btnSubscript.on('click', function(btn, e) { + if (me.signObject) { + me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + me.scrollerUpdate(); + } + me.font.subscript = btn.pressed; + }); + + me.btnOk = new Common.UI.Button({ + el: $window.find('.primary') + }); + + $window.find('.dlg-btn').on('click', _.bind(me.onBtnClick, me)); + + this.scrollerYL = new Common.UI.Scroller({ + el: this.$window.find('#headerfooter-left-img').parent(), + minScrollbarLength : 20 + }); + this.scrollerYL.update(); this.scrollerYL.scrollTop(0); + this.scrollerYC = new Common.UI.Scroller({ + el: this.$window.find('#headerfooter-center-img').parent(), + minScrollbarLength : 20 + }); + this.scrollerYC.update(); this.scrollerYC.scrollTop(0); + this.scrollerYR = new Common.UI.Scroller({ + el: this.$window.find('#headerfooter-right-img').parent(), + minScrollbarLength : 20 + }); + this.scrollerYR.update(); this.scrollerYR.scrollTop(0); + + me.afterRender(); + }, + + show: function() { + Common.UI.Window.prototype.show.apply(this, arguments); + }, + + close: function() { + Common.UI.Window.prototype.close.apply(this, arguments); + + if (this.signObject) + this.signObject.destroy(); + // if (this.HFObject) + // this.HFObject.destroy(); + }, + + afterRender: function () { + this.cmbFonts.fillFonts(this.fontStore); + this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); + + this.signObject = new AscCommon.CSignatureDrawer('headerfooter-left-img', this.api, 50, 50); + // this.HFObject = new AscCommon.CHeaderDrawer('headerfooter-left-img', 'headerfooter-center-img', 'headerfooter-right-img'); + }, + + getSettings: function () { + var props = {}; + return props; + }, + + onBtnClick: function(event) { + this._handleInput(event.currentTarget.attributes['result'].value); + }, + + onPrimary: function(event) { + this._handleInput('ok'); + return false; + }, + + _handleInput: function(state) { + if (this.options.handler) { + this.options.handler.call(this, this, state); + } + this.close(); + }, + + scrollerUpdate: function() { + this.scrollerYL.update(); + this.scrollerYR.update(); + this.scrollerYC.update(); + }, + + cancelButtonText: 'Cancel', + okButtonText: 'Ok', + tipFontName: 'Font Name', + tipFontSize: 'Font Size', + textBold: 'Bold', + textItalic: 'Italic', + textUnderline: 'Underline', + textStrikeout: 'Strikeout', + textSuperscript: 'Superscript', + textSubscript: 'Subscript', + textHeader: 'Header', + textFooter: 'Footer', + textLeft: 'Left', + textCenter: 'Center', + textRight: 'Right' + + }, SSE.Views.HeaderFooterDialog || {})) +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index a9d750a42c..64e9aadfeb 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -1438,6 +1438,27 @@ define([ }) }); + me.btnEditHeader = new Common.UI.Button({ + id: 'tlbtn-editheader', + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'btn-editheader', + caption: me.capBtnInsHeader, + lock : [_set.editCell, _set.selRangeEdit, _set.printAreaLock, _set.lostConnect, _set.coAuth], + menu: new Common.UI.Menu({ + cls: 'ppm-toolbar', + items: [ + { + caption: me.mniEditHeader, + value: 'header' + }, + { + caption: me.mniEditFooter, + value: 'footer' + } + ] + }) + }); + me.btnImgAlign = new Common.UI.Button({ cls: 'btn-toolbar x-huge icon-top', iconCls: 'btn-img-align', @@ -1493,7 +1514,7 @@ define([ me.btnInsertChart, me.btnColorSchemas, me.btnAutofilter, me.btnCopy, me.btnPaste, me.listStyles, me.btnPrint, /*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle, - me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup + me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup, me.btnEditHeader ]; var _temp_array = [me.cmbFontName, me.cmbFontSize, me.btnAlignLeft,me.btnAlignCenter,me.btnAlignRight,me.btnAlignJust,me.btnAlignTop, @@ -1669,6 +1690,7 @@ define([ _injectComponent('#slot-img-group', this.btnImgGroup); _injectComponent('#slot-img-movefrwd', this.btnImgForward); _injectComponent('#slot-img-movebkwd', this.btnImgBackward); + _injectComponent('#slot-btn-editheader', this.btnEditHeader); // replacePlacholder('#id-toolbar-short-placeholder-btn-halign', this.btnHorizontalAlign); // replacePlacholder('#id-toolbar-short-placeholder-btn-valign', this.btnVerticalAlign); @@ -1742,6 +1764,7 @@ define([ _updateHint(this.btnPageSize, this.tipPageSize); _updateHint(this.btnPageMargins, this.tipPageMargins); _updateHint(this.btnPrintArea, this.tipPrintArea); + _updateHint(this.btnEditHeader, this.tipEditHeader); // set menus if (this.btnBorders && this.btnBorders.rendered) { @@ -2451,6 +2474,10 @@ define([ textSetPrintArea: 'Set Print Area', textClearPrintArea: 'Clear Print Area', textAddPrintArea: 'Add to Print Area', - tipPrintArea: 'Print Area' + tipPrintArea: 'Print Area', + capBtnInsHeader: 'Headers/Footers', + tipEditHeader: 'Edit Header or Footer', + mniEditHeader: 'Edit Header', + mniEditFooter: 'Edit Footer' }, SSE.Views.Toolbar || {})); }); \ No newline at end of file From 6446725dd5c8f21f75e712509fd676eb97861ab9 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 24 Oct 2018 16:11:58 +0300 Subject: [PATCH 02/20] [SSE] Edit header/footer: click on canvas --- .../main/app/view/HeaderFooterDialog.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index df546246f1..b245059bed 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -261,6 +261,10 @@ define([ $window.find('.dlg-btn').on('click', _.bind(me.onBtnClick, me)); + $window.find('#headerfooter-left-img').on('click', _.bind(me.onCanvasClick, me, '#headerfooter-left-img')); + $window.find('#headerfooter-center-img').on('click', _.bind(me.onCanvasClick, me, '#headerfooter-center-img')); + $window.find('#headerfooter-right-img').on('click', _.bind(me.onCanvasClick, me, '#headerfooter-right-img')); + this.scrollerYL = new Common.UI.Scroller({ el: this.$window.find('#headerfooter-left-img').parent(), minScrollbarLength : 20 @@ -297,8 +301,10 @@ define([ this.cmbFonts.fillFonts(this.fontStore); this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); - this.signObject = new AscCommon.CSignatureDrawer('headerfooter-left-img', this.api, 50, 50); - // this.HFObject = new AscCommon.CHeaderDrawer('headerfooter-left-img', 'headerfooter-center-img', 'headerfooter-right-img'); + // this.signObject = new AscCommon.CSignatureDrawer('headerfooter-left-img', this.api, 50, 50); + this.HFObject = new AscCommonExcel.CHeaderFooterEditor('headerfooter-left-img', 'headerfooter-center-img', 'headerfooter-right-img', 190); + + }, getSettings: function () { @@ -328,6 +334,10 @@ define([ this.scrollerYC.update(); }, + onCanvasClick: function(id, event){ + this.HFObject.click(id, event.pageX*Common.Utils.zoom(), event.pageY*Common.Utils.zoom()); + }, + cancelButtonText: 'Cancel', okButtonText: 'Ok', tipFontName: 'Font Name', From 61e71afc828db2240b95ac8a69fc82bccf07250d Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 25 Oct 2018 16:36:05 +0300 Subject: [PATCH 03/20] [SSE] Destroy header object --- apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index b245059bed..282bf83c07 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -291,10 +291,8 @@ define([ close: function() { Common.UI.Window.prototype.close.apply(this, arguments); - if (this.signObject) - this.signObject.destroy(); - // if (this.HFObject) - // this.HFObject.destroy(); + if (this.HFObject) + this.HFObject.destroy(); }, afterRender: function () { From ebb67c9b6e215ed7b8ce1277f0da2656eefe4698 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Oct 2018 15:34:34 +0300 Subject: [PATCH 04/20] [SSE] Set font settings for header/footer. --- .../main/app/view/HeaderFooterDialog.js | 48 +++++++++++-------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 282bf83c07..0e527f42fe 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -48,7 +48,7 @@ define([ SSE.Views.HeaderFooterDialog = Common.UI.Window.extend(_.extend({ options: { - width: 654, + width: 660, style: 'min-width: 350px;', cls: 'modal-dlg' }, @@ -78,19 +78,19 @@ define([ '
', '
', '', - '
', + '
', '
', '
', '
', '
', '', - '
', + '
', '
', '
', '
', '
', '', - '
', + '
', '
', '
', '
', @@ -122,8 +122,8 @@ define([ recent : 0, hint : me.tipFontName }).on('selected', function(combo, record) { - if (me.signObject) { - me.signObject.setText('Some text', record.name, me.font.size, me.font.italic, me.font.bold); + if (me.HFObject) { + me.HFObject.setFontName(record.name); me.scrollerUpdate(); } me.font.name = record.name; @@ -155,8 +155,8 @@ define([ { value: 72, displayValue: "72" } ] }).on('selected', function(combo, record) { - if (me.signObject) { - me.signObject.setText('Some text', me.font.name, record.value, me.font.italic, me.font.bold); + if (me.HFObject) { + me.HFObject.setFontSize(record.value); me.scrollerUpdate(); } me.font.size = record.value; @@ -171,8 +171,8 @@ define([ }); me.btnBold.render($('#id-dlg-sign-bold')) ; me.btnBold.on('click', function(btn, e) { - if (me.signObject) { - me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, btn.pressed); + if (me.HFObject) { + me.HFObject.setBold(btn.pressed); me.scrollerUpdate(); } me.font.bold = btn.pressed; @@ -186,8 +186,8 @@ define([ }); me.btnItalic.render($('#id-dlg-sign-italic')) ; me.btnItalic.on('click', function(btn, e) { - if (me.signObject) { - me.signObject.setText('Some text', me.font.name, me.font.size, btn.pressed, me.font.bold); + if (me.HFObject) { + me.HFObject.setItalic(btn.pressed); me.scrollerUpdate(); } me.font.italic = btn.pressed; @@ -201,8 +201,8 @@ define([ }); me.btnUnderline.render($('#id-dlg-sign-underline')) ; me.btnUnderline.on('click', function(btn, e) { - if (me.signObject) { - me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + if (me.HFObject) { + me.HFObject.setUnderline(btn.pressed); me.scrollerUpdate(); } me.font.underline = btn.pressed; @@ -216,8 +216,8 @@ define([ }); me.btnStrikeout.render($('#id-dlg-sign-strikeout')) ; me.btnStrikeout.on('click', function(btn, e) { - if (me.signObject) { - me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + if (me.HFObject) { + me.HFObject.setStrikeout(btn.pressed); me.scrollerUpdate(); } me.font.strikeout = btn.pressed; @@ -232,8 +232,8 @@ define([ }); me.btnSuperscript.render($('#id-dlg-sign-superscript')) ; me.btnSuperscript.on('click', function(btn, e) { - if (me.signObject) { - me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + if (me.HFObject) { + me.HFObject.setSuperscript(btn.pressed); me.scrollerUpdate(); } me.font.superscript = btn.pressed; @@ -248,8 +248,8 @@ define([ }); me.btnSubscript.render($('#id-dlg-sign-subscript')) ; me.btnSubscript.on('click', function(btn, e) { - if (me.signObject) { - me.signObject.setText('Some text', me.font.name, me.font.size, me.font.italic, me.font.bold); + if (me.HFObject) { + me.HFObject.setSubscript(btn.pressed); me.scrollerUpdate(); } me.font.subscript = btn.pressed; @@ -323,6 +323,10 @@ define([ if (this.options.handler) { this.options.handler.call(this, this, state); } + if (this.HFObject) { + this.HFObject.destroy(state=='ok'); + this.HFObject = null; + } this.close(); }, @@ -333,7 +337,9 @@ define([ }, onCanvasClick: function(id, event){ - this.HFObject.click(id, event.pageX*Common.Utils.zoom(), event.pageY*Common.Utils.zoom()); + 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()); }, cancelButtonText: 'Cancel', From a5098b22e1695881019737bbf68f7073eb38c3ae Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Oct 2018 15:59:07 +0300 Subject: [PATCH 05/20] [SSE] Add fields to header/footer --- .../main/app/view/HeaderFooterDialog.js | 119 ++++++++++++++---- 1 file changed, 94 insertions(+), 25 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 0e527f42fe..be5f7fd0d5 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -70,11 +70,15 @@ define([ this.template = [ '
', - '
', - '
', - '
','
', - '
','
', - '
','
', + '
', + '
', + '
','
', + '
','
', + '
','
', + '
','
', + '
','
', + '
', '
', + '
', '
', '
', '', @@ -113,7 +117,7 @@ define([ $window = this.getChild(); me.cmbFonts = new Common.UI.ComboBoxFonts({ - el : $('#id-dlg-sign-fonts'), + el : $('#id-dlg-hf-fonts'), cls : 'input-group-nr', style : 'width: 234px;', menuCls : 'scrollable-menu', @@ -126,11 +130,10 @@ define([ me.HFObject.setFontName(record.name); me.scrollerUpdate(); } - me.font.name = record.name; }); this.cmbFontSize = new Common.UI.ComboBox({ - el: $('#id-dlg-sign-font-size'), + el: $('#id-dlg-hf-font-size'), cls: 'input-group-nr', style: 'width: 55px;', menuCls : 'scrollable-menu', @@ -159,7 +162,6 @@ define([ me.HFObject.setFontSize(record.value); me.scrollerUpdate(); } - me.font.size = record.value; }); this.cmbFontSize.setValue(this.font.size); @@ -169,13 +171,12 @@ define([ enableToggle: true, hint: me.textBold }); - me.btnBold.render($('#id-dlg-sign-bold')) ; + me.btnBold.render($('#id-dlg-hf-bold')) ; me.btnBold.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setBold(btn.pressed); me.scrollerUpdate(); } - me.font.bold = btn.pressed; }); me.btnItalic = new Common.UI.Button({ @@ -184,13 +185,12 @@ define([ enableToggle: true, hint: me.textItalic }); - me.btnItalic.render($('#id-dlg-sign-italic')) ; + me.btnItalic.render($('#id-dlg-hf-italic')) ; me.btnItalic.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setItalic(btn.pressed); me.scrollerUpdate(); } - me.font.italic = btn.pressed; }); me.btnUnderline = new Common.UI.Button({ @@ -199,13 +199,12 @@ define([ enableToggle: true, hint: me.textUnderline }); - me.btnUnderline.render($('#id-dlg-sign-underline')) ; + me.btnUnderline.render($('#id-dlg-hf-underline')) ; me.btnUnderline.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setUnderline(btn.pressed); me.scrollerUpdate(); } - me.font.underline = btn.pressed; }); me.btnStrikeout = new Common.UI.Button({ @@ -214,13 +213,12 @@ define([ enableToggle: true, hint: me.textStrikeout }); - me.btnStrikeout.render($('#id-dlg-sign-strikeout')) ; + me.btnStrikeout.render($('#id-dlg-hf-strikeout')) ; me.btnStrikeout.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setStrikeout(btn.pressed); me.scrollerUpdate(); } - me.font.strikeout = btn.pressed; }); this.btnSuperscript = new Common.UI.Button({ @@ -230,13 +228,12 @@ define([ toggleGroup: 'superscriptHFGroup', hint: me.textSuperscript }); - me.btnSuperscript.render($('#id-dlg-sign-superscript')) ; + me.btnSuperscript.render($('#id-dlg-hf-superscript')) ; me.btnSuperscript.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setSuperscript(btn.pressed); me.scrollerUpdate(); } - me.font.superscript = btn.pressed; }); this.btnSubscript = new Common.UI.Button({ @@ -246,15 +243,83 @@ define([ toggleGroup: 'superscriptHFGroup', hint: me.textSubscript }); - me.btnSubscript.render($('#id-dlg-sign-subscript')) ; + me.btnSubscript.render($('#id-dlg-hf-subscript')) ; me.btnSubscript.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setSubscript(btn.pressed); me.scrollerUpdate(); } - me.font.subscript = btn.pressed; }); + + var onHeaderFooterFieldClick = function(btn){ + if (me.HFObject) + me.HFObject.addField(btn.options.value); + }; + + me.btnPageNum = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-align-just', + hint: me.textPageNum, + value: Asc.c_oAscHeaderFooterField.pageNumber + }); + me.btnPageNum.render($('#id-dlg-hf-pagenum')) ; + me.btnPageNum.on('click', onHeaderFooterFieldClick); + + me.btnPageCount = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-align-just', + hint: me.textPageCount, + value: Asc.c_oAscHeaderFooterField.pageCount + }); + me.btnPageCount.render($('#id-dlg-hf-pagecount')) ; + me.btnPageCount.on('click', onHeaderFooterFieldClick); + + me.btnDate = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-align-just', + hint: me.textDate, + value: Asc.c_oAscHeaderFooterField.date + }); + me.btnDate.render($('#id-dlg-hf-date')) ; + me.btnDate.on('click', onHeaderFooterFieldClick); + + me.btnTime = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-align-just', + hint: me.textTime, + value: Asc.c_oAscHeaderFooterField.time + }); + me.btnTime.render($('#id-dlg-hf-time')) ; + me.btnTime.on('click', onHeaderFooterFieldClick); + + me.btnFilePath = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-align-just', + hint: me.textFilePath, + value: Asc.c_oAscHeaderFooterField.filePath + }); + me.btnFilePath.render($('#id-dlg-hf-filepath')) ; + me.btnFilePath.on('click', onHeaderFooterFieldClick); + + me.btnFileName = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-align-just', + hint: me.textFileName, + value: Asc.c_oAscHeaderFooterField.fileName + }); + me.btnFileName.render($('#id-dlg-hf-filename')) ; + me.btnFileName.on('click', onHeaderFooterFieldClick); + + me.btnSheet = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-align-just', + hint: me.textSheet, + value: Asc.c_oAscHeaderFooterField.sheetName + }); + me.btnSheet.render($('#id-dlg-hf-sheet')) ; + me.btnSheet.on('click', onHeaderFooterFieldClick); + me.btnOk = new Common.UI.Button({ el: $window.find('.primary') }); @@ -299,10 +364,7 @@ define([ this.cmbFonts.fillFonts(this.fontStore); this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); - // this.signObject = new AscCommon.CSignatureDrawer('headerfooter-left-img', this.api, 50, 50); this.HFObject = new AscCommonExcel.CHeaderFooterEditor('headerfooter-left-img', 'headerfooter-center-img', 'headerfooter-right-img', 190); - - }, getSettings: function () { @@ -356,7 +418,14 @@ define([ textFooter: 'Footer', textLeft: 'Left', textCenter: 'Center', - textRight: 'Right' + textRight: 'Right', + textPageNum: 'Insert page number', + textPageCount: 'Insert page count', + textDate: 'Insert date', + textTime: 'Insert time', + textFilePath: 'Insert file path', + textFileName: 'Insert file name', + textSheet: 'Insert sheet name' }, SSE.Views.HeaderFooterDialog || {})) }); \ No newline at end of file From c1cf352dd1f38b6ee38a57004ca19007fb81da87 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Oct 2018 17:07:48 +0300 Subject: [PATCH 06/20] [SSE] Add text color to header/footer --- .../main/app/view/HeaderFooterDialog.js | 51 +++++++++++++++++-- 1 file changed, 46 insertions(+), 5 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index be5f7fd0d5..164658d30a 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -70,9 +70,10 @@ define([ this.template = [ '
', - '
', - '
', - '
','
', + '
', + '
', + '
', + '
','
', '
','
', '
','
', '
','
', @@ -119,7 +120,7 @@ define([ me.cmbFonts = new Common.UI.ComboBoxFonts({ el : $('#id-dlg-hf-fonts'), cls : 'input-group-nr', - style : 'width: 234px;', + style : 'width: 220px;', menuCls : 'scrollable-menu', menuStyle : 'min-width: 234px;max-height: 270px;', store : new Common.Collections.Fonts(), @@ -251,6 +252,39 @@ define([ } }); + me.btnTextColor = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-fontcolor', + hint : me.textColor, + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + me.textNewColor + '') } + ] + }) + }); + me.btnTextColor.render($('#id-dlg-hf-textcolor')); + if (me.btnTextColor && me.btnTextColor.cmpEl) { + var colorVal = $('
'); + $('button:first-child', this.btnTextColor.cmpEl).append(colorVal); + colorVal.css('background-color', this.btnTextColor.currentColor || '#000000'); + me.mnuTextColorPicker = new Common.UI.ThemeColorPalette({ + el: $('#id-dlg-hf-menu-fontcolor') + }); + } + this.btnTextColor.menu.cmpEl.on('click', '#id-dlg-hf-menu-new-fontcolor', _.bind(function() { + me.mnuTextColorPicker.addNewColor((typeof(me.btnTextColor.color) == 'object') ? me.btnTextColor.color.color : me.btnTextColor.color); + }, me)); + me.mnuTextColorPicker.on('select', function(picker, color, fromBtn) { + var clr = (typeof(color) == 'object') ? color.color : color; + + me.btnTextColor.currentColor = color; + $('.btn-color-value-line', me.btnTextColor.cmpEl).css('background-color', '#' + clr); + + me.mnuTextColorPicker.currentColor = color; + if (me.HFObject) + me.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + }); var onHeaderFooterFieldClick = function(btn){ if (me.HFObject) @@ -363,10 +397,15 @@ define([ afterRender: function () { this.cmbFonts.fillFonts(this.fontStore); this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); + this.updateThemeColors(); this.HFObject = new AscCommonExcel.CHeaderFooterEditor('headerfooter-left-img', 'headerfooter-center-img', 'headerfooter-right-img', 190); }, + updateThemeColors: function() { + this.mnuTextColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + }, + getSettings: function () { var props = {}; return props; @@ -425,7 +464,9 @@ define([ textTime: 'Insert time', textFilePath: 'Insert file path', textFileName: 'Insert file name', - textSheet: 'Insert sheet name' + textSheet: 'Insert sheet name', + textColor: 'Text color', + textNewColor: 'Add New Custom Color' }, SSE.Views.HeaderFooterDialog || {})) }); \ No newline at end of file From 82b36d5508af2c9140a8527f0ea91e6ff9dae744 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 23 Jan 2019 12:00:23 +0300 Subject: [PATCH 07/20] [SSE] Change layout for header/footer settings --- .../main/app/view/HeaderFooterDialog.js | 253 ++++++++---------- 1 file changed, 116 insertions(+), 137 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 164658d30a..bfa17317ab 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -33,7 +33,7 @@ /** * HeaderFooterDialog.js * - * Created by Julia Radzhabova on 10/111/18 + * Created by Julia Radzhabova on 10/11/18 * Copyright (c) 2018 Ascensio System SIA. All rights reserved. * */ @@ -69,34 +69,56 @@ define([ }; this.template = [ - '
', - '
', - '
', - '
', - '
','
', - '
','
', - '
','
', - '
','
', - '
','
', - '
', '
', - '
', - '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
','
', + '
','
', + '
','
', + '', + '
', '
', - '', - '
', - '
', + '
', + '
', '
', '
', '
', - '', - '
', - '
', + '
', + '
', '
', '
', '
', - '', - '
', - '
', + '
', + '
', + '
', + '
', + '
', + '', + '
', + '
', + '
', + '
', + '
', + '
','
', + '
','
', + '
','
', + '
', + '
', + '
', + '', + '
', + '
', + '
', + '
', + '', + '
', + '
', + '
', + '
', + '', '
', '
', '
', @@ -117,12 +139,37 @@ define([ var me = this, $window = this.getChild(); - me.cmbFonts = new Common.UI.ComboBoxFonts({ - el : $('#id-dlg-hf-fonts'), + var data = [ + {displayValue: this.textPageNum, value: Asc.c_oAscHeaderFooterField.pageNumber}, + {displayValue: this.textPageCount, value: Asc.c_oAscHeaderFooterField.pageCount}, + {displayValue: this.textDate, value: Asc.c_oAscHeaderFooterField.date}, + {displayValue: this.textTime, value: Asc.c_oAscHeaderFooterField.time}, + {displayValue: this.textFilePath, value: Asc.c_oAscHeaderFooterField.filePath}, + {displayValue: this.textFileName, value: Asc.c_oAscHeaderFooterField.fileName}, + {displayValue: this.textSheet, value: Asc.c_oAscHeaderFooterField.sheetName} + ]; + + this.cmbInsertH = new Common.UI.ComboBox({ + el : $('#id-dlg-h-insert'), cls : 'input-group-nr', - style : 'width: 220px;', + style : 'width: 120px;', + menuStyle : 'min-width: 100%; max-heigh: 100px;', + editable : false, + data: data + }); + this.cmbInsertH.on('selected', _.bind(function(combo, record) { + combo.setValue(this.textInsert); + if (this.HFObject) + this.HFObject.addField(record.value); + }, this)); + this.cmbInsertH.setValue(this.textInsert); + + me.cmbFonts = new Common.UI.ComboBoxFonts({ + el : $('#id-dlg-h-fonts'), + cls : 'input-group-nr', + style : 'width: 150px;', menuCls : 'scrollable-menu', - menuStyle : 'min-width: 234px;max-height: 270px;', + menuStyle : 'min-width: 100%;max-height: 270px;', store : new Common.Collections.Fonts(), recent : 0, hint : me.tipFontName @@ -134,7 +181,7 @@ define([ }); this.cmbFontSize = new Common.UI.ComboBox({ - el: $('#id-dlg-hf-font-size'), + el: $('#id-dlg-h-font-size'), cls: 'input-group-nr', style: 'width: 55px;', menuCls : 'scrollable-menu', @@ -172,7 +219,7 @@ define([ enableToggle: true, hint: me.textBold }); - me.btnBold.render($('#id-dlg-hf-bold')) ; + me.btnBold.render($('#id-dlg-h-bold')) ; me.btnBold.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setBold(btn.pressed); @@ -186,7 +233,7 @@ define([ enableToggle: true, hint: me.textItalic }); - me.btnItalic.render($('#id-dlg-hf-italic')) ; + me.btnItalic.render($('#id-dlg-h-italic')) ; me.btnItalic.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setItalic(btn.pressed); @@ -200,7 +247,7 @@ define([ enableToggle: true, hint: me.textUnderline }); - me.btnUnderline.render($('#id-dlg-hf-underline')) ; + me.btnUnderline.render($('#id-dlg-h-underline')) ; me.btnUnderline.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setUnderline(btn.pressed); @@ -214,7 +261,7 @@ define([ enableToggle: true, hint: me.textStrikeout }); - me.btnStrikeout.render($('#id-dlg-hf-strikeout')) ; + me.btnStrikeout.render($('#id-dlg-h-strikeout')) ; me.btnStrikeout.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setStrikeout(btn.pressed); @@ -229,7 +276,7 @@ define([ toggleGroup: 'superscriptHFGroup', hint: me.textSuperscript }); - me.btnSuperscript.render($('#id-dlg-hf-superscript')) ; + me.btnSuperscript.render($('#id-dlg-h-superscript')) ; me.btnSuperscript.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setSuperscript(btn.pressed); @@ -244,7 +291,7 @@ define([ toggleGroup: 'superscriptHFGroup', hint: me.textSubscript }); - me.btnSubscript.render($('#id-dlg-hf-subscript')) ; + me.btnSubscript.render($('#id-dlg-h-subscript')) ; me.btnSubscript.on('click', function(btn, e) { if (me.HFObject) { me.HFObject.setSubscript(btn.pressed); @@ -258,21 +305,21 @@ define([ hint : me.textColor, menu : new Common.UI.Menu({ items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } + { template: _.template('
') }, + { template: _.template('' + me.textNewColor + '') } ] }) }); - me.btnTextColor.render($('#id-dlg-hf-textcolor')); + me.btnTextColor.render($('#id-dlg-h-textcolor')); if (me.btnTextColor && me.btnTextColor.cmpEl) { var colorVal = $('
'); $('button:first-child', this.btnTextColor.cmpEl).append(colorVal); colorVal.css('background-color', this.btnTextColor.currentColor || '#000000'); me.mnuTextColorPicker = new Common.UI.ThemeColorPalette({ - el: $('#id-dlg-hf-menu-fontcolor') + el: $('#id-dlg-h-menu-fontcolor') }); } - this.btnTextColor.menu.cmpEl.on('click', '#id-dlg-hf-menu-new-fontcolor', _.bind(function() { + this.btnTextColor.menu.cmpEl.on('click', '#id-dlg-h-menu-new-fontcolor', _.bind(function() { me.mnuTextColorPicker.addNewColor((typeof(me.btnTextColor.color) == 'object') ? me.btnTextColor.color.color : me.btnTextColor.color); }, me)); me.mnuTextColorPicker.on('select', function(picker, color, fromBtn) { @@ -286,103 +333,34 @@ define([ me.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); }); - var onHeaderFooterFieldClick = function(btn){ - if (me.HFObject) - me.HFObject.addField(btn.options.value); - }; - - me.btnPageNum = new Common.UI.Button({ - cls : 'btn-toolbar', - iconCls : 'btn-align-just', - hint: me.textPageNum, - value: Asc.c_oAscHeaderFooterField.pageNumber - }); - me.btnPageNum.render($('#id-dlg-hf-pagenum')) ; - me.btnPageNum.on('click', onHeaderFooterFieldClick); - - me.btnPageCount = new Common.UI.Button({ - cls : 'btn-toolbar', - iconCls : 'btn-align-just', - hint: me.textPageCount, - value: Asc.c_oAscHeaderFooterField.pageCount - }); - me.btnPageCount.render($('#id-dlg-hf-pagecount')) ; - me.btnPageCount.on('click', onHeaderFooterFieldClick); - - me.btnDate = new Common.UI.Button({ - cls : 'btn-toolbar', - iconCls : 'btn-align-just', - hint: me.textDate, - value: Asc.c_oAscHeaderFooterField.date - }); - me.btnDate.render($('#id-dlg-hf-date')) ; - me.btnDate.on('click', onHeaderFooterFieldClick); - - me.btnTime = new Common.UI.Button({ - cls : 'btn-toolbar', - iconCls : 'btn-align-just', - hint: me.textTime, - value: Asc.c_oAscHeaderFooterField.time - }); - me.btnTime.render($('#id-dlg-hf-time')) ; - me.btnTime.on('click', onHeaderFooterFieldClick); - - me.btnFilePath = new Common.UI.Button({ - cls : 'btn-toolbar', - iconCls : 'btn-align-just', - hint: me.textFilePath, - value: Asc.c_oAscHeaderFooterField.filePath - }); - me.btnFilePath.render($('#id-dlg-hf-filepath')) ; - me.btnFilePath.on('click', onHeaderFooterFieldClick); - - me.btnFileName = new Common.UI.Button({ - cls : 'btn-toolbar', - iconCls : 'btn-align-just', - hint: me.textFileName, - value: Asc.c_oAscHeaderFooterField.fileName - }); - me.btnFileName.render($('#id-dlg-hf-filename')) ; - me.btnFileName.on('click', onHeaderFooterFieldClick); - - me.btnSheet = new Common.UI.Button({ - cls : 'btn-toolbar', - iconCls : 'btn-align-just', - hint: me.textSheet, - value: Asc.c_oAscHeaderFooterField.sheetName - }); - me.btnSheet.render($('#id-dlg-hf-sheet')) ; - me.btnSheet.on('click', onHeaderFooterFieldClick); - me.btnOk = new Common.UI.Button({ el: $window.find('.primary') }); $window.find('.dlg-btn').on('click', _.bind(me.onBtnClick, me)); - $window.find('#headerfooter-left-img').on('click', _.bind(me.onCanvasClick, me, '#headerfooter-left-img')); - $window.find('#headerfooter-center-img').on('click', _.bind(me.onCanvasClick, me, '#headerfooter-center-img')); - $window.find('#headerfooter-right-img').on('click', _.bind(me.onCanvasClick, me, '#headerfooter-right-img')); - - this.scrollerYL = new Common.UI.Scroller({ - el: this.$window.find('#headerfooter-left-img').parent(), - minScrollbarLength : 20 - }); - this.scrollerYL.update(); this.scrollerYL.scrollTop(0); - this.scrollerYC = new Common.UI.Scroller({ - el: this.$window.find('#headerfooter-center-img').parent(), - minScrollbarLength : 20 - }); - this.scrollerYC.update(); this.scrollerYC.scrollTop(0); - this.scrollerYR = new Common.UI.Scroller({ - el: this.$window.find('#headerfooter-right-img').parent(), - minScrollbarLength : 20 - }); - this.scrollerYR.update(); this.scrollerYR.scrollTop(0); + this.scrollers = []; + this.initCanvas('#header-left-img'); + this.initCanvas('#header-center-img'); + this.initCanvas('#header-right-img'); + this.initCanvas('#footer-left-img'); + this.initCanvas('#footer-center-img'); + this.initCanvas('#footer-right-img'); me.afterRender(); }, + initCanvas: function(name) { + var el = this.$window.find(name); + el.on('click', _.bind(this.onCanvasClick, this, name)); + this.scrollers.push(new Common.UI.Scroller({ + el: el.parent(), + minScrollbarLength : 20 + })); + this.scrollers[this.scrollers.length-1].update(); + this.scrollers[this.scrollers.length-1].scrollTop(0); + }, + show: function() { Common.UI.Window.prototype.show.apply(this, arguments); }, @@ -399,7 +377,7 @@ define([ this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); this.updateThemeColors(); - this.HFObject = new AscCommonExcel.CHeaderFooterEditor('headerfooter-left-img', 'headerfooter-center-img', 'headerfooter-right-img', 190); + this.HFObject = new AscCommonExcel.CHeaderFooterEditor('header-left-img', 'header-center-img', 'header-right-img', 190); }, updateThemeColors: function() { @@ -432,9 +410,9 @@ define([ }, scrollerUpdate: function() { - this.scrollerYL.update(); - this.scrollerYR.update(); - this.scrollerYC.update(); + this.scrollers.forEach(function(item){ + item.update(); + }); }, onCanvasClick: function(id, event){ @@ -458,15 +436,16 @@ define([ textLeft: 'Left', textCenter: 'Center', textRight: 'Right', - textPageNum: 'Insert page number', - textPageCount: 'Insert page count', - textDate: 'Insert date', - textTime: 'Insert time', - textFilePath: 'Insert file path', - textFileName: 'Insert file name', - textSheet: 'Insert sheet name', + textPageNum: 'Page number', + textPageCount: 'Page count', + textDate: 'Date', + textTime: 'Time', + textFilePath: 'File path', + textFileName: 'File name', + textSheet: 'Sheet name', textColor: 'Text color', - textNewColor: 'Add New Custom Color' + textNewColor: 'Add New Custom Color', + textInsert: 'Insert' }, SSE.Views.HeaderFooterDialog || {})) }); \ No newline at end of file From e27152626aa324d387a5bbdc63ec2179edcb6113 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 23 Jan 2019 15:29:51 +0300 Subject: [PATCH 08/20] [SSE] Change layout for header/footer settings --- .../main/app/controller/Toolbar.js | 8 +- .../main/app/view/HeaderFooterDialog.js | 402 ++++++++++++------ .../main/app/view/Toolbar.js | 19 +- 3 files changed, 283 insertions(+), 146 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 6049a13b0b..d36b5df499 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -366,7 +366,7 @@ define([ toolbar.btnImgAlign.menu.on('item:click', _.bind(this.onImgAlignSelect, this)); toolbar.btnImgForward.on('click', this.onImgArrangeSelect.bind(this, 'forward')); toolbar.btnImgBackward.on('click', this.onImgArrangeSelect.bind(this, 'backward')); - toolbar.btnEditHeader.menu.on('item:click', _.bind(this.onEditHeaderClick, this)); + toolbar.btnEditHeader.on('click', _.bind(this.onEditHeaderClick, this)); this.onSetupCopyStyleButton(); } @@ -3290,7 +3290,7 @@ define([ this.toolbar.btnPrintArea.menu.items[2].setVisible(this.api.asc_CanAddPrintArea()); }, - onEditHeaderClick: function(menu, item) { + onEditHeaderClick: function(btn) { var me = this; if (_.isUndefined(me.fontStore)) { me.fontStore = new Common.Collections.Fonts(); @@ -3307,14 +3307,10 @@ define([ var win = new SSE.Views.HeaderFooterDialog({ api: me.api, fontStore: me.fontStore, - type: item.value, handler: function(dlg, result) { if (result == 'ok') { var props = dlg.getSettings(); - // if (item.value == 'header') // me.api.asc_editHeader(props); - // else - // me.api.asc_editFooter(props); } Common.NotificationCenter.trigger('edit:complete'); } diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index bfa17317ab..a48abaf37f 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -48,18 +48,17 @@ define([ SSE.Views.HeaderFooterDialog = Common.UI.Window.extend(_.extend({ options: { - width: 660, + width: 647, style: 'min-width: 350px;', cls: 'modal-dlg' }, initialize : function(options) { _.extend(this.options, { - title: (this.options.type == 'header') ? this.textHeader : this.textFooter + title: this.textTitle }, options || {}); this.api = this.options.api; - this.type = this.options.type || 'header'; this.fontStore = this.options.fontStore; this.font = { size: 11, @@ -70,22 +69,22 @@ define([ this.template = [ '
', + '', '
', - '
', + '
', '
', '
', '
', '
','
', '
','
', '
','
', - '', - '
', - '
', + '
', + '
', '
', '
', '
', '
', - '
', + '
', '
', '
', '
', @@ -96,22 +95,22 @@ define([ '
', '
', '
', - '', + '', '
', - '
', + '
', '
', '
', '
', '
','
', '
','
', '
','
', - '
', - '
', + '
', + '
', '
', '', '
', '
', - '
', + '
', '
', '', '
', @@ -139,6 +138,28 @@ define([ var me = this, $window = this.getChild(); + this.cmbPresetsH = new Common.UI.ComboBox({ + el : $('#id-dlg-h-presets'), + cls : 'input-group-nr', + style : 'width: 115px;', + menuStyle : 'min-width: 100%; max-heigh: 100px;', + editable : false, + data: data + }); + this.cmbPresetsH.on('selected', _.bind(this.onPresetSelect, this)); + this.cmbPresetsH.setValue(this.textPresets); + + this.cmbPresetsF = new Common.UI.ComboBox({ + el : $('#id-dlg-f-presets'), + cls : 'input-group-nr', + style : 'width: 115px;', + menuStyle : 'min-width: 100%; max-heigh: 100px;', + editable : false, + data: data + }); + this.cmbPresetsF.on('selected', _.bind(this.onPresetSelect, this)); + this.cmbPresetsF.setValue(this.textPresets); + var data = [ {displayValue: this.textPageNum, value: Asc.c_oAscHeaderFooterField.pageNumber}, {displayValue: this.textPageCount, value: Asc.c_oAscHeaderFooterField.pageCount}, @@ -152,19 +173,26 @@ define([ this.cmbInsertH = new Common.UI.ComboBox({ el : $('#id-dlg-h-insert'), cls : 'input-group-nr', - style : 'width: 120px;', + style : 'width: 115px;', menuStyle : 'min-width: 100%; max-heigh: 100px;', editable : false, data: data }); - this.cmbInsertH.on('selected', _.bind(function(combo, record) { - combo.setValue(this.textInsert); - if (this.HFObject) - this.HFObject.addField(record.value); - }, this)); + this.cmbInsertH.on('selected', _.bind(this.onObjectSelect, this)); this.cmbInsertH.setValue(this.textInsert); - me.cmbFonts = new Common.UI.ComboBoxFonts({ + this.cmbInsertF = new Common.UI.ComboBox({ + el : $('#id-dlg-f-insert'), + cls : 'input-group-nr', + style : 'width: 115px;', + menuStyle : 'min-width: 100%; max-heigh: 100px;', + editable : false, + data: data + }); + this.cmbInsertF.on('selected', _.bind(this.onObjectSelect, this)); + this.cmbInsertF.setValue(this.textInsert); + + me.cmbFontsH = new Common.UI.ComboBoxFonts({ el : $('#id-dlg-h-fonts'), cls : 'input-group-nr', style : 'width: 150px;', @@ -173,165 +201,208 @@ define([ store : new Common.Collections.Fonts(), recent : 0, hint : me.tipFontName - }).on('selected', function(combo, record) { - if (me.HFObject) { - me.HFObject.setFontName(record.name); - me.scrollerUpdate(); - } - }); + }).on('selected', _.bind(this.onFontSelect, this)); + me.cmbFontsF = new Common.UI.ComboBoxFonts({ + el : $('#id-dlg-f-fonts'), + cls : 'input-group-nr', + style : 'width: 150px;', + menuCls : 'scrollable-menu', + menuStyle : 'min-width: 100%;max-height: 270px;', + store : new Common.Collections.Fonts(), + recent : 0, + hint : me.tipFontName + }).on('selected', _.bind(this.onFontSelect, this)); - this.cmbFontSize = new Common.UI.ComboBox({ + data = [ + { value: 8, displayValue: "8" }, + { value: 9, displayValue: "9" }, + { value: 10, displayValue: "10" }, + { value: 11, displayValue: "11" }, + { value: 12, displayValue: "12" }, + { value: 14, displayValue: "14" }, + { value: 16, displayValue: "16" }, + { value: 18, displayValue: "18" }, + { value: 20, displayValue: "20" }, + { value: 22, displayValue: "22" }, + { value: 24, displayValue: "24" }, + { value: 26, displayValue: "26" }, + { value: 28, displayValue: "28" }, + { value: 36, displayValue: "36" }, + { value: 48, displayValue: "48" }, + { value: 72, displayValue: "72" } + ]; + this.cmbFontSizeH = new Common.UI.ComboBox({ el: $('#id-dlg-h-font-size'), cls: 'input-group-nr', style: 'width: 55px;', menuCls : 'scrollable-menu', menuStyle: 'min-width: 55px;max-height: 270px;', hint: this.tipFontSize, - data: [ - { value: 8, displayValue: "8" }, - { value: 9, displayValue: "9" }, - { value: 10, displayValue: "10" }, - { value: 11, displayValue: "11" }, - { value: 12, displayValue: "12" }, - { value: 14, displayValue: "14" }, - { value: 16, displayValue: "16" }, - { value: 18, displayValue: "18" }, - { value: 20, displayValue: "20" }, - { value: 22, displayValue: "22" }, - { value: 24, displayValue: "24" }, - { value: 26, displayValue: "26" }, - { value: 28, displayValue: "28" }, - { value: 36, displayValue: "36" }, - { value: 48, displayValue: "48" }, - { value: 72, displayValue: "72" } - ] - }).on('selected', function(combo, record) { - if (me.HFObject) { - me.HFObject.setFontSize(record.value); - me.scrollerUpdate(); - } - }); - this.cmbFontSize.setValue(this.font.size); + data: data + }).on('selected', _.bind(this.onFontSizeSelect, this)); + this.cmbFontSizeH.setValue(this.font.size); + this.cmbFontSizeF = new Common.UI.ComboBox({ + el: $('#id-dlg-f-font-size'), + cls: 'input-group-nr', + style: 'width: 55px;', + menuCls : 'scrollable-menu', + menuStyle: 'min-width: 55px;max-height: 270px;', + hint: this.tipFontSize, + data: data + }).on('selected', _.bind(this.onFontSizeSelect, this)); + this.cmbFontSizeF.setValue(this.font.size); - me.btnBold = new Common.UI.Button({ + me.btnBoldH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-bold', enableToggle: true, hint: me.textBold }); - me.btnBold.render($('#id-dlg-h-bold')) ; - me.btnBold.on('click', function(btn, e) { - if (me.HFObject) { - me.HFObject.setBold(btn.pressed); - me.scrollerUpdate(); - } - }); + me.btnBoldH.render($('#id-dlg-h-bold')) ; + me.btnBoldH.on('click', _.bind(this.onBoldClick, this)); - me.btnItalic = new Common.UI.Button({ + me.btnBoldF = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-bold', + enableToggle: true, + hint: me.textBold + }); + me.btnBoldF.render($('#id-dlg-f-bold')) ; + me.btnBoldF.on('click', _.bind(this.onBoldClick, this)); + + me.btnItalicH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-italic', enableToggle: true, hint: me.textItalic }); - me.btnItalic.render($('#id-dlg-h-italic')) ; - me.btnItalic.on('click', function(btn, e) { - if (me.HFObject) { - me.HFObject.setItalic(btn.pressed); - me.scrollerUpdate(); - } - }); + me.btnItalicH.render($('#id-dlg-h-italic')) ; + me.btnItalicH.on('click', _.bind(this.onItalicClick, this)); - me.btnUnderline = new Common.UI.Button({ + me.btnItalicF = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-italic', + enableToggle: true, + hint: me.textItalic + }); + me.btnItalicF.render($('#id-dlg-f-italic')) ; + me.btnItalicF.on('click', _.bind(this.onItalicClick, this)); + + me.btnUnderlineH = new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-underline', enableToggle: true, hint: me.textUnderline }); - me.btnUnderline.render($('#id-dlg-h-underline')) ; - me.btnUnderline.on('click', function(btn, e) { - if (me.HFObject) { - me.HFObject.setUnderline(btn.pressed); - me.scrollerUpdate(); - } - }); + me.btnUnderlineH.render($('#id-dlg-h-underline')) ; + me.btnUnderlineH.on('click', _.bind(this.onUnderlineClick, this)); - me.btnStrikeout = new Common.UI.Button({ + me.btnUnderlineF = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-underline', + enableToggle: true, + hint: me.textUnderline + }); + me.btnUnderlineF.render($('#id-dlg-f-underline')) ; + me.btnUnderlineF.on('click', _.bind(this.onUnderlineClick, this)); + + me.btnStrikeoutH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-strikeout', enableToggle: true, hint: me.textStrikeout }); - me.btnStrikeout.render($('#id-dlg-h-strikeout')) ; - me.btnStrikeout.on('click', function(btn, e) { - if (me.HFObject) { - me.HFObject.setStrikeout(btn.pressed); - me.scrollerUpdate(); - } + me.btnStrikeoutH.render($('#id-dlg-h-strikeout')) ; + me.btnStrikeoutH.on('click',_.bind(this.onStrikeoutClick, this)); + me.btnStrikeoutF = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-strikeout', + enableToggle: true, + hint: me.textStrikeout }); + me.btnStrikeoutF.render($('#id-dlg-f-strikeout')) ; + me.btnStrikeoutF.on('click',_.bind(this.onStrikeoutClick, this)); - this.btnSuperscript = new Common.UI.Button({ + this.btnSuperscriptH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-superscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', hint: me.textSuperscript }); - me.btnSuperscript.render($('#id-dlg-h-superscript')) ; - me.btnSuperscript.on('click', function(btn, e) { - if (me.HFObject) { - me.HFObject.setSuperscript(btn.pressed); - me.scrollerUpdate(); - } + me.btnSuperscriptH.render($('#id-dlg-h-superscript')) ; + me.btnSuperscriptH.on('click', _.bind(this.onSuperscriptClick, this)); + this.btnSuperscriptF = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-superscript', + enableToggle: true, + toggleGroup: 'superscriptHFGroup', + hint: me.textSuperscript }); + me.btnSuperscriptF.render($('#id-dlg-f-superscript')) ; + me.btnSuperscriptF.on('click', _.bind(this.onSuperscriptClick, this)); - this.btnSubscript = new Common.UI.Button({ + this.btnSubscriptH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-subscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', hint: me.textSubscript }); - me.btnSubscript.render($('#id-dlg-h-subscript')) ; - me.btnSubscript.on('click', function(btn, e) { - if (me.HFObject) { - me.HFObject.setSubscript(btn.pressed); - me.scrollerUpdate(); - } + me.btnSubscriptH.render($('#id-dlg-h-subscript')) ; + me.btnSubscriptH.on('click', _.bind(this.onSubscriptClick, this)); + this.btnSubscriptF = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-subscript', + enableToggle: true, + toggleGroup: 'superscriptHFGroup', + hint: me.textSubscript }); + me.btnSubscriptF.render($('#id-dlg-f-subscript')) ; + me.btnSubscriptF.on('click', _.bind(this.onSubscriptClick, this)); - me.btnTextColor = new Common.UI.Button({ + var initNewColor = function(btn, picker_el) { + if (btn && btn.cmpEl) { + var colorVal = $('
'); + $('button:first-child', btn.cmpEl).append(colorVal); + colorVal.css('background-color', btn.currentColor || '#000000'); + var picker = new Common.UI.ThemeColorPalette({ + el: $(picker_el) + }); + } + btn.menu.cmpEl.on('click', picker_el+'-new', _.bind(function() { + picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color); + }, me)); + picker.on('select', _.bind(me.onColorSelect, me, btn)); + return picker; + }; + me.btnTextColorH = new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-fontcolor', hint : me.textColor, menu : new Common.UI.Menu({ items: [ { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } + { template: _.template('' + me.textNewColor + '') } ] }) }); - me.btnTextColor.render($('#id-dlg-h-textcolor')); - if (me.btnTextColor && me.btnTextColor.cmpEl) { - var colorVal = $('
'); - $('button:first-child', this.btnTextColor.cmpEl).append(colorVal); - colorVal.css('background-color', this.btnTextColor.currentColor || '#000000'); - me.mnuTextColorPicker = new Common.UI.ThemeColorPalette({ - el: $('#id-dlg-h-menu-fontcolor') - }); - } - this.btnTextColor.menu.cmpEl.on('click', '#id-dlg-h-menu-new-fontcolor', _.bind(function() { - me.mnuTextColorPicker.addNewColor((typeof(me.btnTextColor.color) == 'object') ? me.btnTextColor.color.color : me.btnTextColor.color); - }, me)); - me.mnuTextColorPicker.on('select', function(picker, color, fromBtn) { - var clr = (typeof(color) == 'object') ? color.color : color; + me.btnTextColorH.render($('#id-dlg-h-textcolor')); + me.mnuTextColorPickerH = initNewColor(me.btnTextColorH, "#id-dlg-h-menu-fontcolor"); - me.btnTextColor.currentColor = color; - $('.btn-color-value-line', me.btnTextColor.cmpEl).css('background-color', '#' + clr); - - me.mnuTextColorPicker.currentColor = color; - if (me.HFObject) - me.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + me.btnTextColorF = new Common.UI.Button({ + cls : 'btn-toolbar', + iconCls : 'btn-fontcolor', + hint : me.textColor, + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + me.textNewColor + '') } + ] + }) }); + me.btnTextColorF.render($('#id-dlg-f-textcolor')); + me.mnuTextColorPickerF = initNewColor(me.btnTextColorF, "#id-dlg-f-menu-fontcolor"); me.btnOk = new Common.UI.Button({ el: $window.find('.primary') @@ -363,6 +434,10 @@ define([ show: function() { Common.UI.Window.prototype.show.apply(this, arguments); + var me = this; + _.delay(function(){ + me.HFObject && me.HFObject.click('#header-left-img', 0, 0); + },500); }, close: function() { @@ -373,15 +448,18 @@ define([ }, afterRender: function () { - this.cmbFonts.fillFonts(this.fontStore); - this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); + this.cmbFontsH.fillFonts(this.fontStore); + this.cmbFontsH.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); + this.cmbFontsF.fillFonts(this.fontStore); + this.cmbFontsF.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); this.updateThemeColors(); this.HFObject = new AscCommonExcel.CHeaderFooterEditor('header-left-img', 'header-center-img', 'header-right-img', 190); }, updateThemeColors: function() { - this.mnuTextColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.mnuTextColorPickerH.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.mnuTextColorPickerF.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, getSettings: function () { @@ -421,6 +499,82 @@ define([ this.HFObject.click(id, event.pageX*Common.Utils.zoom() - offset.left, event.pageY*Common.Utils.zoom() - offset.top + parent.scrollTop()); }, + onPresetSelect: function(combo, record) { + // if (this.HFObject) + // this.HFObject.setPreset(record.value); + }, + + onObjectSelect: function(combo, record) { + combo.setValue(this.textInsert); + if (this.HFObject) + this.HFObject.addField(record.value); + }, + + onFontSelect: function(combo, record) { + if (this.HFObject) { + this.HFObject.setFontName(record.name); + this.scrollerUpdate(); + } + }, + + onFontSizeSelect: function(combo, record) { + if (this.HFObject) { + this.HFObject.setFontSize(record.value); + this.scrollerUpdate(); + } + }, + + onBoldClick: function(btn, e) { + if (this.HFObject) { + this.HFObject.setBold(btn.pressed); + this.scrollerUpdate(); + } + }, + + onItalicClick: function(btn, e) { + if (this.HFObject) { + this.HFObject.setItalic(btn.pressed); + this.scrollerUpdate(); + } + }, + + onUnderlineClick: function(btn, e) { + if (this.HFObject) { + this.HFObject.setUnderline(btn.pressed); + this.scrollerUpdate(); + } + }, + + onStrikeoutClick: function(btn, e) { + if (this.HFObject) { + this.HFObject.setStrikeout(btn.pressed); + this.scrollerUpdate(); + } + }, + + onSuperscriptClick: function(btn, e) { + if (this.HFObject) { + this.HFObject.setSuperscript(btn.pressed); + this.scrollerUpdate(); + } + }, + + onSubscriptClick: function(btn, e) { + if (this.HFObject) { + this.HFObject.setSubscript(btn.pressed); + this.scrollerUpdate(); + } + }, + + onColorSelect: function(btn, picker, color) { + var clr = (typeof(color) == 'object') ? color.color : color; + btn.currentColor = color; + $('.btn-color-value-line', btn.cmpEl).css('background-color', '#' + clr); + picker.currentColor = color; + if (this.HFObject) + this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + }, + cancelButtonText: 'Cancel', okButtonText: 'Ok', tipFontName: 'Font Name', @@ -431,6 +585,7 @@ define([ textStrikeout: 'Strikeout', textSuperscript: 'Superscript', textSubscript: 'Subscript', + textTitle: 'Header/Footer Settings', textHeader: 'Header', textFooter: 'Footer', textLeft: 'Left', @@ -445,7 +600,8 @@ define([ textSheet: 'Sheet name', textColor: 'Text color', textNewColor: 'Add New Custom Color', - textInsert: 'Insert' + textInsert: 'Insert', + textPresets: 'Presets' }, SSE.Views.HeaderFooterDialog || {})) }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index faec951c65..d79bb4edbf 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -1443,20 +1443,7 @@ define([ cls: 'btn-toolbar x-huge icon-top', iconCls: 'btn-editheader', caption: me.capBtnInsHeader, - lock : [_set.editCell, _set.selRangeEdit, _set.printAreaLock, _set.lostConnect, _set.coAuth], - menu: new Common.UI.Menu({ - cls: 'ppm-toolbar', - items: [ - { - caption: me.mniEditHeader, - value: 'header' - }, - { - caption: me.mniEditFooter, - value: 'footer' - } - ] - }) + lock : [_set.editCell, _set.selRangeEdit, _set.printAreaLock, _set.lostConnect, _set.coAuth] }); me.btnImgAlign = new Common.UI.Button({ @@ -2466,8 +2453,6 @@ define([ textAddPrintArea: 'Add to Print Area', tipPrintArea: 'Print Area', capBtnInsHeader: 'Headers/Footers', - tipEditHeader: 'Edit Header or Footer', - mniEditHeader: 'Edit Header', - mniEditFooter: 'Edit Footer' + tipEditHeader: 'Edit Header or Footer' }, SSE.Views.Toolbar || {})); }); \ No newline at end of file From 579d565961cb265e0da1d16e8a6a7780fcbfa3a0 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 24 Jan 2019 12:02:33 +0300 Subject: [PATCH 09/20] [SSE] Header/footer settings: set settings for different pages (odd, even, first) --- .../main/app/view/HeaderFooterDialog.js | 151 ++++++++++++++++-- 1 file changed, 138 insertions(+), 13 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index a48abaf37f..6c90eaf737 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -68,7 +68,31 @@ define([ }; this.template = [ - '
', + '
', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '
', + '
', + '		', + '
', + '
', + '
', + '		', + '
', + '
', + '
', + '', + '', + '', + '', + '
', '', '
', '
', @@ -79,23 +103,23 @@ define([ '
','
', '
','
', '
', - '
', - '
', + '
', + '
', '
', '
', '
', - '
', - '
', + '
', + '
', '
', '
', '
', '
', - '
', + '
', '
', '
', '
', '
', - '', + '', '
', '
', '
', @@ -105,18 +129,18 @@ define([ '
','
', '
','
', '
', - '
', - '
', + '
', + '
', '', '
', '
', - '
', - '
', + '
', + '
', '', '
', '
', '
', - '
', + '
', '', '
', '
', @@ -138,6 +162,95 @@ define([ var me = this, $window = this.getChild(); + this.chFirstPage = new Common.UI.CheckBox({ + el: $('#id-dlg-hf-ch-first'), + labelText: this.textDiffFirst + }); + this.chFirstPage.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + var checked = (field.getValue()=='checked'); + // if (this.HFObject) + // this.HFObject.setFirst(checked); + + this.btnFirst.setVisible(checked); + if (!checked && this.btnFirst.isActive()) + (this.btnAll.isVisible()) ? this.btnAll.toggle(true) : this.btnOdd.toggle(true); + + this.cmbPresetsF.setDisabled(checked); + this.cmbPresetsH.setDisabled(checked); + }, this)); + + this.chOddPage = new Common.UI.CheckBox({ + el: $('#id-dlg-hf-ch-odd'), + labelText: this.textDiffOdd + }); + this.chOddPage.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + var checked = (field.getValue()=='checked'); + // if (this.HFObject) + // this.HFObject.setOdd(checked); + + this.btnOdd.setVisible(checked); + this.btnEven.setVisible(checked); + this.btnAll.setVisible(!checked); + if (!checked && (this.btnOdd.isActive() || this.btnEven.isActive())) + this.btnAll.toggle(true); + if (checked && this.btnAll.isActive()) + this.btnOdd.toggle(true); + this.cmbPresetsF.setDisabled(checked); + this.cmbPresetsH.setDisabled(checked); + }, this)); + + this.chScale = new Common.UI.CheckBox({ + el: $('#id-dlg-hf-ch-scale'), + labelText: this.textScale + }); + this.chScale.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + var checked = (field.getValue()=='checked'); + // if (this.HFObject) + // this.HFObject.setScale(checked); + }, this)); + + this.chAlign = new Common.UI.CheckBox({ + el: $('#id-dlg-hf-ch-align'), + labelText: this.textAlign + }); + this.chAlign.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + var checked = (field.getValue()=='checked'); + // if (this.HFObject) + // this.HFObject.setAlign(checked); + }, this)); + + this.btnAll = new Common.UI.Button({ + el: $('#id-dlg-hf-btn-all'), + enableToggle: true, + toggleGroup: 'hf-pages', + allowDepress: false, + pressed: true + }); + + this.btnOdd = new Common.UI.Button({ + el: $('#id-dlg-hf-btn-odd'), + enableToggle: true, + toggleGroup: 'hf-pages', + allowDepress: false + }); + this.btnOdd.on('click', _.bind(this.onPageTypeClick, this, 0)); + + this.btnEven = new Common.UI.Button({ + el: $('#id-dlg-hf-btn-even'), + enableToggle: true, + toggleGroup: 'hf-pages', + allowDepress: false + }); + this.btnEven.on('click', _.bind(this.onPageTypeClick, this, 1)); + + this.btnFirst = new Common.UI.Button({ + el: $('#id-dlg-hf-btn-first'), + enableToggle: true, + toggleGroup: 'hf-pages', + allowDepress: false + }); + this.btnFirst.on('click', _.bind(this.onPageTypeClick, this, 2)); + this.cmbPresetsH = new Common.UI.ComboBox({ el : $('#id-dlg-h-presets'), cls : 'input-group-nr', @@ -575,6 +688,10 @@ define([ this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); }, + onPageTypeClick: function(type, btn, event) { + + }, + cancelButtonText: 'Cancel', okButtonText: 'Ok', tipFontName: 'Font Name', @@ -601,7 +718,15 @@ define([ textColor: 'Text color', textNewColor: 'Add New Custom Color', textInsert: 'Insert', - textPresets: 'Presets' + textPresets: 'Presets', + textDiffFirst: 'Different first page', + textDiffOdd: 'Different odd and even pages', + textScale: 'Scale with document', + textAlign: 'Align with page margins', + textFirst: 'First page', + textOdd: 'Odd page', + textEven: 'Even page', + textAll: 'All pages' }, SSE.Views.HeaderFooterDialog || {})) }); \ No newline at end of file From 62b92c6b3845d5efe5c11e2dab09e01a13a9a51f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 24 Jan 2019 13:20:42 +0300 Subject: [PATCH 10/20] [SSE] Fix header/footer settings init --- .../main/app/view/HeaderFooterDialog.js | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 6c90eaf737..e60a0ad424 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -95,13 +95,13 @@ define([ '
', '', '
', - '
', - '
', - '
', - '
', - '
','
', - '
','
', - '
','
', + '
', + '
', + '
', + '
', + '
','
', + '
','
', + '
','
', '
', '
', '
', @@ -121,13 +121,13 @@ define([ '
', '', '
', - '
', - '
', - '
', - '
', - '
','
', - '
','
', - '
','
', + '
', + '
', + '
', + '
', + '
','
', + '
','
', + '
','
', '
', '
', '
', @@ -254,7 +254,7 @@ define([ this.cmbPresetsH = new Common.UI.ComboBox({ el : $('#id-dlg-h-presets'), cls : 'input-group-nr', - style : 'width: 115px;', + style : 'width: 110px;', menuStyle : 'min-width: 100%; max-heigh: 100px;', editable : false, data: data @@ -265,7 +265,7 @@ define([ this.cmbPresetsF = new Common.UI.ComboBox({ el : $('#id-dlg-f-presets'), cls : 'input-group-nr', - style : 'width: 115px;', + style : 'width: 110px;', menuStyle : 'min-width: 100%; max-heigh: 100px;', editable : false, data: data @@ -286,7 +286,7 @@ define([ this.cmbInsertH = new Common.UI.ComboBox({ el : $('#id-dlg-h-insert'), cls : 'input-group-nr', - style : 'width: 115px;', + style : 'width: 110px;', menuStyle : 'min-width: 100%; max-heigh: 100px;', editable : false, data: data @@ -297,7 +297,7 @@ define([ this.cmbInsertF = new Common.UI.ComboBox({ el : $('#id-dlg-f-insert'), cls : 'input-group-nr', - style : 'width: 115px;', + style : 'width: 110px;', menuStyle : 'min-width: 100%; max-heigh: 100px;', editable : false, data: data @@ -308,7 +308,7 @@ define([ me.cmbFontsH = new Common.UI.ComboBoxFonts({ el : $('#id-dlg-h-fonts'), cls : 'input-group-nr', - style : 'width: 150px;', + style : 'width: 142px;', menuCls : 'scrollable-menu', menuStyle : 'min-width: 100%;max-height: 270px;', store : new Common.Collections.Fonts(), @@ -318,7 +318,7 @@ define([ me.cmbFontsF = new Common.UI.ComboBoxFonts({ el : $('#id-dlg-f-fonts'), cls : 'input-group-nr', - style : 'width: 150px;', + style : 'width: 142px;', menuCls : 'scrollable-menu', menuStyle : 'min-width: 100%;max-height: 270px;', store : new Common.Collections.Fonts(), @@ -567,7 +567,7 @@ define([ this.cmbFontsF.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); this.updateThemeColors(); - this.HFObject = new AscCommonExcel.CHeaderFooterEditor('header-left-img', 'header-center-img', 'header-right-img', 190); + this.HFObject = new AscCommonExcel.CHeaderFooterEditor(['header-left-img', 'header-center-img', 'header-right-img', 'footer-left-img', 'footer-center-img', 'footer-right-img'], 205); }, updateThemeColors: function() { From a97d311ee8fbbfdd3a42023f82e9c6059e12a634 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 25 Jan 2019 11:50:56 +0300 Subject: [PATCH 11/20] [SSE] Header/footer settings: switch between pages --- .../main/app/view/HeaderFooterDialog.js | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index e60a0ad424..378d335106 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -59,6 +59,7 @@ define([ }, options || {}); this.api = this.options.api; + this.props = this.options.props; this.fontStore = this.options.fontStore; this.font = { size: 11, @@ -174,9 +175,6 @@ define([ this.btnFirst.setVisible(checked); if (!checked && this.btnFirst.isActive()) (this.btnAll.isVisible()) ? this.btnAll.toggle(true) : this.btnOdd.toggle(true); - - this.cmbPresetsF.setDisabled(checked); - this.cmbPresetsH.setDisabled(checked); }, this)); this.chOddPage = new Common.UI.CheckBox({ @@ -195,8 +193,6 @@ define([ this.btnAll.toggle(true); if (checked && this.btnAll.isActive()) this.btnOdd.toggle(true); - this.cmbPresetsF.setDisabled(checked); - this.cmbPresetsH.setDisabled(checked); }, this)); this.chScale = new Common.UI.CheckBox({ @@ -226,6 +222,7 @@ define([ allowDepress: false, pressed: true }); + this.btnAll.on('toggle', _.bind(this.onPageTypeToggle, this, Asc.c_oAscHeaderFooterType.odd)); this.btnOdd = new Common.UI.Button({ el: $('#id-dlg-hf-btn-odd'), @@ -233,7 +230,7 @@ define([ toggleGroup: 'hf-pages', allowDepress: false }); - this.btnOdd.on('click', _.bind(this.onPageTypeClick, this, 0)); + this.btnOdd.on('toggle', _.bind(this.onPageTypeToggle, this, Asc.c_oAscHeaderFooterType.odd)); this.btnEven = new Common.UI.Button({ el: $('#id-dlg-hf-btn-even'), @@ -241,7 +238,7 @@ define([ toggleGroup: 'hf-pages', allowDepress: false }); - this.btnEven.on('click', _.bind(this.onPageTypeClick, this, 1)); + this.btnEven.on('toggle', _.bind(this.onPageTypeToggle, this, Asc.c_oAscHeaderFooterType.even)); this.btnFirst = new Common.UI.Button({ el: $('#id-dlg-hf-btn-first'), @@ -249,7 +246,7 @@ define([ toggleGroup: 'hf-pages', allowDepress: false }); - this.btnFirst.on('click', _.bind(this.onPageTypeClick, this, 2)); + this.btnFirst.on('toggle', _.bind(this.onPageTypeToggle, this, Asc.c_oAscHeaderFooterType.first)); this.cmbPresetsH = new Common.UI.ComboBox({ el : $('#id-dlg-h-presets'), @@ -568,6 +565,22 @@ define([ 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._setDefaults(this.props); + }, + + _setDefaults: function (props) { + if (props) { + // this.chOddPage.setValue(props.getOdd()); + // this.chFirstPage.setValue(props.getFirst()); + } + var value = (this.chOddPage.getValue() == 'checked'); + this.btnOdd.setVisible(value); + this.btnEven.setVisible(value); + this.btnAll.setVisible(!value); + value ? this.btnOdd.toggle(true) : this.btnAll.toggle(true); + + value = (this.chFirstPage.getValue() == 'checked'); + this.btnFirst.setVisible(value); }, updateThemeColors: function() { @@ -688,8 +701,9 @@ define([ this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); }, - onPageTypeClick: function(type, btn, event) { - + onPageTypeToggle: function(type, btn, state) { + if (state && this.HFObject) + this.HFObject.switchHeaderFooterType(type); }, cancelButtonText: 'Cancel', From 37ff977c1132d2b01e9e4d34ae4c76515ba8a397 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 29 Jan 2019 12:57:32 +0300 Subject: [PATCH 12/20] [SSE] Apply presets for header/footer --- .../main/app/view/HeaderFooterDialog.js | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 378d335106..1056452b9c 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -252,22 +252,24 @@ define([ el : $('#id-dlg-h-presets'), cls : 'input-group-nr', style : 'width: 110px;', - menuStyle : 'min-width: 100%; max-heigh: 100px;', + menuStyle : 'min-width: 100%; max-height: 200px;', editable : false, - data: data + scrollAlwaysVisible: true, + data: [] }); - this.cmbPresetsH.on('selected', _.bind(this.onPresetSelect, this)); + this.cmbPresetsH.on('selected', _.bind(this.onPresetSelect, this, false)); this.cmbPresetsH.setValue(this.textPresets); this.cmbPresetsF = new Common.UI.ComboBox({ el : $('#id-dlg-f-presets'), cls : 'input-group-nr', style : 'width: 110px;', - menuStyle : 'min-width: 100%; max-heigh: 100px;', + menuStyle : 'min-width: 100%; max-height: 200px;', editable : false, - data: data + scrollAlwaysVisible: true, + data: [] }); - this.cmbPresetsF.on('selected', _.bind(this.onPresetSelect, this)); + this.cmbPresetsF.on('selected', _.bind(this.onPresetSelect, this, true)); this.cmbPresetsF.setValue(this.textPresets); var data = [ @@ -573,6 +575,15 @@ define([ // this.chOddPage.setValue(props.getOdd()); // this.chFirstPage.setValue(props.getFirst()); } + var presets = []; + this.HFObject.getTextPresetsArr().forEach(function(item, index){ + presets.push({displayValue: item, value: index}); + }); + this.cmbPresetsH.setData(presets); + this.cmbPresetsH.setValue(this.textPresets); + this.cmbPresetsF.setData(presets); + this.cmbPresetsF.setValue(this.textPresets); + var value = (this.chOddPage.getValue() == 'checked'); this.btnOdd.setVisible(value); this.btnEven.setVisible(value); @@ -625,9 +636,9 @@ define([ this.HFObject.click(id, event.pageX*Common.Utils.zoom() - offset.left, event.pageY*Common.Utils.zoom() - offset.top + parent.scrollTop()); }, - onPresetSelect: function(combo, record) { - // if (this.HFObject) - // this.HFObject.setPreset(record.value); + onPresetSelect: function(footer, combo, record) { + if (this.HFObject) + this.HFObject.applyPreset(record.value, !!footer); }, onObjectSelect: function(combo, record) { From 4ae17d2d35b516dcd4e9e232ad6b5455957195be Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 30 Jan 2019 14:03:08 +0300 Subject: [PATCH 13/20] [SSE] Apply header/footer settings --- .../main/app/view/HeaderFooterDialog.js | 243 +++++++++++------- 1 file changed, 156 insertions(+), 87 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 1056452b9c..72e93e8882 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -61,11 +61,20 @@ define([ this.api = this.options.api; this.props = this.options.props; this.fontStore = this.options.fontStore; - this.font = { - size: 11, - name: 'Arial', - bold: false, - italic: false + this.isFooter = false; + this.currentCanvas = null; + this.headerControls = []; + this.footerControls = []; + this._state = { + clrtext: undefined, + bold: undefined, + italic: undefined, + underline: undefined, + strikeout: undefined, + subscript: undefined, + superscript: undefined, + fontsize: undefined, + fontname: 'Arial' }; this.template = [ @@ -169,8 +178,8 @@ define([ }); this.chFirstPage.on('change', _.bind(function(field, newValue, oldValue, eOpts){ var checked = (field.getValue()=='checked'); - // if (this.HFObject) - // this.HFObject.setFirst(checked); + if (this.HFObject) + this.HFObject.setDifferentFirst(checked); this.btnFirst.setVisible(checked); if (!checked && this.btnFirst.isActive()) @@ -183,8 +192,8 @@ define([ }); this.chOddPage.on('change', _.bind(function(field, newValue, oldValue, eOpts){ var checked = (field.getValue()=='checked'); - // if (this.HFObject) - // this.HFObject.setOdd(checked); + if (this.HFObject) + this.HFObject.setDifferentOddEven(checked); this.btnOdd.setVisible(checked); this.btnEven.setVisible(checked); @@ -201,8 +210,8 @@ define([ }); this.chScale.on('change', _.bind(function(field, newValue, oldValue, eOpts){ var checked = (field.getValue()=='checked'); - // if (this.HFObject) - // this.HFObject.setScale(checked); + if (this.HFObject) + this.HFObject.setScaleWithDoc(checked); }, this)); this.chAlign = new Common.UI.CheckBox({ @@ -211,8 +220,8 @@ define([ }); this.chAlign.on('change', _.bind(function(field, newValue, oldValue, eOpts){ var checked = (field.getValue()=='checked'); - // if (this.HFObject) - // this.HFObject.setAlign(checked); + if (this.HFObject) + this.HFObject.setAlignWithMargins(checked); }, this)); this.btnAll = new Common.UI.Button({ @@ -292,6 +301,7 @@ define([ }); this.cmbInsertH.on('selected', _.bind(this.onObjectSelect, this)); this.cmbInsertH.setValue(this.textInsert); + this.headerControls.push(this.cmbInsertH); this.cmbInsertF = new Common.UI.ComboBox({ el : $('#id-dlg-f-insert'), @@ -303,8 +313,9 @@ define([ }); this.cmbInsertF.on('selected', _.bind(this.onObjectSelect, this)); this.cmbInsertF.setValue(this.textInsert); + this.footerControls.push(this.cmbInsertF); - me.cmbFontsH = new Common.UI.ComboBoxFonts({ + this.cmbFontsH = new Common.UI.ComboBoxFonts({ el : $('#id-dlg-h-fonts'), cls : 'input-group-nr', style : 'width: 142px;', @@ -312,9 +323,11 @@ define([ menuStyle : 'min-width: 100%;max-height: 270px;', store : new Common.Collections.Fonts(), recent : 0, - hint : me.tipFontName + hint : this.tipFontName }).on('selected', _.bind(this.onFontSelect, this)); - me.cmbFontsF = new Common.UI.ComboBoxFonts({ + this.headerControls.push(this.cmbFontsH); + + this.cmbFontsF = new Common.UI.ComboBoxFonts({ el : $('#id-dlg-f-fonts'), cls : 'input-group-nr', style : 'width: 142px;', @@ -322,8 +335,9 @@ define([ menuStyle : 'min-width: 100%;max-height: 270px;', store : new Common.Collections.Fonts(), recent : 0, - hint : me.tipFontName + hint : this.tipFontName }).on('selected', _.bind(this.onFontSelect, this)); + this.footerControls.push(this.cmbFontsF); data = [ { value: 8, displayValue: "8" }, @@ -352,7 +366,9 @@ define([ hint: this.tipFontSize, data: data }).on('selected', _.bind(this.onFontSizeSelect, this)); - this.cmbFontSizeH.setValue(this.font.size); + this.cmbFontSizeH.setValue(this._state.fontsize); + this.headerControls.push(this.cmbFontSizeH); + this.cmbFontSizeF = new Common.UI.ComboBox({ el: $('#id-dlg-f-font-size'), cls: 'input-group-nr', @@ -362,116 +378,132 @@ define([ hint: this.tipFontSize, data: data }).on('selected', _.bind(this.onFontSizeSelect, this)); - this.cmbFontSizeF.setValue(this.font.size); + this.cmbFontSizeF.setValue(this._state.fontsize); + this.footerControls.push(this.cmbFontSizeF); - me.btnBoldH = new Common.UI.Button({ + this.btnBoldH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-bold', enableToggle: true, - hint: me.textBold + hint: this.textBold }); - me.btnBoldH.render($('#id-dlg-h-bold')) ; - me.btnBoldH.on('click', _.bind(this.onBoldClick, this)); + this.btnBoldH.render($('#id-dlg-h-bold')) ; + this.btnBoldH.on('click', _.bind(this.onBoldClick, this)); + this.headerControls.push(this.btnBoldH); - me.btnBoldF = new Common.UI.Button({ + this.btnBoldF = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-bold', enableToggle: true, - hint: me.textBold + hint: this.textBold }); - me.btnBoldF.render($('#id-dlg-f-bold')) ; - me.btnBoldF.on('click', _.bind(this.onBoldClick, this)); + this.btnBoldF.render($('#id-dlg-f-bold')) ; + this.btnBoldF.on('click', _.bind(this.onBoldClick, this)); + this.footerControls.push(this.btnBoldF); - me.btnItalicH = new Common.UI.Button({ + this.btnItalicH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-italic', enableToggle: true, - hint: me.textItalic + hint: this.textItalic }); - me.btnItalicH.render($('#id-dlg-h-italic')) ; - me.btnItalicH.on('click', _.bind(this.onItalicClick, this)); + this.btnItalicH.render($('#id-dlg-h-italic')) ; + this.btnItalicH.on('click', _.bind(this.onItalicClick, this)); + this.headerControls.push(this.btnItalicH); - me.btnItalicF = new Common.UI.Button({ + this.btnItalicF = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-italic', enableToggle: true, - hint: me.textItalic + hint: this.textItalic }); - me.btnItalicF.render($('#id-dlg-f-italic')) ; - me.btnItalicF.on('click', _.bind(this.onItalicClick, this)); + this.btnItalicF.render($('#id-dlg-f-italic')) ; + this.btnItalicF.on('click', _.bind(this.onItalicClick, this)); + this.footerControls.push(this.btnItalicF); - me.btnUnderlineH = new Common.UI.Button({ + this.btnUnderlineH = new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-underline', enableToggle: true, - hint: me.textUnderline + hint: this.textUnderline }); - me.btnUnderlineH.render($('#id-dlg-h-underline')) ; - me.btnUnderlineH.on('click', _.bind(this.onUnderlineClick, this)); + this.btnUnderlineH.render($('#id-dlg-h-underline')) ; + this.btnUnderlineH.on('click', _.bind(this.onUnderlineClick, this)); + this.headerControls.push(this.btnUnderlineH); - me.btnUnderlineF = new Common.UI.Button({ + this.btnUnderlineF = new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-underline', enableToggle: true, - hint: me.textUnderline + hint: this.textUnderline }); - me.btnUnderlineF.render($('#id-dlg-f-underline')) ; - me.btnUnderlineF.on('click', _.bind(this.onUnderlineClick, this)); + this.btnUnderlineF.render($('#id-dlg-f-underline')) ; + this.btnUnderlineF.on('click', _.bind(this.onUnderlineClick, this)); + this.footerControls.push(this.btnUnderlineF); - me.btnStrikeoutH = new Common.UI.Button({ + this.btnStrikeoutH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-strikeout', enableToggle: true, - hint: me.textStrikeout + hint: this.textStrikeout }); - me.btnStrikeoutH.render($('#id-dlg-h-strikeout')) ; - me.btnStrikeoutH.on('click',_.bind(this.onStrikeoutClick, this)); - me.btnStrikeoutF = new Common.UI.Button({ + this.btnStrikeoutH.render($('#id-dlg-h-strikeout')) ; + this.btnStrikeoutH.on('click',_.bind(this.onStrikeoutClick, this)); + this.headerControls.push(this.btnStrikeoutH); + + this.btnStrikeoutF = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-strikeout', enableToggle: true, - hint: me.textStrikeout + hint: this.textStrikeout }); - me.btnStrikeoutF.render($('#id-dlg-f-strikeout')) ; - me.btnStrikeoutF.on('click',_.bind(this.onStrikeoutClick, this)); + this.btnStrikeoutF.render($('#id-dlg-f-strikeout')) ; + this.btnStrikeoutF.on('click',_.bind(this.onStrikeoutClick, this)); + this.footerControls.push(this.btnStrikeoutF); this.btnSuperscriptH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-superscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', - hint: me.textSuperscript + hint: this.textSuperscript }); - me.btnSuperscriptH.render($('#id-dlg-h-superscript')) ; - me.btnSuperscriptH.on('click', _.bind(this.onSuperscriptClick, this)); + this.btnSuperscriptH.render($('#id-dlg-h-superscript')) ; + this.btnSuperscriptH.on('click', _.bind(this.onSuperscriptClick, this)); + this.headerControls.push(this.btnSuperscriptH); + this.btnSuperscriptF = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-superscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', - hint: me.textSuperscript + hint: this.textSuperscript }); - me.btnSuperscriptF.render($('#id-dlg-f-superscript')) ; - me.btnSuperscriptF.on('click', _.bind(this.onSuperscriptClick, this)); + this.btnSuperscriptF.render($('#id-dlg-f-superscript')) ; + this.btnSuperscriptF.on('click', _.bind(this.onSuperscriptClick, this)); + this.footerControls.push(this.btnSuperscriptF); this.btnSubscriptH = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-subscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', - hint: me.textSubscript + hint: this.textSubscript }); - me.btnSubscriptH.render($('#id-dlg-h-subscript')) ; - me.btnSubscriptH.on('click', _.bind(this.onSubscriptClick, this)); + this.btnSubscriptH.render($('#id-dlg-h-subscript')) ; + this.btnSubscriptH.on('click', _.bind(this.onSubscriptClick, this)); + this.headerControls.push(this.btnSubscriptH); + this.btnSubscriptF = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-subscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', - hint: me.textSubscript + hint: this.textSubscript }); - me.btnSubscriptF.render($('#id-dlg-f-subscript')) ; - me.btnSubscriptF.on('click', _.bind(this.onSubscriptClick, this)); + this.btnSubscriptF.render($('#id-dlg-f-subscript')) ; + this.btnSubscriptF.on('click', _.bind(this.onSubscriptClick, this)); + this.footerControls.push(this.btnSubscriptF); var initNewColor = function(btn, picker_el) { if (btn && btn.cmpEl) { @@ -488,39 +520,41 @@ define([ picker.on('select', _.bind(me.onColorSelect, me, btn)); return picker; }; - me.btnTextColorH = new Common.UI.Button({ + this.btnTextColorH = new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-fontcolor', - hint : me.textColor, + hint : this.textColor, menu : new Common.UI.Menu({ items: [ { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } + { template: _.template('' + this.textNewColor + '') } ] }) }); - me.btnTextColorH.render($('#id-dlg-h-textcolor')); - me.mnuTextColorPickerH = initNewColor(me.btnTextColorH, "#id-dlg-h-menu-fontcolor"); + this.btnTextColorH.render($('#id-dlg-h-textcolor')); + this.mnuTextColorPickerH = initNewColor(this.btnTextColorH, "#id-dlg-h-menu-fontcolor"); + this.headerControls.push(this.btnTextColorH); - me.btnTextColorF = new Common.UI.Button({ + this.btnTextColorF = new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-fontcolor', - hint : me.textColor, + hint : this.textColor, menu : new Common.UI.Menu({ items: [ { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } + { template: _.template('' + this.textNewColor + '') } ] }) }); - me.btnTextColorF.render($('#id-dlg-f-textcolor')); - me.mnuTextColorPickerF = initNewColor(me.btnTextColorF, "#id-dlg-f-menu-fontcolor"); + this.btnTextColorF.render($('#id-dlg-f-textcolor')); + this.mnuTextColorPickerF = initNewColor(this.btnTextColorF, "#id-dlg-f-menu-fontcolor"); + this.footerControls.push(this.btnTextColorF); - me.btnOk = new Common.UI.Button({ + this.btnOk = new Common.UI.Button({ el: $window.find('.primary') }); - $window.find('.dlg-btn').on('click', _.bind(me.onBtnClick, me)); + $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); this.scrollers = []; this.initCanvas('#header-left-img'); @@ -530,7 +564,11 @@ define([ this.initCanvas('#footer-center-img'); this.initCanvas('#footer-right-img'); - me.afterRender(); + this.wrapEvents = { + onApiEditorSelectionChanged: _.bind(this.onApiEditorSelectionChanged, this) + }; + + this.afterRender(); }, initCanvas: function(name) { @@ -548,11 +586,13 @@ define([ Common.UI.Window.prototype.show.apply(this, arguments); var me = this; _.delay(function(){ - me.HFObject && me.HFObject.click('#header-left-img', 0, 0); + me.onCanvasClick('#header-left-img'); },500); }, close: function() { + this.api.asc_unregisterCallback('asc_onEditorSelectionChanged', this.wrapEvents.onApiEditorSelectionChanged); + Common.UI.Window.prototype.close.apply(this, arguments); if (this.HFObject) @@ -560,10 +600,12 @@ define([ }, afterRender: function () { + this.api.asc_registerCallback('asc_onEditorSelectionChanged', this.wrapEvents.onApiEditorSelectionChanged); + this.cmbFontsH.fillFonts(this.fontStore); - this.cmbFontsH.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); + this.cmbFontsH.selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); this.cmbFontsF.fillFonts(this.fontStore); - this.cmbFontsF.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0)); + this.cmbFontsF.selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); 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); @@ -571,10 +613,6 @@ define([ }, _setDefaults: function (props) { - if (props) { - // this.chOddPage.setValue(props.getOdd()); - // this.chFirstPage.setValue(props.getFirst()); - } var presets = []; this.HFObject.getTextPresetsArr().forEach(function(item, index){ presets.push({displayValue: item, value: index}); @@ -584,6 +622,11 @@ define([ this.cmbPresetsF.setData(presets); this.cmbPresetsF.setValue(this.textPresets); + this.chOddPage.setValue(this.HFObject.getDifferentOddEven()); + this.chFirstPage.setValue(this.HFObject.getDifferentFirst()); + this.chAlign.setValue(this.HFObject.getAlignWithMargins()); + this.chScale.setValue(this.HFObject.getScaleWithDoc()); + var value = (this.chOddPage.getValue() == 'checked'); this.btnOdd.setVisible(value); this.btnEven.setVisible(value); @@ -631,20 +674,40 @@ define([ }, onCanvasClick: function(id, 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()); + if (!this.HFObject) return; + 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.isFooter = (id == '#footer-left-img' || id == '#footer-center-img' || id == '#footer-right-img'); + + var me = this; + this.headerControls.forEach(function(item){ + item.setDisabled(me.isFooter); + }); + this.footerControls.forEach(function(item){ + item.setDisabled(!me.isFooter); + }); }, onPresetSelect: function(footer, combo, record) { if (this.HFObject) this.HFObject.applyPreset(record.value, !!footer); + this.onCanvasClick(footer ? '#footer-left-img' : '#header-left-img'); }, onObjectSelect: function(combo, record) { combo.setValue(this.textInsert); if (this.HFObject) this.HFObject.addField(record.value); + this.onCanvasClick(this.currentCanvas); }, onFontSelect: function(combo, record) { @@ -713,8 +776,14 @@ define([ }, onPageTypeToggle: function(type, btn, state) { - if (state && this.HFObject) + if (state && this.HFObject) { this.HFObject.switchHeaderFooterType(type); + this.onCanvasClick(this.currentCanvas); + } + }, + + onApiEditorSelectionChanged: function(fontobj) { + }, cancelButtonText: 'Cancel', From 47f508b0b2bd03f025965ada919f2bd976eb3b1f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 30 Jan 2019 15:43:30 +0300 Subject: [PATCH 14/20] [SSE] Show font settings for header/footer --- .../main/app/view/HeaderFooterDialog.js | 275 +++++++++++------- 1 file changed, 176 insertions(+), 99 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 72e93e8882..b68af4d1fa 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -315,7 +315,8 @@ define([ this.cmbInsertF.setValue(this.textInsert); 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'), cls : 'input-group-nr', style : 'width: 142px;', @@ -324,10 +325,11 @@ define([ store : new Common.Collections.Fonts(), recent : 0, 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'), cls : 'input-group-nr', style : 'width: 142px;', @@ -336,8 +338,9 @@ define([ store : new Common.Collections.Fonts(), recent : 0, 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 = [ { value: 8, displayValue: "8" }, @@ -357,7 +360,8 @@ define([ { value: 48, displayValue: "48" }, { 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'), cls: 'input-group-nr', style: 'width: 55px;', @@ -365,11 +369,12 @@ define([ menuStyle: 'min-width: 55px;max-height: 270px;', hint: this.tipFontSize, data: data - }).on('selected', _.bind(this.onFontSizeSelect, this)); - this.cmbFontSizeH.setValue(this._state.fontsize); - this.headerControls.push(this.cmbFontSizeH); + })); + this.cmbFontSize[0].on('selected', _.bind(this.onFontSizeSelect, this)); + 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'), cls: 'input-group-nr', style: 'width: 55px;', @@ -377,133 +382,140 @@ define([ menuStyle: 'min-width: 55px;max-height: 270px;', hint: this.tipFontSize, data: data - }).on('selected', _.bind(this.onFontSizeSelect, this)); - this.cmbFontSizeF.setValue(this._state.fontsize); - this.footerControls.push(this.cmbFontSizeF); + })); + this.cmbFontSize[1].on('selected', _.bind(this.onFontSizeSelect, this)); + 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', iconCls: 'btn-bold', enableToggle: true, hint: this.textBold - }); - this.btnBoldH.render($('#id-dlg-h-bold')) ; - this.btnBoldH.on('click', _.bind(this.onBoldClick, this)); - this.headerControls.push(this.btnBoldH); + })); + this.btnBold[0].render($('#id-dlg-h-bold')) ; + this.btnBold[0].on('click', _.bind(this.onBoldClick, this)); + this.headerControls.push(this.btnBold[0]); - this.btnBoldF = new Common.UI.Button({ + this.btnBold.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-bold', enableToggle: true, hint: this.textBold - }); - this.btnBoldF.render($('#id-dlg-f-bold')) ; - this.btnBoldF.on('click', _.bind(this.onBoldClick, this)); - this.footerControls.push(this.btnBoldF); + })); + this.btnBold[1].render($('#id-dlg-f-bold')) ; + this.btnBold[1].on('click', _.bind(this.onBoldClick, this)); + this.footerControls.push(this.btnBold[1]); - this.btnItalicH = new Common.UI.Button({ + this.btnItalic = []; + this.btnItalic.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-italic', enableToggle: true, hint: this.textItalic - }); - this.btnItalicH.render($('#id-dlg-h-italic')) ; - this.btnItalicH.on('click', _.bind(this.onItalicClick, this)); - this.headerControls.push(this.btnItalicH); + })); + this.btnItalic[0].render($('#id-dlg-h-italic')) ; + this.btnItalic[0].on('click', _.bind(this.onItalicClick, this)); + this.headerControls.push(this.btnItalic[0]); - this.btnItalicF = new Common.UI.Button({ + this.btnItalic.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-italic', enableToggle: true, hint: this.textItalic - }); - this.btnItalicF.render($('#id-dlg-f-italic')) ; - this.btnItalicF.on('click', _.bind(this.onItalicClick, this)); - this.footerControls.push(this.btnItalicF); + })); + this.btnItalic[1].render($('#id-dlg-f-italic')) ; + this.btnItalic[1].on('click', _.bind(this.onItalicClick, this)); + this.footerControls.push(this.btnItalic[1]); - this.btnUnderlineH = new Common.UI.Button({ + this.btnUnderline = []; + this.btnUnderline.push(new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-underline', enableToggle: true, hint: this.textUnderline - }); - this.btnUnderlineH.render($('#id-dlg-h-underline')) ; - this.btnUnderlineH.on('click', _.bind(this.onUnderlineClick, this)); - this.headerControls.push(this.btnUnderlineH); + })); + this.btnUnderline[0].render($('#id-dlg-h-underline')) ; + this.btnUnderline[0].on('click', _.bind(this.onUnderlineClick, this)); + this.headerControls.push(this.btnUnderline[0]); - this.btnUnderlineF = new Common.UI.Button({ + this.btnUnderline.push(new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-underline', enableToggle: true, hint: this.textUnderline - }); - this.btnUnderlineF.render($('#id-dlg-f-underline')) ; - this.btnUnderlineF.on('click', _.bind(this.onUnderlineClick, this)); - this.footerControls.push(this.btnUnderlineF); + })); + this.btnUnderline[1].render($('#id-dlg-f-underline')) ; + this.btnUnderline[1].on('click', _.bind(this.onUnderlineClick, this)); + this.footerControls.push(this.btnUnderline[1]); - this.btnStrikeoutH = new Common.UI.Button({ + this.btnStrikeout = []; + this.btnStrikeout.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-strikeout', enableToggle: true, hint: this.textStrikeout - }); - this.btnStrikeoutH.render($('#id-dlg-h-strikeout')) ; - this.btnStrikeoutH.on('click',_.bind(this.onStrikeoutClick, this)); - this.headerControls.push(this.btnStrikeoutH); + })); + this.btnStrikeout[0].render($('#id-dlg-h-strikeout')) ; + this.btnStrikeout[0].on('click',_.bind(this.onStrikeoutClick, this)); + this.headerControls.push(this.btnStrikeout[0]); - this.btnStrikeoutF = new Common.UI.Button({ + this.btnStrikeout.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-strikeout', enableToggle: true, hint: this.textStrikeout - }); - this.btnStrikeoutF.render($('#id-dlg-f-strikeout')) ; - this.btnStrikeoutF.on('click',_.bind(this.onStrikeoutClick, this)); - this.footerControls.push(this.btnStrikeoutF); + })); + this.btnStrikeout[1].render($('#id-dlg-f-strikeout')) ; + this.btnStrikeout[1].on('click',_.bind(this.onStrikeoutClick, this)); + this.footerControls.push(this.btnStrikeout[1]); - this.btnSuperscriptH = new Common.UI.Button({ + this.btnSuperscript = []; + this.btnSuperscript.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-superscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', hint: this.textSuperscript - }); - this.btnSuperscriptH.render($('#id-dlg-h-superscript')) ; - this.btnSuperscriptH.on('click', _.bind(this.onSuperscriptClick, this)); - this.headerControls.push(this.btnSuperscriptH); + })); + this.btnSuperscript[0].render($('#id-dlg-h-superscript')) ; + this.btnSuperscript[0].on('click', _.bind(this.onSuperscriptClick, this)); + this.headerControls.push(this.btnSuperscript[0]); - this.btnSuperscriptF = new Common.UI.Button({ + this.btnSuperscript.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-superscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', hint: this.textSuperscript - }); - this.btnSuperscriptF.render($('#id-dlg-f-superscript')) ; - this.btnSuperscriptF.on('click', _.bind(this.onSuperscriptClick, this)); - this.footerControls.push(this.btnSuperscriptF); + })); + this.btnSuperscript[1].render($('#id-dlg-f-superscript')) ; + this.btnSuperscript[1].on('click', _.bind(this.onSuperscriptClick, this)); + this.footerControls.push(this.btnSuperscript[1]); - this.btnSubscriptH = new Common.UI.Button({ + this.btnSubscript = []; + this.btnSubscript.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-subscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', hint: this.textSubscript - }); - this.btnSubscriptH.render($('#id-dlg-h-subscript')) ; - this.btnSubscriptH.on('click', _.bind(this.onSubscriptClick, this)); - this.headerControls.push(this.btnSubscriptH); + })); + this.btnSubscript[0].render($('#id-dlg-h-subscript')) ; + this.btnSubscript[0].on('click', _.bind(this.onSubscriptClick, this)); + this.headerControls.push(this.btnSubscript[0]); - this.btnSubscriptF = new Common.UI.Button({ + this.btnSubscript.push(new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-subscript', enableToggle: true, toggleGroup: 'superscriptHFGroup', hint: this.textSubscript - }); - this.btnSubscriptF.render($('#id-dlg-f-subscript')) ; - this.btnSubscriptF.on('click', _.bind(this.onSubscriptClick, this)); - this.footerControls.push(this.btnSubscriptF); + })); + this.btnSubscript[1].render($('#id-dlg-f-subscript')) ; + this.btnSubscript[1].on('click', _.bind(this.onSubscriptClick, this)); + this.footerControls.push(this.btnSubscript[1]); var initNewColor = function(btn, picker_el) { if (btn && btn.cmpEl) { @@ -520,7 +532,8 @@ define([ picker.on('select', _.bind(me.onColorSelect, me, btn)); return picker; }; - this.btnTextColorH = new Common.UI.Button({ + this.btnTextColor = []; + this.btnTextColor.push(new Common.UI.Button({ cls : 'btn-toolbar', iconCls : 'btn-fontcolor', hint : this.textColor, @@ -530,12 +543,13 @@ define([ { template: _.template('' + this.textNewColor + '') } ] }) - }); - this.btnTextColorH.render($('#id-dlg-h-textcolor')); - this.mnuTextColorPickerH = initNewColor(this.btnTextColorH, "#id-dlg-h-menu-fontcolor"); - this.headerControls.push(this.btnTextColorH); + })); + this.btnTextColor[0].render($('#id-dlg-h-textcolor')); + this.mnuTextColorPicker = []; + 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', iconCls : 'btn-fontcolor', hint : this.textColor, @@ -545,10 +559,10 @@ define([ { template: _.template('' + this.textNewColor + '') } ] }) - }); - this.btnTextColorF.render($('#id-dlg-f-textcolor')); - this.mnuTextColorPickerF = initNewColor(this.btnTextColorF, "#id-dlg-f-menu-fontcolor"); - this.footerControls.push(this.btnTextColorF); + })); + this.btnTextColor[1].render($('#id-dlg-f-textcolor')); + this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[1], "#id-dlg-f-menu-fontcolor")); + this.footerControls.push(this.btnTextColor[1]); this.btnOk = new Common.UI.Button({ el: $window.find('.primary') @@ -602,10 +616,10 @@ define([ afterRender: function () { this.api.asc_registerCallback('asc_onEditorSelectionChanged', this.wrapEvents.onApiEditorSelectionChanged); - this.cmbFontsH.fillFonts(this.fontStore); - this.cmbFontsH.selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); - this.cmbFontsF.fillFonts(this.fontStore); - this.cmbFontsF.selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); + this.cmbFonts[0].fillFonts(this.fontStore); + this.cmbFonts[0].selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); + this.cmbFonts[1].fillFonts(this.fontStore); + this.cmbFonts[1].selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); 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); @@ -638,8 +652,8 @@ define([ }, updateThemeColors: function() { - this.mnuTextColorPickerH.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); - this.mnuTextColorPickerF.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.mnuTextColorPicker[0].updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.mnuTextColorPicker[1].updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, getSettings: function () { @@ -676,15 +690,6 @@ define([ onCanvasClick: function(id, event){ if (!this.HFObject) return; 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.isFooter = (id == '#footer-left-img' || id == '#footer-center-img' || id == '#footer-right-img'); @@ -695,6 +700,15 @@ define([ this.footerControls.forEach(function(item){ 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) { @@ -783,7 +797,70 @@ define([ }, 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', From d52a2c6774618e23430a9bc43c89f3232503fd4b Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 1 Feb 2019 13:13:44 +0300 Subject: [PATCH 15/20] Register font events in controllers (not in the component ComboBoxFonts) --- .../main/lib/component/ComboBoxFonts.js | 6 +---- .../main/app/controller/Toolbar.js | 5 ++++ .../main/app/controller/Toolbar.js | 5 ++++ .../main/app/controller/Toolbar.js | 5 ++++ .../main/app/view/HeaderFooterDialog.js | 26 ++++++++++++++----- 5 files changed, 36 insertions(+), 11 deletions(-) diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js index f84eb5950b..c6a132079e 100644 --- a/apps/common/main/lib/component/ComboBoxFonts.js +++ b/apps/common/main/lib/component/ComboBoxFonts.js @@ -95,7 +95,7 @@ define([ this.recent = _.isNumber(options.recent) ? options.recent : 3; - Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this)); + // Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this)); Common.NotificationCenter.on('fonts:load', _.bind(this.fillFonts, this)); }, @@ -115,8 +115,6 @@ define([ this._input.on('focus', _.bind(function() {this.inFormControl = true;}, this)); this._input.on('blur', _.bind(function() {this.inFormControl = false;}, this)); - this._modalParents = this.cmpEl.closest('.asc-window'); - return this; }, @@ -334,8 +332,6 @@ define([ var name = (_.isFunction(font.get_Name) ? font.get_Name() : font.asc_getName()); if (this.getRawValue() !== name) { - if (this._modalParents.length > 0) return; - var record = this.store.findWhere({ name: name }); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index fda3314850..0a6d52c897 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -368,6 +368,7 @@ define([ this.api.asc_registerCallback('asc_onContextMenu', _.bind(this.onContextMenu, this)); this.api.asc_registerCallback('asc_onShowParaMarks', _.bind(this.onShowParaMarks, this)); this.api.asc_registerCallback('asc_onChangeSdtGlobalSettings',_.bind(this.onChangeSdtGlobalSettings, this)); + Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this)); }, onChangeCompactView: function(view, compact) { @@ -392,6 +393,10 @@ define([ this.toolbar.collapse(); }, + onApiChangeFont: function(font) { + !this.getApplication().getController('Main').isModalShowed && this.toolbar.cmbFontName.onApiChangeFont(font); + }, + onApiFontSize: function(size) { if (this._state.fontsize !== size) { this.toolbar.cmbFontSize.setValue(size); diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 492f450547..63587bfe9a 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -319,6 +319,7 @@ define([ this.api.asc_registerCallback('asc_onUnderline', _.bind(this.onApiUnderline, this)); this.api.asc_registerCallback('asc_onStrikeout', _.bind(this.onApiStrikeout, this)); this.api.asc_registerCallback('asc_onVerticalAlign', _.bind(this.onApiVerticalAlign, this)); + Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this)); this.api.asc_registerCallback('asc_onCanUndo', _.bind(this.onApiCanRevert, this, 'undo')); this.api.asc_registerCallback('asc_onCanRedo', _.bind(this.onApiCanRevert, this, 'redo')); @@ -377,6 +378,10 @@ define([ this.toolbar.collapse(); }, + onApiChangeFont: function(font) { + !this.getApplication().getController('Main').isModalShowed && this.toolbar.cmbFontName.onApiChangeFont(font); + }, + onApiFontSize: function(size) { if (this._state.fontsize !== size) { this.toolbar.cmbFontSize.setValue(size); diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index d36b5df499..0b68554223 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -387,6 +387,7 @@ define([ Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiCoAuthoringDisconnect, this)); this.api.asc_registerCallback('asc_onLockDefNameManager', _.bind(this.onLockDefNameManager, this)); this.api.asc_registerCallback('asc_onZoomChanged', _.bind(this.onApiZoomChange, this)); + Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this)); }, // onNewDocument: function(btn, e) { @@ -403,6 +404,10 @@ define([ // Common.component.Analytics.trackEvent('ToolBar', 'Open Document'); // }, + onApiChangeFont: function(font) { + !this.getApplication().getController('Main').isModalShowed && this.toolbar.cmbFontName.onApiChangeFont(font); + }, + onContextMenu: function() { this.toolbar.collapse(); }, diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index b68af4d1fa..606d2dc364 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -341,6 +341,7 @@ define([ })); this.cmbFonts[1].on('selected', _.bind(this.onFontSelect, this)); this.footerControls.push(this.cmbFonts[1]); + Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this)); data = [ { value: 8, displayValue: "8" }, @@ -537,6 +538,7 @@ define([ cls : 'btn-toolbar', iconCls : 'btn-fontcolor', hint : this.textColor, + split : true, menu : new Common.UI.Menu({ items: [ { template: _.template('
') }, @@ -545,6 +547,7 @@ define([ }) })); this.btnTextColor[0].render($('#id-dlg-h-textcolor')); + this.btnTextColor[0].on('click', _.bind(this.onTextColor, this)); this.mnuTextColorPicker = []; this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0], "#id-dlg-h-menu-fontcolor")); this.headerControls.push(this.btnTextColor[0]); @@ -553,6 +556,7 @@ define([ cls : 'btn-toolbar', iconCls : 'btn-fontcolor', hint : this.textColor, + split : true, menu : new Common.UI.Menu({ items: [ { template: _.template('
') }, @@ -561,6 +565,7 @@ define([ }) })); this.btnTextColor[1].render($('#id-dlg-f-textcolor')); + this.btnTextColor[1].on('click', _.bind(this.onTextColor, this)); this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[1], "#id-dlg-f-menu-fontcolor")); this.footerControls.push(this.btnTextColor[1]); @@ -725,17 +730,15 @@ define([ }, onFontSelect: function(combo, record) { - if (this.HFObject) { + if (this.HFObject) this.HFObject.setFontName(record.name); - this.scrollerUpdate(); - } + this.onCanvasClick(this.currentCanvas); }, onFontSizeSelect: function(combo, record) { - if (this.HFObject) { + if (this.HFObject) this.HFObject.setFontSize(record.value); - this.scrollerUpdate(); - } + this.onCanvasClick(this.currentCanvas); }, onBoldClick: function(btn, e) { @@ -780,6 +783,12 @@ define([ } }, + + onTextColor: function() { + var mnuTextColorPicker = this.mnuTextColorPicker[this.isFooter ? 1 : 0]; + mnuTextColorPicker.trigger('select', mnuTextColorPicker, mnuTextColorPicker.currentColor, true); + }, + onColorSelect: function(btn, picker, color) { var clr = (typeof(color) == 'object') ? color.color : color; btn.currentColor = color; @@ -787,6 +796,7 @@ define([ picker.currentColor = color; if (this.HFObject) this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + this.onCanvasClick(this.currentCanvas); }, onPageTypeToggle: function(type, btn, state) { @@ -796,6 +806,10 @@ define([ } }, + onApiChangeFont: function(font) { + this.cmbFonts[this.isFooter ? 1 : 0].onApiChangeFont(font); + }, + onApiEditorSelectionChanged: function(fontobj) { var idx = this.isFooter ? 1 : 0, val; From 2419a7d612a5506d220d41a4b9769b8c8c256ad2 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 12 Feb 2019 12:13:45 +0300 Subject: [PATCH 16/20] [SSE] Fix color select for header/footer --- .../spreadsheeteditor/main/app/view/HeaderFooterDialog.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 606d2dc364..a719d11101 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -286,7 +286,6 @@ define([ {displayValue: this.textPageCount, value: Asc.c_oAscHeaderFooterField.pageCount}, {displayValue: this.textDate, value: Asc.c_oAscHeaderFooterField.date}, {displayValue: this.textTime, value: Asc.c_oAscHeaderFooterField.time}, - {displayValue: this.textFilePath, value: Asc.c_oAscHeaderFooterField.filePath}, {displayValue: this.textFileName, value: Asc.c_oAscHeaderFooterField.fileName}, {displayValue: this.textSheet, value: Asc.c_oAscHeaderFooterField.sheetName} ]; @@ -520,12 +519,14 @@ define([ var initNewColor = function(btn, picker_el) { if (btn && btn.cmpEl) { + btn.currentColor = '#000000'; var colorVal = $('
'); $('button:first-child', btn.cmpEl).append(colorVal); - colorVal.css('background-color', btn.currentColor || '#000000'); + colorVal.css('background-color', btn.currentColor); var picker = new Common.UI.ThemeColorPalette({ el: $(picker_el) }); + picker.currentColor = btn.currentColor; } btn.menu.cmpEl.on('click', picker_el+'-new', _.bind(function() { picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color); @@ -711,7 +712,7 @@ define([ 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.HFObject.click(id); this.scrollerUpdate(); }, @@ -897,7 +898,6 @@ define([ textPageCount: 'Page count', textDate: 'Date', textTime: 'Time', - textFilePath: 'File path', textFileName: 'File name', textSheet: 'Sheet name', textColor: 'Text color', From 37ebd623b365c7afe715312d57a9b817669f0267 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 22 Mar 2019 13:23:09 +0300 Subject: [PATCH 17/20] [SSE] Header/footer editing: update scroll on canvas resize and cursor move --- .../main/app/view/HeaderFooterDialog.js | 81 +++++++++++++------ 1 file changed, 56 insertions(+), 25 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index a719d11101..7aed99a2d1 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -114,17 +114,17 @@ define([ '
','
', '
', '
', - '
', + '
', '
', '
', '
', '
', - '
', + '
', '
', '
', '
', '
', - '
', + '
', '
', '
', '
', @@ -140,17 +140,17 @@ define([ '
','
', '
', '
', - '
', + '
', '', '
', '
', '
', - '
', + '
', '', '
', '
', '
', - '
', + '
', '', '
', '
', @@ -585,7 +585,9 @@ define([ this.initCanvas('#footer-right-img'); this.wrapEvents = { - onApiEditorSelectionChanged: _.bind(this.onApiEditorSelectionChanged, this) + onApiEditorSelectionChanged: _.bind(this.onApiEditorSelectionChanged, this), + onApiResizeEditorHeight: _.bind(this.onApiResizeEditorHeight, this), + onUpdateEditorCursorPosition: _.bind(this.onUpdateEditorCursorPosition, this) }; this.afterRender(); @@ -594,12 +596,13 @@ define([ initCanvas: function(name) { var el = this.$window.find(name); el.on('click', _.bind(this.onCanvasClick, this, name)); - this.scrollers.push(new Common.UI.Scroller({ + this.canvasBoxHeight = el.height(); + this.scrollers[name] = new Common.UI.Scroller({ el: el.parent(), minScrollbarLength : 20 - })); - this.scrollers[this.scrollers.length-1].update(); - this.scrollers[this.scrollers.length-1].scrollTop(0); + }); + this.scrollers[name].update(); + this.scrollers[name].scrollTop(0); }, show: function() { @@ -612,6 +615,8 @@ define([ close: function() { this.api.asc_unregisterCallback('asc_onEditorSelectionChanged', this.wrapEvents.onApiEditorSelectionChanged); + this.api.asc_unregisterCallback('asc_resizeEditorHeight', this.wrapEvents.onApiResizeEditorHeight); + this.api.asc_unregisterCallback('asc_updateEditorCursorPosition', this.wrapEvents.onUpdateEditorCursorPosition); Common.UI.Window.prototype.close.apply(this, arguments); @@ -621,6 +626,8 @@ define([ afterRender: function () { this.api.asc_registerCallback('asc_onEditorSelectionChanged', this.wrapEvents.onApiEditorSelectionChanged); + this.api.asc_registerCallback('asc_resizeEditorHeight', this.wrapEvents.onApiResizeEditorHeight); + this.api.asc_registerCallback('asc_updateEditorCursorPosition', this.wrapEvents.onUpdateEditorCursorPosition); this.cmbFonts[0].fillFonts(this.fontStore); this.cmbFonts[0].selectRecord(this.fontStore.findWhere({name: this._state.fontname}) || this.fontStore.at(0)); @@ -630,6 +637,7 @@ define([ 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._setDefaults(this.props); + this.editorCanvas = this.$window.find('#ce-canvas-menu'); }, _setDefaults: function (props) { @@ -688,24 +696,27 @@ define([ }, scrollerUpdate: function() { - this.scrollers.forEach(function(item){ - item.update(); - }); + for (var name in this.scrollers) { + this.scrollers[name] && this.scrollers[name].update(); + } }, onCanvasClick: function(id, event){ if (!this.HFObject) return; - id = id || 'header-left-img'; - this.currentCanvas = id; - this.isFooter = (id == '#footer-left-img' || id == '#footer-center-img' || id == '#footer-right-img'); + id = id || '#header-left-img'; + var diff = (this.currentCanvas !== id); + if (diff) { + this.currentCanvas = id; + this.isFooter = (id == '#footer-left-img' || id == '#footer-center-img' || id == '#footer-right-img'); - var me = this; - this.headerControls.forEach(function(item){ - item.setDisabled(me.isFooter); - }); - this.footerControls.forEach(function(item){ - item.setDisabled(!me.isFooter); - }); + var me = this; + this.headerControls.forEach(function(item){ + item.setDisabled(me.isFooter); + }); + this.footerControls.forEach(function(item){ + item.setDisabled(!me.isFooter); + }); + } if (event) { var parent = $(event.currentTarget).parent(), @@ -714,7 +725,27 @@ define([ } else this.HFObject.click(id); - this.scrollerUpdate(); + diff && this.scrollerUpdate(); + }, + + onApiResizeEditorHeight: function(event) { + if (!this.editorCanvas) return; + var height = this.editorCanvas.height(); + if (height == this.editorCanvasHeight) return; + this.editorCanvasHeight = height; + + if (this.scrollers[this.currentCanvas]) + this.scrollers[this.currentCanvas].update(); + }, + + onUpdateEditorCursorPosition: function(pos, height) { + if (!this.editorCanvas) return; + var id = this.currentCanvas; + if (this.scrollers[id]) { + var top = this.scrollers[id].getScrollTop(); + if (pos + height>top+this.canvasBoxHeight || pos Date: Fri, 22 Mar 2019 17:49:29 +0300 Subject: [PATCH 18/20] [SSE] Header/footer: fix scrolling in editors --- apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 7aed99a2d1..ec003b4d63 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -743,7 +743,9 @@ define([ var id = this.currentCanvas; if (this.scrollers[id]) { var top = this.scrollers[id].getScrollTop(); - if (pos + height>top+this.canvasBoxHeight || postop+this.canvasBoxHeight) + this.scrollers[id].scrollTop(pos + height - this.canvasBoxHeight); + else if (pos Date: Mon, 20 May 2019 12:08:55 +0300 Subject: [PATCH 19/20] [SSE] Header/Footer: scroll canvas to top when select different pages --- .../main/app/view/HeaderFooterDialog.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index ec003b4d63..7403f82d0d 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -701,6 +701,12 @@ define([ } }, + scrollerScrollTop: function() { + for (var name in this.scrollers) { + this.scrollers[name] && this.scrollers[name].scrollTop(0); + } + }, + onCanvasClick: function(id, event){ if (!this.HFObject) return; id = id || '#header-left-img'; @@ -817,7 +823,6 @@ define([ } }, - onTextColor: function() { var mnuTextColorPicker = this.mnuTextColorPicker[this.isFooter ? 1 : 0]; mnuTextColorPicker.trigger('select', mnuTextColorPicker, mnuTextColorPicker.currentColor, true); @@ -836,7 +841,8 @@ define([ onPageTypeToggle: function(type, btn, state) { if (state && this.HFObject) { this.HFObject.switchHeaderFooterType(type); - this.onCanvasClick(this.currentCanvas); + this.scrollerScrollTop(); + this.onCanvasClick(this.currentCanvas, undefined, true); } }, From 5b1495081c78e9db2e9095f6aafc72d3aa9b09fc Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 23 May 2019 15:10:36 +0300 Subject: [PATCH 20/20] [SSE] Header/footer bugfix: select text in the canvas -> 'mouse up' out of canvas -> press Delete -> text in the canvas isn't deleted --- apps/spreadsheeteditor/main/app/controller/Main.js | 2 +- apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index c79ac4422f..38e396035e 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -207,7 +207,7 @@ define([ $(document.body).on('blur', 'input, textarea', function(e) { if (me.isAppDisabled === true || me.isFrameClosed) return; - if (!me.isModalShowed && !(me.loadMask && me.loadMask.isVisible())) { + if ((!me.isModalShowed || $('.asc-window.enable-key-events:visible').length>0) && !(me.loadMask && me.loadMask.isVisible())) { if (/form-control/.test(e.target.className)) me.inFormControl = false; if (!e.relatedTarget || diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index 7403f82d0d..84651596af 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -50,7 +50,7 @@ define([ options: { width: 647, style: 'min-width: 350px;', - cls: 'modal-dlg' + cls: 'modal-dlg enable-key-events' }, initialize : function(options) {