diff --git a/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template index 1fdf3808c..d811bd244 100644 --- a/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template +++ b/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template @@ -1,6 +1,11 @@ -
+
+ + +
+ +
@@ -19,9 +24,14 @@
-
+
+ + +
+ +
@@ -34,4 +44,27 @@
+
+
+
+ + + + + + + + + + +
+ +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js b/apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js index b89daa496..c818cb90f 100644 --- a/apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js +++ b/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: [ - '
', - '', - '
', - '
' + _.template(contentTemplate)({scope: this}) + '
', - '
', - '
', - '' - ].join('') + items: [ + {panelId: 'id-adv-image-size', panelCaption: this.textPlacement}, + {panelId: 'id-adv-image-alttext', panelCaption: this.textAlt} + ], + contentTemplate: _.template(contentTemplate)({ + scope: this + }) }, 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 || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index bd7150de1..d863dbb40 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/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.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.ShapeSettingsAdvanced.textAlt": "Alternative Text", + "PE.Views.ShapeSettingsAdvanced.textAltTitle": "Title", + "PE.Views.ShapeSettingsAdvanced.textAltDescription": "Description", + "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",