Merge branch 'feature/pe-header-footer' into develop

[PE] Fix Bug 26990

apps/common/main/lib/component/ComboDataView.js

@@ -245,11 +245,7 @@ define([
                 var picker = this.menuPicker;
                 if (picker) {
                     var record = picker.getSelectedRec();
-
+                    this.fillComboView(record || picker.store.at(0), !!record, true);
-                    if (record) {
-                        record = record[0];
-                        this.fillComboView(record || picker.store.at(0), !!record, true);
-                    }
 
                     picker.onResize();
                 }
@@ -311,7 +307,7 @@ define([
         },
 
         onAfterHideMenu: function(e, isFromInputControl) {
-            this.menuPicker.selectedBeforeHideRec = this.menuPicker.getSelectedRec()[0]; // for DataView - onKeyDown - Return key
+            this.menuPicker.selectedBeforeHideRec = this.menuPicker.getSelectedRec(); // for DataView - onKeyDown - Return key
             (this.showLast) ? this.menuPicker.showLastSelected() : this.menuPicker.deselectAll();
             this.trigger('hide:after', this, e, isFromInputControl);
         },
@@ -387,10 +383,7 @@ define([
                 var picker = this.menuPicker;
                 if (picker) {
                     var record = picker.getSelectedRec();
-                    if (record) {
+                    this.fillComboView(record || picker.store.at(0), false);
-                        record = record[0];
-                        this.fillComboView(record || picker.store.at(0), false);
-                    }
                 }
             }
         },

apps/common/main/lib/component/DataView.js

@@ -389,17 +389,7 @@ define([
         },
 
         getSelectedRec: function() {
-            if (this.multiSelect) {
+            return (this.multiSelect) ? this.store.where({selected: true}) : this.store.findWhere({selected: true});
-
-                var items = [];
-                _.each(this.store.where({selected: true}), function(rec){
-                    items.push(rec);
-                });
-
-                return items;
-            }
-
-            return this.store.where({selected: true});
         },
 
         onAddItem: function(record, store, opts) {
@@ -601,7 +591,7 @@ define([
             if (_.indexOf(this.moveKeys, data.keyCode)>-1 || data.keyCode==Common.UI.Keys.RETURN) {
                 data.preventDefault();
                 data.stopPropagation();
-                var rec = this.getSelectedRec()[0];
+                var rec = this.getSelectedRec();
                 if (this.lastSelectedRec===null)
                     this.lastSelectedRec = rec;
                 if (data.keyCode==Common.UI.Keys.RETURN) {
@@ -699,8 +689,7 @@ define([
                 this.scrollToRecord(this.lastSelectedRec);
                 this.lastSelectedRec = null;
             } else {
-                var rec = this.getSelectedRec()[0];
+                this.scrollToRecord(this.getSelectedRec());
-                if (rec) this.scrollToRecord(rec);
             }
         },
 

apps/common/main/resources/less/toolbar.less

@@ -529,6 +529,7 @@
 .button-normal-icon(btn-lookup,             72, @toolbar-big-icon-size);
 .button-normal-icon(btn-func-math,          73, @toolbar-big-icon-size);
 .button-normal-icon(btn-more,               74, @toolbar-big-icon-size);
+.button-normal-icon(btn-pagenum,            75, @toolbar-big-icon-size);
 
 .item-shape {
     .icon {

apps/documenteditor/main/app/view/BookmarksDialog.js

@@ -314,9 +314,7 @@ define([
 
         gotoBookmark: function(btn, eOpts){
             var rec = this.bookmarksList.getSelectedRec();
-            if (rec.length>0) {
+            rec && this.props.asc_SelectBookmark(rec.get('value'));
-                this.props.asc_SelectBookmark(rec[0].get('value'));
-            }
         },
 
         addBookmark: function(btn, eOpts){
@@ -333,11 +331,11 @@ define([
 
         deleteBookmark: function(btn, eOpts){
             var rec = this.bookmarksList.getSelectedRec();
-            if (rec.length>0) {
+            if (rec) {
-                this.props.asc_RemoveBookmark(rec[0].get('value'));
+                this.props.asc_RemoveBookmark(rec.get('value'));
                 var store = this.bookmarksList.store;
-                var idx = _.indexOf(store.models, rec[0]);
+                var idx = _.indexOf(store.models, rec);
-                store.remove(rec[0]);
+                store.remove(rec);
                 this.txtName.setValue('');
                 this.btnAdd.setDisabled(true);
                 this.btnGoto.setDisabled(true);
@@ -350,13 +348,11 @@ define([
             if (btn.cmpEl && btn.cmpEl.parent().hasClass('open')) return;
 
             var rec = this.bookmarksList.getSelectedRec();
-            if (rec.length>0) {
+            rec && Common.Gateway.requestMakeActionLink({
-                Common.Gateway.requestMakeActionLink({
+                                                            action: {
-                                                        action: {
+                                                                type: "bookmark", data: rec.get('value')
-                                                            type: "bookmark", data: rec[0].get('value')
+                                                            }
-                                                        }
+                                                        });
-                                                    });
-            }
         },
 
         onRadioSort: function(field, newValue, eOpts) {

apps/documenteditor/main/app/view/ChartSettings.js

@@ -167,7 +167,7 @@ define([
 
                         if (this._isChartStylesChanged) {
                             if (rec)
-                                this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec()[0],true);
+                                this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true);
                             else
                                 this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true);
                         }

apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js

@@ -252,7 +252,7 @@ define([
                     store.reset(arr);
                 }
                 var rec = this.internalList.getSelectedRec();
-                this.btnOk.setDisabled(rec.length<1 || rec[0].get('level')==0 && rec[0].get('index')>0);
+                this.btnOk.setDisabled(!rec || rec.get('level')==0 && rec.get('index')>0);
 
             } else
                 this.btnOk.setDisabled(false);
@@ -338,14 +338,14 @@ define([
                 display = url;
             } else {
                 var rec = this.internalList.getSelectedRec();
-                if (rec.length>0) {
+                if (rec) {
-                    props.put_Bookmark(rec[0].get('name'));
+                    props.put_Bookmark(rec.get('name'));
-                    if (rec[0].get('index')==0)
+                    if (rec.get('index')==0)
                         props.put_TopOfDocument();
-                    var para = rec[0].get('headingParagraph');
+                    var para = rec.get('headingParagraph');
                     if (para)
                         props.put_Heading(para);
-                    display = rec[0].get('name');
+                    display = rec.get('name');
                 }
             }
 
@@ -382,7 +382,7 @@ define([
                         }
                     } else {
                         var rec = this.internalList.getSelectedRec();
-                        if (rec.length<1 || rec[0].get('level')==0 && rec[0].get('index')>0)
+                        if (!rec || rec.get('level')==0 && rec.get('index')>0)
                             return;
                     }
                     if (this.inputDisplay.checkValidate() !== true) {

apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js

@@ -1121,10 +1121,10 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
 
         removeTab: function(btn, eOpts){
             var rec = this.tabList.getSelectedRec();
-            if (rec.length>0) {
+            if (rec) {
                 var store = this.tabList.store;
-                var idx = _.indexOf(store.models, rec[0]);
+                var idx = _.indexOf(store.models, rec);
-                store.remove(rec[0]);
+                store.remove(rec);
                 if (idx>store.length-1) idx = store.length-1;
                 if (store.length>0) {
                     this.tabList.selectByIndex(idx);

apps/documenteditor/main/app/view/TableSettings.js

@@ -473,7 +473,7 @@ define([
 
                     if (this._isTemplatesChanged) {
                         if (rec)
-                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec()[0],true);
+                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true);
                         else
                             this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true);
                     }

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

@@ -637,6 +637,8 @@ define([
                 me.hidePreloader();
                 me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
+                Common.Utils.InternalSettings.set("pe-settings-datetime-default", Common.localStorage.getItem("pe-settings-datetime-default"));
+
                 value = Common.localStorage.getItem("pe-settings-zoom");
                 Common.Utils.InternalSettings.set("pe-settings-zoom", value);
                 var zf = (value!==null) ? parseInt(value) : (this.appOptions.customization && this.appOptions.customization.zoom ? parseInt(this.appOptions.customization.zoom) : -1);

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

@@ -135,6 +135,7 @@ define([
                     this._settings[settingsType].lockedBackground = value.get_LockBackground();
                     this._settings[settingsType].lockedEffects = value.get_LockTranzition();
                     this._settings[settingsType].lockedTiming = value.get_LockTiming();
+                    this._settings[settingsType].lockedHeader = !!value.get_LockHeader && value.get_LockHeader();
                 } else {
                     this._settings[settingsType].locked = value.get_Locked();
                     if (settingsType == Common.Utils.documentSettingsType.Shape && value.asc_getTextArtProperties()) {
@@ -178,7 +179,8 @@ define([
                         if (pnl.locked!==undefined)
                             this.rightmenu.slideSettings.SetSlideDisabled(this._state.no_slides || pnl.lockedBackground || pnl.locked,
                                                                           this._state.no_slides || pnl.lockedEffects || pnl.locked,
-                                                                          this._state.no_slides || pnl.lockedTiming || pnl.locked);
+                                                                          this._state.no_slides || pnl.lockedTiming || pnl.locked,
+                                                                          this._state.no_slides || pnl.lockedHeader || pnl.locked);
                     } else
                         pnl.panel.setLocked(pnl.locked);
                 }
@@ -214,7 +216,7 @@ define([
         SetDisabled: function(disabled, allowSignature) {
             this.setMode({isEdit: !disabled});
             if (this.rightmenu) {
-                this.rightmenu.slideSettings.SetSlideDisabled(disabled, disabled, disabled);
+                this.rightmenu.slideSettings.SetSlideDisabled(disabled, disabled, disabled, disabled);
                 this.rightmenu.paragraphSettings.disableControls(disabled);
                 this.rightmenu.shapeSettings.disableControls(disabled);
                 this.rightmenu.textartSettings.disableControls(disabled);

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

@@ -51,6 +51,8 @@ define([
     'common/main/lib/util/define',
     'presentationeditor/main/app/collection/SlideThemes',
     'presentationeditor/main/app/view/Toolbar',
+    'presentationeditor/main/app/view/DateTimeDialog',
+    'presentationeditor/main/app/view/HeaderFooterDialog',
     'presentationeditor/main/app/view/HyperlinkSettingsDialog',
     'presentationeditor/main/app/view/SlideSizeSettings',
     'presentationeditor/main/app/view/SlideshowSettings'
@@ -309,6 +311,9 @@ define([
             toolbar.mnuInsertChartPicker.on('item:click',               _.bind(this.onSelectChart, this));
             toolbar.listTheme.on('click',                               _.bind(this.onListThemeSelect, this));
             toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
+            toolbar.btnEditHeader.on('click',                           _.bind(this.onEditHeaderClick, this, 'header'));
+            toolbar.btnInsDateTime.on('click',                          _.bind(this.onEditHeaderClick, this, 'datetime'));
+            toolbar.btnInsSlideNum.on('click',                          _.bind(this.onEditHeaderClick, this, 'slidenum'));
 
             this.onSetupCopyStyleButton();
         },
@@ -357,6 +362,7 @@ define([
             this.api.asc_registerCallback('asc_onCountPages',           _.bind(this.onApiCountPages, this));
             this.api.asc_registerCallback('asc_onMathTypes',            _.bind(this.onMathTypes, this));
             this.api.asc_registerCallback('asc_onContextMenu',          _.bind(this.onContextMenu, this));
+            this.api.asc_registerCallback('asc_onTextLanguage',         _.bind(this.onTextLanguage, this));
         },
 
         onChangeCompactView: function(view, compact) {
@@ -619,7 +625,7 @@ define([
                     this.toolbar.btnChangeSlide, this.toolbar.btnPreview, this.toolbar.btnPrint, this.toolbar.btnCopy, this.toolbar.btnPaste,
                     this.toolbar.btnCopyStyle, this.toolbar.btnInsertTable, this.toolbar.btnInsertChart,
                     this.toolbar.btnColorSchemas, this.toolbar.btnShapeAlign,
-                    this.toolbar.btnShapeArrange, this.toolbar.btnSlideSize,  this.toolbar.listTheme
+                    this.toolbar.btnShapeArrange, this.toolbar.btnSlideSize,  this.toolbar.listTheme, this.toolbar.btnEditHeader, this.toolbar.btnInsDateTime, this.toolbar.btnInsSlideNum
                 ]});
                 this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides,
                     { array:  this.toolbar.btnsInsertImage.concat(this.toolbar.btnsInsertText, this.toolbar.btnsInsertShape, this.toolbar.btnInsertEquation, this.toolbar.btnInsertTextArt) });
@@ -674,13 +680,14 @@ define([
 
             if (paragraph_locked!==undefined && this._state.prcontrolsdisable !== paragraph_locked) {
                 if (this._state.activated) this._state.prcontrolsdisable = paragraph_locked;
-                this.toolbar.lockToolbar(PE.enumLock.paragraphLock, paragraph_locked, {array: me.toolbar.paragraphControls});
+                this.toolbar.lockToolbar(PE.enumLock.paragraphLock, paragraph_locked, {array: me.toolbar.paragraphControls.concat(me.toolbar.btnInsDateTime, me.toolbar.btnInsSlideNum)});
             }
 
             if (this._state.no_paragraph !== no_paragraph) {
                 if (this._state.activated) this._state.no_paragraph = no_paragraph;
                 this.toolbar.lockToolbar(PE.enumLock.noParagraphSelected, no_paragraph, {array: me.toolbar.paragraphControls});
                 this.toolbar.lockToolbar(PE.enumLock.noParagraphSelected, no_paragraph, {array: [me.toolbar.btnCopyStyle]});
+                this.toolbar.lockToolbar(PE.enumLock.paragraphLock, !no_paragraph && this._state.prcontrolsdisable, {array: [me.toolbar.btnInsDateTime, me.toolbar.btnInsSlideNum]});
             }
 
             if (this._state.no_text !== no_text) {
@@ -1443,6 +1450,52 @@ define([
             Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
         },
 
+        onEditHeaderClick: function(type, e) {
+            var selectedElements = this.api.getSelectedElements(),
+                in_text = false;
+
+            for (var i=0; i < selectedElements.length; i++) {
+                if (selectedElements[i].get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) {
+                    in_text = true;
+                    break;
+                }
+            }
+            if (in_text && type=='slidenum') {
+                this.api.asc_addSlideNumber();
+            } else if (in_text && type=='datetime') {
+                //insert date time
+                var me = this;
+                (new PE.Views.DateTimeDialog({
+                    api: this.api,
+                    lang: this._state.lang,
+                    handler: function(result, value) {
+                        if (result == 'ok') {
+                            if (me.api) {
+                                me.api.asc_addDateTime(value);
+                            }
+                        }
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                })).show();
+            } else {
+                //edit header/footer
+                var me = this;
+                (new PE.Views.HeaderFooterDialog({
+                    api: this.api,
+                    lang: this.api.asc_getDefaultLanguage(),
+                    props: this.api.asc_getHeaderFooterProperties(),
+                    handler: function(result, value) {
+                        if (result == 'ok' || result == 'all') {
+                            if (me.api) {
+                                me.api.asc_setHeaderFooterProperties(value, result == 'all');
+                            }
+                        }
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                })).show();
+            }
+        },
+
         onClearStyleClick: function(btn, e) {
             if (this.api)
                 this.api.ClearFormating();
@@ -2078,6 +2131,10 @@ define([
             }
         },
 
+        onTextLanguage: function(langId) {
+            this._state.lang = langId;
+        },
+
         textEmptyImgUrl : 'You need to specify image URL.',
         textWarning     : 'Warning',
         textFontSizeErr : 'The entered value must be more than 0',

apps/presentationeditor/main/app/template/HeaderFooterDialog.template

@@ -0,0 +1,37 @@
+<table cols="1">
+    <tr><td class="padding-small">
+        <div id="hf-dlg-chb-datetime"></div>
+    </td></tr>
+    <tr><td class="padding-large">
+        <table id="hf-dlg-tbl-datetime" cols="2" style="margin-left: 22px;">
+            <tr>
+                <td class="padding-small" style="width: 180px;">
+                    <label  style="display:block;" class="input-label"><%= scope.textFormat %></label>
+                    <div id="hf-dlg-combo-format" style="width: 100%;"></div>
+                </td>
+                <td class="padding-small" style="width: 180px; padding-left: 5px;">
+                    <label  style="display:block;" class="input-label"><%= scope.textLang %></label>
+                    <div id="hf-dlg-combo-lang" style="width: 100%;"></div>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <div id="hf-dlg-chb-update"></div>
+                </td>
+            </tr>
+        </table>
+    </td></tr>
+    <tr><td class="padding-large">
+        <div id="hf-dlg-chb-slide"></div>
+    </td></tr>
+    <tr><td class="padding-small">
+        <div id="hf-dlg-chb-text"></div>
+    </td></tr>
+    <tr><td class="padding-large">
+        <div id="hf-dlg-text" class="input-row" style="margin-left: 22px;"></div>
+    </td></tr>
+    <tr><td class="padding-small"></td></tr>
+    <tr><td class="padding-small">
+        <div id="hf-dlg-chb-not-title"></div>
+    </td></tr>
+</table>

apps/presentationeditor/main/app/template/SlideSettings.template

@@ -116,9 +116,25 @@
         </td>
     </tr>
     <tr>
-        <td colspan=2>
+        <td class="padding-small">
             <button type="button" class="btn btn-text-default" id="slide-button-apply-all" style="width:100%;"><%= scope.textApplyAll %></button>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="slide-checkbox-slidenum"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="slide-checkbox-datetime"></div>
+        </td>
+    </tr>
+
     <tr class="finish-cell"></tr>
 </table>

apps/presentationeditor/main/app/template/Toolbar.template

@@ -121,6 +121,12 @@
                     <span class="btn-slot text x-huge" id="slot-btn-insertlink"></span>
                 </div>
                 <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-editheader"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-datetime"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-slidenum"></span>
+                </div>
+                <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-insertequation"></span>
                 </div>

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

@@ -150,7 +150,7 @@ define([
 
                         if (this._isChartStylesChanged) {
                             if (rec)
-                                this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec()[0],true);
+                                this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true);
                             else
                                 this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true);
                         }

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

@@ -0,0 +1,257 @@
+/*
+ *
+ * (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
+ *
+ */
+/**
+ *  DateTimeDialog.js
+ *
+ *  Created by Julia Radzhabova on 26.06.2019
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/component/Window',
+    'common/main/lib/component/ComboBox',
+    'common/main/lib/component/ListView'
+], function () {
+    'use strict';
+
+    PE.Views.DateTimeDialog = Common.UI.Window.extend(_.extend({
+        options: {
+            width: 350,
+            style: 'min-width: 230px;',
+            cls: 'modal-dlg'
+        },
+
+        initialize : function (options) {
+            var t = this,
+                _options = {};
+
+            _.extend(this.options, {
+                title: this.txtTitle
+            }, options || {});
+
+            this.template = [
+                '<div class="box" style="height: 275px;">',
+                    '<div class="input-row">',
+                        '<label style="font-weight: bold;">' + this.textLang + '</label>',
+                    '</div>',
+                    '<div id="datetime-dlg-lang" class="input-row" style="margin-bottom: 8px;"></div>',
+                    '<div class="input-row">',
+                        '<label style="font-weight: bold;">' + this.textFormat + '</label>',
+                    '</div>',
+                    '<div id="datetime-dlg-format" class="" style="margin-bottom: 10px;width: 100%; height: 165px; overflow: hidden;"></div>',
+                    '<div class="input-row">',
+                        '<div id="datetime-dlg-update" style="margin-top: 3px;"></div>',
+                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default" style="float: right;">' + this.textDefault + '</button>',
+                    '</div>',
+                '</div>',
+                '<div class="footer center">',
+                    '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>',
+                    '<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + '</button>',
+                '</div>'
+            ].join('');
+
+            this.options.tpl = _.template(this.template)(this.options);
+            this.api = this.options.api;
+            this.lang = this.options.lang;
+            this.handler =   this.options.handler;
+
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+        },
+        render: function () {
+            Common.UI.Window.prototype.render.call(this);
+
+            var data = [{ value: 0x042C }, { value: 0x0402 }, { value: 0x0405 }, { value: 0x0407 },  {value: 0x0807}, { value: 0x0408 }, { value: 0x0C09 }, { value: 0x0809 }, { value: 0x0409 }, { value: 0x0C0A }, { value: 0x080A },
+                { value: 0x040B }, { value: 0x040C }, { value: 0x0410 }, { value: 0x0411 }, { value: 0x0412 }, { value: 0x0426 }, { value: 0x0413 }, { value: 0x0415 }, { value: 0x0416 },
+                { value: 0x0816 }, { value: 0x0419 }, { value: 0x041B }, { value: 0x0424 }, { value: 0x081D }, { value: 0x041D }, { value: 0x041F }, { value: 0x0422 }, { value: 0x042A }, { value: 0x0804 }];
+            data.forEach(function(item) {
+                var langinfo = Common.util.LanguageInfo.getLocalLanguageName(item.value);
+                item.displayValue = langinfo[1];
+                item.langName = langinfo[0];
+            });
+
+            this.cmbLang = new Common.UI.ComboBox({
+                el          : $('#datetime-dlg-lang'),
+                menuStyle   : 'min-width: 100%; max-height: 185px;',
+                cls         : 'input-group-nr',
+                editable    : false,
+                data        : data
+            });
+            this.cmbLang.setValue(0x0409);
+            this.cmbLang.on('selected', _.bind(function(combo, record) {
+                this.updateFormats(record.value);
+            }, this));
+
+            this.chUpdate = new Common.UI.CheckBox({
+                el: $('#datetime-dlg-update'),
+                labelText: this.textUpdate
+            });
+            this.chUpdate.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                this.onSelectFormat(this.listFormats, null, this.listFormats.getSelectedRec());
+            }, this));
+
+            this.listFormats = new Common.UI.ListView({
+                el: $('#datetime-dlg-format'),
+                store: new Common.UI.DataViewStore(),
+                scrollAlwaysVisible: true
+            });
+
+            this.listFormats.on('item:select', _.bind(this.onSelectFormat, this));
+            this.listFormats.on('item:dblclick', _.bind(this.onDblClickFormat, this));
+            this.listFormats.on('entervalue', _.bind(this.onPrimary, this));
+            this.listFormats.$el.find('.listview').focus();
+
+            this.btnDefault = new Common.UI.Button({
+                el: $('#datetime-dlg-default')
+            });
+            this.btnDefault.on('click', _.bind(function(btn, e) {
+                var rec = this.listFormats.getSelectedRec();
+                Common.UI.warning({
+                    msg: Common.Utils.String.format(this.confirmDefault, Common.util.LanguageInfo.getLocalLanguageName(this.cmbLang.getValue())[1], rec ? rec.get('value') : ''),
+                    buttons: ['yes', 'no'],
+                    primary: 'yes',
+                    callback: _.bind(function(btn) {
+                        if (btn == 'yes') {
+                            this.defaultFormats[this.cmbLang.getValue()] = rec ? rec.get('format') : '';
+                            this.api.asc_setDefaultDateTimeFormat(this.defaultFormats);
+                            var arr = [];
+                            for (var name in this.defaultFormats) {
+                                if (name) {
+                                    arr.push(name + ' ' + this.defaultFormats[name]);
+                                }
+                            }
+                            var value = arr.join(';');
+                            Common.localStorage.setItem("pe-settings-datetime-default", value);
+                            Common.Utils.InternalSettings.set("pe-settings-datetime-default", value);
+                        }
+                    }, this)
+                });
+            }, this));
+
+            this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+            this.afterRender();
+        },
+
+        afterRender: function() {
+            var me = this,
+                value =  Common.Utils.InternalSettings.get("pe-settings-datetime-default"),
+                arr = (value) ? value.split(';') : [];
+            this.defaultFormats = [];
+            arr.forEach(function(item){
+                var pair = item.split(' ');
+                me.defaultFormats[parseInt(pair[0])] = pair[1];
+            });
+
+            this._setDefaults();
+        },
+
+        _setDefaults: function () {
+            this.props = new AscCommonSlide.CAscDateTime();
+            if (this.lang) {
+                var item = this.cmbLang.store.findWhere({value: this.lang});
+                item = item ? item.get('value') : 0x0409;
+                this.cmbLang.setValue(item)
+            }
+            this.updateFormats(this.cmbLang.getValue());
+        },
+
+        getSettings: function () {
+            return this.props;
+        },
+
+        updateFormats: function(lang) {
+            this.props.put_Lang(lang);
+            var data = this.props.get_DateTimeExamples(),
+                arr = [];
+            var store = this.listFormats.store;
+            for (var name in data) {
+                if (data[name])  {
+                    var rec = new Common.UI.DataViewModel();
+                    rec.set({
+                        format: name,
+                        value: data[name]
+                    });
+                    arr.push(rec);
+                }
+            }
+            store.reset(arr);
+            var format = this.defaultFormats[lang];
+            format ? this.listFormats.selectRecord(store.findWhere({format: format})) : this.listFormats.selectByIndex(0);
+            var rec = this.listFormats.getSelectedRec();
+            this.listFormats.scrollToRecord(rec);
+            this.onSelectFormat(this.listFormats, null, rec);
+        },
+
+        onSelectFormat: function(lisvView, itemView, record) {
+            if (!record) return;
+            if (this.chUpdate.getValue()=='checked') {
+                this.props.put_DateTime(record.get('format'));
+            } else {
+                this.props.put_DateTime(null);
+                this.props.put_CustomDateTime(record.get('value'));
+            }
+        },
+
+        onBtnClick: function(event) {
+            this._handleInput(event.currentTarget.attributes['result'].value);
+        },
+
+        onDblClickFormat: function () {
+            this._handleInput('ok');
+        },
+
+        onPrimary: function(event) {
+            this._handleInput('ok');
+            return false;
+        },
+
+        _handleInput: function(state) {
+            if (this.options.handler) {
+                this.options.handler.call(this, state, this.getSettings());
+            }
+
+            this.close();
+        },
+
+        //
+        cancelButtonText: 'Cancel',
+        okButtonText: 'OK',
+        txtTitle: 'Date & Time',
+        textLang: 'Language',
+        textFormat: 'Formats',
+        textUpdate: 'Update automatically',
+        textDefault: 'Set as default',
+        confirmDefault: 'Set default format for {0}: "{1}"'
+
+    }, PE.Views.DateTimeDialog || {}));
+});

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

@@ -0,0 +1,329 @@
+/*
+ *
+ * (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
+ *
+ */
+
+/**
+ *  HeaderFooterDialog.js
+ *
+ *  Created by Julia Radzhabova on 09.07.2019
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
+    'common/main/lib/util/utils',
+    'common/main/lib/component/RadioBox',
+    'common/main/lib/component/InputField',
+    'common/main/lib/view/AdvancedSettingsWindow'
+], function (template) { 'use strict';
+
+    PE.Views.HeaderFooterDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+        options: {
+            contentWidth: 360,
+            height: 340
+        },
+
+        initialize : function(options) {
+            var me = this;
+
+            _.extend(this.options, {
+                title: this.textTitle,
+                template: _.template(
+                    [
+                        '<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
+                            '<div class="content-panel" style="padding: 10px 5px;"><div class="inner-content">',
+                                '<div class="settings-panel active">',
+                                template,
+                                '</div></div>',
+                            '</div>',
+                            '<div class="separator"/>',
+                            '<div class="menu-panel" style="width: 130px; padding-top: 17px;">',
+                                '<label  style="display:block; margin-left: 15px;" class="input-label">' + me.textPreview + '</label>',
+                                '<div style="width: 100px; height: 80px; padding: 5px; margin-left: 15px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
+                                    '<div id="hf-dlg-canvas-preview" style="width: 100%;height: 100%;"></div>',
+                                '</div>',
+                            '</div>',
+                        '</div>',
+                        '<div class="separator horizontal"/>',
+                        '<div class="footer center">',
+                            '<button class="btn normal dlg-btn primary" result="all" style="margin-right: 10px;width: auto; min-width: 86px;">' + me.applyAllText + '</button>',
+                            '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;width: auto; min-width: 86px;">' + me.applyText + '</button>',
+                            '<button class="btn normal dlg-btn" result="cancel">' + me.cancelButtonText + '</button>',
+                        '</div>'
+                    ].join('')
+                )({
+                    scope: this
+                })
+            }, options);
+
+            this.lang       = options.lang;
+            this.handler    = options.handler;
+            this.hfProps    = options.props;
+            this.api        = options.api;
+            this.dateControls = [];
+
+            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+        },
+
+        render: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+            var me = this;
+
+            this.chDateTime = new Common.UI.CheckBox({
+                el: $('#hf-dlg-chb-datetime'),
+                labelText: this.textDateTime
+            });
+            this.chDateTime.on('change', _.bind(this.setType, this, 'date'));
+
+            this.chSlide = new Common.UI.CheckBox({
+                el: $('#hf-dlg-chb-slide'),
+                labelText: this.textSlideNum
+            });
+            this.chSlide.on('change', _.bind(this.setType, this, 'slide'));
+
+            this.chFooter = new Common.UI.CheckBox({
+                el: $('#hf-dlg-chb-text'),
+                labelText: this.textFooter
+            });
+            this.chFooter.on('change', _.bind(this.setType, this, 'footer'));
+
+            this.inputFooter = new Common.UI.InputField({
+                el          : $('#hf-dlg-text'),
+                validateOnBlur: false,
+                style       : 'width: 100%;'
+            });
+
+            var data = [{ value: 0x042C }, { value: 0x0402 }, { value: 0x0405 }, { value: 0x0407 },  {value: 0x0807}, { value: 0x0408 }, { value: 0x0C09 }, { value: 0x0809 }, { value: 0x0409 }, { value: 0x0C0A }, { value: 0x080A },
+                { value: 0x040B }, { value: 0x040C }, { value: 0x0410 }, { value: 0x0411 }, { value: 0x0412 }, { value: 0x0426 }, { value: 0x0413 }, { value: 0x0415 }, { value: 0x0416 },
+                { value: 0x0816 }, { value: 0x0419 }, { value: 0x041B }, { value: 0x0424 }, { value: 0x081D }, { value: 0x041D }, { value: 0x041F }, { value: 0x0422 }, { value: 0x042A }, { value: 0x0804 }];
+            data.forEach(function(item) {
+                var langinfo = Common.util.LanguageInfo.getLocalLanguageName(item.value);
+                item.displayValue = langinfo[1];
+                item.langName = langinfo[0];
+            });
+
+            this.cmbLang = new Common.UI.ComboBox({
+                el          : $('#hf-dlg-combo-lang'),
+                menuStyle   : 'min-width: 100%; max-height: 185px;',
+                cls         : 'input-group-nr',
+                editable    : false,
+                data        : data
+            });
+            this.cmbLang.setValue(0x0409);
+            this.cmbLang.on('selected', _.bind(function(combo, record) {
+                this.updateFormats(record.value);
+            }, this));
+            this.dateControls.push(this.cmbLang);
+
+            this.cmbFormat = new Common.UI.ComboBox({
+                el          : $('#hf-dlg-combo-format'),
+                menuStyle   : 'min-width: 100%; max-height: 185px;',
+                cls         : 'input-group-nr',
+                editable    : false,
+                data        : []
+            });
+            this.dateControls.push(this.cmbFormat);
+
+            this.chUpdate = new Common.UI.CheckBox({
+                el: $('#hf-dlg-chb-update'),
+                labelText: this.textUpdate,
+                value: 'checked'
+            });
+            this.dateControls.push(this.chUpdate);
+
+            this.chNotTitle = new Common.UI.CheckBox({
+                el: $('#hf-dlg-chb-not-title'),
+                labelText: this.textNotTitle
+            });
+
+            this.afterRender();
+        },
+
+        afterRender: function() {
+            var me = this,
+                value =  Common.Utils.InternalSettings.get("pe-settings-datetime-default"),
+                arr = (value) ? value.split(';') : [];
+            this.defaultFormats = [];
+            arr.forEach(function(item){
+                var pair = item.split(' ');
+                me.defaultFormats[parseInt(pair[0])] = pair[1];
+            });
+
+            this._setDefaults(this.hfProps);
+        },
+
+        setType: function(type, field, newValue) {
+            newValue = (newValue=='checked');
+            if (type == 'date') {
+                _.each(this.dateControls, function(item) {
+                    item.setDisabled(!newValue);
+                });
+                this.props.put_ShowDateTime(newValue);
+            } else if (type == 'slide') {
+                this.props.put_ShowSlideNum(newValue);
+            } else if (type == 'footer') {
+                this.inputFooter.setDisabled(!newValue);
+                this.props.put_ShowFooter(newValue);
+            }
+            this.props.updateView();
+        },
+
+        updateFormats: function(lang, format) {
+            var props = new AscCommonSlide.CAscDateTime();
+            props.put_Lang(lang);
+            var data = props.get_DateTimeExamples(),
+                arr = [];
+            for (var name in data) {
+                if (data[name])  {
+                    arr.push({
+                        value: name,
+                        displayValue: data[name]
+                    });
+                }
+            }
+            this.cmbFormat.setData(arr);
+            format = format || this.defaultFormats[lang];
+            this.cmbFormat.setValue(format ? format : arr[0].value);
+        },
+
+        onSelectFormat: function(format) {
+            format = format || this.cmbFormat.getValue();
+            if (this.chUpdate.getValue()=='checked') {
+                this.props.get_DateTime().put_DateTime(format);
+            } else {
+                this.props.get_DateTime().put_DateTime(null);
+                this.props.get_DateTime().put_CustomDateTime(format);
+            }
+        },
+
+        _setDefaults: function (props) {
+            if (props) {
+                var slideprops = props.get_Slide() || new AscCommonSlide.CAscHFProps();
+
+                var val = slideprops.get_ShowDateTime();
+                this.chDateTime.setValue(val, true);
+                _.each(this.dateControls, function(item) {
+                    item.setDisabled(!val);
+                });
+
+                var format,
+                    datetime = slideprops.get_DateTime(),
+                    item = this.cmbLang.store.findWhere({value: datetime.get_Lang() || this.lang});
+                this._originalLang = item ? item.get('value') : 0x0409;
+                this.cmbLang.setValue(this._originalLang);
+
+                if (val) {
+                    format = datetime.get_DateTime();
+                    this.chUpdate.setValue(!!format, true);
+                    !format && (format = datetime.get_CustomDateTime());
+                }
+                this.updateFormats(this.cmbLang.getValue(), format);
+
+                val = slideprops.get_ShowSlideNum();
+                this.chSlide.setValue(val, true);
+
+                val = slideprops.get_ShowFooter();
+                this.chFooter.setValue(val, true);
+                this.inputFooter.setDisabled(!val);
+                val && this.inputFooter.setValue(slideprops.get_Footer() || '');
+
+                val = slideprops.get_ShowOnTitleSlide();
+                this.chNotTitle.setValue(!val, true);
+
+                this.props = slideprops;
+            } else
+                this.props = new AscCommonSlide.CAscHFProps();
+
+            this.props.put_DivId('hf-dlg-canvas-preview');
+            this.props.put_Api(this.api);
+            this.props.updateView();
+        },
+
+        getSettings: function () {
+            var props = this.props;
+            if (props.get_ShowDateTime()) {
+                !props.get_DateTime() && props.put_DateTime(new AscCommonSlide.CAscDateTime());
+                props.get_DateTime().put_Lang(this.cmbLang.getValue());
+                this.onSelectFormat();
+            }
+            if (props.get_ShowFooter()) {
+                props.put_Footer(this.inputFooter.getValue());
+            }
+            props.put_ShowOnTitleSlide(this.chNotTitle.getValue()!='checked');
+
+            this.hfProps.put_Slide(this.props);
+            return this.hfProps;
+        },
+
+        onDlgBtnClick: function(event) {
+            this._handleInput(event.currentTarget.attributes['result'].value);
+        },
+
+        onPrimary: function() {
+            this._handleInput('ok');
+            return false;
+        },
+
+        _handleInput: function(state) {
+            if (this.handler) {
+                if (state == 'ok') {
+                    if (this.cmbLang.getValue() !== this._originalLang)  {
+                        Common.UI.warning({
+                            title: this.notcriticalErrorTitle,
+                            maxwidth: 600,
+                            msg  : this.diffLanguage
+                        });
+                        return;
+                    }
+                }
+
+                this.handler.call(this, state, this.getSettings());
+            }
+            this.close();
+        },
+
+        textTitle: 'Header/Footer Settings',
+        cancelButtonText: 'Cancel',
+        applyAllText: 'Apply to all',
+        applyText: 'Apply',
+        textLang: 'Language',
+        textFormat: 'Formats',
+        textUpdate: 'Update automatically',
+        textDateTime: 'Date and time',
+        textSlideNum: 'Slide number',
+        textFooter: 'Text in footer',
+        textNotTitle: 'Don\'t show on title slide',
+        textPreview: 'Preview',
+        diffLanguage: 'You can’t use a date format in a different language than the slide master.\nTo change the master, click \'Apply to all\' instead of \'Apply\'',
+        notcriticalErrorTitle: 'Warning'
+
+    }, PE.Views.HeaderFooterDialog || {}))
+});

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

@@ -523,10 +523,10 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
 
         removeTab: function(btn, eOpts){
             var rec = this.tabList.getSelectedRec();
-            if (rec.length>0) {
+            if (rec) {
                 var store = this.tabList.store;
-                var idx = _.indexOf(store.models, rec[0]);
+                var idx = _.indexOf(store.models, rec);
-                store.remove(rec[0]);
+                store.remove(rec);
                 if (idx>store.length-1) idx = store.length-1;
                 if (store.length>0) {
                     this.tabList.selectByIndex(idx);

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

@@ -79,7 +79,8 @@ define([
             this._stateDisabled = {
                 background: true,
                 effects: true,
-                timing: true
+                timing: true,
+                header: true
             };
 
             this._state = {
@@ -249,6 +250,20 @@ define([
                 if (this.api) this.api.SlideTimingApplyToAll();
                 this.fireEvent('editcomplete', this);
             }, this));
+
+            this.chSlideNum = new Common.UI.CheckBox({
+                el: $('#slide-checkbox-slidenum'),
+                labelText: this.strSlideNum,
+                disabled: true
+            });
+            this.chSlideNum.on('change', _.bind(this.onHeaderChange, this, 'slidenum'));
+
+            this.chDateTime = new Common.UI.CheckBox({
+                el: $('#slide-checkbox-datetime'),
+                labelText: this.strDateTime,
+                disabled: true
+            });
+            this.chDateTime.on('change', _.bind(this.onHeaderChange, this, 'datetime'));
         },
 
         render: function () {
@@ -1011,6 +1026,15 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
+        onHeaderChange: function(type, field, newValue, oldValue, eOpts){
+            if (this.api && !this._noApply)   {
+                var props = this.api.asc_getHeaderFooterProperties();
+                props.get_Slide()[(type=='slidenum') ? 'put_ShowSlideNum' : 'put_ShowDateTime'](field.getValue()=='checked');
+                this.api.asc_setHeaderFooterProperties(props);
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
         UpdateThemeColors: function() {
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
@@ -1419,11 +1443,19 @@ define([
                     this._state.GradColor = color;
                 }
 
+
+                value = this.api.asc_getHeaderFooterProperties();
+                if (value) {
+                    var slideprops = value.get_Slide() || new AscCommonSlide.CAscHFProps();
+                    this.chSlideNum.setValue(!!slideprops.get_ShowSlideNum(), true);
+                    this.chDateTime.setValue(!!slideprops.get_ShowDateTime(), true);
+                }
+
                 this._noApply = false;
             }
         },
 
-        SetSlideDisabled: function(background, effects, timing) {
+        SetSlideDisabled: function(background, effects, timing, header) {
             if (this._initSettings) return;
             
             if (background !== this._stateDisabled.background) {
@@ -1448,6 +1480,11 @@ define([
                 this.btnApplyToAll.setDisabled(timing);
                 this._stateDisabled.timing = timing;
             }
+            if (header !== this._stateDisabled.header) {
+                this.chSlideNum.setDisabled(header);
+                this.chDateTime.setDisabled(header);
+                this._stateDisabled.header = header;
+            }
         },
 
         strColor                : 'Color',
@@ -1520,6 +1557,8 @@ define([
         textDirection: 'Direction',
         textStyle: 'Style',
         textGradient: 'Gradient',
-        textSec: 's'
+        textSec: 's',
+        strSlideNum: 'Show Slide Number',
+        strDateTime: 'Show Date and Time'
     }, PE.Views.SlideSettings || {}));
 });

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

@@ -443,7 +443,7 @@ define([
 
                     if (this._isTemplatesChanged) {
                         if (rec)
-                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec()[0],true);
+                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true);
                         else
                             this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true);
                     }

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

@@ -571,6 +571,33 @@ define([
                     });
                     me.slideOnlyControls.push(me.btnInsertTextArt);
 
+                    me.btnEditHeader = new Common.UI.Button({
+                        id: 'id-toolbar-btn-editheader',
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'btn-editheader',
+                        caption: me.capBtnInsHeader,
+                        lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart]
+                    });
+                    me.slideOnlyControls.push(me.btnEditHeader);
+
+                    me.btnInsDateTime = new Common.UI.Button({
+                        id: 'id-toolbar-btn-datetime',
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'btn-datetime',
+                        caption: me.capBtnDateTime,
+                        lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.paragraphLock, _set.disableOnStart]
+                    });
+                    me.slideOnlyControls.push(me.btnInsDateTime);
+
+                    me.btnInsSlideNum = new Common.UI.Button({
+                        id: 'id-toolbar-btn-slidenum',
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'btn-pagenum',
+                        caption: me.capBtnSlideNum,
+                        lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.paragraphLock, _set.disableOnStart]
+                    });
+                    me.slideOnlyControls.push(me.btnInsSlideNum);
+
                     me.btnColorSchemas = new Common.UI.Button({
                         id: 'id-toolbar-btn-colorschemas',
                         cls: 'btn-toolbar',
@@ -917,6 +944,9 @@ define([
                 _injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
                 _injectComponent('#slot-btn-slidesize', this.btnSlideSize);
                 _injectComponent('#slot-field-styles', this.listTheme);
+                _injectComponent('#slot-btn-editheader', this.btnEditHeader);
+                _injectComponent('#slot-btn-datetime', this.btnInsDateTime);
+                _injectComponent('#slot-btn-slidenum', this.btnInsSlideNum);
 
                 this.btnsInsertImage = Common.Utils.injectButtons($host.find('.slot-insertimg'), 'tlbtn-insertimage-', 'btn-insertimage', this.capInsertImage,
                     [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart], false, true);
@@ -1024,6 +1054,9 @@ define([
                 this.btnShapeAlign.updateHint(this.tipShapeAlign);
                 this.btnShapeArrange.updateHint(this.tipShapeArrange);
                 this.btnSlideSize.updateHint(this.tipSlideSize);
+                this.btnEditHeader.updateHint(this.tipEditHeader);
+                this.btnInsDateTime.updateHint(this.tipDateTime);
+                this.btnInsSlideNum.updateHint(this.tipSlideNum);
 
                 // set menus
 
@@ -1644,7 +1677,13 @@ define([
             textTabProtect: 'Protection',
             mniImageFromStorage: 'Image from Storage',
             txtSlideAlign: 'Align to Slide',
-            txtObjectsAlign: 'Align Selected Objects'
+            txtObjectsAlign: 'Align Selected Objects',
+            tipEditHeader: 'Edit Header or Footer',
+            tipSlideNum: 'Insert slide number',
+            tipDateTime: 'Insert current date and time',
+            capBtnInsHeader: 'Header/Footer',
+            capBtnSlideNum: 'Slide Number',
+            capBtnDateTime: 'Date & Time'
         }
     }()), PE.Views.Toolbar || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -946,6 +946,14 @@
   "PE.Views.ChartSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
   "PE.Views.ChartSettingsAdvanced.textAltTitle": "Title",
   "PE.Views.ChartSettingsAdvanced.textTitle": "Chart - Advanced Settings",
+  "PE.Views.DateTimeDialog.cancelButtonText": "Cancel",
+  "PE.Views.DateTimeDialog.okButtonText": "OK",
+  "PE.Views.DateTimeDialog.txtTitle": "Date & Time",
+  "PE.Views.DateTimeDialog.textLang": "Language",
+  "PE.Views.DateTimeDialog.textFormat": "Formats",
+  "PE.Views.DateTimeDialog.textUpdate": "Update automatically",
+  "PE.Views.DateTimeDialog.textDefault": "Set as default",
+  "PE.Views.DateTimeDialog.confirmDefault": "Set default format for {0}: \"{1}\"",
   "PE.Views.DocumentHolder.aboveText": "Above",
   "PE.Views.DocumentHolder.addCommentText": "Add Comment",
   "PE.Views.DocumentHolder.advancedImageText": "Image Advanced Settings",
@@ -1218,6 +1226,20 @@
   "PE.Views.FileMenuPanels.Settings.txtPt": "Point",
   "PE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking",
   "PE.Views.FileMenuPanels.Settings.txtWin": "as Windows",
+  "PE.Views.HeaderFooterDialog.textTitle": "Header/Footer Settings",
+  "PE.Views.HeaderFooterDialog.cancelButtonText": "Cancel",
+  "PE.Views.HeaderFooterDialog.applyAllText": "Apply to all",
+  "PE.Views.HeaderFooterDialog.applyText": "Apply",
+  "PE.Views.HeaderFooterDialog.textLang": "Language",
+  "PE.Views.HeaderFooterDialog.textFormat": "Formats",
+  "PE.Views.HeaderFooterDialog.textUpdate": "Update automatically",
+  "PE.Views.HeaderFooterDialog.textDateTime": "Date and time",
+  "PE.Views.HeaderFooterDialog.textSlideNum": "Slide number",
+  "PE.Views.HeaderFooterDialog.textFooter": "Text in footer",
+  "PE.Views.HeaderFooterDialog.textNotTitle": "Don't show on title slide",
+  "PE.Views.HeaderFooterDialog.textPreview": "Preview",
+  "PE.Views.HeaderFooterDialog.diffLanguage": "You can’t use a date format in a different language than the slide master.<br>To change the master, click 'Apply to all' instead of 'Apply'",
+  "PE.Views.HeaderFooterDialog.notcriticalErrorTitle": "Warning",
   "PE.Views.HyperlinkSettingsDialog.cancelButtonText": "Cancel",
   "PE.Views.HyperlinkSettingsDialog.okButtonText": "OK",
   "PE.Views.HyperlinkSettingsDialog.strDisplay": "Display",
@@ -1503,6 +1525,8 @@
   "PE.Views.SlideSettings.txtLeather": "Leather",
   "PE.Views.SlideSettings.txtPapyrus": "Papyrus",
   "PE.Views.SlideSettings.txtWood": "Wood",
+  "PE.Views.SlideSettings.strSlideNum": "Show Slide Number",
+  "PE.Views.SlideSettings.strDateTime": "Show Date and Time",
   "PE.Views.SlideshowSettings.cancelButtonText": "Cancel",
   "PE.Views.SlideshowSettings.okButtonText": "OK",
   "PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed",

apps/spreadsheeteditor/main/app/controller/PivotTable.js

@@ -274,7 +274,7 @@ define([
 
                     if (this._isTemplatesChanged) {
                         if (rec)
-                            view.pivotStyles.fillComboView(view.pivotStyles.menuPicker.getSelectedRec()[0],true);
+                            view.pivotStyles.fillComboView(view.pivotStyles.menuPicker.getSelectedRec(),true);
                         else
                             view.pivotStyles.fillComboView(view.pivotStyles.menuPicker.store.at(0), true);
                     }

apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js

@@ -1019,7 +1019,7 @@ define([
                 data.preventDefault();
                 data.stopPropagation();
 
-                this.updateCellCheck(listView, listView.getSelectedRec()[0]);
+                this.updateCellCheck(listView, listView.getSelectedRec());
 
             } else {
                 Common.UI.DataView.prototype.onKeyDown.call(this.cellsList, e, data);

apps/spreadsheeteditor/main/app/view/ChartSettings.js

@@ -182,7 +182,7 @@ define([
 
                             if (this._isChartStylesChanged) {
                                 if (rec)
-                                    this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec()[0],true);
+                                    this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true);
                                 else
                                     this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true);
                             }

apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js

@@ -1433,7 +1433,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
 
             if (this.isChart) {
                 var rec = this.mnuChartTypePicker.getSelectedRec(),
-                    type = (rec && rec.length>0) ? rec[0].get('type') : this.currentChartType;
+                    type = (rec) ? rec.get('type') : this.currentChartType;
 
                 this.chartSettings.putType(type);
 
@@ -1492,7 +1492,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 var isvalid;
                 if (!_.isEmpty(this.txtDataRange.getValue())) {
                     var rec = this.mnuChartTypePicker.getSelectedRec(),
-                        type = (rec && rec.length>0) ? rec[0].get('type') : this.currentChartType;
+                        type = (rec) ? rec.get('type') : this.currentChartType;
 
                     isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, type);
                     if (isvalid == Asc.c_oAscError.ID.No)

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

@@ -218,9 +218,7 @@ define([
         show: function() {
             Common.UI.BaseView.prototype.show.call(this,arguments);
             var item = this.viewSettingsPicker.getSelectedRec();
-            if (item[0]) {
+            item && item.get('panel').show();
-                item[0].get('panel').show();
-            }
         },
 
         setMode: function(mode) {

apps/spreadsheeteditor/main/app/view/FormulaDialog.js

@@ -71,7 +71,6 @@ define([
 
                         '<label class="header">' + t.textGroupDescription + '</label>',
                         '<div id="formula-dlg-combo-group" class="input-group-nr" style="margin-top: 10px"/>',
-
                         '<label class="header" style="margin-top:10px">' + t.textListDescription + '</label>',
                         '<div id="formula-dlg-combo-functions" class="combo-functions"/>',
                         '<label id="formula-dlg-args" style="margin-top: 7px">' + '</label>',

apps/spreadsheeteditor/main/app/view/NameManagerDlg.js

@@ -284,8 +284,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             var me = this,
                 xy = me.$window.offset(),
                 rec = this.rangeList.getSelectedRec(),
-                idx = _.indexOf(this.rangeList.store.models, rec[0]),
+                idx = _.indexOf(this.rangeList.store.models, rec),
-                oldname = (isEdit && rec.length>0) ? new Asc.asc_CDefName(rec[0].get('name'), rec[0].get('range'), rec[0].get('scope'), rec[0].get('isTable'), undefined, undefined, undefined, true) : null;
+                oldname = (isEdit && rec.length>0) ? new Asc.asc_CDefName(rec.get('name'), rec.get('range'), rec.get('scope'), rec.get('isTable'), undefined, undefined, undefined, true) : null;
 
             var win = new SSE.Views.NamedRangeEditDlg({
                 api: me.api,
@@ -317,9 +317,9 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
 
         onDeleteRange: function () {
             var rec = this.rangeList.getSelectedRec();
-            if (rec.length>0) {
+            if (rec) {
-                this.currentNamedRange = _.indexOf(this.rangeList.store.models, rec[0]);
+                this.currentNamedRange = _.indexOf(this.rangeList.store.models, rec);
-                this.api.asc_delDefinedNames(new Asc.asc_CDefName(rec[0].get('name'), rec[0].get('range'), rec[0].get('scope'), rec[0].get('isTable'), undefined, undefined, undefined, true));
+                this.api.asc_delDefinedNames(new Asc.asc_CDefName(rec.get('name'), rec.get('range'), rec.get('scope'), rec.get('isTable'), undefined, undefined, undefined, true));
             }
         },
 

apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js

@@ -150,7 +150,7 @@ define([
 
         getSettings: function() {
             var rec = this.rangeList.getSelectedRec();
-            return (rec.length>0) ? (new Asc.asc_CDefName(rec[0].get('name'), rec[0].get('range'), rec[0].get('scope'), rec[0].get('isTable'), undefined, undefined, undefined, true)) : null;
+            return (rec) ? (new Asc.asc_CDefName(rec.get('name'), rec.get('range'), rec.get('scope'), rec.get('isTable'), undefined, undefined, undefined, true)) : null;
         },
 
         onPrimary: function() {

apps/spreadsheeteditor/main/app/view/ParagraphSettingsAdvanced.js

@@ -522,10 +522,10 @@ define([    'text!spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.
 
         removeTab: function(btn, eOpts){
             var rec = this.tabList.getSelectedRec();
-            if (rec.length>0) {
+            if (rec) {
                 var store = this.tabList.store;
-                var idx = _.indexOf(store.models, rec[0]);
+                var idx = _.indexOf(store.models, rec);
-                store.remove(rec[0]);
+                store.remove(rec);
                 if (idx>store.length-1) idx = store.length-1;
                 if (store.length>0) {
                     this.tabList.selectByIndex(idx);

apps/spreadsheeteditor/main/app/view/Statusbar.js

@@ -738,7 +738,7 @@ define([
 
                 if (this.options.handler) {
                     this.options.handler.call(this,
-                        event.currentTarget.attributes['result'].value, active[0].get('inindex'));
+                        event.currentTarget.attributes['result'].value, active.get('inindex'));
                 }
 
                 this.close();
@@ -746,7 +746,7 @@ define([
 
             onPrimary: function() {
                 if (this.options.handler) {
-                    this.options.handler.call(this, 'ok', this.listNames.getSelectedRec()[0].get('inindex'));
+                    this.options.handler.call(this, 'ok', this.listNames.getSelectedRec().get('inindex'));
                 }
 
                 this.close();

apps/spreadsheeteditor/main/app/view/TableSettings.js

@@ -407,7 +407,7 @@ define([
 
                     if (this._isTemplatesChanged) {
                         if (rec)
-                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec()[0],true);
+                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true);
                         else
                             this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true);
                     }