123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267 |
- "use strict";
- var __extends = (this && this.__extends) || (function () {
- var extendStatics = function (d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
- return extendStatics(d, b);
- };
- return function (d, b) {
- if (typeof b !== "function" && b !== null)
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- })();
- var _a, _b, _c;
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.HoverRegion = exports.LiveRegion = exports.ToolTip = exports.StringRegion = exports.DummyRegion = exports.AbstractRegion = void 0;
- var StyleList_js_1 = require("../../util/StyleList.js");
- var AbstractRegion = (function () {
- function AbstractRegion(document) {
- this.document = document;
- this.CLASS = this.constructor;
- this.AddStyles();
- this.AddElement();
- }
- AbstractRegion.prototype.AddStyles = function () {
- if (this.CLASS.styleAdded) {
- return;
- }
- var node = this.document.adaptor.node('style');
- node.innerHTML = this.CLASS.style.cssText;
- this.document.adaptor.head(this.document.adaptor.document).
- appendChild(node);
- this.CLASS.styleAdded = true;
- };
- AbstractRegion.prototype.AddElement = function () {
- var element = this.document.adaptor.node('div');
- element.classList.add(this.CLASS.className);
- element.style.backgroundColor = 'white';
- this.div = element;
- this.inner = this.document.adaptor.node('div');
- this.div.appendChild(this.inner);
- this.document.adaptor.
- body(this.document.adaptor.document).
- appendChild(this.div);
- };
- AbstractRegion.prototype.Show = function (node, highlighter) {
- this.position(node);
- this.highlight(highlighter);
- this.div.classList.add(this.CLASS.className + '_Show');
- };
- AbstractRegion.prototype.Hide = function () {
- this.div.classList.remove(this.CLASS.className + '_Show');
- };
- AbstractRegion.prototype.stackRegions = function (node) {
- var rect = node.getBoundingClientRect();
- var baseBottom = 0;
- var baseLeft = Number.POSITIVE_INFINITY;
- var regions = this.document.adaptor.document.getElementsByClassName(this.CLASS.className + '_Show');
- for (var i = 0, region = void 0; region = regions[i]; i++) {
- if (region !== this.div) {
- baseBottom = Math.max(region.getBoundingClientRect().bottom, baseBottom);
- baseLeft = Math.min(region.getBoundingClientRect().left, baseLeft);
- }
- }
- var bot = (baseBottom ? baseBottom : rect.bottom + 10) + window.pageYOffset;
- var left = (baseLeft < Number.POSITIVE_INFINITY ? baseLeft : rect.left) + window.pageXOffset;
- this.div.style.top = bot + 'px';
- this.div.style.left = left + 'px';
- };
- AbstractRegion.styleAdded = false;
- return AbstractRegion;
- }());
- exports.AbstractRegion = AbstractRegion;
- var DummyRegion = (function (_super) {
- __extends(DummyRegion, _super);
- function DummyRegion() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- DummyRegion.prototype.Clear = function () { };
- DummyRegion.prototype.Update = function () { };
- DummyRegion.prototype.Hide = function () { };
- DummyRegion.prototype.Show = function () { };
- DummyRegion.prototype.AddElement = function () { };
- DummyRegion.prototype.AddStyles = function () { };
- DummyRegion.prototype.position = function () { };
- DummyRegion.prototype.highlight = function (_highlighter) { };
- return DummyRegion;
- }(AbstractRegion));
- exports.DummyRegion = DummyRegion;
- var StringRegion = (function (_super) {
- __extends(StringRegion, _super);
- function StringRegion() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- StringRegion.prototype.Clear = function () {
- this.Update('');
- this.inner.style.top = '';
- this.inner.style.backgroundColor = '';
- };
- StringRegion.prototype.Update = function (speech) {
- this.inner.textContent = '';
- this.inner.textContent = speech;
- };
- StringRegion.prototype.position = function (node) {
- this.stackRegions(node);
- };
- StringRegion.prototype.highlight = function (highlighter) {
- var color = highlighter.colorString();
- this.inner.style.backgroundColor = color.background;
- this.inner.style.color = color.foreground;
- };
- return StringRegion;
- }(AbstractRegion));
- exports.StringRegion = StringRegion;
- var ToolTip = (function (_super) {
- __extends(ToolTip, _super);
- function ToolTip() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- ToolTip.className = 'MJX_ToolTip';
- ToolTip.style = new StyleList_js_1.CssStyles((_a = {},
- _a['.' + ToolTip.className] = {
- position: 'absolute', display: 'inline-block',
- height: '1px', width: '1px'
- },
- _a['.' + ToolTip.className + '_Show'] = {
- width: 'auto', height: 'auto', opacity: 1, 'text-align': 'center',
- 'border-radius': '6px', padding: '0px 0px',
- 'border-bottom': '1px dotted black', position: 'absolute',
- 'z-index': 202
- },
- _a));
- return ToolTip;
- }(StringRegion));
- exports.ToolTip = ToolTip;
- var LiveRegion = (function (_super) {
- __extends(LiveRegion, _super);
- function LiveRegion(document) {
- var _this = _super.call(this, document) || this;
- _this.document = document;
- _this.div.setAttribute('aria-live', 'assertive');
- return _this;
- }
- LiveRegion.className = 'MJX_LiveRegion';
- LiveRegion.style = new StyleList_js_1.CssStyles((_b = {},
- _b['.' + LiveRegion.className] = {
- position: 'absolute', top: '0', height: '1px', width: '1px',
- padding: '1px', overflow: 'hidden'
- },
- _b['.' + LiveRegion.className + '_Show'] = {
- top: '0', position: 'absolute', width: 'auto', height: 'auto',
- padding: '0px 0px', opacity: 1, 'z-index': '202',
- left: 0, right: 0, 'margin': '0 auto',
- 'background-color': 'rgba(0, 0, 255, 0.2)', 'box-shadow': '0px 10px 20px #888',
- border: '2px solid #CCCCCC'
- },
- _b));
- return LiveRegion;
- }(StringRegion));
- exports.LiveRegion = LiveRegion;
- var HoverRegion = (function (_super) {
- __extends(HoverRegion, _super);
- function HoverRegion(document) {
- var _this = _super.call(this, document) || this;
- _this.document = document;
- _this.inner.style.lineHeight = '0';
- return _this;
- }
- HoverRegion.prototype.position = function (node) {
- var nodeRect = node.getBoundingClientRect();
- var divRect = this.div.getBoundingClientRect();
- var xCenter = nodeRect.left + (nodeRect.width / 2);
- var left = xCenter - (divRect.width / 2);
- left = (left < 0) ? 0 : left;
- left = left + window.pageXOffset;
- var top;
- switch (this.document.options.a11y.align) {
- case 'top':
- top = nodeRect.top - divRect.height - 10;
- break;
- case 'bottom':
- top = nodeRect.bottom + 10;
- break;
- case 'center':
- default:
- var yCenter = nodeRect.top + (nodeRect.height / 2);
- top = yCenter - (divRect.height / 2);
- }
- top = top + window.pageYOffset;
- top = (top < 0) ? 0 : top;
- this.div.style.top = top + 'px';
- this.div.style.left = left + 'px';
- };
- HoverRegion.prototype.highlight = function (highlighter) {
- if (this.inner.firstChild &&
- !this.inner.firstChild.hasAttribute('sre-highlight')) {
- return;
- }
- var color = highlighter.colorString();
- this.inner.style.backgroundColor = color.background;
- this.inner.style.color = color.foreground;
- };
- HoverRegion.prototype.Show = function (node, highlighter) {
- this.div.style.fontSize = this.document.options.a11y.magnify;
- this.Update(node);
- _super.prototype.Show.call(this, node, highlighter);
- };
- HoverRegion.prototype.Clear = function () {
- this.inner.textContent = '';
- this.inner.style.top = '';
- this.inner.style.backgroundColor = '';
- };
- HoverRegion.prototype.Update = function (node) {
- this.Clear();
- var mjx = this.cloneNode(node);
- this.inner.appendChild(mjx);
- };
- HoverRegion.prototype.cloneNode = function (node) {
- var mjx = node.cloneNode(true);
- if (mjx.nodeName !== 'MJX-CONTAINER') {
- if (mjx.nodeName !== 'g') {
- mjx.style.marginLeft = mjx.style.marginRight = '0';
- }
- var container = node;
- while (container && container.nodeName !== 'MJX-CONTAINER') {
- container = container.parentNode;
- }
- if (mjx.nodeName !== 'MJX-MATH' && mjx.nodeName !== 'svg') {
- var child = container.firstChild;
- mjx = child.cloneNode(false).appendChild(mjx).parentNode;
- if (mjx.nodeName === 'svg') {
- mjx.firstChild.setAttribute('transform', 'matrix(1 0 0 -1 0 0)');
- var W = parseFloat(mjx.getAttribute('viewBox').split(/ /)[2]);
- var w = parseFloat(mjx.getAttribute('width'));
- var _a = node.getBBox(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;
- mjx.setAttribute('viewBox', [x, -(y + height), width, height].join(' '));
- mjx.removeAttribute('style');
- mjx.setAttribute('width', (w / W * width) + 'ex');
- mjx.setAttribute('height', (w / W * height) + 'ex');
- container.setAttribute('sre-highlight', 'false');
- }
- }
- mjx = container.cloneNode(false).appendChild(mjx).parentNode;
- mjx.style.margin = '0';
- }
- return mjx;
- };
- HoverRegion.className = 'MJX_HoverRegion';
- HoverRegion.style = new StyleList_js_1.CssStyles((_c = {},
- _c['.' + HoverRegion.className] = {
- position: 'absolute', height: '1px', width: '1px',
- padding: '1px', overflow: 'hidden'
- },
- _c['.' + HoverRegion.className + '_Show'] = {
- position: 'absolute', width: 'max-content', height: 'auto',
- padding: '0px 0px', opacity: 1, 'z-index': '202', 'margin': '0 auto',
- 'background-color': 'rgba(0, 0, 255, 0.2)',
- 'box-shadow': '0px 10px 20px #888', border: '2px solid #CCCCCC'
- },
- _c));
- return HoverRegion;
- }(AbstractRegion));
- exports.HoverRegion = HoverRegion;
- //# sourceMappingURL=Region.js.map
|