Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE] Added alternative text for images.

Browse source
This commit is contained in:
Julia Radzhabova 2017-01-19 10:32:51 +03:00
parent f01b4336d7
commit 613464224b
3 changed files with 90 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template
View file

@ -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>
@ -35,3 +45,26 @@
</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>

63
apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js
View file

@ -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: [
'<div class="box" style="height:' + (this.options.height-85) + 'px;">',
'<div class="menu-panel" style="overflow: hidden;">',
'<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>',
'</div>',
'<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('')
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 || {}));
});

13
apps/presentationeditor/main/locale/en.json
View file

@ -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",