Skip to content

Add Alt Text to charts #848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yorch wants to merge 3 commits into from
Closed

Add Alt Text to charts #848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8704063
changes
yorch Sep 24, 2020
75f896d
Add alt text to images
yorch Sep 27, 2020
cb5b7ea
Add dist files
yorch Sep 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dist/pptxgen.bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pptxgen.bundle.js.map
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 14 additions & 5 deletions dist/pptxgen.cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* PptxGenJS 3.4.0-beta @ 2020-08-28T03:06:25.479Z */
/* PptxGenJS 3.4.0-beta @ 2020-09-27T14:56:44.367Z */
'use strict';

var JSZip = require('jszip');
Expand Down Expand Up @@ -672,7 +672,13 @@ function encodeXmlEntities(xml) {
// NOTE: Dont use short-circuit eval here as value c/b "0" (zero) etc.!
if (typeof xml === 'undefined' || xml == null)
return '';
return xml.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
return xml.toString()
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;')
.replace(/\n/g, '&#xA;');
}
/**
* Convert inches into EMU
Expand Down Expand Up @@ -1777,10 +1783,10 @@ function slideObjectToXml(slide) {
strSlideXml += '</p:sp>';
break;
case SLIDE_OBJECT_TYPES.image:
var sizing = slideItemObj.options.sizing, rounding = slideItemObj.options.rounding, width = cx, height = cy;
var sizing = slideItemObj.options.sizing, rounding = slideItemObj.options.rounding, width = cx, height = cy, altText = slideItemObj.options.altText;
strSlideXml += '<p:pic>';
strSlideXml += ' <p:nvPicPr>';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Object ' + (idx + 1) + '" descr="' + encodeXmlEntities(slideItemObj.image) + '">';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Object ' + (idx + 1) + '" descr="' + encodeXmlEntities(altText || slideItemObj.image) + '">';
if (slideItemObj.hyperlink && slideItemObj.hyperlink.url)
strSlideXml +=
'<a:hlinkClick r:id="rId' +
Expand Down Expand Up @@ -1887,9 +1893,10 @@ function slideObjectToXml(slide) {
}
break;
case SLIDE_OBJECT_TYPES.chart:
var description = slideItemObj.options.title ? ' descr="' + slideItemObj.options.title + '"' : '';
strSlideXml += '<p:graphicFrame>';
strSlideXml += ' <p:nvGraphicFramePr>';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Chart ' + (idx + 1) + '"/>';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Chart ' + (idx + 1) + "'" + description + '/>';
strSlideXml += ' <p:cNvGraphicFramePr/>';
strSlideXml += ' <p:nvPr>' + genXmlPlaceholder(placeholderObj) + '</p:nvPr>';
strSlideXml += ' </p:nvGraphicFramePr>';
Expand Down Expand Up @@ -3260,6 +3267,7 @@ function addImageDefinition(target, opt) {
var strImageData = opt.data || '';
var strImagePath = opt.path || '';
var imageRelId = getNewRelId(target);
var altText = opt.altText || '';
// REALITY-CHECK:
if (!strImagePath && !strImageData) {
console.error("ERROR: addImage() requires either 'data' or 'path' parameter!");
Expand Down Expand Up @@ -3300,6 +3308,7 @@ function addImageDefinition(target, opt) {
// ....: This is an async process: we need to make getSizeFromImage use callback, then set H/W...
// if ( !intWidth || !intHeight ) { var imgObj = getSizeFromImage(strImagePath);
newObject.options = {
altText: altText,
x: intPosX || 0,
y: intPosY || 0,
w: intWidth || 1,
Expand Down
19 changes: 14 additions & 5 deletions dist/pptxgen.es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* PptxGenJS 3.4.0-beta @ 2020-08-28T03:06:25.488Z */
/* PptxGenJS 3.4.0-beta @ 2020-09-27T14:56:44.372Z */
import * as JSZip from 'jszip';

/**
Expand Down Expand Up @@ -670,7 +670,13 @@ function encodeXmlEntities(xml) {
// NOTE: Dont use short-circuit eval here as value c/b "0" (zero) etc.!
if (typeof xml === 'undefined' || xml == null)
return '';
return xml.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
return xml.toString()
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;')
.replace(/\n/g, '&#xA;');
}
/**
* Convert inches into EMU
Expand Down Expand Up @@ -1775,10 +1781,10 @@ function slideObjectToXml(slide) {
strSlideXml += '</p:sp>';
break;
case SLIDE_OBJECT_TYPES.image:
var sizing = slideItemObj.options.sizing, rounding = slideItemObj.options.rounding, width = cx, height = cy;
var sizing = slideItemObj.options.sizing, rounding = slideItemObj.options.rounding, width = cx, height = cy, altText = slideItemObj.options.altText;
strSlideXml += '<p:pic>';
strSlideXml += ' <p:nvPicPr>';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Object ' + (idx + 1) + '" descr="' + encodeXmlEntities(slideItemObj.image) + '">';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Object ' + (idx + 1) + '" descr="' + encodeXmlEntities(altText || slideItemObj.image) + '">';
if (slideItemObj.hyperlink && slideItemObj.hyperlink.url)
strSlideXml +=
'<a:hlinkClick r:id="rId' +
Expand Down Expand Up @@ -1885,9 +1891,10 @@ function slideObjectToXml(slide) {
}
break;
case SLIDE_OBJECT_TYPES.chart:
var description = slideItemObj.options.title ? ' descr="' + slideItemObj.options.title + '"' : '';
strSlideXml += '<p:graphicFrame>';
strSlideXml += ' <p:nvGraphicFramePr>';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Chart ' + (idx + 1) + '"/>';
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Chart ' + (idx + 1) + "'" + description + '/>';
strSlideXml += ' <p:cNvGraphicFramePr/>';
strSlideXml += ' <p:nvPr>' + genXmlPlaceholder(placeholderObj) + '</p:nvPr>';
strSlideXml += ' </p:nvGraphicFramePr>';
Expand Down Expand Up @@ -3258,6 +3265,7 @@ function addImageDefinition(target, opt) {
var strImageData = opt.data || '';
var strImagePath = opt.path || '';
var imageRelId = getNewRelId(target);
var altText = opt.altText || '';
// REALITY-CHECK:
if (!strImagePath && !strImageData) {
console.error("ERROR: addImage() requires either 'data' or 'path' parameter!");
Expand Down Expand Up @@ -3298,6 +3306,7 @@ function addImageDefinition(target, opt) {
// ....: This is an async process: we need to make getSizeFromImage use callback, then set H/W...
// if ( !intWidth || !intHeight ) { var imgObj = getSizeFromImage(strImagePath);
newObject.options = {
altText: altText,
x: intPosX || 0,
y: intPosY || 0,
w: intWidth || 1,
Expand Down
4 changes: 2 additions & 2 deletions dist/pptxgen.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pptxgen.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion src/core-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,7 @@ export type MediaType = 'audio' | 'online' | 'video'
export interface ImageProps extends PositionProps, DataOrPathProps {
hyperlink?: HyperlinkProps
placeholder?: string // 'body' | 'title' | etc.
altText?: string
/**
* Image rotation (degrees)
* - range: -360 to 360
Expand Down Expand Up @@ -888,6 +889,9 @@ export interface TextProps {
text?: string
options?: TextPropsOptions
}
export interface TitleProps {
title?: string;
}

// charts =========================================================================================
// FUTURE: BREAKING-CHANGE: (soln: use `OptsDataLabelPosition|string` until 3.5/4.0)
Expand Down Expand Up @@ -1271,7 +1275,7 @@ export interface SlideMasterProps {
*/
bkgd?: string | BackgroundProps
}
export interface ObjectOptions extends ImageProps, PositionProps, ShapeProps, TableCellProps, TextPropsOptions {
export interface ObjectOptions extends ImageProps, PositionProps, ShapeProps, TableCellProps, TextPropsOptions, TitleProps {
_placeholderIdx?: number
_placeholderType?: PLACEHOLDER_TYPES

Expand All @@ -1280,6 +1284,7 @@ export interface ObjectOptions extends ImageProps, PositionProps, ShapeProps, Ta
margin?: Margin
colW?: number | number[] // table
rowH?: number | number[] // table
// title?: string
}
export interface SlideBaseProps {
_bkgdImgRid?: number
Expand Down
2 changes: 2 additions & 0 deletions src/gen-objects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,7 @@ export function addImageDefinition(target: PresSlide, opt: ImageProps) {
let strImageData = opt.data || ''
let strImagePath = opt.path || ''
let imageRelId = getNewRelId(target)
let altText = opt.altText || ''

// REALITY-CHECK:
if (!strImagePath && !strImageData) {
Expand Down Expand Up @@ -375,6 +376,7 @@ export function addImageDefinition(target: PresSlide, opt: ImageProps) {
// ....: This is an async process: we need to make getSizeFromImage use callback, then set H/W...
// if ( !intWidth || !intHeight ) { var imgObj = getSizeFromImage(strImagePath);
newObject.options = {
altText,
x: intPosX || 0,
y: intPosY || 0,
w: intWidth || 1,
Expand Down
8 changes: 7 additions & 1 deletion src/gen-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,13 @@ export function getMix(o1: any | IChartOpts, o2: any | IChartOpts, etc?: any) {
export function encodeXmlEntities(xml: string): string {
// NOTE: Dont use short-circuit eval here as value c/b "0" (zero) etc.!
if (typeof xml === 'undefined' || xml == null) return ''
return xml.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;')
return xml.toString()
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;')
.replace(/\n/g, '&#xA;')
}

/**
Expand Down
8 changes: 5 additions & 3 deletions src/gen-xml.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,11 +534,12 @@ function slideObjectToXml(slide: PresSlide | SlideLayout): string {
let sizing = slideItemObj.options.sizing,
rounding = slideItemObj.options.rounding,
width = cx,
height = cy
height = cy,
altText = slideItemObj.options.altText

strSlideXml += '<p:pic>'
strSlideXml += ' <p:nvPicPr>'
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Object ' + (idx + 1) + '" descr="' + encodeXmlEntities(slideItemObj.image) + '">'
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Object ' + (idx + 1) + '" descr="' + encodeXmlEntities(altText || slideItemObj.image) + '">'
if (slideItemObj.hyperlink && slideItemObj.hyperlink.url)
strSlideXml +=
'<a:hlinkClick r:id="rId' +
Expand Down Expand Up @@ -650,9 +651,10 @@ function slideObjectToXml(slide: PresSlide | SlideLayout): string {
break

case SLIDE_OBJECT_TYPES.chart:
const description = slideItemObj.options.title ? ' descr="' + slideItemObj.options.title + '"' : '';
strSlideXml += '<p:graphicFrame>'
strSlideXml += ' <p:nvGraphicFramePr>'
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Chart ' + (idx + 1) + '"/>'
strSlideXml += ' <p:cNvPr id="' + (idx + 2) + '" name="Chart ' + (idx + 1) + "'" + description + '/>'
strSlideXml += ' <p:cNvGraphicFramePr/>'
strSlideXml += ' <p:nvPr>' + genXmlPlaceholder(placeholderObj) + '</p:nvPr>'
strSlideXml += ' </p:nvGraphicFramePr>'
Expand Down
1 change: 1 addition & 0 deletions types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1199,6 +1199,7 @@ declare namespace PptxGenJS {
export interface ImageProps extends PositionProps, DataOrPathProps {
hyperlink?: HyperlinkProps
placeholder?: string // 'body' | 'title' | etc.
altText?: string
/**
* Image rotation (degrees)
* - range: -360 to 360
Expand Down