diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index e694f2ce4..af5a8ef43 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -421,4 +421,27 @@ + +
+
+ + + + + + + + + + +
+ +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template index 3eb304221..aecab244e 100644 --- a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template +++ b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template @@ -93,4 +93,27 @@ + +
+
+ + + + + + + + + + +
+ +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index c582a9fd3..130dca586 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -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); } } diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index 9237b2fda..e82275ced 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -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 || {})); }); diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js index 4a63a9e54..6fefebc73 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js @@ -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 || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index a514a67c9..8781a8652 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -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", diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less index 2c65f6014..e783d4a08 100644 --- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less @@ -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,