[PE] Show print preview

apps/presentationeditor/main/app.js

@@ -152,6 +152,7 @@ require([
             'Main',
             'ViewTab',
             'Search',
+            'Print',
             'Common.Controllers.Fonts',
             'Common.Controllers.History'
             /** coauthoring begin **/
@@ -182,6 +183,7 @@ require([
             'presentationeditor/main/app/controller/Main',
             'presentationeditor/main/app/controller/ViewTab',
             'presentationeditor/main/app/controller/Search',
+            'presentationeditor/main/app/controller/Print',
             'presentationeditor/main/app/view/FileMenuPanels',
             'presentationeditor/main/app/view/ParagraphSettings',
             'presentationeditor/main/app/view/ImageSettings',

apps/presentationeditor/main/app/controller/LeftMenu.js

@@ -107,6 +107,7 @@ define([
                 if ( !this.leftMenu.panelHistory.isVisible() )
                     this.clickMenuFileItem(null, 'history');
             }, this));
+            Common.NotificationCenter.on('file:print', _.bind(this.clickToolbarPrint, this));
         },
 
         onLaunch: function() {
@@ -764,7 +765,14 @@ define([
         isCommentsVisible: function() {
             return this.leftMenu && this.leftMenu.panelComments && this.leftMenu.panelComments.isVisible();
         },
-        
+
+        clickToolbarPrint: function () {
+            if (this.mode.canPreviewPrint)
+                this.leftMenu.showMenu('file:printpreview');
+            else if (this.mode.canPrint)
+                this.clickMenuFileItem(null, 'print');
+        },
+
         textNoTextFound         : 'Text not found',
         newDocumentTitle        : 'Unnamed document',
         requestEditRightsText   : 'Requesting editing rights...',

apps/presentationeditor/main/app/controller/Main.js

@@ -1165,6 +1165,7 @@ define([
                     console.log("Obsolete: The 'chat' parameter of the 'customization' section is deprecated. Please use 'chat' parameter in the permissions instead.");
                 }
                 this.appOptions.canPrint       = (this.permissions.print !== false);
+                this.appOptions.canPreviewPrint = this.appOptions.canPrint && !Common.Utils.isMac;
                 this.appOptions.canRename      = this.editorConfig.canRename;
                 this.appOptions.canForcesave   = this.appOptions.isEdit && !this.appOptions.isOffline && (typeof (this.editorConfig.customization) == 'object' && !!this.editorConfig.customization.forcesave);
                 this.appOptions.forcesave      = this.appOptions.canForcesave;
@@ -1297,6 +1298,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_onDocumentModifiedChanged', _.bind(this.onDocumentModifiedChanged, this));
@@ -1922,6 +1926,7 @@ define([
                 Common.Utils.InternalSettings.set("pe-settings-unit", value);
                 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('Print').getView('PrintWithPreview').updateMetricUnit();
             },
 
             updateThemeColors: function() {
@@ -2175,9 +2180,7 @@ define([
 
             onPrint: function() {
                 if (!this.appOptions.canPrint || Common.Utils.ModalWindow.isVisible()) return;
-                
+                Common.NotificationCenter.trigger('file:print');
-                if (this.api)
-                    this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isOpera == true use asc_onPrintUrl event
                 Common.component.Analytics.trackEvent('Print');
             },
 

apps/presentationeditor/main/app/controller/Print.js

@@ -0,0 +1,342 @@
+/*
+ *
+ * (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',
+    'presentationeditor/main/app/view/FileMenuPanels'
+], function () {
+    'use strict';
+
+    PE.Controllers.Print = Backbone.Controller.extend(_.extend({
+        views: [
+            'PrintWithPreview'
+        ],
+
+        initialize: function() {
+            var value = Common.localStorage.getItem("pe-print-settings-range");
+            value = (value!==null) ? parseInt(value) : Asc.c_oAscPrintType.ActiveSheets;
+
+            this.adjPrintParams = new Asc.asc_CAdjustPrint();
+            this.adjPrintParams.asc_setPrintType(value);
+
+            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(this.onBtnPrint, this, true));
+            this.printSettings.btnPrintPdf.on('click', _.bind(this.onBtnPrint, this, false));
+            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.cmbRange.on('selected', _.bind(this.comboRangeChange, this));
+            this.printSettings.inputPages.on('changing', _.bind(this.inputPagesChanging, this));
+            this.printSettings.inputPages.validation = function(value) {
+                if (!_.isEmpty(value) && /[0-9,\-]/.test(value)) {
+                    var res = [],
+                        arr = value.split(',');
+                    for (var i=0; i<arr.length; i++) {
+                        var item = arr[i];
+                        if (!item) // empty
+                            return me.txtPrintRangeInvalid;
+                        var str = item.match(/\-/g);
+                        if (str && str.length>1) // more than 1 symbol '-'
+                            return me.txtPrintRangeInvalid;
+                        if (!str) {// one number
+                            var num = parseInt(item)-1;
+                            (num>=0) && res.push(num);
+                        } else { // range
+                            var pages = item.split('-'),
+                                start = (pages[0] ? parseInt(pages[0])-1 : 0),
+                                end = (pages[1] ? parseInt(pages[1])-1 : me._navigationPreview.pageCount-1);
+                            if (start>end) {
+                                var num = start;
+                                start = end;
+                                end = num;
+                            }
+                            for (var j=start; j<=end; j++) {
+                                (j>=0) && res.push(j);
+                            }
+                        }
+                    }
+                    if (res.length>0) {
+                        // me.adjPrintParams.asc_setPages(res);
+                        return true;
+                    }
+                }
+
+                return me.txtPrintRangeInvalid;
+            };
+
+            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));
+
+            this.fillPrintOptions();
+        },
+
+        setMode: function (mode) {
+            this.mode = mode;
+            this.printSettings && this.printSettings.setMode(mode);
+        },
+
+        setApi: function(o) {
+            this.api = o;
+            this.api.asc_registerCallback('asc_onCountPages',   _.bind(this.onCountPages, this));
+            this.api.asc_registerCallback('asc_onCurrentPage',  _.bind(this.onCurrentPage, this));
+
+            return this;
+        },
+
+        fillPrintOptions: function(props) {
+            // fill page numbers, copies, collated
+            var panel = this.printSettings;
+            panel.cmbRange.setValue(this.adjPrintParams.asc_getPrintType());
+            panel.inputPages.setValue(''); // pages numbers
+        },
+
+        comboRangeChange: function(combo, record) {
+            if (record.value === -1) {
+                var me = this;
+                setTimeout(function(){
+                    me.printSettings.inputPages.focus();
+                }, 50);
+                // this.adjPrintParams.asc_setPrintType(record.value)
+            } else {
+                this.printSettings.inputPages.setValue('');
+                this.adjPrintParams.asc_setPrintType(record.value)
+            }
+            this.printSettings.inputPages.showError();
+        },
+
+        onCountPages: function(count) {
+            this._navigationPreview.pageCount = count;
+
+            if (this.printSettings.isVisible()) {
+                this.printSettings.$previewBox.toggleClass('hidden', !this._navigationPreview.pageCount);
+                this.printSettings.$previewEmpty.toggleClass('hidden', !!this._navigationPreview.pageCount);
+            }
+            if (!!this._navigationPreview.pageCount) {
+                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');
+
+            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.api.asc_initPrintPreview('print-preview', opts);
+
+            this.printSettings.$previewBox.toggleClass('hidden', !this._navigationPreview.pageCount);
+            this.printSettings.$previewEmpty.toggleClass('hidden', !!this._navigationPreview.pageCount);
+            if (!!this._navigationPreview.pageCount) {
+                this._navigationPreview.currentPreviewPage = this._navigationPreview.currentPage = this.api.getCurrentPage();
+                this.api.asc_drawPrintPreview(this._navigationPreview.currentPreviewPage);
+                this.updateNavigationButtons(this._navigationPreview.currentPreviewPage, this._navigationPreview.pageCount);
+                this.SetDisabled();
+            }
+            this._isPreviewVisible = true;
+        },
+
+        getPrintParams: function() {
+            return this.adjPrintParams;
+        },
+
+        onHidePrintMenu: function () {
+            if (this._isPreviewVisible) {
+                this.api.asc_closePrintPreview && 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);
+        },
+
+        onBtnPrint: function(print) {
+            if (this.printSettings.cmbRange.getValue()===-1 && this.printSettings.inputPages.checkValidate() !== true)  {
+                this.printSettings.inputPages.focus();
+                this.isInputFirstChange = true;
+                return;
+            }
+            if (this._navigationPreview.pageCount<1)
+                return;
+
+            this._isPrint = print;
+            if ( print ) {
+                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.api.asc_Print(opts);
+                this._isPrint = false;
+            } else {
+                var opts = new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PDF);
+                opts.asc_setAdvancedOptions(this.adjPrintParams);
+                this.api.asc_DownloadAs(opts);
+            }
+            this.printSettings.menu.hide();
+        },
+
+        inputPagesChanging: function (input, value) {
+            this.isInputFirstChange && this.printSettings.inputPages.showError();
+            this.isInputFirstChange = false;
+
+            if (value.length<1)
+                this.printSettings.cmbRange.setValue(Asc.c_oAscPrintType.EntireWorkbook);
+            else if (this.printSettings.cmbRange.getValue()!==-1)
+                this.printSettings.cmbRange.setValue(-1);
+        },
+
+        SetDisabled: function() {
+            if (this.printSettings.isVisible()) {
+                var disable = !this.mode.isEdit;
+            }
+        },
+
+        txtPrintRangeInvalid: 'Invalid print range'
+    }, PE.Controllers.Print || {}));
+});

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -1061,9 +1061,7 @@ define([
         },
         
         onPrint: function(e) {
-            if (this.api)
+            Common.NotificationCenter.trigger('file:print', this.toolbar);
-                this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isOpera == true use asc_onPrintUrl event
-
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
 
             Common.component.Analytics.trackEvent('Print');

apps/presentationeditor/main/app/template/FileMenu.template

@@ -8,6 +8,7 @@
     <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 +35,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>

apps/presentationeditor/main/app/view/FileMenu.js

@@ -171,6 +171,17 @@ define([
                 dataHintTitle: 'P'
             });
 
+            this.miPrintWithPreview = new Common.UI.MenuItem({
+                el      : $markup.elementById('#fm-btn-print-with-preview'),
+                action  : 'printpreview',
+                caption : this.btnPrintCaption,
+                canFocused: false,
+                dataHint: 1,
+                dataHintDirection: 'left-top',
+                dataHintOffset: [2, 14],
+                dataHintTitle: 'P'
+            });
+
             this.miRename = new Common.UI.MenuItem({
                 el      : $markup.elementById('#fm-btn-rename'),
                 action  : 'rename',
@@ -292,6 +303,7 @@ define([
                 this.miSaveCopyAs,
                 this.miSaveAs,
                 this.miPrint,
+                this.miPrintWithPreview,
                 this.miRename,
                 this.miProtect,
                 this.miRecent,
@@ -381,7 +393,8 @@ define([
             this.miSaveAs[(this.mode.canDownload && 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.miPrint[this.mode.canPrint && !this.mode.canPreviewPrint ?'show':'hide']();
+            this.miPrintWithPreview[this.mode.canPreviewPrint?'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.isEdit && Common.UI.LayoutManager.isElementVisible('toolbar-file-save') || this.mode.canPrint || this.mode.canProtect ||
@@ -462,6 +475,12 @@ define([
                 this.panels['help'].setLangConfig(this.mode.lang);
             }
 
+            if (this.mode.canPreviewPrint) {
+                var printPanel = PE.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(

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -1821,4 +1821,220 @@ define([
 
     }, PE.Views.FileMenuPanels.ProtectDoc || {}));
 
+    PE.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">',
+                                        '<table style="width: 100%;"><tbody><tr>',
+                                        '<td><%= scope.txtPages %></td><td><div id="print-txt-pages" style="width: 100%;padding-left: 5px;"></div></td>',
+                                        '</tr></tbody></table>',
+                                    '</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 id="print-preview-empty" class="hidden">',
+                    '<div><%= scope.txtEmptyTable %></div>',
+                '</div>',
+            '</div>'
+        ].join('')),
+
+        initialize: function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this,arguments);
+
+            this.menu = options.menu;
+        },
+
+        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: -1, displayValue: this.txtCustomPages }
+                ],
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+
+            this.inputPages = new Common.UI.InputField({
+                el: $markup.findById('#print-txt-pages'),
+                allowBlank: true,
+                validateOnChange: true,
+                validateOnBlur: false,
+                maskExp: /[0-9,\-]/,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            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');
+            this.$previewEmpty = $('#print-preview-empty');
+
+            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.fireEvent('render:after', this);
+
+            return this;
+        },
+
+        show: function() {
+            Common.UI.BaseView.prototype.show.call(this,arguments);
+            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) {
+
+        },
+
+        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 slide',
+        txtAllPages: 'All slides',
+        txtCustomPages: 'Custom print',
+        txtPage: 'Slide',
+        txtOf: 'of {0}',
+        txtPageNumInvalid: 'Slide number invalid',
+        txtEmptyTable: 'There is nothing to print because the presentation is empty',
+        txtPages: 'Slides'
+
+    }, PE.Views.PrintWithPreview || {}));
 });

apps/presentationeditor/main/app_dev.js

@@ -143,6 +143,7 @@ require([
             'Main',
             'ViewTab',
             'Search',
+            'Print',
             'Common.Controllers.Fonts',
             'Common.Controllers.History'
             /** coauthoring begin **/
@@ -173,6 +174,7 @@ require([
             'presentationeditor/main/app/controller/Main',
             'presentationeditor/main/app/controller/ViewTab',
             'presentationeditor/main/app/controller/Search',
+            'presentationeditor/main/app/controller/Print',
             'presentationeditor/main/app/view/FileMenuPanels',
             'presentationeditor/main/app/view/ParagraphSettings',
             'presentationeditor/main/app/view/ImageSettings',

apps/presentationeditor/main/resources/less/leftmenu.less

@@ -519,6 +519,128 @@
                 }
             }
         }
+
+        #panel-print {
+            padding: 0;
+            #print-preview-empty {
+                padding: 14px;
+                color: @text-tertiary-ie;
+                color: @text-tertiary;
+
+                position: absolute;
+                left: 280px;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                div {
+                    text-align: center;
+                }
+            }
+            #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);
+            }
+        }
     }
 }