Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Bug 36794 (Insert Page Number)

Browse source
This commit is contained in:
Julia Svinareva 2019-09-23 15:17:57 +03:00
parent 2f42d77a82
commit e5ec005568
5 changed files with 276 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -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') {

1
apps/documenteditor/main/app/template/Toolbar.template
View file

@ -84,6 +84,7 @@
<span class="btn-slot text x-huge" id="slot-btn-blankpage"></span>
<span class="btn-slot text x-huge btn-pagebreak"></span>
<span class="btn-slot text x-huge" id="slot-btn-editheader"></span>
<span class="btn-slot text x-huge" id="slot-btn-pagenumber"></span>
</div>
<div class="separator long"></div>
<div class="group">

227
apps/documenteditor/main/app/view/InsertPageNumberDialog.js Normal file
View file

@ -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 = [
'<div class="box" style="">',
'<div style="display: inline-block; width: 130px; height: 205px; vertical-align: top;">',
'<label style="margin-left: 6px; margin-bottom: 2px;">' + this.textAlignment + '</label>',
'<div id="insert-page-number-picker-position" class="menu-pageposition"></div>',
'<button id="insert-page-number-cur-pos" class="btn btn-text-default" style="margin-left: 6px; margin-top: 6px; width: 117px;">' + this.textToCurrentPosition + '</button>',
'</div>',
'<div style="display: inline-block; height: 205px; vertical-align: top; float: right;">',
'<label>' + this.textNumberingStyle + '</label>',
'<div id="insert-page-number-style-list" style="height: 150px; width: 150px; margin-top: 5px;"></div>',
'<div id="insert-page-number-checkbox" style="margin-top: 12px;"></div>',
'</div>',
'</div>',
].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('<div id="<%= id %>" class="item-pagenumber" style="background-position: 0 -<%= offsety %>px"></div>')
});
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('<div id="<%= id %>" class="list-item" style="pointer-events:none; text-align: center;"><%= value %></div>')
});
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 || {}))
});

26
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -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 || {}));
});

3
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -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);
}
}
}