[PE] Add header/footer settings to the right panel

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/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/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/locale/en.json

@@ -1522,6 +1522,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",