Skip to content

Commit 5ed95c0

Browse files
dpvcdpvc
authored
Merge pull request #1119 from mathjax/fewer-regions
Create regions only when needed
2 parents 8deaf88 + 165dfdd commit 5ed95c0

File tree

5 files changed

+35
-42
lines changed

5 files changed

+35
-42
lines changed

‎ts/a11y/explorer.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@ export function ExplorerMathDocumentMixin<B extends MathDocumentConstructor<HTML
248248
options.a11y.speechRules = `${options.sre.domain}-${options.sre.style}`;
249249
}
250250
options.MathItem = ExplorerMathItemMixin(options.MathItem, toMathML);
251+
this.explorerRegions = new RegionPool(this);
251252
}
252253

253254
/**
@@ -258,9 +259,6 @@ export function ExplorerMathDocumentMixin<B extends MathDocumentConstructor<HTML
258259
public explorable(): ExplorerMathDocument {
259260
if (!this.processed.isSet('explorer')) {
260261
if (this.options.enableExplorer) {
261-
if (!this.explorerRegions) {
262-
this.explorerRegions = new RegionPool(this);
263-
}
264262
for (const math of this.math) {
265263
(math as ExplorerMathItem).explorable(this);
266264
}

‎ts/a11y/explorer/KeyExplorer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -502,7 +502,7 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
502502
() => this.brailleRegion.Show(this.node, this.highlighter));
503503
}
504504
if (options.a11y.keyMagnifier) {
505-
this.magnifyRegion.Show(this.node, this.highlighter);
505+
this.magnifyRegion.Show(this.current, this.highlighter);
506506
}
507507
this.Update();
508508
}

‎ts/a11y/explorer/MouseExplorer.ts

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,6 @@ export abstract class AbstractMouseExplorer<T> extends AbstractExplorer<T> imple
9393
*/
9494
export abstract class Hoverer<T> extends AbstractMouseExplorer<T> {
9595

96-
/**
97-
* Remember the last position to avoid flickering.
98-
* @type {[number, number]}
99-
*/
100-
protected coord: [number, number];
101-
10296
/**
10397
* @constructor
10498
* @extends {AbstractMouseExplorer<T>}
@@ -127,10 +121,6 @@ export abstract class Hoverer<T> extends AbstractMouseExplorer<T> {
127121
* @override
128122
*/
129123
public MouseOut(event: MouseEvent) {
130-
if (event.clientX === this.coord[0] &&
131-
event.clientY === this.coord[1]) {
132-
return;
133-
}
134124
this.highlighter.unhighlight();
135125
this.region.Hide();
136126
super.MouseOut(event);
@@ -143,7 +133,6 @@ export abstract class Hoverer<T> extends AbstractMouseExplorer<T> {
143133
public MouseOver(event: MouseEvent) {
144134
super.MouseOver(event);
145135
let target = event.target as HTMLElement;
146-
this.coord = [event.clientX, event.clientY];
147136
let [node, kind] = this.getNode(target);
148137
if (!node) {
149138
return;

‎ts/a11y/explorer/Region.ts

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@ export abstract class AbstractRegion<T> implements Region<T> {
112112
constructor(public document: A11yDocument) {
113113
this.CLASS = this.constructor as typeof AbstractRegion;
114114
this.AddStyles();
115-
this.AddElement();
116115
}
117116

118117

@@ -136,9 +135,9 @@ export abstract class AbstractRegion<T> implements Region<T> {
136135
* @override
137136
*/
138137
public AddElement() {
138+
if (this.div) return;
139139
let element = this.document.adaptor.node('div');
140140
element.classList.add(this.CLASS.className);
141-
element.style.backgroundColor = 'white';
142141
this.div = element;
143142
this.inner = this.document.adaptor.node('div');
144143
this.div.appendChild(this.inner);
@@ -153,6 +152,7 @@ export abstract class AbstractRegion<T> implements Region<T> {
153152
* @override
154153
*/
155154
public Show(node: HTMLElement, highlighter: Sre.highlighter) {
155+
this.AddElement();
156156
this.position(node);
157157
this.highlight(highlighter);
158158
this.div.classList.add(this.CLASS.className + '_Show');
@@ -177,7 +177,10 @@ export abstract class AbstractRegion<T> implements Region<T> {
177177
* @override
178178
*/
179179
public Hide() {
180-
this.div.classList.remove(this.CLASS.className + '_Show');
180+
if (!this.div) return;
181+
this.div.parentNode.removeChild(this.div);
182+
this.div = null;
183+
this.inner = null;
181184
}
182185

183186

@@ -198,6 +201,7 @@ export abstract class AbstractRegion<T> implements Region<T> {
198201
* @param {HTMLElement} node The reference node.
199202
*/
200203
protected stackRegions(node: HTMLElement) {
204+
this.AddElement();
201205
// TODO: This could be made more efficient by caching regions of a class.
202206
const rect = node.getBoundingClientRect();
203207
let baseBottom = 0;
@@ -270,6 +274,7 @@ export class StringRegion extends AbstractRegion<string> {
270274
* @override
271275
*/
272276
public Clear(): void {
277+
if (!this.div) return;
273278
this.Update('');
274279
this.inner.style.top = '';
275280
this.inner.style.backgroundColor = '';
@@ -280,8 +285,13 @@ export class StringRegion extends AbstractRegion<string> {
280285
* @override
281286
*/
282287
public Update(speech: string) {
283-
this.inner.textContent = '';
284-
this.inner.textContent = speech;
288+
if (speech) {
289+
this.AddElement();
290+
}
291+
if (this.inner) {
292+
this.inner.textContent = '';
293+
this.inner.textContent = speech;
294+
}
285295
}
286296

287297
/**
@@ -296,6 +306,7 @@ export class StringRegion extends AbstractRegion<string> {
296306
* @override
297307
*/
298308
protected highlight(highlighter: Sre.highlighter) {
309+
if (!this.div) return;
299310
const color = highlighter.colorString();
300311
this.inner.style.backgroundColor = color.background;
301312
this.inner.style.color = color.foreground;
@@ -317,13 +328,11 @@ export class ToolTip extends StringRegion {
317328
protected static style: CssStyles =
318329
new CssStyles({
319330
['.' + ToolTip.className]: {
320-
display: 'none',
321-
},
322-
['.' + ToolTip.className + '_Show']: {
323331
width: 'auto', height: 'auto', opacity: 1, 'text-align': 'center',
324332
'border-radius': '6px', padding: 0,
325333
'border-bottom': '1px dotted black',
326334
position: 'absolute', display: 'inline-block',
335+
'background-color': 'white',
327336
'z-index': 202
328337
}
329338
});
@@ -344,14 +353,12 @@ export class LiveRegion extends StringRegion {
344353
protected static style: CssStyles =
345354
new CssStyles({
346355
['.' + LiveRegion.className]: {
347-
display: 'none'
348-
},
349-
['.' + LiveRegion.className + '_Show']: {
350356
position: 'absolute', top: 0,
351357
display: 'block', width: 'auto', height: 'auto',
352358
padding: 0, opacity: 1, 'z-index': '202',
353359
left: 0, right: 0, 'margin': '0 auto',
354-
'background-color': 'rgba(0, 0, 255, 0.2)', 'box-shadow': '0px 5px 20px #888',
360+
'background-color': 'white',
361+
'box-shadow': '0px 5px 20px #888',
355362
border: '2px solid #CCCCCC'
356363
}
357364
});
@@ -531,27 +538,17 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
531538
protected static style: CssStyles =
532539
new CssStyles({
533540
['.' + HoverRegion.className]: {
534-
display: 'none'
535-
},
536-
['.' + HoverRegion.className + '_Show']: {
537541
display: 'block', position: 'absolute',
538542
width: 'max-content', height: 'auto',
539543
padding: 0, opacity: 1, 'z-index': '202', 'margin': '0 auto',
540-
'background-color': 'rgba(0, 0, 255, 0.2)',
544+
'background-color': 'white', 'line-height': 0,
541545
'box-shadow': '0px 10px 20px #888', border: '2px solid #CCCCCC'
546+
},
547+
['.' + HoverRegion.className + ' > div']: {
548+
overflow: 'hidden'
542549
}
543550
});
544551

545-
546-
/**
547-
* @constructor
548-
* @param {A11yDocument} document The document the live region is added to.
549-
*/
550-
constructor(public document: A11yDocument) {
551-
super(document);
552-
this.inner.style.lineHeight = '0';
553-
}
554-
555552
/**
556553
* Sets the position of the region with respect to align parameter. There are
557554
* three options: top, bottom and center. Center is the default.
@@ -568,7 +565,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
568565
let top;
569566
switch (this.document.options.a11y.align) {
570567
case 'top':
571-
top = nodeRect.top - divRect.height - 10 ;
568+
top = nodeRect.top - divRect.height - 10;
572569
break;
573570
case 'bottom':
574571
top = nodeRect.bottom + 10;
@@ -588,6 +585,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
588585
* @override
589586
*/
590587
protected highlight(highlighter: Sre.highlighter) {
588+
if (!this.div) return;
591589
// TODO Do this with styles to avoid the interaction of SVG/CHTML.
592590
if (this.inner.firstChild &&
593591
!(this.inner.firstChild as HTMLElement).hasAttribute('sre-highlight')) {
@@ -602,6 +600,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
602600
* @override
603601
*/
604602
public Show(node: HTMLElement, highlighter: Sre.highlighter) {
603+
this.AddElement();
605604
this.div.style.fontSize = this.document.options.a11y.magnify;
606605
this.Update(node);
607606
super.Show(node, highlighter);
@@ -611,6 +610,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
611610
* @override
612611
*/
613612
public Clear() {
613+
if (!this.div) return;
614614
this.inner.textContent = '';
615615
this.inner.style.top = '';
616616
this.inner.style.backgroundColor = '';
@@ -620,9 +620,11 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
620620
* @override
621621
*/
622622
public Update(node: HTMLElement) {
623+
if (!this.div) return;
623624
this.Clear();
624625
let mjx = this.cloneNode(node);
625626
this.inner.appendChild(mjx);
627+
this.position(node);
626628
}
627629

628630
/**

‎ts/a11y/semantic-enrich.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,10 @@ export function EnrichedMathDocumentMixin<N, T, D, B extends MathDocumentConstru
474474
this.attachSpeechDone();
475475
}
476476
this.awaitingSpeech = Array.from(this.math);
477+
if (this.awaitingSpeech.length === 0) {
478+
this.awaitingSpeech = null;
479+
return;
480+
}
477481
this.renderPromises.push(new Promise<void>((ok, _fail) => {
478482
this.attachSpeechDone = ok;
479483
}));

0 commit comments

Comments
 (0)