Skip to content

Commit d1d7f47

Browse files
limzykennethlimzykenneth
authored
Merge pull request #7257 from limzykenneth/2.0-modules
Module syntax conversion
2 parents 920ca49 + 3a63c37 commit d1d7f47

35 files changed

+23802
-23652
lines changed

‎src/accessibility/color_namer.js‎

Lines changed: 694 additions & 689 deletions
Large diffs are not rendered by default.

‎src/accessibility/describe.js‎

Lines changed: 462 additions & 457 deletions
Large diffs are not rendered by default.

‎src/accessibility/gridOutput.js‎

Lines changed: 134 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -4,151 +4,156 @@
44
* @for p5
55
* @requires core
66
*/
7-
import p5 from '../core/main';
87

9-
//the functions in this file support updating the grid output
8+
function gridOutput(p5, fn){
9+
//the functions in this file support updating the grid output
1010

11-
//updates gridOutput
12-
p5.prototype._updateGridOutput = function(idT) {
13-
//if html structure is not there yet
14-
if (!this.dummyDOM.querySelector(`#${idT}_summary`)) {
15-
return;
16-
}
17-
let current = this._accessibleOutputs[idT];
18-
//create shape details list
19-
let innerShapeDetails = _gridShapeDetails(idT, this.ingredients.shapes);
20-
//create summary
21-
let innerSummary = _gridSummary(
22-
innerShapeDetails.numShapes,
23-
this.ingredients.colors.background,
24-
this.width,
25-
this.height
26-
);
27-
//create grid map
28-
let innerMap = _gridMap(idT, this.ingredients.shapes);
29-
//if it is different from current summary
30-
if (innerSummary !== current.summary.innerHTML) {
31-
//update
32-
current.summary.innerHTML = innerSummary;
33-
}
34-
//if it is different from current map
35-
if (innerMap !== current.map.innerHTML) {
36-
//update
37-
current.map.innerHTML = innerMap;
38-
}
39-
//if it is different from current shape details
40-
if (innerShapeDetails.details !== current.shapeDetails.innerHTML) {
41-
//update
42-
current.shapeDetails.innerHTML = innerShapeDetails.details;
43-
}
44-
this._accessibleOutputs[idT] = current;
45-
};
46-
47-
//creates spatial grid that maps the location of shapes
48-
function _gridMap(idT, ingredients) {
49-
let shapeNumber = 0;
50-
let table = '';
51-
//create an array of arrays 10*10 of empty cells
52-
let cells = Array.from(Array(10), () => Array(10));
53-
for (let x in ingredients) {
54-
for (let y in ingredients[x]) {
55-
let fill;
56-
if (x !== 'line') {
57-
fill = `<a href="#${idT}shape${shapeNumber}">${
58-
ingredients[x][y].color
59-
} ${x}</a>`;
60-
} else {
61-
fill = `<a href="#${idT}shape${shapeNumber}">${
62-
ingredients[x][y].color
63-
} ${x} midpoint</a>`;
64-
}
11+
//updates gridOutput
12+
fn._updateGridOutput = function(idT) {
13+
//if html structure is not there yet
14+
if (!this.dummyDOM.querySelector(`#${idT}_summary`)) {
15+
return;
16+
}
17+
let current = this._accessibleOutputs[idT];
18+
//create shape details list
19+
let innerShapeDetails = _gridShapeDetails(idT, this.ingredients.shapes);
20+
//create summary
21+
let innerSummary = _gridSummary(
22+
innerShapeDetails.numShapes,
23+
this.ingredients.colors.background,
24+
this.width,
25+
this.height
26+
);
27+
//create grid map
28+
let innerMap = _gridMap(idT, this.ingredients.shapes);
29+
//if it is different from current summary
30+
if (innerSummary !== current.summary.innerHTML) {
31+
//update
32+
current.summary.innerHTML = innerSummary;
33+
}
34+
//if it is different from current map
35+
if (innerMap !== current.map.innerHTML) {
36+
//update
37+
current.map.innerHTML = innerMap;
38+
}
39+
//if it is different from current shape details
40+
if (innerShapeDetails.details !== current.shapeDetails.innerHTML) {
41+
//update
42+
current.shapeDetails.innerHTML = innerShapeDetails.details;
43+
}
44+
this._accessibleOutputs[idT] = current;
45+
};
6546

66-
// Check if shape is in canvas, skip if not
67-
if(
68-
ingredients[x][y].loc.locY < cells.length &&
69-
ingredients[x][y].loc.locX < cells[ingredients[x][y].loc.locY].length
70-
){
71-
//if empty cell of location of shape is undefined
72-
if (!cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX]) {
73-
//fill it with shape info
74-
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] = fill;
75-
//if a shape is already in that location
47+
//creates spatial grid that maps the location of shapes
48+
function _gridMap(idT, ingredients) {
49+
let shapeNumber = 0;
50+
let table = '';
51+
//create an array of arrays 10*10 of empty cells
52+
let cells = Array.from(Array(10), () => Array(10));
53+
for (let x in ingredients) {
54+
for (let y in ingredients[x]) {
55+
let fill;
56+
if (x !== 'line') {
57+
fill = `<a href="#${idT}shape${shapeNumber}">${
58+
ingredients[x][y].color
59+
} ${x}</a>`;
7660
} else {
77-
//add it
78-
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] =
79-
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] +
80-
' ' +
81-
fill;
61+
fill = `<a href="#${idT}shape${shapeNumber}">${
62+
ingredients[x][y].color
63+
} ${x} midpoint</a>`;
64+
}
65+
66+
// Check if shape is in canvas, skip if not
67+
if(
68+
ingredients[x][y].loc.locY < cells.length &&
69+
ingredients[x][y].loc.locX < cells[ingredients[x][y].loc.locY].length
70+
){
71+
//if empty cell of location of shape is undefined
72+
if (!cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX]) {
73+
//fill it with shape info
74+
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] = fill;
75+
//if a shape is already in that location
76+
} else {
77+
//add it
78+
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] =
79+
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] +
80+
' ' +
81+
fill;
82+
}
83+
shapeNumber++;
8284
}
83-
shapeNumber++;
8485
}
8586
}
86-
}
87-
//make table based on array
88-
for (let _r in cells) {
89-
let row = '<tr>';
90-
for (let c in cells[_r]) {
91-
row = row + '<td>';
92-
if (cells[_r][c] !== undefined) {
93-
row = row + cells[_r][c];
87+
//make table based on array
88+
for (let _r in cells) {
89+
let row = '<tr>';
90+
for (let c in cells[_r]) {
91+
row = row + '<td>';
92+
if (cells[_r][c] !== undefined) {
93+
row = row + cells[_r][c];
94+
}
95+
row = row + '</td>';
9496
}
95-
row = row + '</td>';
97+
table = table + row + '</tr>';
9698
}
97-
table = table + row + '</tr>';
99+
return table;
98100
}
99-
return table;
100-
}
101101

102-
//creates grid summary
103-
function _gridSummary(numShapes, background, width, height) {
104-
let text = `${background} canvas, ${width} by ${height} pixels, contains ${
105-
numShapes[0]
106-
}`;
107-
if (numShapes[0] === 1) {
108-
text = `${text} shape: ${numShapes[1]}`;
109-
} else {
110-
text = `${text} shapes: ${numShapes[1]}`;
102+
//creates grid summary
103+
function _gridSummary(numShapes, background, width, height) {
104+
let text = `${background} canvas, ${width} by ${height} pixels, contains ${
105+
numShapes[0]
106+
}`;
107+
if (numShapes[0] === 1) {
108+
text = `${text} shape: ${numShapes[1]}`;
109+
} else {
110+
text = `${text} shapes: ${numShapes[1]}`;
111+
}
112+
return text;
111113
}
112-
return text;
113-
}
114114

115-
//creates list of shapes
116-
function _gridShapeDetails(idT, ingredients) {
117-
let shapeDetails = '';
118-
let shapes = '';
119-
let totalShapes = 0;
120-
//goes trhough every shape type in ingredients
121-
for (let x in ingredients) {
122-
let shapeNum = 0;
123-
for (let y in ingredients[x]) {
124-
//it creates a line in a list
125-
let line = `<li id="${idT}shape${totalShapes}">${
126-
ingredients[x][y].color
127-
} ${x},`;
128-
if (x === 'line') {
129-
line =
130-
line +
131-
` location = ${ingredients[x][y].pos}, length = ${
132-
ingredients[x][y].length
133-
} pixels`;
134-
} else {
135-
line = line + ` location = ${ingredients[x][y].pos}`;
136-
if (x !== 'point') {
137-
line = line + `, area = ${ingredients[x][y].area} %`;
115+
//creates list of shapes
116+
function _gridShapeDetails(idT, ingredients) {
117+
let shapeDetails = '';
118+
let shapes = '';
119+
let totalShapes = 0;
120+
//goes trhough every shape type in ingredients
121+
for (let x in ingredients) {
122+
let shapeNum = 0;
123+
for (let y in ingredients[x]) {
124+
//it creates a line in a list
125+
let line = `<li id="${idT}shape${totalShapes}">${
126+
ingredients[x][y].color
127+
} ${x},`;
128+
if (x === 'line') {
129+
line =
130+
line +
131+
` location = ${ingredients[x][y].pos}, length = ${
132+
ingredients[x][y].length
133+
} pixels`;
134+
} else {
135+
line = line + ` location = ${ingredients[x][y].pos}`;
136+
if (x !== 'point') {
137+
line = line + `, area = ${ingredients[x][y].area} %`;
138+
}
139+
line = line + '</li>';
138140
}
139-
line = line + '</li>';
141+
shapeDetails = shapeDetails + line;
142+
shapeNum++;
143+
totalShapes++;
144+
}
145+
if (shapeNum > 1) {
146+
shapes = `${shapes} ${shapeNum} ${x}s`;
147+
} else {
148+
shapes = `${shapes} ${shapeNum} ${x}`;
140149
}
141-
shapeDetails = shapeDetails + line;
142-
shapeNum++;
143-
totalShapes++;
144-
}
145-
if (shapeNum > 1) {
146-
shapes = `${shapes} ${shapeNum} ${x}s`;
147-
} else {
148-
shapes = `${shapes} ${shapeNum} ${x}`;
149150
}
151+
return { numShapes: [totalShapes, shapes], details: shapeDetails };
150152
}
151-
return { numShapes: [totalShapes, shapes], details: shapeDetails };
152153
}
153154

154-
export default p5;
155+
export default gridOutput;
156+
157+
if(typeof p5 !== 'undefined'){
158+
gridOutput(p5, p5.prototype);
159+
}

‎src/accessibility/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import describe from './describe.js';
2+
import gridOutput from './gridOutput.js';
3+
import textOutput from './textOutput.js';
4+
import outputs from './outputs.js';
5+
import colorNamer from './color_namer.js';
6+
7+
export default function(p5){
8+
p5.registerAddon(describe);
9+
p5.registerAddon(gridOutput);
10+
p5.registerAddon(textOutput);
11+
p5.registerAddon(outputs);
12+
p5.registerAddon(colorNamer);
13+
}

0 commit comments

Comments
 (0)