[DE] Add print preview panel

This commit is contained in:
Julia Radzhabova 2022-10-21 23:22:16 +03:00
parent 36e8f4214c
commit c0fea1c230
8 changed files with 900 additions and 7 deletions

View file

@ -157,6 +157,7 @@ require([
'Main',
'ViewTab',
'Search',
'Print',
'Common.Controllers.Fonts',
'Common.Controllers.History'
/** coauthoring begin **/
@ -191,6 +192,7 @@ require([
'documenteditor/main/app/controller/Main',
'documenteditor/main/app/controller/ViewTab',
'documenteditor/main/app/controller/Search',
'documenteditor/main/app/controller/Print',
'documenteditor/main/app/view/FileMenuPanels',
'documenteditor/main/app/view/ParagraphSettings',
'documenteditor/main/app/view/HeaderFooterSettings',

View file

@ -1663,6 +1663,9 @@ define([
toolbarController.setMode(this.appOptions);
documentHolder.setMode(this.appOptions);
var printController = app.getController('Print');
printController && this.api && printController.setApi(this.api).setMode(this.appOptions);
this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
this.api.asc_registerCallback('asc_onDownloadUrl', _.bind(this.onDownloadUrl, this));
this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onAuthParticipantsChanged, this));
@ -2460,6 +2463,7 @@ define([
this.api.asc_SetDocumentUnits((value==Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value==Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
this.getApplication().getController('RightMenu').updateMetricUnit();
this.getApplication().getController('Toolbar').getView().updateMetricUnit();
this.getApplication().getController('Print').getView('PrintWithPreview').updateMetricUnit();
},
onAdvancedOptions: function(type, advOptions, mode, formatOptions) {

View file

@ -0,0 +1,436 @@
/*
*
* (c) Copyright Ascensio System SIA 2010-2022
*
* 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
*
*/
define([
'core',
'documenteditor/main/app/view/FileMenuPanels'
], function () {
'use strict';
DE.Controllers.Print = Backbone.Controller.extend(_.extend({
views: [
'PrintWithPreview'
],
initialize: function() {
var value = Common.localStorage.getItem("de-print-settings-range");
value = (value!==null) ? parseInt(value) : Asc.c_oAscPrintType.ActiveSheets;
this._currentPrintType = value;
this.adjPrintParams = new Asc.asc_CAdjustPrint();
this.adjPrintParams.asc_setPrintType(value);
// fill page numbers, copies, collated from local storage
this._state = {};
this._navigationPreview = {
pageCount: false,
currentPage: 0,
currentPreviewPage: 0
};
this._isPreviewVisible = false;
this.addListeners({
'PrintWithPreview': {
'show': _.bind(this.onShowMainSettingsPrint, this),
'render:after': _.bind(this.onAfterRender, this)
}
});
},
onLaunch: function() {
this.printSettings = this.createView('PrintWithPreview');
},
onAfterRender: function(view) {
var me = this;
this.printSettings.menu.on('menu:hide', _.bind(this.onHidePrintMenu, this));
// this.printSettings.btnPrint.on('click', _.bind(me.onBtnPrint, me));
// this.printSettings.btnPrintPdf.on('click', _.bind(me.onBtnPrintPdf, me));
this.printSettings.btnPrevPage.on('click', _.bind(this.onChangePreviewPage, this, false));
this.printSettings.btnNextPage.on('click', _.bind(this.onChangePreviewPage, this, true));
this.printSettings.txtNumberPage.on({
'keypress:after': _.bind(this.onKeypressPageNumber, this),
'keyup:after': _.bind(this.onKeyupPageNumber, this)
});
this.printSettings.txtNumberPage.cmpEl.find('input').on('blur', _.bind(this.onBlurPageNumber, this));
this.printSettings.cmbPaperSize.on('selected', _.bind(this.onPaperSizeSelect, this));
this.printSettings.cmbPaperOrientation.on('selected', _.bind(this.onPaperOrientSelect, this));
this.printSettings.cmbPaperMargins.on('selected', _.bind(this.onPaperMarginsSelect, this));
this.printSettings.cmbRange.on('selected', _.bind(this.comboRangeChange, this));
Common.NotificationCenter.on('window:resize', _.bind(function () {
if (this._isPreviewVisible) {
this.api.asc_drawPrintPreview(this._navigationPreview.currentPreviewPage);
}
}, this));
var eventname = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
this.printSettings.$previewBox.on(eventname, _.bind(this.onPreviewWheel, this));
},
setMode: function (mode) {
this.mode = mode;
this.printSettings && this.printSettings.setMode(mode);
},
setApi: function(o) {
this.api = o;
this.api.asc_registerCallback('asc_onDocSize', _.bind(this.onApiPageSize, this));
this.api.asc_registerCallback('asc_onPageOrient', _.bind(this.onApiPageOrient, this));
this.api.asc_registerCallback('asc_onSectionProps', _.bind(this.onSectionProps, this));
this.api.asc_registerCallback('asc_onCountPages', _.bind(this.onCountPages, this));
this.api.asc_registerCallback('asc_onCurrentPage', _.bind(this.onCurrentPage, this));
return this;
},
onApiPageSize: function(w, h) {
this._state.pgsize = [w, h];
if (this.printSettings.isVisible()) {
var width = this._state.pgorient ? w : h,
height = this._state.pgorient ? h : w;
var panel = this.printSettings;
var store = panel.cmbPaperSize.store,
item = null;
for (var i=0; i<store.length-1; i++) {
var rec = store.at(i),
size = rec.get('size'),
pagewidth = size[0],
pageheight = size[1];
if (Math.abs(pagewidth - width) < 0.1 && Math.abs(pageheight - height) < 0.1) {
item = rec;
break;
}
}
if (item)
panel.cmbPaperSize.setValue(item.get('value'));
else
panel.cmbPaperSize.setValue(this.txtCustom + ' (' + parseFloat(Common.Utils.Metric.fnRecalcFromMM(width).toFixed(2)) + Common.Utils.Metric.getCurrentMetricName() + ' x ' +
parseFloat(Common.Utils.Metric.fnRecalcFromMM(height).toFixed(2)) + Common.Utils.Metric.getCurrentMetricName() + ')');
} else {
this.isFillProps = false;
}
},
onApiPageOrient: function(isportrait) {
this._state.pgorient = isportrait;
if (this.printSettings.isVisible()) {
var item = this.printSettings.cmbPaperOrientation.store.findWhere({value: isportrait ? Asc.c_oAscPageOrientation.PagePortrait : Asc.c_oAscPageOrientation.PageLandscape});
if (item) this.printSettings.cmbPaperOrientation.setValue(item.get('value'));
}
},
onSectionProps: function(props) {
this._state.sectionprops = props;
if (this.printSettings.isVisible()) {
var left = props.get_LeftMargin(),
top = props.get_TopMargin(),
right = props.get_RightMargin(),
bottom = props.get_BottomMargin();
this._state.pgmargins = [top, left, bottom, right];
var store = this.printSettings.cmbPaperMargins.store,
item = null;
for (var i=0; i<store.length-1; i++) {
var rec = store.at(i),
size = rec.get('size');
if (typeof(size) == 'object' &&
Math.abs(size[0] - top) < 0.1 && Math.abs(size[1] - left) < 0.1 &&
Math.abs(size[2] - bottom) < 0.1 && Math.abs(size[3] - right) < 0.1) {
item = rec;
break;
}
}
if (item)
this.printSettings.cmbPaperMargins.setValue(item.get('value'));
else
this.printSettings.cmbPaperMargins.setValue(this.txtCustom);
}
},
fillPrintOptions: function(props) {
// fill page numbers, copies, collated
var panel = this.printSettings;
panel.cmbRange.setValue(this.adjPrintParams.asc_getPrintType());
panel.txtPages.setValue(); // pages numbers
},
comboRangeChange: function(combo, record) {
if (record.value === -1) {
// set page numbers
// this.printSettings.txtNumberPage.setValue();
} else {
this.adjPrintParams.asc_setPrintType(record.value)
}
},
onCountPages: function(count) {
this._navigationPreview.pageCount = count;
if (this._navigationPreview.currentPreviewPage > count - 1) {
this._navigationPreview.currentPreviewPage = Math.max(0, count - 1);
if (this.printSettings.isVisible()) {
this.api.asc_drawPrintPreview(this._navigationPreview.currentPreviewPage);
this.updateNavigationButtons(this._navigationPreview.currentPreviewPage, count);
}
}
},
onCurrentPage: function(number) {
this._navigationPreview.currentPreviewPage = number;
if (this.printSettings.isVisible()) {
this.api.asc_drawPrintPreview(this._navigationPreview.currentPreviewPage);
this.updateNavigationButtons(this._navigationPreview.currentPreviewPage, this._navigationPreview.pageCount);
}
},
onShowMainSettingsPrint: function() {
var me = this;
this.printSettings.$previewBox.removeClass('hidden');
this.onApiPageSize(this._state.pgsize[0], this._state.pgsize[1]);
this.onApiPageOrient(this._state.pgorient);
this.onSectionProps(this._state.sectionprops);
this.fillPrintOptions(this.adjPrintParams);
var opts = new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86);
opts.asc_setAdvancedOptions(this.adjPrintParams);
this._navigationPreview.currentPreviewPage = this._navigationPreview.currentPage = this.api.getCurrentPage();
this.api.asc_drawPrintPreview(this._navigationPreview.currentPreviewPage);
this.updateNavigationButtons(this._navigationPreview.currentPreviewPage, this._navigationPreview.pageCount);
},
onPaperSizeSelect: function(combo, record) {
this._state.pgsize = [0, 0];
if (record.value !== -1) {
if (this.checkPageSize(record.size[0], record.size[1])) {
var section = this.api.asc_GetSectionProps();
this.onApiPageSize(section.get_W(), section.get_H());
return;
} else
this.api.change_DocSize(record.size[0], record.size[1]);
} else {
var win, props,
me = this;
win = new DE.Views.PageSizeDialog({
checkPageSize: _.bind(this.checkPageSize, this),
handler: function(dlg, result) {
if (result == 'ok') {
props = dlg.getSettings();
me.api.change_DocSize(props[0], props[1]);
Common.NotificationCenter.trigger('edit:complete');
}
}
});
win.show();
win.setSettings(me.api.asc_GetSectionProps());
}
Common.NotificationCenter.trigger('edit:complete');
},
onPaperMarginsSelect: function(combo, record) {
this._state.pgmargins = undefined;
if (record.value !== -1) {
if (this.checkPageSize(undefined, undefined, record.size[1], record.size[3], record.size[0], record.size[2])) {
this.onSectionProps(this.api.asc_GetSectionProps());
return;
} else {
var props = new Asc.CDocumentSectionProps();
props.put_TopMargin(record.size[0]);
props.put_LeftMargin(record.size[1]);
props.put_BottomMargin(record.size[2]);
props.put_RightMargin(record.size[3]);
this.api.asc_SetSectionProps(props);
}
} else {
var win, props,
me = this;
win = new DE.Views.PageMarginsDialog({
api: me.api,
handler: function(dlg, result) {
if (result == 'ok') {
// props = dlg.getSettings();
// var mnu = me.toolbar.btnPageMargins.menu.items[0];
// mnu.setVisible(true);
// mnu.setChecked(true);
// mnu.options.value = mnu.value = [props.get_TopMargin(), props.get_LeftMargin(), props.get_BottomMargin(), props.get_RightMargin()];
// $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
Common.localStorage.setItem("de-pgmargins-top", props.get_TopMargin());
Common.localStorage.setItem("de-pgmargins-left", props.get_LeftMargin());
Common.localStorage.setItem("de-pgmargins-bottom", props.get_BottomMargin());
Common.localStorage.setItem("de-pgmargins-right", props.get_RightMargin());
me.api.asc_SetSectionProps(props);
Common.NotificationCenter.trigger('edit:complete');
}
}
});
win.show();
win.setSettings(me.api.asc_GetSectionProps());
}
Common.NotificationCenter.trigger('edit:complete');
},
onPaperOrientSelect: function(combo, record) {
this._state.pgorient = undefined;
if (this.api && item.checked) {
this.api.change_PageOrient(record.value === Asc.c_oAscPageOrientation.PagePortrait);
}
Common.NotificationCenter.trigger('edit:complete');
},
checkPageSize: function(width, height, left, right, top, bottom) {
var section = this.api.asc_GetSectionProps();
(width===undefined) && (width = parseFloat(section.get_W().toFixed(4)));
(height===undefined) && (height = parseFloat(section.get_H().toFixed(4)));
(left===undefined) && (left = parseFloat(section.get_LeftMargin().toFixed(4)));
(right===undefined) && (right = parseFloat(section.get_RightMargin().toFixed(4)));
(top===undefined) && (top = parseFloat(section.get_TopMargin().toFixed(4)));
(bottom===undefined) && (bottom = parseFloat(section.get_BottomMargin().toFixed(4)));
var gutterLeft = section.get_GutterAtTop() ? 0 : parseFloat(section.get_Gutter().toFixed(4)),
gutterTop = section.get_GutterAtTop() ? parseFloat(section.get_Gutter().toFixed(4)) : 0;
var errmsg = null;
if (left + right + gutterLeft > width-12.7 )
errmsg = this.txtMarginsW;
else if (top + bottom + gutterTop > height-2.6 )
errmsg = this.txtMarginsH;
if (errmsg) {
Common.UI.warning({
title: this.notcriticalErrorTitle,
msg : errmsg,
callback: function() {
Common.NotificationCenter.trigger('edit:complete');
}
});
return true;
}
},
getPrintParams: function() {
return this.adjPrintParams;
},
onHidePrintMenu: function () {
if (this._isPreviewVisible) {
this.api.asc_closePrintPreview(this._isPrint);
this._isPreviewVisible = false;
}
},
onChangePreviewPage: function (next) {
var index = this._navigationPreview.currentPreviewPage;
if (next) {
index++;
index = Math.min(index, this._navigationPreview.pageCount - 1);
} else {
index--;
index = Math.max(index, 0);
}
this.api.goToPage(index);
},
onKeypressPageNumber: function (input, e) {
if (e.keyCode === Common.UI.Keys.RETURN) {
var box = this.printSettings.$el.find('#print-number-page'),
edit = box.find('input[type=text]'), page = parseInt(edit.val());
if (!page || page > this._navigationPreview.pageCount || page < 0) {
edit.select();
this.printSettings.txtNumberPage.setValue(this._navigationPreview.currentPreviewPage + 1);
this.printSettings.txtNumberPage.checkValidate();
return false;
}
box.focus(); // for IE
this.api.goToPage(page-1);
this.api.asc_enableKeyEvents(true);
return false;
}
},
onKeyupPageNumber: function (input, e) {
if (e.keyCode === Common.UI.Keys.ESC) {
var box = this.printSettings.$el.find('#print-number-page');
box.focus(); // for IE
this.api.asc_enableKeyEvents(true);
return false;
}
},
onBlurPageNumber: function () {
if (this.printSettings.txtNumberPage.getValue() != this._navigationPreview.currentPreviewPage + 1) {
this.printSettings.txtNumberPage.setValue(this._navigationPreview.currentPreviewPage + 1);
this.printSettings.txtNumberPage.checkValidate();
}
},
onPreviewWheel: function (e) {
if (e.ctrlKey) {
e.preventDefault();
e.stopImmediatePropagation();
}
var forward = (e.deltaY || (e.detail && -e.detail) || e.wheelDelta) < 0;
this.onChangePreviewPage(forward);
},
updateNavigationButtons: function (page, count) {
this._navigationPreview.currentPage = page;
this.printSettings.updateCurrentPage(page);
this._navigationPreview.pageCount = count;
this.printSettings.updateCountOfPages(count);
this.disableNavButtons();
},
disableNavButtons: function (force) {
if (force) {
this.printSettings.btnPrevPage.setDisabled(true);
this.printSettings.btnNextPage.setDisabled(true);
return;
}
var curPage = this._navigationPreview.currentPage,
pageCount = this._navigationPreview.pageCount;
this.printSettings.btnPrevPage.setDisabled(curPage < 1);
this.printSettings.btnNextPage.setDisabled(curPage > pageCount - 2);
},
textWarning: 'Warning',
txtCustom: 'Custom'
}, DE.Controllers.Print || {}));
});

View file

@ -7,7 +7,7 @@
<li id="fm-btn-download" class="fm-btn"></li>
<li id="fm-btn-save-copy" class="fm-btn"></li>
<li id="fm-btn-save-desktop" class="fm-btn"></li>
<li id="fm-btn-print" class="fm-btn"></li>
<li id="fm-btn-print-with-preview" class="fm-btn"></li>
<li id="fm-btn-rename" class="fm-btn"></li>
<li id="fm-btn-protect" class="fm-btn"></li>
<li class="devider"></li>
@ -34,4 +34,5 @@
<div id="panel-settings" class="content-box"></div>
<div id="panel-help" class="content-box"></div>
<div id="panel-protect" class="content-box"></div>
<div id="panel-print" class="content-box"></div>
</div>

View file

@ -158,9 +158,9 @@ define([
dataHintOffset: [2, 14]
});
this.miPrint = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-print'),
action : 'print',
this.miPrintWithPreview = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-print-with-preview'),
action : 'printpreview',
caption : this.btnPrintCaption,
canFocused: false,
dataHint: 1,
@ -291,7 +291,7 @@ define([
this.miDownload,
this.miSaveCopyAs,
this.miSaveAs,
this.miPrint,
this.miPrintWithPreview,
this.miRename,
this.miProtect,
this.miRecent,
@ -381,7 +381,7 @@ define([
this.miSaveAs[((this.mode.canDownload || this.mode.canDownloadOrigin) && this.mode.isDesktopApp && this.mode.isOffline)?'show':'hide']();
this.miSave[this.mode.isEdit && Common.UI.LayoutManager.isElementVisible('toolbar-file-save') ?'show':'hide']();
this.miEdit[!this.mode.isEdit && this.mode.canEdit && this.mode.canRequestEditRights ?'show':'hide']();
this.miPrint[this.mode.canPrint?'show':'hide']();
this.miPrintWithPreview[this.mode.canPrint?'show':'hide']();
this.miRename[(this.mode.canRename && !this.mode.isDesktopApp) ?'show':'hide']();
this.miProtect[this.mode.canProtect ?'show':'hide']();
separatorVisible = (this.mode.canDownload || this.mode.canDownloadOrigin || this.mode.isEdit && Common.UI.LayoutManager.isElementVisible('toolbar-file-save') || this.mode.canPrint || this.mode.canProtect ||
@ -463,6 +463,12 @@ define([
this.panels['help'].setLangConfig(this.mode.lang);
}
if (this.mode.canPrint) {
var printPanel = DE.getController('Print').getView('PrintWithPreview');
printPanel.menu = this;
!this.panels['printpreview'] && (this.panels['printpreview'] = printPanel.render(this.$el.find('#panel-print')));
}
if ( Common.Controllers.Desktop.isActive() ) {
$('<li id="fm-btn-local-open" class="fm-btn"/>').insertAfter($('#fm-btn-recent', this.$el));
this.items.push(

View file

@ -2329,4 +2329,339 @@ define([
}, DE.Views.FileMenuPanels.ProtectDoc || {}));
DE.Views.PrintWithPreview = Common.UI.BaseView.extend(_.extend({
el: '#panel-print',
menu: undefined,
template: _.template([
'<div style="width:100%; height:100%; position: relative;">',
'<div id="id-print-settings" class="no-padding">',
'<div class="print-settings">',
'<div class="flex-settings ps-container oo settings-container">',
'<table style="width: 100%;">',
'<tbody>',
'<tr><td><label class="header"><%= scope.txtPrintRange %></label></td></tr>',
'<tr><td class="padding-small"><div id="print-combo-range" style="width: 248px;"></div></td></tr>',
'<tr><td class="padding-large">',
'<label style="display: inline-block;vertical-align: middle;margin-right: 10px;"><%= scope.txtPages %></label>',
'<div id="print-txt-pages" style="display: inline-block;vertical-align: middle;"></div>',
'</td></tr>',
'<tr><td><label class="header"><%= scope.txtPageSize %></label></td></tr>',
'<tr><td class="padding-large"><div id="print-combo-pages" style="width: 248px;"></div></td></tr>',
'<tr><td><label class="header"><%= scope.txtPageOrientation %></label></td></tr>',
'<tr><td class="padding-large"><div id="print-combo-orient" style="width: 150px;"></div></td></tr>',
'<tr><td><label class="header"><%= scope.txtMargins %></label></td></tr>',
'<tr><td class="padding-large"><div id="print-combo-margins" style="width: 248px;"></div></td></tr>',
'<tr class="fms-btn-apply"><td>',
'<div class="footer justify">',
'<button id="print-btn-print" class="btn normal dlg-btn primary" result="print" style="width: 96px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtPrint %></button>',
'<button id="print-btn-print-pdf" class="btn normal dlg-btn" result="pdf" style="width: 96px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtPrintPdf %></button>',
'</div>',
'</td></tr>',
'</tbody>',
'</table>',
'</div>',
'</div>',
'</div>',
'<div id="print-preview-box" style="position: absolute; left: 280px; top: 0; right: 0; bottom: 0;" class="no-padding">',
'<div id="print-preview"></div>',
'<div id="print-navigation">',
'<div id="print-prev-page" style="display: inline-block; margin-right: 4px;"></div>',
'<div id="print-next-page" style="display: inline-block;"></div>',
'<div class="page-number">',
'<label><%= scope.txtPage %></label>',
'<div id="print-number-page"></div>',
'<label id="print-count-page"><%= scope.txtOf %></label>',
'</div>',
'</div>',
'</div>',
'</div>'
].join('')),
initialize: function(options) {
Common.UI.BaseView.prototype.initialize.call(this,arguments);
this.menu = options.menu;
this._initSettings = true;
},
render: function(node) {
var me = this;
var $markup = $(this.template({scope: this}));
this.cmbRange = new Common.UI.ComboBox({
el: $markup.findById('#print-combo-range'),
menuStyle: 'min-width: 248px;max-height: 280px;',
editable: false,
takeFocusOnClose: true,
cls: 'input-group-nr',
data: [
{ value: Asc.c_oAscPrintType.EntireWorkbook, displayValue: this.txtAllPages },
{ value: Asc.c_oAscPrintType.ActiveSheets, displayValue: this.txtCurrentPage },
{ value: Asc.c_oAscPrintType.Selection, displayValue: this.txtSelection },
{ value: -1, displayValue: this.txtCustomPages }
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.txtPages = new Common.UI.InputField({
el: $markup.findById('#print-txt-pages'),
allowBlank: true,
validateOnChange: true,
style: 'width: 150px;',
maskExp: /[0-9]/,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.cmbPaperSize = new Common.UI.ComboBox({
el: $markup.findById('#print-combo-pages'),
menuStyle: 'max-height: 280px; min-width: 248px;',
editable: false,
takeFocusOnClose: true,
cls: 'input-group-nr',
data: [
{ value: 0, displayValue:'US Letter (21,59cm x 27,94cm)', caption: 'US Letter', size: [215.9, 279.4]},
{ value: 1, displayValue:'US Legal (21,59cm x 35,56cm)', caption: 'US Legal', size: [215.9, 355.6]},
{ value: 2, displayValue:'A4 (21cm x 29,7cm)', caption: 'A4', size: [210, 297]},
{ value: 3, displayValue:'A5 (14,8cm x 21cm)', caption: 'A5', size: [148, 210]},
{ value: 4, displayValue:'B5 (17,6cm x 25cm)', caption: 'B5', size: [176, 250]},
{ value: 5, displayValue:'Envelope #10 (10,48cm x 24,13cm)', caption: 'Envelope #10', size: [104.8, 241.3]},
{ value: 6, displayValue:'Envelope DL (11cm x 22cm)', caption: 'Envelope DL', size: [110, 220]},
{ value: 7, displayValue:'Tabloid (27,94cm x 43,18cm)', caption: 'Tabloid', size: [279.4, 431.8]},
{ value: 8, displayValue:'A3 (29,7cm x 42cm)', caption: 'A3', size: [297, 420]},
{ value: 9, displayValue:'Tabloid Oversize (30,48cm x 45,71cm)', caption: 'Tabloid Oversize', size: [304.8, 457.1]},
{ value: 10, displayValue:'ROC 16K (19,68cm x 27,3cm)', caption: 'ROC 16K', size: [196.8, 273]},
{ value: 11, displayValue:'Envelope Choukei 3 (11,99cm x 23,49cm)', caption: 'Envelope Choukei 3', size: [119.9, 234.9]},
{ value: 12, displayValue:'Super B/A3 (33,02cm x 48,25cm)', caption: 'Super B/A3', size: [330.2, 482.5]},
{ value: 13, displayValue:'A4 (84,1cm x 118,9cm)', caption: 'A0', size: [841, 1189]},
{ value: 14, displayValue:'A4 (59,4cm x 84,1cm)', caption: 'A1', size: [594, 841]},
{ value: 16, displayValue:'A4 (42cm x 59,4cm)', caption: 'A2', size: [420, 594]},
{ value: 17, displayValue:'A4 (10,5cm x 14,8cm)', caption: 'A6', size: [105, 148]},
{ value: -1, displayValue: this.txtCustom, caption: this.txtCustom, size: []}
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPaperOrientation = new Common.UI.ComboBox({
el : $markup.findById('#print-combo-orient'),
menuStyle : 'min-width: 150px;',
editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr',
data : [
{ value: Asc.c_oAscPageOrientation.PagePortrait, displayValue: this.txtPortrait },
{ value: Asc.c_oAscPageOrientation.PageLandscape, displayValue: this.txtLandscape }
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPaperMargins = new Common.UI.ComboBox({
el: $markup.findById('#print-combo-margins'),
menuStyle: 'max-height: 280px; min-width: 248px;',
editable: false,
takeFocusOnClose: true,
cls: 'input-group-nr',
data: [
{ value: 0, displayValue: this.textMarginsNormal, size: [20, 30, 20, 15]},
{ value: 1, displayValue: this.textMarginsUsNormal, size: [25.4, 25.4, 25.4, 25.4]},
{ value: 2, displayValue: this.textMarginsNarrow, size: [12.7, 12.7, 12.7, 12.7]},
{ value: 3, displayValue: this.textMarginsModerate, size: [25.4, 19.1, 25.4, 19.1]},
{ value: 4, displayValue: this.textMarginsWide, size: [25.4, 50.8, 25.4, 50.8]},
{ value: -1, displayValue: this.txtCustom, size: null}
],
itemsTemplate: _.template([
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem">',
'<div><b><%= scope.getDisplayValue(item) %></b></div>',
'<% if (item.size !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
'<label style="display: block;">' + this.txtTop + ' <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.size[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label style="display: block;">' + this.txtLeft + ' <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.size[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
'<label style="display: block;">' + this.txtBottom + ' <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.size[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label style="display: block;">' + this.txtRight + ' <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.size[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
'<% } %>',
'<% }); %>'
].join('')),
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
this.pnlTable = $(this.pnlSettings.find('table')[0]);
this.trApply = $markup.find('.fms-btn-apply');
this.btnPrint = new Common.UI.Button({
el: $markup.findById('#print-btn-print')
});
this.btnPrintPdf = new Common.UI.Button({
el: $markup.findById('#print-btn-print-pdf')
});
this.btnPrevPage = new Common.UI.Button({
parentEl: $markup.findById('#print-prev-page'),
cls: 'btn-prev-page',
iconCls: 'arrow',
dataHint: '2',
dataHintDirection: 'top'
});
this.btnNextPage = new Common.UI.Button({
parentEl: $markup.findById('#print-next-page'),
cls: 'btn-next-page',
iconCls: 'arrow',
dataHint: '2',
dataHintDirection: 'top'
});
this.countOfPages = $markup.findById('#print-count-page');
this.txtNumberPage = new Common.UI.InputField({
el: $markup.findById('#print-number-page'),
allowBlank: true,
validateOnChange: true,
style: 'width: 50px;',
maskExp: /[0-9]/,
validation: function(value) {
if (/(^[0-9]+$)/.test(value)) {
value = parseInt(value);
if (undefined !== value && value > 0 && value <= me.pageCount)
return true;
}
return me.txtPageNumInvalid;
},
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.$el = $(node).html($markup);
this.$previewBox = $('#print-preview-box');
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
el: this.pnlSettings,
suppressScrollX: true,
alwaysVisibleY: true
});
}
Common.NotificationCenter.on({
'window:resize': function() {
me.isVisible() && me.updateScroller();
}
});
this.updateMetricUnit();
this.fireEvent('render:after', this);
return this;
},
show: function() {
Common.UI.BaseView.prototype.show.call(this,arguments);
if (this._initSettings) {
this.updateMetricUnit();
this._initSettings = false;
}
this.updateScroller();
this.fireEvent('show', this);
},
updateScroller: function() {
if (this.scroller) {
Common.UI.Menu.Manager.hideAll();
var scrolled = this.$el.height()< this.pnlTable.height();
this.pnlSettings.css('overflow', scrolled ? 'hidden' : 'visible');
this.scroller.update();
}
},
setMode: function(mode) {
this.mode = mode;
},
setApi: function(api) {
},
updateMetricUnit: function() {
var store = this.cmbPaperSize.store;
for (var i=0; i<store.length-1; i++) {
var item = store.at(i),
size = item.get('size'),
pagewidth = size[0],
pageheight = size[1];
item.set('displayValue', item.get('caption') + ' (' + parseFloat(Common.Utils.Metric.fnRecalcFromMM(pagewidth).toFixed(2)) + Common.Utils.Metric.getCurrentMetricName() + ' x ' +
parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageheight).toFixed(2)) + Common.Utils.Metric.getCurrentMetricName() + ')');
}
this.cmbPaperSize.onResetItems();
this.cmbPaperMargins.onResetItems();
},
isVisible: function() {
return (this.$el || $(this.el)).is(":visible");
},
setRange: function(value) {
this.cmbRange.setValue(value);
},
getRange: function() {
return this.cmbRange.getValue();
},
updateCountOfPages: function (count) {
this.countOfPages.text(
Common.Utils.String.format(this.txtOf, count)
);
this.pageCount = count;
},
updateCurrentPage: function (index) {
this.txtNumberPage.setValue(index + 1);
},
txtPrint: 'Print',
txtPrintPdf: 'Print to PDF',
txtPrintRange: 'Print range',
txtCurrentPage: 'Current page',
txtAllPages: 'All pages',
txtSelection: 'Selection',
txtCustomPages: 'Custom print',
txtPageSize: 'Page size',
txtPageOrientation: 'Page orientation',
txtPortrait: 'Portrait',
txtLandscape: 'Landscape',
txtCustom: 'Custom',
txtMargins: 'Margins',
txtTop: 'Top:',
txtBottom: 'Bottom:',
txtLeft: 'Left:',
txtRight: 'Right:',
txtPage: 'Page',
txtOf: 'of {0}',
txtPageNumInvalid: 'Page number invalid',
txtEmptyTable: 'There is nothing to print because the document is empty',
txtPages: 'Pages',
textMarginsLast: 'Last Custom',
textMarginsNormal: 'Normal',
textMarginsUsNormal: 'US Normal',
textMarginsNarrow: 'Narrow',
textMarginsModerate: 'Moderate',
textMarginsWide: 'Wide'
}, DE.Views.PrintWithPreview || {}));
});

View file

@ -147,6 +147,7 @@ require([
'Main',
'ViewTab',
'Search',
'Print',
'Common.Controllers.Fonts',
'Common.Controllers.History'
/** coauthoring begin **/
@ -181,6 +182,7 @@ require([
'documenteditor/main/app/controller/Main',
'documenteditor/main/app/controller/ViewTab',
'documenteditor/main/app/controller/Search',
'documenteditor/main/app/controller/Print',
'documenteditor/main/app/view/FileMenuPanels',
'documenteditor/main/app/view/ParagraphSettings',
'documenteditor/main/app/view/HeaderFooterSettings',

View file

@ -523,4 +523,111 @@ table {
padding: 5px 0;
}
}
}
}
#file-menu-panel {
#panel-print {
padding: 0;
#id-print-settings {
position: absolute;
width:280px;
top: 0;
bottom: 0;
}
.print-settings {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar;
label.header {
font-weight: 700;
}
.footer {
.btn.primary {
margin-right: 8px;
}
}
.settings-container {
width: 100%;
height: 100%;
overflow: hidden;
padding: 12px 16px;
.padding-small {
padding-bottom: 8px;
}
.padding-large {
padding-bottom: 16px;
}
#print-apply-all {
margin-top: 5px;
}
.link {
margin-top: 9px;
}
.footer {
margin-top: 24px;
}
}
}
#print-navigation {
height: 50px;
padding-left: 20px;
padding-top: 10px;
display: flex;
.btn-prev-page, .btn-next-page {
background-color: transparent;
padding: 0;
height: 20px;
width: 20px;
i.arrow {
display: inline-block;
width: 10px;
height: 10px;
border: solid @scaled-one-px-value-ie @icon-normal-ie;
border: solid @scaled-one-px-value @icon-normal;
border-bottom: none;
border-right: none;
}
&.disabled {
opacity: @component-disabled-opacity;
}
&:hover:not(:disabled):not(.disabled) {
background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover;
}
}
.btn-prev-page {
i {
transform: rotate(-45deg) translate(-1px, 3px);
}
}
.btn-next-page {
i {
transform: rotate(135deg) translate(4px, 0px);
}
}
.page-number {
display: flex;
align-items: center;
height: 20px;
margin-left: 10px;
label {
.font-weight-bold();
}
#print-count-page, #print-number-page {
margin-left: 4px;
}
}
}
#print-preview {
height: calc(100% - 50px);
}
}
}