Region.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = function (d, b) {
  4. extendStatics = Object.setPrototypeOf ||
  5. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  6. function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
  7. return extendStatics(d, b);
  8. };
  9. return function (d, b) {
  10. if (typeof b !== "function" && b !== null)
  11. throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
  12. extendStatics(d, b);
  13. function __() { this.constructor = d; }
  14. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  15. };
  16. })();
  17. var _a, _b, _c;
  18. Object.defineProperty(exports, "__esModule", { value: true });
  19. exports.HoverRegion = exports.LiveRegion = exports.ToolTip = exports.StringRegion = exports.DummyRegion = exports.AbstractRegion = void 0;
  20. var StyleList_js_1 = require("../../util/StyleList.js");
  21. var AbstractRegion = (function () {
  22. function AbstractRegion(document) {
  23. this.document = document;
  24. this.CLASS = this.constructor;
  25. this.AddStyles();
  26. this.AddElement();
  27. }
  28. AbstractRegion.prototype.AddStyles = function () {
  29. if (this.CLASS.styleAdded) {
  30. return;
  31. }
  32. var node = this.document.adaptor.node('style');
  33. node.innerHTML = this.CLASS.style.cssText;
  34. this.document.adaptor.head(this.document.adaptor.document).
  35. appendChild(node);
  36. this.CLASS.styleAdded = true;
  37. };
  38. AbstractRegion.prototype.AddElement = function () {
  39. var element = this.document.adaptor.node('div');
  40. element.classList.add(this.CLASS.className);
  41. element.style.backgroundColor = 'white';
  42. this.div = element;
  43. this.inner = this.document.adaptor.node('div');
  44. this.div.appendChild(this.inner);
  45. this.document.adaptor.
  46. body(this.document.adaptor.document).
  47. appendChild(this.div);
  48. };
  49. AbstractRegion.prototype.Show = function (node, highlighter) {
  50. this.position(node);
  51. this.highlight(highlighter);
  52. this.div.classList.add(this.CLASS.className + '_Show');
  53. };
  54. AbstractRegion.prototype.Hide = function () {
  55. this.div.classList.remove(this.CLASS.className + '_Show');
  56. };
  57. AbstractRegion.prototype.stackRegions = function (node) {
  58. var rect = node.getBoundingClientRect();
  59. var baseBottom = 0;
  60. var baseLeft = Number.POSITIVE_INFINITY;
  61. var regions = this.document.adaptor.document.getElementsByClassName(this.CLASS.className + '_Show');
  62. for (var i = 0, region = void 0; region = regions[i]; i++) {
  63. if (region !== this.div) {
  64. baseBottom = Math.max(region.getBoundingClientRect().bottom, baseBottom);
  65. baseLeft = Math.min(region.getBoundingClientRect().left, baseLeft);
  66. }
  67. }
  68. var bot = (baseBottom ? baseBottom : rect.bottom + 10) + window.pageYOffset;
  69. var left = (baseLeft < Number.POSITIVE_INFINITY ? baseLeft : rect.left) + window.pageXOffset;
  70. this.div.style.top = bot + 'px';
  71. this.div.style.left = left + 'px';
  72. };
  73. AbstractRegion.styleAdded = false;
  74. return AbstractRegion;
  75. }());
  76. exports.AbstractRegion = AbstractRegion;
  77. var DummyRegion = (function (_super) {
  78. __extends(DummyRegion, _super);
  79. function DummyRegion() {
  80. return _super !== null && _super.apply(this, arguments) || this;
  81. }
  82. DummyRegion.prototype.Clear = function () { };
  83. DummyRegion.prototype.Update = function () { };
  84. DummyRegion.prototype.Hide = function () { };
  85. DummyRegion.prototype.Show = function () { };
  86. DummyRegion.prototype.AddElement = function () { };
  87. DummyRegion.prototype.AddStyles = function () { };
  88. DummyRegion.prototype.position = function () { };
  89. DummyRegion.prototype.highlight = function (_highlighter) { };
  90. return DummyRegion;
  91. }(AbstractRegion));
  92. exports.DummyRegion = DummyRegion;
  93. var StringRegion = (function (_super) {
  94. __extends(StringRegion, _super);
  95. function StringRegion() {
  96. return _super !== null && _super.apply(this, arguments) || this;
  97. }
  98. StringRegion.prototype.Clear = function () {
  99. this.Update('');
  100. this.inner.style.top = '';
  101. this.inner.style.backgroundColor = '';
  102. };
  103. StringRegion.prototype.Update = function (speech) {
  104. this.inner.textContent = '';
  105. this.inner.textContent = speech;
  106. };
  107. StringRegion.prototype.position = function (node) {
  108. this.stackRegions(node);
  109. };
  110. StringRegion.prototype.highlight = function (highlighter) {
  111. var color = highlighter.colorString();
  112. this.inner.style.backgroundColor = color.background;
  113. this.inner.style.color = color.foreground;
  114. };
  115. return StringRegion;
  116. }(AbstractRegion));
  117. exports.StringRegion = StringRegion;
  118. var ToolTip = (function (_super) {
  119. __extends(ToolTip, _super);
  120. function ToolTip() {
  121. return _super !== null && _super.apply(this, arguments) || this;
  122. }
  123. ToolTip.className = 'MJX_ToolTip';
  124. ToolTip.style = new StyleList_js_1.CssStyles((_a = {},
  125. _a['.' + ToolTip.className] = {
  126. position: 'absolute', display: 'inline-block',
  127. height: '1px', width: '1px'
  128. },
  129. _a['.' + ToolTip.className + '_Show'] = {
  130. width: 'auto', height: 'auto', opacity: 1, 'text-align': 'center',
  131. 'border-radius': '6px', padding: '0px 0px',
  132. 'border-bottom': '1px dotted black', position: 'absolute',
  133. 'z-index': 202
  134. },
  135. _a));
  136. return ToolTip;
  137. }(StringRegion));
  138. exports.ToolTip = ToolTip;
  139. var LiveRegion = (function (_super) {
  140. __extends(LiveRegion, _super);
  141. function LiveRegion(document) {
  142. var _this = _super.call(this, document) || this;
  143. _this.document = document;
  144. _this.div.setAttribute('aria-live', 'assertive');
  145. return _this;
  146. }
  147. LiveRegion.className = 'MJX_LiveRegion';
  148. LiveRegion.style = new StyleList_js_1.CssStyles((_b = {},
  149. _b['.' + LiveRegion.className] = {
  150. position: 'absolute', top: '0', height: '1px', width: '1px',
  151. padding: '1px', overflow: 'hidden'
  152. },
  153. _b['.' + LiveRegion.className + '_Show'] = {
  154. top: '0', position: 'absolute', width: 'auto', height: 'auto',
  155. padding: '0px 0px', opacity: 1, 'z-index': '202',
  156. left: 0, right: 0, 'margin': '0 auto',
  157. 'background-color': 'rgba(0, 0, 255, 0.2)', 'box-shadow': '0px 10px 20px #888',
  158. border: '2px solid #CCCCCC'
  159. },
  160. _b));
  161. return LiveRegion;
  162. }(StringRegion));
  163. exports.LiveRegion = LiveRegion;
  164. var HoverRegion = (function (_super) {
  165. __extends(HoverRegion, _super);
  166. function HoverRegion(document) {
  167. var _this = _super.call(this, document) || this;
  168. _this.document = document;
  169. _this.inner.style.lineHeight = '0';
  170. return _this;
  171. }
  172. HoverRegion.prototype.position = function (node) {
  173. var nodeRect = node.getBoundingClientRect();
  174. var divRect = this.div.getBoundingClientRect();
  175. var xCenter = nodeRect.left + (nodeRect.width / 2);
  176. var left = xCenter - (divRect.width / 2);
  177. left = (left < 0) ? 0 : left;
  178. left = left + window.pageXOffset;
  179. var top;
  180. switch (this.document.options.a11y.align) {
  181. case 'top':
  182. top = nodeRect.top - divRect.height - 10;
  183. break;
  184. case 'bottom':
  185. top = nodeRect.bottom + 10;
  186. break;
  187. case 'center':
  188. default:
  189. var yCenter = nodeRect.top + (nodeRect.height / 2);
  190. top = yCenter - (divRect.height / 2);
  191. }
  192. top = top + window.pageYOffset;
  193. top = (top < 0) ? 0 : top;
  194. this.div.style.top = top + 'px';
  195. this.div.style.left = left + 'px';
  196. };
  197. HoverRegion.prototype.highlight = function (highlighter) {
  198. if (this.inner.firstChild &&
  199. !this.inner.firstChild.hasAttribute('sre-highlight')) {
  200. return;
  201. }
  202. var color = highlighter.colorString();
  203. this.inner.style.backgroundColor = color.background;
  204. this.inner.style.color = color.foreground;
  205. };
  206. HoverRegion.prototype.Show = function (node, highlighter) {
  207. this.div.style.fontSize = this.document.options.a11y.magnify;
  208. this.Update(node);
  209. _super.prototype.Show.call(this, node, highlighter);
  210. };
  211. HoverRegion.prototype.Clear = function () {
  212. this.inner.textContent = '';
  213. this.inner.style.top = '';
  214. this.inner.style.backgroundColor = '';
  215. };
  216. HoverRegion.prototype.Update = function (node) {
  217. this.Clear();
  218. var mjx = this.cloneNode(node);
  219. this.inner.appendChild(mjx);
  220. };
  221. HoverRegion.prototype.cloneNode = function (node) {
  222. var mjx = node.cloneNode(true);
  223. if (mjx.nodeName !== 'MJX-CONTAINER') {
  224. if (mjx.nodeName !== 'g') {
  225. mjx.style.marginLeft = mjx.style.marginRight = '0';
  226. }
  227. var container = node;
  228. while (container && container.nodeName !== 'MJX-CONTAINER') {
  229. container = container.parentNode;
  230. }
  231. if (mjx.nodeName !== 'MJX-MATH' && mjx.nodeName !== 'svg') {
  232. var child = container.firstChild;
  233. mjx = child.cloneNode(false).appendChild(mjx).parentNode;
  234. if (mjx.nodeName === 'svg') {
  235. mjx.firstChild.setAttribute('transform', 'matrix(1 0 0 -1 0 0)');
  236. var W = parseFloat(mjx.getAttribute('viewBox').split(/ /)[2]);
  237. var w = parseFloat(mjx.getAttribute('width'));
  238. var _a = node.getBBox(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;
  239. mjx.setAttribute('viewBox', [x, -(y + height), width, height].join(' '));
  240. mjx.removeAttribute('style');
  241. mjx.setAttribute('width', (w / W * width) + 'ex');
  242. mjx.setAttribute('height', (w / W * height) + 'ex');
  243. container.setAttribute('sre-highlight', 'false');
  244. }
  245. }
  246. mjx = container.cloneNode(false).appendChild(mjx).parentNode;
  247. mjx.style.margin = '0';
  248. }
  249. return mjx;
  250. };
  251. HoverRegion.className = 'MJX_HoverRegion';
  252. HoverRegion.style = new StyleList_js_1.CssStyles((_c = {},
  253. _c['.' + HoverRegion.className] = {
  254. position: 'absolute', height: '1px', width: '1px',
  255. padding: '1px', overflow: 'hidden'
  256. },
  257. _c['.' + HoverRegion.className + '_Show'] = {
  258. position: 'absolute', width: 'max-content', height: 'auto',
  259. padding: '0px 0px', opacity: 1, 'z-index': '202', 'margin': '0 auto',
  260. 'background-color': 'rgba(0, 0, 255, 0.2)',
  261. 'box-shadow': '0px 10px 20px #888', border: '2px solid #CCCCCC'
  262. },
  263. _c));
  264. return HoverRegion;
  265. }(AbstractRegion));
  266. exports.HoverRegion = HoverRegion;
  267. //# sourceMappingURL=Region.js.map