From fd587eb745a0ec33ce8655b7bedbdae20ee5e0c5 Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Mon, 22 Aug 2011 11:07:30 -0400 Subject: [PATCH] Add 'discoverability' to NativeMML output (still have to work on IE support) --- unpacked/extensions/MathZoom.js | 32 +++--- unpacked/extensions/UIevents.js | 28 ++++-- unpacked/jax/output/HTML-CSS/jax.js | 7 +- unpacked/jax/output/NativeMML/config.js | 2 +- unpacked/jax/output/NativeMML/jax.js | 123 +++++++++++++++++++----- 5 files changed, 139 insertions(+), 53 deletions(-) diff --git a/unpacked/extensions/MathZoom.js b/unpacked/extensions/MathZoom.js index d106cd17c..570d63ab3 100644 --- a/unpacked/extensions/MathZoom.js +++ b/unpacked/extensions/MathZoom.js @@ -309,21 +309,23 @@ if (!this.MSIEzoomKeys(event)) return false; return (ZOOM.DblClick(event,math) === false); }, - MSIEmouseover: function (event,math,span) { - if (this.settings.zoom !== "Hover") {return false} - return !HOVER.Mouseover(event,math); -// ZOOM.Timer(event,math); return true; - }, - MSIEmouseout: function (event,math,span) { - if (this.settings.zoom !== "Hover") {return false} - return !HOVER.Mouseout(event,math); -// ZOOM.ClearTimer(); return true; - }, - MSIEmousemove: function (event,math,span) { - if (this.settings.zoom !== "Hover") {return false} - return !HOVER.Mousemove(event,math); -// ZOOM.Timer(event,math); return true; - }, +/* + * MSIEmouseover: function (event,math,span) { + * if (this.settings.zoom !== "Hover") {return false} + * return !HOVER.Mouseover(event,math); + * // ZOOM.Timer(event,math); return true; + * }, + * MSIEmouseout: function (event,math,span) { + * if (this.settings.zoom !== "Hover") {return false} + * return !HOVER.Mouseout(event,math); + * // ZOOM.ClearTimer(); return true; + * }, + * MSIEmousemove: function (event,math,span) { + * if (this.settings.zoom !== "Hover") {return false} + * return !HOVER.Mousemove(event,math); + * // ZOOM.Timer(event,math); return true; + * }, + */ MSIEzoomKeys: function (event) { if (this.settings.CTRL && !event.ctrlKey) return false; if (this.settings.CMD && !event.metaKey) return false; diff --git a/unpacked/extensions/UIevents.js b/unpacked/extensions/UIevents.js index af2fe7b94..fac5dc0e4 100644 --- a/unpacked/extensions/UIevents.js +++ b/unpacked/extensions/UIevents.js @@ -43,7 +43,7 @@ "-moz-box-shadow": "0px 0px 15px #83A", // Forefox 3.5 "-khtml-box-shadow": "0px 0px 15px #83A", // Konqueror - border: ".1em solid #A6D ! important", + border: "1px solid #A6D ! important", display: "inline-block", position:"absolute" }, @@ -178,21 +178,23 @@ }, Hover: function (jax,math) { - if (EXTENSION.MathZoom && EXTENSION.MathZoom.Hover(event,math)) return; - var JAX = jax.outputJax, span = JAX.getHoverSpan(jax), bbox = JAX.getHoverBBox(jax,span); - var dx = .25, dy = .33, dd = .1; // frame size + if (EXTENSION.MathZoom && EXTENSION.MathZoom.Hover({},math)) return; + var JAX = jax.outputJax, + span = JAX.getHoverSpan(jax,math), + bbox = JAX.getHoverBBox(jax,span,math); + var dx = 3.5/bbox.em, dy = 5/bbox.em, dd = 1/bbox.em; // frame size jax.hover = {opacity:0}; - if (this.msieBorderWidthBug) {dd = 0} + if (UI.msieBorderWidthBug) {dd = 0} jax.hover.id = "MathJax-Hover-"+jax.inputID.replace(/.*-(\d+)$/,"$1"); var frame = HTML.Element("span",{ id:jax.hover.id, isMathJax: true, - style:{display:"inline-block", "z-index":1, width:0, height:0, position:"relative"} + style:{display:"inline-block", /*"z-index":1,*/ width:0, height:0, position:"relative"} },[["span",{ className:"MathJax_Hover_Frame", isMathJax: true, style:{ display:"inline-block", position:"absolute", - top:this.Em(-bbox.h-dy-dd), left:this.Em(-dx-dd), - width:this.Em(bbox.w+2*dx), height:this.Em(bbox.h+bbox.d+2*dy), + top:bbox.Units(-bbox.h-dy-dd-(bbox.y||0)), left:bbox.Units(-dx-dd+(bbox.x||0)), + width:bbox.Units(bbox.w+2*dx), height:bbox.Units(bbox.h+bbox.d+2*dy), opacity:0, filter:"alpha(opacity=0)" }},[[ "img",{ @@ -203,7 +205,13 @@ ]] ]] ); - span.parentNode.insertBefore(frame,span); span.style.position = "relative"; + if (bbox.width) { + frame.style.width = bbox.width; + frame.style.marginRight = "-"+bbox.width; + frame.firstChild.style.width = bbox.width; + } + span.parentNode.insertBefore(frame,span); + if (span.style) {span.style.position = "relative"} this.ReHover(jax,.2); }, ReHover: function (jax) { @@ -314,8 +322,8 @@ HUB.Browser.Select({ MSIE: function (browser) { + UI.msieBorderWidthBug = (document.compatMode === "BackCompat"); if ((document.documentMode||0) < 9) {EVENT.LEFTBUTTON = 1} - EVENT.msieBorderWidthBug = (document.compatMode === "BackCompat"); } }); diff --git a/unpacked/jax/output/HTML-CSS/jax.js b/unpacked/jax/output/HTML-CSS/jax.js index 88fcf46ac..23d64acf6 100644 --- a/unpacked/jax/output/HTML-CSS/jax.js +++ b/unpacked/jax/output/HTML-CSS/jax.js @@ -448,7 +448,12 @@ return HUB.getJaxFor(math.nextSibling); }, getHoverSpan: function (jax) {return jax.root.HTMLspanElement()}, - getHoverBBox: function (jax,span) {return span.bbox}, + getHoverBBox: function (jax,span) { + var bbox = span.bbox; + var BBOX = {w:bbox.w, h:bbox.h, d:bbox.d, Units:HTMLCSS.Em, em:HTMLCSS.em}; + if (bbox.width) {BBOX.width = bbox.width} + return BBOX; + }, initImg: function (span) {}, initHTML: function (math,span) {}, diff --git a/unpacked/jax/output/NativeMML/config.js b/unpacked/jax/output/NativeMML/config.js index 0afa58771..a96382d9f 100644 --- a/unpacked/jax/output/NativeMML/config.js +++ b/unpacked/jax/output/NativeMML/config.js @@ -24,7 +24,7 @@ MathJax.OutputJax.NativeMML = MathJax.OutputJax({ id: "NativeMML", - version: "1.1.5", + version: "1.1.6", directory: MathJax.OutputJax.directory + "/NativeMML", extensionDir: MathJax.OutputJax.extensionDir + "/NativeMML", diff --git a/unpacked/jax/output/NativeMML/jax.js b/unpacked/jax/output/NativeMML/jax.js index bf0a12a70..494e11871 100644 --- a/unpacked/jax/output/NativeMML/jax.js +++ b/unpacked/jax/output/NativeMML/jax.js @@ -25,6 +25,8 @@ (function (nMML,HUB,AJAX,HTML,EVENT) { var MML, isMSIE = HUB.Browser.isMSIE; + var EVENT, TOUCH, HOVER; // filled in later + nMML.Augment({ LEFTBUTTON: (isMSIE ? 1 : 0), // the event.button value for left button MENUKEY: "altKey", // the event value for alternate context menu @@ -36,7 +38,20 @@ // User can configure styles // config: {styles: {}}, settings: HUB.config.menuSettings, - Startup: function () {return AJAX.Styles(this.config.styles)}, + Startup: function () { + // Set up event handling + EVENT = MathJax.Extension.UIevents.Event; + TOUCH = MathJax.Extension.UIevents.Touch; + HOVER = MathJax.Extension.UIevents.Hover; + this.HandleEvent = EVENT.HandleEvent; + this.Mouseover = HOVER.Mouseover; + this.Mouseout = HOVER.Mouseout; + this.Mousemove = HOVER.Mousemove; +this.MSIEmouseover = EVENT.Mouseover; +this.MSIEmouseout = EVENT.Mouseout; +this.MSIEmousemove = EVENT.Mousemove; + return AJAX.Styles(this.config.styles); + }, Config: function () { this.SUPER(arguments).Config.call(this); if (this.settings.scale) {this.config.scale = this.settings.scale} @@ -52,6 +67,7 @@ "div.MathJax_MathContainer > span": {"text-align": align+"!important"} }); } + this.require.push(MathJax.OutputJax.extensionDir+"/UIevents.js"); }, // // Set up MathPlayer for IE on the first time through. @@ -97,26 +113,25 @@ {prev.parentNode.removeChild(prev)} var math = script.MathJax.elementJax.root; var type = (math.Get("display") === "block" ? "div" : "span"); - var span = document.createElement(type), container = span; - span.className = "MathJax_MathML"; span.style.fontSize = this.config.scale+"%"; - if (isMSIE && this.config.showMathMenuMSIE) { - container = HTML.addElement(span,"span",{ - className:"MathJax_MathContainer", - style:{display:"inline-block",position:"relative"} - }); - } - math.toNativeMML(container); + var span = HTML.Element(type,{ + className: "MathJax_MathML", style: {"font-size": this.config.scale+"%"} + },[["span",{ + className:"MathJax_MathContainer", isMathJax: true, jaxID: "NativeMML", + style:{position:"relative", display:"inline-block", "white-space":"nowrap"} + }, [["span",{isMathJax:true, style:{display:"inline-block"}}]] // for Firefox hover and zoom + ]]), container = span.firstChild; + if (isMSIE && this.config.showMathMenuMSIE) {container.style.display = "inline-block"} + math.toNativeMML(container.firstChild); script.parentNode.insertBefore(span,script); if (isMSIE) { if (this.config.showMathMenuMSIE) {this.MSIEoverlay(span)} } else { - math = span.firstChild; math.jaxID = "NativeMML"; - math.oncontextmenu = EVENT.Menu; - math.onmouseover = EVENT.Mouseover; - math.onmousout = EVENT.Mouseout; - math.onmousedown = EVENT.Mousedown; - math.onclick = EVENT.Click; - math.ondblclick = EVENT.DblClick; + container.oncontextmenu = EVENT.Menu; + container.onmouseover = EVENT.Mouseover; + container.onmouseout = EVENT.Mouseout; + container.onmousedown = EVENT.Mousedown; + container.onclick = EVENT.Click; + container.ondblclick = EVENT.DblClick; } }, // @@ -190,14 +205,12 @@ }, // Other IE event handlers are in MathZoom.js - HandleEvent: EVENT.HandleEvent, ContextMenu: function (event,math,force) { if (this.config.showMathMenu && (this.settings.context === "MathJax" || force)) { if (document.selection) {setTimeout("document.selection.empty()",0)} if (this.msieEventBug) {event = window.event} - math = math.parentNode; if (isMSIE) {math = math.parentNode} delete this.trapClick; delete this.trapUp; - return EVENT.ContextMenu(event,math); + return EVENT.ContextMenu(event,this.getJaxFromMath(math)); } }, Mousedown: function (event,math) { @@ -205,11 +218,22 @@ if (this.settings.context === "MathJax") { if (!this.noContextMenuBug || event.button !== 2) return } else { - if (!event[nMML.MENUKEY] || event.button !== nMML.LEFTBUTTON) return + if (!event[EVENT.MENUKEY] || event.button !== EVENT.LEFTBUTTON) return } return this.ContextMenu(event,math,true); } }, + getJaxFromMath: function (math) { + return HUB.getJaxFor(math.parentNode.nextSibling); + }, + getHoverSpan: function (jax,math) {return math.firstChild}, + getHoverBBox: function (jax,span,math) { + span = span.parentNode; + span.appendChild(this.topImg); var h = this.topImg.offsetTop; span.removeChild(this.topImg); + return {w:span.offsetWidth, h:h, d:span.offsetHeight-h, Units:this.PX, em:1} + }, + PX: function (n) {return n+"px"}, + NAMEDSPACE: { negativeveryverythinmathspace: "-.0556em", @@ -274,11 +298,12 @@ // // Create a MathML element // - NativeMMLelement: ( - isMSIE ? - function (type) {return document.createElement("mjx:"+type)} : - function (type) {return document.createElementNS(nMML.MMLnamespace,type)} - ) + NativeMMLelement: function (type) { + var math = (isMSIE ? document.createElement("mjx:"+type) : + document.createElementNS(nMML.MMLnamespace,type)); + math.isMathJax = true; + return math; + } }); MML.mrow.Augment({ @@ -334,6 +359,26 @@ }); if (HUB.Browser.isFirefox) { + // + // Zoom and hover don't work well with display="block", + // so fake it with inline and an mstyle with displaystyle="true" + // + MML.math.Augment({ + toNativeMML: function (parent) { + var tag = parent.appendChild(this.NativeMMLelement(this.type)); + this.NativeMMLattributes(tag); + if (this.Get("display") === "block") { + tag.setAttribute("display","inline"); + tag = tag.appendChild(this.NativeMMLelement("mstyle")); + tag.setAttribute("displaystyle","true"); + } + for (var i = 0, m = this.data.length; i < m; i++) { + if (this.data[i]) {this.data[i].toNativeMML(tag)} + else {tag.appendChild(this.NativeMMLelement("mrow"))} + } + } + }); + MML.mtable.Augment({ toNativeMML: function (parent) { // @@ -471,6 +516,32 @@ // setTimeout(MathJax.Callback(["loadComplete",nMML,"jax.js"]),0); }); + + + // + // Determine browser characteristics + // + HUB.Browser.Select({ + MSIE: function (browser) { + var quirks = (document.compatMode === "BackCompat"); + var isIE8 = browser.versionAtLeast("8.0") && document.documentMode > 7; + nMML.msieInlineBlockAlignBug = (!isIE8 || quirks); + nMML.msieTopBug = (!browser.versionAtLeast("8.0") || document.documentMode === 7); + }, + Opera: function (browser) { + nMML.operaPositionBug = true; + } + }); + + // + // Used in measuring zoom and hover positions + // + nMML.topImg = (nMML.msieInlineBlockAlignBug ? + HTML.Element("img",{style:{width:0,height:0,position:"relative"},src:"about:blank"}) : + HTML.Element("span",{style:{width:0,height:0,display:"inline-block"}}) + ); + if (nMML.operaPositionBug || nMML.msieTopBug) {nMML.topImg.style.border="1px solid"} + HUB.Register.StartupHook("End Cookie",function () { if (HUB.config.menuSettings.zoom !== "None")