[PE] Added alternative text for images.

apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template

@@ -1,6 +1,11 @@
-<div class="settings-panel active">
+<div  id="id-adv-image-size" class="settings-panel active">
     <div class="inner-content">
         <table cols="4" width="100%">
+            <tr>
+                <td colspan="4" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textSize %></label>
+                </td>
+            </tr>
             <tr>
                 <td width="88px" class="padding-large">
                     <label class="input-label"><%= scope.textWidth %></label>
@@ -19,9 +24,14 @@
             </tr>
         </table>
     </div>
-    <div class="separator horizontal padding-large"></div>
+    <div class="padding-large"></div>
     <div class="inner-content">
         <table cols="2" style="width: 100%;">
+            <tr>
+                <td colspan="4" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textPosition %></label>
+                </td>
+            </tr>
             <tr>
                 <td class="padding-small" width="115px">
                     <label class="input-label">X</label>
@@ -34,4 +44,27 @@
             </tr>
         </table>
     </div>
+</div>
+<div id="id-adv-image-alttext" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1" width="100%">
+            <tr>
+                <td class="padding-large">
+                    <label class="header"><%= scope.textAltTitle %></label>
+                    <div id="image-advanced-alt-title"></div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="header"><%= scope.textAltDescription %></label>
+                    <textarea id="image-advanced-alt-description" class="form-control" style="width: 100%; height: 70px;"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label><%= scope.textAltTip %></label>
+                </td>
+            </tr>
+        </table>
+    </div>
 </div>

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

@@ -48,7 +48,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
         options: {
             alias: 'ImageSettingsAdvanced',
             contentWidth: 340,
-            height: 235,
+            height: 342,
             sizeOriginal: {width: 0, height: 0},
             sizeMax: {width: 55.88, height: 55.88},
             storageName: 'pe-img-settings-adv-category'
@@ -57,22 +57,15 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
         initialize : function(options) {
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
+                items: [
-                    '<div class="box" style="height:' + (this.options.height-85) + 'px;">',
+                    {panelId: 'id-adv-image-size',       panelCaption: this.textPlacement},
-                    '<div class="menu-panel" style="overflow: hidden;">',
+                    {panelId: 'id-adv-image-alttext',    panelCaption: this.textAlt}
-                    '<div style="height: 70px; line-height: 70px;" class="div-category">' + this.textSize + '</div>',
+                ],
-                    '<div style="height: 75px; line-height: 75px;" class="div-category">' + this.textPosition + '</div>',
+                contentTemplate: _.template(contentTemplate)({
-                    '</div>',
+                    scope: this
-                    '<div class="separator"/>',
+                })
-                    '<div class="content-panel">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"/>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;  width: 86px;">' + this.okButtonText + '</button>',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
-                    '</div>'
-                ].join('')
             }, options);
+
             Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
             this.spinners = [];
 
@@ -178,6 +171,25 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             });
             this.spinners.push(this.spnY);
 
+            // Alt Text
+
+            this.inputAltTitle = new Common.UI.InputField({
+                el          : $('#image-advanced-alt-title'),
+                allowBlank  : true,
+                validateOnBlur: false,
+                style       : 'width: 100%;'
+            }).on('changed:after', function() {
+                me.isAltTitleChanged = true;
+            });
+
+            this.textareaAltDescription = this.$window.find('textarea');
+            this.textareaAltDescription.keydown(function (event) {
+                if (event.keyCode == Common.UI.Keys.RETURN) {
+                    event.stopPropagation();
+                }
+                me.isAltDescChanged = true;
+            });
+
             this.afterRender();
         },
 
@@ -212,6 +224,12 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
                     this.spnX.setValue('', true);
                     this.spnY.setValue('', true);
                 }
+
+                value = props.asc_getTitle();
+                this.inputAltTitle.setValue(value ? value : '');
+
+                value = props.asc_getDescription();
+                this.textareaAltDescription.val(value ? value : '');
             }
         },
 
@@ -230,6 +248,12 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
                 Position.put_Y(Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue()));
             properties.put_Position(Position);
 
+            if (this.isAltTitleChanged)
+                properties.asc_putTitle(this.inputAltTitle.getValue());
+
+            if (this.isAltDescChanged)
+                properties.asc_putDescription(this.textareaAltDescription.val());
+
             return { imageProps: properties };
         },
 
@@ -260,7 +284,12 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
         textTitle:      'Image - Advanced Settings',
         textKeepRatio: 'Constant Proportions',
         cancelButtonText: 'Cancel',
-        okButtonText:   'Ok'
+        okButtonText:   'Ok',
+        textPlacement:  'Placement',
+        textAlt: 'Alternative Text',
+        textAltTitle: 'Title',
+        textAltDescription: 'Description',
+        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.ImageSettingsAdvanced || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -856,6 +856,11 @@
   "PE.Views.ImageSettingsAdvanced.textSize": "Size",
   "PE.Views.ImageSettingsAdvanced.textTitle": "Image - Advanced Settings",
   "PE.Views.ImageSettingsAdvanced.textWidth": "Width",
+  "PE.Views.ImageSettingsAdvanced.textPlacement": "Placement",
+  "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
+  "PE.Views.ImageSettingsAdvanced.textAltTitle": "Title",
+  "PE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
+  "PE.Views.ImageSettingsAdvanced.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.LeftMenu.tipAbout": "About",
   "PE.Views.LeftMenu.tipChat": "Chat",
   "PE.Views.LeftMenu.tipComments": "Comments",
@@ -978,10 +983,10 @@
   "PE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
   "PE.Views.ShapeSettingsAdvanced.textWidth": "Width",
   "PE.Views.ShapeSettingsAdvanced.txtNone": "None",
-  "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
+  "PE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
-  "PE.Views.ImageSettingsAdvanced.textAltTitle": "Title",
+  "PE.Views.ShapeSettingsAdvanced.textAltTitle": "Title",
-  "PE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
+  "PE.Views.ShapeSettingsAdvanced.textAltDescription": "Description",
-  "PE.Views.ImageSettingsAdvanced.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.ShapeSettingsAdvanced.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.SlideSettings.strBackground": "Background color",
   "PE.Views.SlideSettings.strColor": "Color",
   "PE.Views.SlideSettings.strDelay": "Delay",