diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index cc10f585e..ee2962a19 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -56,7 +56,8 @@ define([ 'documenteditor/main/app/controller/PageLayout', 'documenteditor/main/app/view/CustomColumnsDialog', 'documenteditor/main/app/view/ControlSettingsDialog', - 'documenteditor/main/app/view/WatermarkSettingsDialog' + 'documenteditor/main/app/view/WatermarkSettingsDialog', + 'documenteditor/main/app/view/InsertPageNumberDialog' ], function () { 'use strict'; @@ -326,6 +327,7 @@ define([ toolbar.btnInsertEquation.on('click', _.bind(this.onInsertEquationClick, this)); toolbar.mnuNoControlsColor.on('click', _.bind(this.onNoControlsColor, this)); toolbar.mnuControlsColorPicker.on('select', _.bind(this.onSelectControlsColor, this)); + toolbar.mnuPageNumber.on('item:click', _.bind(this.onPageNumberMenuClick, this)); Common.Gateway.on('insertimage', _.bind(this.insertImage, this)); Common.Gateway.on('setmailmergerecipients', _.bind(this.setMailMergeRecipients, this)); $('#id-toolbar-menu-new-control-color').on('click', _.bind(this.onNewControlsColor, this)); @@ -1399,6 +1401,23 @@ define([ } }, + onPageNumberMenuClick: function(menu, item, e) { + if (item.value === 'insertpagenumber') { + var me = this; + + (new DE.Views.InsertPageNumberDialog({ + handler: function(result, value) { + if (result == 'ok') { + if (me.api) { + + } + } + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + } + })).show(); + } + }, + onInsertImageClick: function(menu, item, e) { var me = this; if (item.value === 'file') { diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index e9d7ae2c0..4efc16af1 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -84,6 +84,7 @@ +
diff --git a/apps/documenteditor/main/app/view/InsertPageNumberDialog.js b/apps/documenteditor/main/app/view/InsertPageNumberDialog.js new file mode 100644 index 000000000..ad1d51e61 --- /dev/null +++ b/apps/documenteditor/main/app/view/InsertPageNumberDialog.js @@ -0,0 +1,227 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * 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 + * +*/ +/** + * InsertPageNumberDialog.js + * + * Created by Julia Svinareva on 21/09/19 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/component/Window' +], function () { 'use strict'; + + DE.Views.InsertPageNumberDialog = Common.UI.Window.extend(_.extend({ + options: { + width: 338, + header: true, + style: 'min-width: 338px;', + cls: 'modal-dlg', + id: 'window-page-number', + buttons: ['ok', 'cancel'] + }, + + initialize : function(options) { + _.extend(this.options, { + title: this.textTitle + }, options || {}); + + 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); + + this.pageNumberPosPicker = new Common.UI.DataView({ + el: $('#insert-page-number-picker-position'), + allowScrollbar: false, + store: new Common.UI.DataViewStore([ + { + offsety: 132, + allowSelected: false, + data: { + type: c_pageNumPosition.PAGE_NUM_POSITION_TOP, + subtype: c_pageNumPosition.PAGE_NUM_POSITION_LEFT + } + }, + { + offsety: 99, + allowSelected: false, + data: { + type: c_pageNumPosition.PAGE_NUM_POSITION_TOP, + subtype: c_pageNumPosition.PAGE_NUM_POSITION_CENTER + } + }, + { + offsety: 66, + allowSelected: false, + data: { + type: c_pageNumPosition.PAGE_NUM_POSITION_TOP, + subtype: c_pageNumPosition.PAGE_NUM_POSITION_RIGHT + } + }, + { + offsety: 33, + allowSelected: false, + data: { + type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, + subtype: c_pageNumPosition.PAGE_NUM_POSITION_LEFT + } + }, + { + offsety: 0, + allowSelected: false, + data: { + type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, + subtype: c_pageNumPosition.PAGE_NUM_POSITION_CENTER + } + }, + { + offsety: 165, + allowSelected: false, + data: { + type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, + subtype: c_pageNumPosition.PAGE_NUM_POSITION_RIGHT + } + } + ]), + itemTemplate: _.template('
') + }); + this.pageNumberPosPicker.on('item:click', this.onPageNumberPosClick); + + this.btnPageNumCurrentPos = new Common.UI.Button({ + el: $('#insert-page-number-cur-pos') + }); + this.btnPageNumCurrentPos.on('click', this.onPageNumCurrentPosClick); + + + var arrStyles = [ + {value: '1'}, + {value: '~1~'}, + {value: this.textPg1}, + {value: this.textPage1}, + {value: this.textPage1of10}, + {value: this.text1of10}, + {value: this.textPg1of10}, + {value: this.text1pipePage}, + {value: this.text1Pg}, + {value: '( 1 )'}, + {value: '[ 1 ]'}, + {value: '{ 1 }'}, + {value: '— 1 —'}, + {value: '| 1 |'}, + {value: '-1-'}, + ]; + this.numStylesStore = new Common.UI.DataViewStore(); + this.listNumberingStyle = new Common.UI.ListView({ + el: $('#insert-page-number-style-list', this.window), + store: this.numStylesStore, + itemTemplate: _.template('
<%= value %>
') + }); + this.numStylesStore.reset(arrStyles); + this.listNumberingStyle.scroller.update({alwaysVisibleY: true}); + + this.chStartAt2Page = new Common.UI.CheckBox({ + el: $('#insert-page-number-checkbox'), + labelText: this.textStartAt2Page + }); + + var $window = this.getChild(); + $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); + }, + + _handleInput: function(state) { + if (this.options.handler) + this.options.handler.call(this, this, state); + this.close(); + }, + + onBtnClick: function(event) { + this._handleInput(event.currentTarget.attributes['result'].value); + }, + + onPrimary: function(event) { + this._handleInput('ok'); + return false; + }, + + getSettings: function() { + + return this; + }, + + onPageNumberPosClick: function(picker, item, record) { + var type = record.get('data').type, + subtype = record.get('data').subtype; + item.$el.parent().find('.item-pagenumber.active').removeClass('active'); + this.$el.parent().find('#insert-page-number-cur-pos').removeClass('active'); + item.$el.find('.item-pagenumber').addClass('active'); + }, + + onPageNumCurrentPosClick: function(event) { + event.$el.parent().find('.item-pagenumber.active').removeClass('active'); + event.$el.toggleClass('active'); + }, + + textTitle: 'Insert page number', + textToCurrentPosition: 'To current position', + textAlignment: 'Alignment', + textNumberingStyle: 'Numbering style', + textPg1: 'Pg. 1', + textPage1: 'Page 1', + textPage1of10: 'Page 1 of 10', + text1of10: '1 of 10', + textPg1of10: 'Pg. 1 of 10', + text1pipePage: '1 | Page', + text1Pg: '1 pg.', + textStartAt2Page: 'Start at 2 page' + }, DE.Views.InsertPageNumberDialog || {})) +}); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index ade6b68a7..03a5d5dff 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -555,6 +555,14 @@ define([ this.paragraphControls.push(this.mnuInsertPageCount); this.toolbarControls.push(this.btnEditHeader); + this.btnPageNumber = new Common.UI.Button({ + id: 'id-toolbar-btn-pagenumber', + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'btn-editheader', + caption: me.capBtnPageNumber, + menu: true + }); + this.btnBlankPage = new Common.UI.Button({ id: 'id-toolbar-btn-blankpage', cls: 'btn-toolbar x-huge icon-top', @@ -1306,6 +1314,7 @@ define([ _injectComponent('#slot-btn-controls', this.btnContentControls); _injectComponent('#slot-btn-columns', this.btnColumns); _injectComponent('#slot-btn-editheader', this.btnEditHeader); + _injectComponent('#slot-btn-pagenumber', this.btnPageNumber); _injectComponent('#slot-btn-blankpage', this.btnBlankPage); _injectComponent('#slot-btn-insshape', this.btnInsertShape); _injectComponent('#slot-btn-insequation', this.btnInsertEquation); @@ -1576,6 +1585,7 @@ define([ this.btnInsertText.updateHint(this.tipInsertText); this.btnInsertTextArt.updateHint(this.tipInsertTextArt); this.btnEditHeader.updateHint(this.tipEditHeader); + this.btnPageNumber.updateHint(this.tipPageNumber); this.btnBlankPage.updateHint(this.tipBlankPage); this.btnInsertShape.updateHint(this.tipInsertShape); this.btnInsertEquation.updateHint(this.tipInsertEquation); @@ -1651,6 +1661,16 @@ define([ this.paragraphControls.push(this.mnuPageNumCurrentPos); this.paragraphControls.push(this.mnuInsertPageCount); + this.btnPageNumber.setMenu( + new Common.UI.Menu({ + items: [ + {caption: this.capInsertPageNumber, value: 'insertpagenumber'}, + {caption: this.capInsertNumberOfPages, value: 'insertnumberofpage'} + ] + }) + ); + this.mnuPageNumber = this.btnPageNumber.menu; + this.btnInsertChart.setMenu( new Common.UI.Menu({ style: 'width: 435px;', items: [ @@ -2324,7 +2344,11 @@ define([ capBtnWatermark: 'Watermark', textEditWatermark: 'Custom Watermark', textRemWatermark: 'Remove Watermark', - tipWatermark: 'Edit watermark' + tipWatermark: 'Edit watermark', + capBtnPageNumber: 'Page Number', + tipPageNumber: 'Insert page number', + capInsertPageNumber: 'Insert page number', + capInsertNumberOfPages: 'Insert number of pages' } })(), DE.Views.Toolbar || {})); }); diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index a0e59baba..b9fe09530 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -120,6 +120,9 @@ .background-ximage('@{app-image-path}/toolbar/colontitules.png', '@{app-image-path}/toolbar/colontitules@2x.png', 33px); width: 33px; height: 33px; + &.active { + .box-shadow(0 0 0 2px @primary-hover); + } } }