From 613464224b680bd5e5f7a439456854cef9c7cf99 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 19 Jan 2017 10:32:51 +0300 Subject: [PATCH] [PE] Added alternative text for images. --- .../template/ImageSettingsAdvanced.template | 37 ++++++++++- .../main/app/view/ImageSettingsAdvanced.js | 63 ++++++++++++++----- apps/presentationeditor/main/locale/en.json | 13 ++-- 3 files changed, 90 insertions(+), 23 deletions(-) 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: [ - '
', - '
', - '
' + this.textSize + '
', - '
' + this.textPosition + '
', - '
', - '
', - '
' + _.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",