[PE] Added alternative text for shapes.
This commit is contained in:
Julia Radzhabova
parent
87b31bfb11
commit
3b44412069
|
|
@ -93,4 +93,27 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="id-adv-shape-alttext" class="settings-panel active">
|
||||
<div class="inner-content">
|
||||
<table cols="1" width="100%">
|
||||
<tr>
|
||||
<td class="padding-large">
|
||||
<label class="header"><%= scope.textAltTitle %></label>
|
||||
<div id="shape-advanced-alt-title"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label class="header"><%= scope.textAltDescription %></label>
|
||||
<textarea id="shape-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>
|
||||
|
|
@ -48,7 +48,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
|
|||
PE.Views.ShapeSettingsAdvanced = Common.Views.AdvancedSettingsWindow.extend(_.extend({
|
||||
options: {
|
||||
contentWidth: 300,
|
||||
height: 332,
|
||||
height: 342,
|
||||
toggleGroup: 'shape-adv-settings-group',
|
||||
sizeOriginal: {width: 0, height: 0},
|
||||
sizeMax: {width: 55.88, height: 55.88},
|
||||
|
|
@ -62,7 +62,8 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
|
|||
items: [
|
||||
{panelId: 'id-adv-shape-width', panelCaption: this.textSize},
|
||||
{panelId: 'id-adv-shape-shape', panelCaption: this.textWeightArrows},
|
||||
{panelId: 'id-adv-shape-margins', panelCaption: this.strMargins}
|
||||
{panelId: 'id-adv-shape-margins', panelCaption: this.strMargins},
|
||||
{panelId: 'id-adv-shape-alttext', panelCaption: this.textAlt}
|
||||
],
|
||||
contentTemplate: _.template(contentTemplate)({
|
||||
scope: this
|
||||
|
|
@ -410,6 +411,25 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
|
|||
this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
|
||||
this._selectStyleItem(this.btnEndSize, null);
|
||||
|
||||
// Alt Text
|
||||
|
||||
this.inputAltTitle = new Common.UI.InputField({
|
||||
el : $('#shape-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();
|
||||
},
|
||||
|
||||
|
|
@ -448,11 +468,23 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
|
|||
}
|
||||
this.btnsCategory[2].setDisabled(null === margins); // Margins
|
||||
|
||||
value = props.asc_getTitle();
|
||||
this.inputAltTitle.setValue(value ? value : '');
|
||||
|
||||
value = props.asc_getDescription();
|
||||
this.textareaAltDescription.val(value ? value : '');
|
||||
|
||||
this._changedProps = new Asc.asc_CShapeProperty();
|
||||
}
|
||||
},
|
||||
|
||||
getSettings: function() {
|
||||
if (this.isAltTitleChanged)
|
||||
this._changedProps.asc_putTitle(this.inputAltTitle.getValue());
|
||||
|
||||
if (this.isAltDescChanged)
|
||||
this._changedProps.asc_putDescription(this.textareaAltDescription.val());
|
||||
|
||||
Common.localStorage.setItem("pe-settings-shaperatio", (this.btnRatio.pressed) ? 1 : 0);
|
||||
return { shapeProps: this._changedProps} ;
|
||||
},
|
||||
|
|
@ -645,6 +677,11 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
|
|||
textLeft: 'Left',
|
||||
textBottom: 'Bottom',
|
||||
textRight: 'Right',
|
||||
strMargins: 'Text Padding'
|
||||
strMargins: 'Text Padding',
|
||||
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.ShapeSettingsAdvanced || {}));
|
||||
});
|
||||
|
|
@ -970,6 +970,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.SlideSettings.strBackground": "Background color",
|
||||
"PE.Views.SlideSettings.strColor": "Color",
|
||||
"PE.Views.SlideSettings.strDelay": "Delay",
|
||||
|
|
|
|||
|
|
@ -83,6 +83,20 @@
|
|||
.settings-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
.user-select(text);
|
||||
width: 100%;
|
||||
resize: none;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid @gray-dark;
|
||||
height: 100%;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.65;
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrap {
|
||||
|
|
|
|||
Loading…
Reference in a new issue