MathZoom.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. /* -*- Mode: Javascript; indent-tabs-mode:nil; js-indent-level: 2 -*- */
  2. /* vim: set ts=2 et sw=2 tw=80: */
  3. /*************************************************************
  4. *
  5. * MathJax/extensions/MathZoom.js
  6. *
  7. * Implements the zoom feature for enlarging math expressions. It is
  8. * loaded automatically when the Zoom menu selection changes from "None".
  9. *
  10. * ---------------------------------------------------------------------
  11. *
  12. * Copyright (c) 2010-2015 The MathJax Consortium
  13. *
  14. * Licensed under the Apache License, Version 2.0 (the "License");
  15. * you may not use this file except in compliance with the License.
  16. * You may obtain a copy of the License at
  17. *
  18. * http://www.apache.org/licenses/LICENSE-2.0
  19. *
  20. * Unless required by applicable law or agreed to in writing, software
  21. * distributed under the License is distributed on an "AS IS" BASIS,
  22. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  23. * See the License for the specific language governing permissions and
  24. * limitations under the License.
  25. */
  26. (function (HUB,HTML,AJAX,HTMLCSS,nMML) {
  27. var VERSION = "2.5.0";
  28. var CONFIG = HUB.CombineConfig("MathZoom",{
  29. styles: {
  30. //
  31. // The styles for the MathZoom display box
  32. //
  33. "#MathJax_Zoom": {
  34. position:"absolute", "background-color":"#F0F0F0", overflow:"auto",
  35. display:"block", "z-index":301, padding:".5em", border:"1px solid black", margin:0,
  36. "font-weight":"normal", "font-style":"normal",
  37. "text-align":"left", "text-indent":0, "text-transform":"none",
  38. "line-height":"normal", "letter-spacing":"normal", "word-spacing":"normal",
  39. "word-wrap":"normal", "white-space":"nowrap", "float":"none",
  40. "box-shadow":"5px 5px 15px #AAAAAA", // Opera 10.5 and IE9
  41. "-webkit-box-shadow":"5px 5px 15px #AAAAAA", // Safari 3 and Chrome
  42. "-moz-box-shadow":"5px 5px 15px #AAAAAA", // Forefox 3.5
  43. "-khtml-box-shadow":"5px 5px 15px #AAAAAA", // Konqueror
  44. filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')" // IE
  45. },
  46. //
  47. // The styles for the hidden overlay (should not need to be adjusted by the page author)
  48. //
  49. "#MathJax_ZoomOverlay": {
  50. position:"absolute", left:0, top:0, "z-index":300, display:"inline-block",
  51. width:"100%", height:"100%", border:0, padding:0, margin:0,
  52. "background-color":"white", opacity:0, filter:"alpha(opacity=0)"
  53. },
  54. "#MathJax_ZoomFrame": {
  55. position:"relative", display:"inline-block",
  56. height:0, width:0
  57. },
  58. "#MathJax_ZoomEventTrap": {
  59. position:"absolute", left:0, top:0, "z-index":302,
  60. display:"inline-block", border:0, padding:0, margin:0,
  61. "background-color":"white", opacity:0, filter:"alpha(opacity=0)"
  62. }
  63. }
  64. });
  65. var FALSE, HOVER, EVENT;
  66. MathJax.Hub.Register.StartupHook("MathEvents Ready",function () {
  67. EVENT = MathJax.Extension.MathEvents.Event;
  68. FALSE = MathJax.Extension.MathEvents.Event.False;
  69. HOVER = MathJax.Extension.MathEvents.Hover;
  70. });
  71. /*************************************************************/
  72. var ZOOM = MathJax.Extension.MathZoom = {
  73. version: VERSION,
  74. settings: HUB.config.menuSettings,
  75. scrollSize: 18, // width of scrool bars
  76. //
  77. // Process events passed from output jax
  78. //
  79. HandleEvent: function (event,type,math) {
  80. if (ZOOM.settings.CTRL && !event.ctrlKey) return true;
  81. if (ZOOM.settings.ALT && !event.altKey) return true;
  82. if (ZOOM.settings.CMD && !event.metaKey) return true;
  83. if (ZOOM.settings.Shift && !event.shiftKey) return true;
  84. if (!ZOOM[type]) return true;
  85. return ZOOM[type](event,math);
  86. },
  87. //
  88. // Zoom on click
  89. //
  90. Click: function (event,math) {
  91. if (this.settings.zoom === "Click") {return this.Zoom(event,math)}
  92. },
  93. //
  94. // Zoom on double click
  95. //
  96. DblClick: function (event,math) {
  97. if (this.settings.zoom === "Double-Click" || this.settings.zoom === "DoubleClick") {return this.Zoom(event,math)}
  98. },
  99. //
  100. // Zoom on hover (called by MathEvents.Hover)
  101. //
  102. Hover: function (event,math) {
  103. if (this.settings.zoom === "Hover") {this.Zoom(event,math); return true}
  104. return false;
  105. },
  106. //
  107. // Handle the actual zooming
  108. //
  109. Zoom: function (event,math) {
  110. //
  111. // Remove any other zoom and clear timers
  112. //
  113. this.Remove(); HOVER.ClearHoverTimer(); EVENT.ClearSelection();
  114. //
  115. // Find the jax
  116. //
  117. var JAX = MathJax.OutputJax[math.jaxID];
  118. var jax = JAX.getJaxFromMath(math);
  119. if (jax.hover) {HOVER.UnHover(jax)}
  120. //
  121. // Create the DOM elements for the zoom box
  122. //
  123. var container = this.findContainer(math);
  124. var Mw = Math.floor(.85*container.clientWidth),
  125. Mh = Math.max(document.body.clientHeight,document.documentElement.clientHeight);
  126. if (this.getOverflow(container) !== "visible") {Mh = Math.min(container.clientHeight,Mh)}
  127. Mh = Math.floor(.85*Mh);
  128. var div = HTML.Element(
  129. "span",{id:"MathJax_ZoomFrame"},[
  130. ["span",{id:"MathJax_ZoomOverlay", onmousedown:this.Remove}],
  131. ["span",{
  132. id:"MathJax_Zoom", onclick:this.Remove,
  133. style:{visibility:"hidden", fontSize:this.settings.zscale}
  134. },[["span",{style:{display:"inline-block", "white-space":"nowrap"}}]]
  135. ]]
  136. );
  137. var zoom = div.lastChild, span = zoom.firstChild, overlay = div.firstChild;
  138. math.parentNode.insertBefore(div,math); math.parentNode.insertBefore(math,div); // put div after math
  139. if (span.addEventListener) {span.addEventListener("mousedown",this.Remove,true)}
  140. var eW = zoom.offsetWidth || zoom.clientWidth; Mw -= eW; Mh -= eW;
  141. zoom.style.maxWidth = Mw+"px"; zoom.style.maxHeight = Mh+"px";
  142. if (this.msieTrapEventBug) {
  143. var trap = HTML.Element("span",{id:"MathJax_ZoomEventTrap", onmousedown:this.Remove});
  144. div.insertBefore(trap,zoom);
  145. }
  146. //
  147. // Display the zoomed math
  148. //
  149. if (this.msieZIndexBug) {
  150. // MSIE doesn't do z-index properly, so move the div to the document.body,
  151. // and use an image as a tracker for the usual position
  152. var tracker = HTML.addElement(document.body,"img",{
  153. src:"about:blank", id:"MathJax_ZoomTracker", width:0, height:0,
  154. style:{width:0, height:0, position:"relative"}
  155. });
  156. div.style.position = "relative";
  157. div.style.zIndex = CONFIG.styles["#MathJax_ZoomOverlay"]["z-index"];
  158. div = tracker;
  159. }
  160. var bbox = JAX.Zoom(jax,span,math,Mw,Mh);
  161. //
  162. // Fix up size and position for browsers with bugs (IE)
  163. //
  164. if (this.msiePositionBug) {
  165. if (this.msieSizeBug)
  166. {zoom.style.height = bbox.zH+"px"; zoom.style.width = bbox.zW+"px"} // IE8 gets the dimensions completely wrong
  167. if (zoom.offsetHeight > Mh) {zoom.style.height = Mh+"px"; zoom.style.width = (bbox.zW+this.scrollSize)+"px"} // IE doesn't do max-height?
  168. if (zoom.offsetWidth > Mw) {zoom.style.width = Mw+"px"; zoom.style.height = (bbox.zH+this.scrollSize)+"px"}
  169. }
  170. if (this.operaPositionBug) {zoom.style.width = Math.min(Mw,bbox.zW)+"px"} // Opera gets width as 0?
  171. if (zoom.offsetWidth > eW && zoom.offsetWidth-eW < Mw && zoom.offsetHeight-eW < Mh)
  172. {zoom.style.overflow = "visible"} // don't show scroll bars if we don't need to
  173. this.Position(zoom,bbox);
  174. if (this.msieTrapEventBug) {
  175. trap.style.height = zoom.clientHeight+"px"; trap.style.width = zoom.clientWidth+"px";
  176. trap.style.left = (parseFloat(zoom.style.left)+zoom.clientLeft)+"px";
  177. trap.style.top = (parseFloat(zoom.style.top)+zoom.clientTop)+"px";
  178. }
  179. zoom.style.visibility = "";
  180. //
  181. // Add event handlers
  182. //
  183. if (this.settings.zoom === "Hover") {overlay.onmouseover = this.Remove}
  184. if (window.addEventListener) {addEventListener("resize",this.Resize,false)}
  185. else if (window.attachEvent) {attachEvent("onresize",this.Resize)}
  186. else {this.onresize = window.onresize; window.onresize = this.Resize}
  187. //
  188. // Let others know about the zoomed math
  189. //
  190. HUB.signal.Post(["math zoomed",jax]);
  191. //
  192. // Canel further actions
  193. //
  194. return FALSE(event);
  195. },
  196. //
  197. // Set the position of the zoom box and overlay
  198. //
  199. Position: function (zoom,bbox) {
  200. zoom.style.display = "none"; // avoids getting excessive width in Resize()
  201. var XY = this.Resize(), x = XY.x, y = XY.y, W = bbox.mW;
  202. zoom.style.display = "";
  203. var dx = -W-Math.floor((zoom.offsetWidth-W)/2), dy = bbox.Y;
  204. zoom.style.left = Math.max(dx,10-x)+"px"; zoom.style.top = Math.max(dy,10-y)+"px";
  205. if (!ZOOM.msiePositionBug) {ZOOM.SetWH()} // refigure overlay width/height
  206. },
  207. //
  208. // Handle resizing of overlay while zoom is displayed
  209. //
  210. Resize: function (event) {
  211. if (ZOOM.onresize) {ZOOM.onresize(event)}
  212. var div = document.getElementById("MathJax_ZoomFrame"),
  213. overlay = document.getElementById("MathJax_ZoomOverlay");
  214. var xy = ZOOM.getXY(div), obj = ZOOM.findContainer(div);
  215. if (ZOOM.getOverflow(obj) !== "visible") {
  216. overlay.scroll_parent = obj; // Save this for future reference.
  217. var XY = ZOOM.getXY(obj); // Remove container position
  218. xy.x -= XY.x; xy.y -= XY.y;
  219. XY = ZOOM.getBorder(obj); // Remove container border
  220. xy.x -= XY.x; xy.y -= XY.y;
  221. }
  222. overlay.style.left = (-xy.x)+"px"; overlay.style.top = (-xy.y)+"px";
  223. if (ZOOM.msiePositionBug) {setTimeout(ZOOM.SetWH,0)} else {ZOOM.SetWH()}
  224. return xy;
  225. },
  226. SetWH: function () {
  227. var overlay = document.getElementById("MathJax_ZoomOverlay");
  228. if (!overlay) return;
  229. overlay.style.display = "none"; // so scrollWidth/Height will be right below
  230. var doc = overlay.scroll_parent || document.documentElement || document.body;
  231. overlay.style.width = doc.scrollWidth + "px";
  232. overlay.style.height = Math.max(doc.clientHeight,doc.scrollHeight) + "px";
  233. overlay.style.display = "";
  234. },
  235. findContainer: function (obj) {
  236. obj = obj.parentNode;
  237. while (obj.parentNode && obj !== document.body && ZOOM.getOverflow(obj) === "visible")
  238. {obj = obj.parentNode}
  239. return obj;
  240. },
  241. //
  242. // Look up CSS properties (use getComputeStyle if available, or currentStyle if not)
  243. //
  244. getOverflow: (window.getComputedStyle ?
  245. function (obj) {return getComputedStyle(obj).overflow} :
  246. function (obj) {return (obj.currentStyle||{overflow:"visible"}).overflow}),
  247. getBorder: function (obj) {
  248. var size = {thin: 1, medium: 2, thick: 3};
  249. var style = (window.getComputedStyle ? getComputedStyle(obj) :
  250. (obj.currentStyle || {borderLeftWidth:0,borderTopWidth:0}));
  251. var x = style.borderLeftWidth, y = style.borderTopWidth;
  252. if (size[x]) {x = size[x]} else {x = parseInt(x)}
  253. if (size[y]) {y = size[y]} else {y = parseInt(y)}
  254. return {x:x, y:y};
  255. },
  256. //
  257. // Get the position of an element on the page
  258. //
  259. getXY: function (div) {
  260. var x = 0, y = 0, obj;
  261. obj = div; while (obj.offsetParent) {x += obj.offsetLeft; obj = obj.offsetParent}
  262. if (ZOOM.operaPositionBug) {div.style.border = "1px solid"} // to get vertical position right
  263. obj = div; while (obj.offsetParent) {y += obj.offsetTop; obj = obj.offsetParent}
  264. if (ZOOM.operaPositionBug) {div.style.border = ""}
  265. return {x:x, y:y};
  266. },
  267. //
  268. // Remove zoom display and event handlers
  269. //
  270. Remove: function (event) {
  271. var div = document.getElementById("MathJax_ZoomFrame");
  272. if (div) {
  273. var JAX = MathJax.OutputJax[div.previousSibling.jaxID];
  274. var jax = JAX.getJaxFromMath(div.previousSibling);
  275. HUB.signal.Post(["math unzoomed",jax]);
  276. div.parentNode.removeChild(div);
  277. div = document.getElementById("MathJax_ZoomTracker");
  278. if (div) {div.parentNode.removeChild(div)}
  279. if (ZOOM.operaRefreshBug) {
  280. // force a redisplay of the page
  281. // (Opera doesn't refresh properly after the zoom is removed)
  282. var overlay = HTML.addElement(document.body,"div",{
  283. style:{position:"fixed", left:0, top:0, width:"100%", height:"100%",
  284. backgroundColor:"white", opacity:0},
  285. id: "MathJax_OperaDiv"
  286. });
  287. document.body.removeChild(overlay);
  288. }
  289. if (window.removeEventListener) {removeEventListener("resize",ZOOM.Resize,false)}
  290. else if (window.detachEvent) {detachEvent("onresize",ZOOM.Resize)}
  291. else {window.onresize = ZOOM.onresize; delete ZOOM.onresize}
  292. }
  293. return FALSE(event);
  294. }
  295. };
  296. /*************************************************************/
  297. HUB.Browser.Select({
  298. MSIE: function (browser) {
  299. var mode = (document.documentMode || 0);
  300. var isIE9 = (mode >= 9);
  301. ZOOM.msiePositionBug = !isIE9;
  302. ZOOM.msieSizeBug = browser.versionAtLeast("7.0") &&
  303. (!document.documentMode || mode === 7 || mode === 8);
  304. ZOOM.msieZIndexBug = (mode <= 7);
  305. ZOOM.msieInlineBlockAlignBug = (mode <= 7);
  306. ZOOM.msieTrapEventBug = !window.addEventListener;
  307. if (document.compatMode === "BackCompat") {ZOOM.scrollSize = 52} // don't know why this is so far off
  308. if (isIE9) {delete CONFIG.styles["#MathJax_Zoom"].filter}
  309. },
  310. Opera: function (browser) {
  311. ZOOM.operaPositionBug = true;
  312. ZOOM.operaRefreshBug = true;
  313. }
  314. });
  315. ZOOM.topImg = (ZOOM.msieInlineBlockAlignBug ?
  316. HTML.Element("img",{style:{width:0,height:0,position:"relative"},src:"about:blank"}) :
  317. HTML.Element("span",{style:{width:0,height:0,display:"inline-block"}})
  318. );
  319. if (ZOOM.operaPositionBug || ZOOM.msieTopBug) {ZOOM.topImg.style.border="1px solid"}
  320. /*************************************************************/
  321. MathJax.Callback.Queue(
  322. ["StartupHook",MathJax.Hub.Register,"Begin Styles",{}],
  323. ["Styles",AJAX,CONFIG.styles],
  324. ["Post",HUB.Startup.signal,"MathZoom Ready"],
  325. ["loadComplete",AJAX,"[MathJax]/extensions/MathZoom.js"]
  326. );
  327. })(MathJax.Hub,MathJax.HTML,MathJax.Ajax,MathJax.OutputJax["HTML-CSS"],MathJax.OutputJax.NativeMML);