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

[SSE] Added alternative text for charts and shapes.

Browse source
This commit is contained in:
Julia Radzhabova 2017-01-18 22:26:05 +03:00
parent c48ea1e8e2
commit f01b4336d7
7 changed files with 159 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -421,4 +421,27 @@
</tr>
</table>
</div>
</div>
<div id="id-chart-settings-dlg-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="chart-advanced-alt-title"></div>
</td>
</tr>
<tr>
<td>
<label class="header"><%= scope.textAltDescription %></label>
<textarea id="chart-advanced-alt-description" class="form-control" style="width: 100%; height: 120px;"></textarea>
</td>
</tr>
<tr>
<td>
<label><%= scope.textAltTip %></label>
</td>
</tr>
</table>
</div>
</div>

23
apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
View file

@ -93,4 +93,27 @@
</tr>
</table>
</div>
</div>
<div id="id-adv-shape-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="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>

7
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -924,14 +924,17 @@ define([
(new SSE.Views.ChartSettingsDlg(
{
chartSettings: props,
imageSettings: (me.isChart) ? me._originalProps : null,
isChart: me.isChart,
api: me.api,
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
if (me.isChart)
if (me.isChart) {
me.api.asc_editChartDrawingObject(value.chartSettings);
else
if (value.imageSettings)
me.api.asc_setGraphicObjectProps(value.imageSettings);
} else
me.api.asc_setSparklineGroup(me._state.SparkId, value.chartSettings);
}
}

50
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -63,7 +63,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
{panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis},
{panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis},
{panelId: 'id-spark-settings-dlg-style', panelCaption: this.textTypeData},
{panelId: 'id-spark-settings-dlg-axis', panelCaption: this.textAxisOptions}
{panelId: 'id-spark-settings-dlg-axis', panelCaption: this.textAxisOptions},
{panelId: 'id-chart-settings-dlg-alttext', panelCaption: this.textAlt}
],
contentTemplate: _.template(contentTemplate)({
scope: this
@ -89,6 +90,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.api = this.options.api;
this.chartSettings = this.options.chartSettings;
this.imageSettings = this.options.imageSettings;
this.isChart = this.options.isChart;
this.vertAxisProps = null;
this.horAxisProps = null;
@ -986,6 +988,25 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
}
}, this));
// Alt Text
this.inputAltTitle = new Common.UI.InputField({
el : $('#chart-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();
},
@ -1002,6 +1023,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.btnsCategory[1].setVisible(false);
this.btnsCategory[2].setVisible(false);
this.btnsCategory[3].setVisible(false);
this.btnsCategory[6].setVisible(false);
}
if (this.storageName) {
@ -1345,6 +1367,14 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.updateAxisProps(this._state.ChartType);
this.currentChartType = this._state.ChartType;
if (this.imageSettings) {
value = this.imageSettings.asc_getTitle();
this.inputAltTitle.setValue(value ? value : '');
value = this.imageSettings.asc_getDescription();
this.textareaAltDescription.val(value ? value : '');
}
} else { // sparkline
this._state.SparkType = props.asc_getType();
var record = this.mnuSparkTypePicker.store.findWhere({type: this._state.SparkType});
@ -1446,7 +1476,14 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.chartSettings.putVertAxisProps(this.vertAxisProps);
this.chartSettings.putHorAxisProps(this.horAxisProps);
return { chartSettings: this.chartSettings };
var imagesettings = (this.isAltTitleChanged || this.isAltDescChanged) ? new Asc.asc_CImgProperty() : null;
if (this.isAltTitleChanged)
imagesettings.asc_putTitle(this.inputAltTitle.getValue());
if (this.isAltDescChanged)
imagesettings.asc_putDescription(this.textareaAltDescription.val());
return { chartSettings: this.chartSettings, imageSettings: imagesettings};
} else {
return { chartSettings: this._changedProps };
}
@ -1714,6 +1751,11 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
textReverseOrder: 'Reverse order',
textAutoEach: 'Auto for Each',
textSameAll: 'Same for All',
textTitleSparkline: 'Sparkline - Advanced Settings'
}, SSE.Views.ChartSettingsDlg || {}));
textTitleSparkline: 'Sparkline - Advanced Settings',
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.'
}, SSE.Views.ChartSettingsDlg || {}));
});

43
apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
View file

@ -48,7 +48,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
SSE.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!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
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
@ -434,6 +435,25 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
obj.getChild('.footer .primary').focus();
});
// 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();
},
@ -474,11 +494,23 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
}
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_CImgProperty();
}
},
getSettings: function() {
if (this.isAltTitleChanged)
this._changedProps.asc_putTitle(this.inputAltTitle.getValue());
if (this.isAltDescChanged)
this._changedProps.asc_putDescription(this.textareaAltDescription.val());
return { shapeProps: this._changedProps} ;
},
@ -681,7 +713,12 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
textBeginSize: 'Begin Size',
textEndStyle: 'End Style',
textEndSize: 'End Size',
textWeightArrows: 'Weights & Arrows'
textWeightArrows: 'Weights & Arrows',
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.'
}, SSE.Views.ShapeSettingsAdvanced || {}));
});

8
apps/spreadsheeteditor/main/locale/en.json
View file

@ -882,6 +882,10 @@
"SSE.Views.ChartSettingsDlg.textAutoEach": "Auto for Each",
"SSE.Views.ChartSettingsDlg.textSameAll": "Same for All",
"SSE.Views.ChartSettingsDlg.textTitleSparkline": "Sparkline - Advanced Settings",
"SSE.Views.ChartSettingsDlg.textAlt": "Alternative Text",
"SSE.Views.ChartSettingsDlg.textAltTitle": "Title",
"SSE.Views.ChartSettingsDlg.textAltDescription": "Description",
"SSE.Views.ChartSettingsDlg.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.",
"SSE.Views.DigitalFilterDialog.cancelButtonText": "Cancel",
"SSE.Views.DigitalFilterDialog.capAnd": "And",
"SSE.Views.DigitalFilterDialog.capCondition1": "equals",
@ -1357,6 +1361,10 @@
"SSE.Views.ShapeSettingsAdvanced.textTop": "Top",
"SSE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
"SSE.Views.ShapeSettingsAdvanced.textWidth": "Width",
"SSE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
"SSE.Views.ShapeSettingsAdvanced.textAltTitle": "Title",
"SSE.Views.ShapeSettingsAdvanced.textAltDescription": "Description",
"SSE.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.",
"SSE.Views.Statusbar.CopyDialog.itemCopyToEnd": "(Copy to end)",
"SSE.Views.Statusbar.CopyDialog.itemMoveToEnd": "(Move to end)",
"SSE.Views.Statusbar.CopyDialog.textCopyBefore": "Copy before sheet",

14
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View file

@ -80,6 +80,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;
}
}
}
.btn-edit-table,