MathZoom.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  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-2013 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.2";
  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") {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 Mw = Math.floor(.85*document.body.clientWidth),
  124. Mh = Math.floor(.85*Math.max(document.body.clientHeight,document.documentElement.clientHeight));
  125. var div = HTML.Element(
  126. "span",{id:"MathJax_ZoomFrame"},[
  127. ["span",{id:"MathJax_ZoomOverlay", onmousedown:this.Remove}],
  128. ["span",{
  129. id:"MathJax_Zoom", onclick:this.Remove,
  130. style:{
  131. visibility:"hidden", fontSize:this.settings.zscale,
  132. "max-width":Mw+"px", "max-height":Mh+"px"
  133. }
  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. if (this.msieTrapEventBug) {
  141. var trap = HTML.Element("span",{id:"MathJax_ZoomEventTrap", onmousedown:this.Remove});
  142. div.insertBefore(trap,zoom);
  143. }
  144. //
  145. // Display the zoomed math
  146. //
  147. if (this.msieZIndexBug) {
  148. // MSIE doesn't do z-index properly, so move the div to the document.body,
  149. // and use an image as a tracker for the usual position
  150. var tracker = HTML.addElement(document.body,"img",{
  151. src:"about:blank", id:"MathJax_ZoomTracker", width:0, height:0,
  152. style:{width:0, height:0, position:"relative"}
  153. });
  154. div.style.position = "relative";
  155. div.style.zIndex = CONFIG.styles["#MathJax_ZoomOverlay"]["z-index"];
  156. div = tracker;
  157. }
  158. var bbox = JAX.Zoom(jax,span,math,Mw,Mh);
  159. //
  160. // Fix up size and position for browsers with bugs (IE)
  161. //
  162. if (this.msiePositionBug) {
  163. if (this.msieSizeBug)
  164. {zoom.style.height = bbox.zH+"px"; zoom.style.width = bbox.zW+"px"} // IE8 gets the dimensions completely wrong
  165. if (zoom.offsetHeight > Mh) {zoom.style.height = Mh+"px"; zoom.style.width = (bbox.zW+this.scrollSize)+"px"} // IE doesn't do max-height?
  166. if (zoom.offsetWidth > Mw) {zoom.style.width = Mw+"px"; zoom.style.height = (bbox.zH+this.scrollSize)+"px"}
  167. }
  168. if (this.operaPositionBug) {zoom.style.width = Math.min(Mw,bbox.zW)+"px"} // Opera gets width as 0?
  169. if (zoom.offsetWidth && zoom.offsetWidth < Mw && zoom.offsetHeight < Mh)
  170. {zoom.style.overflow = "visible"} // don't show scroll bars if we don't need to
  171. this.Position(zoom,bbox);
  172. if (this.msieTrapEventBug) {
  173. trap.style.height = zoom.clientHeight+"px"; trap.style.width = zoom.clientWidth+"px";
  174. trap.style.left = (parseFloat(zoom.style.left)+zoom.clientLeft)+"px";
  175. trap.style.top = (parseFloat(zoom.style.top)+zoom.clientTop)+"px";
  176. }
  177. zoom.style.visibility = "";
  178. //
  179. // Add event handlers
  180. //
  181. if (this.settings.zoom === "Hover") {overlay.onmouseover = this.Remove}
  182. if (window.addEventListener) {addEventListener("resize",this.Resize,false)}
  183. else if (window.attachEvent) {attachEvent("onresize",this.Resize)}
  184. else {this.onresize = window.onresize; window.onresize = this.Resize}
  185. //
  186. // Let others know about the zoomed math
  187. //
  188. HUB.signal.Post(["math zoomed",jax]);
  189. //
  190. // Canel further actions
  191. //
  192. return FALSE(event);
  193. },
  194. //
  195. // Set the position of the zoom box and overlay
  196. //
  197. Position: function (zoom,bbox) {
  198. var XY = this.Resize(), x = XY.x, y = XY.y, W = bbox.mW;
  199. var dx = -W-Math.floor((zoom.offsetWidth-W)/2), dy = bbox.Y;
  200. zoom.style.left = Math.max(dx,10-x)+"px"; zoom.style.top = Math.max(dy,10-y)+"px";
  201. if (!ZOOM.msiePositionBug) {ZOOM.SetWH()} // refigure overlay width/height
  202. },
  203. //
  204. // Handle resizing of overlay while zoom is displayed
  205. //
  206. Resize: function (event) {
  207. if (ZOOM.onresize) {ZOOM.onresize(event)}
  208. var div = document.getElementById("MathJax_ZoomFrame"),
  209. overlay = document.getElementById("MathJax_ZoomOverlay");
  210. var xy = ZOOM.getXY(div);
  211. var obj = div.parentNode, overflow = ZOOM.getOverflow(obj);
  212. while (obj.parentNode && obj !== document.body && overflow === "visible") {
  213. obj = obj.parentNode
  214. overflow = ZOOM.getOverflow(obj);
  215. }
  216. if (overflow !== "visible") {
  217. overlay.scroll_parent = obj; // Save this for future reference.
  218. var XY = ZOOM.getXY(obj); // Remove container position
  219. xy.x -= XY.x; xy.y -= XY.y;
  220. XY = ZOOM.getBorder(obj); // Remove container border
  221. xy.x -= XY.x; xy.y -= XY.y;
  222. }
  223. overlay.style.left = (-xy.x)+"px"; overlay.style.top = (-xy.y)+"px";
  224. if (ZOOM.msiePositionBug) {setTimeout(ZOOM.SetWH,0)} else {ZOOM.SetWH()}
  225. return xy;
  226. },
  227. SetWH: function () {
  228. var overlay = document.getElementById("MathJax_ZoomOverlay");
  229. overlay.style.width = overlay.style.height = "1px"; // 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. },
  234. //
  235. // Look up CSS properties (use getComputeStyle if available, or currentStyle if not)
  236. //
  237. getOverflow: (window.getComputedStyle ?
  238. function (obj) {return getComputedStyle(obj).overflow} :
  239. function (obj) {return (obj.currentStyle||{overflow:"visible"}).overflow}),
  240. getBorder: function (obj) {
  241. var size = {thin: 1, medium: 2, thick: 3};
  242. var style = (window.getComputedStyle ? getComputedStyle(obj) :
  243. (obj.currentStyle || {borderLeftWidth:0,borderTopWidth:0}));
  244. var x = style.borderLeftWidth, y = style.borderTopWidth;
  245. if (size[x]) {x = size[x]} else {x = parseInt(x)}
  246. if (size[y]) {y = size[y]} else {y = parseInt(y)}
  247. return {x:x, y:y};
  248. },
  249. //
  250. // Get the position of an element on the page
  251. //
  252. getXY: function (div) {
  253. var x = 0, y = 0, obj;
  254. obj = div; while (obj.offsetParent) {x += obj.offsetLeft; obj = obj.offsetParent}
  255. if (ZOOM.operaPositionBug) {div.style.border = "1px solid"} // to get vertical position right
  256. obj = div; while (obj.offsetParent) {y += obj.offsetTop; obj = obj.offsetParent}
  257. if (ZOOM.operaPositionBug) {div.style.border = ""}
  258. return {x:x, y:y};
  259. },
  260. //
  261. // Remove zoom display and event handlers
  262. //
  263. Remove: function (event) {
  264. var div = document.getElementById("MathJax_ZoomFrame");
  265. if (div) {
  266. var JAX = MathJax.OutputJax[div.previousSibling.jaxID];
  267. var jax = JAX.getJaxFromMath(div.previousSibling);
  268. HUB.signal.Post(["math unzoomed",jax]);
  269. div.parentNode.removeChild(div);
  270. div = document.getElementById("MathJax_ZoomTracker");
  271. if (div) {div.parentNode.removeChild(div)}
  272. if (ZOOM.operaRefreshBug) {
  273. // force a redisplay of the page
  274. // (Opera doesn't refresh properly after the zoom is removed)
  275. var overlay = HTML.addElement(document.body,"div",{
  276. style:{position:"fixed", left:0, top:0, width:"100%", height:"100%",
  277. backgroundColor:"white", opacity:0},
  278. id: "MathJax_OperaDiv"
  279. });
  280. document.body.removeChild(overlay);
  281. }
  282. if (window.removeEventListener) {removeEventListener("resize",ZOOM.Resize,false)}
  283. else if (window.detachEvent) {detachEvent("onresize",ZOOM.Resize)}
  284. else {window.onresize = ZOOM.onresize; delete ZOOM.onresize}
  285. }
  286. return FALSE(event);
  287. }
  288. };
  289. /*************************************************************/
  290. HUB.Browser.Select({
  291. MSIE: function (browser) {
  292. var mode = (document.documentMode || 0);
  293. var isIE9 = (mode >= 9);
  294. ZOOM.msiePositionBug = !isIE9;
  295. ZOOM.msieSizeBug = browser.versionAtLeast("7.0") &&
  296. (!document.documentMode || mode === 7 || mode === 8);
  297. ZOOM.msieZIndexBug = (mode <= 7);
  298. ZOOM.msieInlineBlockAlignBug = (mode <= 7);
  299. ZOOM.msieTrapEventBug = !window.addEventListener;
  300. if (document.compatMode === "BackCompat") {ZOOM.scrollSize = 52} // don't know why this is so far off
  301. if (isIE9) {delete CONFIG.styles["#MathJax_Zoom"].filter}
  302. },
  303. Opera: function (browser) {
  304. ZOOM.operaPositionBug = true;
  305. ZOOM.operaRefreshBug = true;
  306. }
  307. });
  308. ZOOM.topImg = (ZOOM.msieInlineBlockAlignBug ?
  309. HTML.Element("img",{style:{width:0,height:0,position:"relative"},src:"about:blank"}) :
  310. HTML.Element("span",{style:{width:0,height:0,display:"inline-block"}})
  311. );
  312. if (ZOOM.operaPositionBug || ZOOM.msieTopBug) {ZOOM.topImg.style.border="1px solid"}
  313. /*************************************************************/
  314. MathJax.Callback.Queue(
  315. ["StartupHook",MathJax.Hub.Register,"Begin Styles",{}],
  316. ["Styles",AJAX,CONFIG.styles],
  317. ["Post",HUB.Startup.signal,"MathZoom Ready"],
  318. ["loadComplete",AJAX,"[MathJax]/extensions/MathZoom.js"]
  319. );
  320. })(MathJax.Hub,MathJax.HTML,MathJax.Ajax,MathJax.OutputJax["HTML-CSS"],MathJax.OutputJax.NativeMML);