[PE] Header/Footer: change date and time settings

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

@@ -5,18 +5,28 @@
     <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;">
+                <td colspan="2" style="padding-bottom: 4px;">
+                    <div id="hf-dlg-radio-update"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small" style="padding-left: 22px;">
                     <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;">
+                <td class="padding-small" style="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" style="padding-bottom: 4px;">
+                    <div id="hf-dlg-radio-fixed"></div>
+                </td>
+            </tr>
             <tr>
                 <td colspan="2">
-                    <div id="hf-dlg-chb-update"></div>
+                    <div id="hf-dlg-input-fixed" class="input-row" style="margin-left: 22px;"></div>
                 </td>
             </tr>
         </table>

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

@@ -48,7 +48,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
     PE.Views.HeaderFooterDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 360,
-            height: 340
+            height: 380
         },
 
         initialize : function(options) {
@@ -152,12 +152,27 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
             });
             this.dateControls.push(this.cmbFormat);
 
-            this.chUpdate = new Common.UI.CheckBox({
+            this.radioUpdate = new Common.UI.RadioBox({
-                el: $('#hf-dlg-chb-update'),
+                el: $('#hf-dlg-radio-update'),
                 labelText: this.textUpdate,
-                value: 'checked'
+                name: 'asc-radio-header-update',
+                checked: true
+            }).on('change', _.bind(this.setDateTimeType, this, 'update'));
+            this.dateControls.push(this.radioUpdate);
+
+            this.radioFixed = new Common.UI.RadioBox({
+                el: $('#hf-dlg-radio-fixed'),
+                labelText: this.textFixed,
+                name: 'asc-radio-header-update'
+            }).on('change', _.bind(this.setDateTimeType, this, 'fixed'));
+            this.dateControls.push(this.radioFixed);
+
+            this.inputFixed = new Common.UI.InputField({
+                el: $('#hf-dlg-input-fixed'),
+                validateOnBlur: false,
+                style       : 'width: 100%;'
             });
-            this.dateControls.push(this.chUpdate);
+            this.dateControls.push(this.inputFixed);
 
             this.chNotTitle = new Common.UI.CheckBox({
                 el: $('#hf-dlg-chb-not-title'),
@@ -186,6 +201,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
                 _.each(this.dateControls, function(item) {
                     item.setDisabled(!newValue);
                 });
+                newValue && this.setDateTimeType(this.radioFixed.getValue() ? 'fixed' : 'update', null, true);
                 this.props.put_ShowDateTime(newValue);
             } else if (type == 'slide') {
                 this.props.put_ShowSlideNum(newValue);
@@ -196,7 +212,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
             this.props.updateView();
         },
 
-        updateFormats: function(lang, format) {
+        updateFormats: function(lang) {
             var props = new AscCommonSlide.CAscDateTime();
             props.put_Lang(lang);
             var data = props.get_DateTimeExamples(),
@@ -210,17 +226,25 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
                 }
             }
             this.cmbFormat.setData(arr);
-            format = format || this.defaultFormats[lang];
+            var format = this.defaultFormats[lang];
             this.cmbFormat.setValue(format ? format : arr[0].value);
         },
 
+        setDateTimeType: function(type, field, newValue) {
+            if (newValue) {
+                this.cmbLang.setDisabled(type == 'fixed');
+                this.cmbFormat.setDisabled(type == 'fixed');
+                this.inputFixed.setDisabled(type == 'update');
+            }
+        },
+
         onSelectFormat: function(format) {
-            format = format || this.cmbFormat.getValue();
+            if (this.radioUpdate.getValue()) {
-            if (this.chUpdate.getValue()=='checked') {
+                format = format || this.cmbFormat.getValue();
                 this.props.get_DateTime().put_DateTime(format);
             } else {
                 this.props.get_DateTime().put_DateTime(null);
-                this.props.get_DateTime().put_CustomDateTime(format);
+                this.props.get_DateTime().put_CustomDateTime(this.inputFixed.getValue());
             }
         },
 
@@ -236,16 +260,17 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
 
                 var format,
                     datetime = slideprops.get_DateTime(),
-                    item = this.cmbLang.store.findWhere({value: datetime.get_Lang() || this.lang});
+                    item = this.cmbLang.store.findWhere({value: datetime ? (datetime.get_Lang() || this.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 ? this.radioFixed.setValue(true) : this.radioUpdate.setValue(true);
-                    !format && (format = datetime.get_CustomDateTime());
+                    !format && (this.inputFixed.setValue(datetime.get_CustomDateTime() || ''));
+                    this.setDateTimeType(!format ? 'fixed' : 'update', null, true);
                 }
-                this.updateFormats(this.cmbLang.getValue(), format);
+                this.updateFormats(this.cmbLang.getValue());
 
                 val = slideprops.get_ShowSlideNum();
                 this.chSlide.setValue(val, true);
@@ -323,7 +348,8 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
         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'
+        notcriticalErrorTitle: 'Warning',
+        textFixed: 'Fixed'
 
     }, PE.Views.HeaderFooterDialog || {}))
 });

apps/presentationeditor/main/locale/en.json

@@ -1240,6 +1240,7 @@
   "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.HeaderFooterDialog.textFixed": "Fixed",
   "PE.Views.HyperlinkSettingsDialog.cancelButtonText": "Cancel",
   "PE.Views.HyperlinkSettingsDialog.okButtonText": "OK",
   "PE.Views.HyperlinkSettingsDialog.strDisplay": "Display",