Add 'discoverability' to NativeMML output (still have to work on IE support)

This commit is contained in:
Davide P. Cervone 2011-08-22 11:07:30 -04:00
parent 42306c4b0c
commit fd587eb745
5 changed files with 139 additions and 53 deletions

View File

@ -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;

View File

@ -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");
}
});

View File

@ -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) {},

View File

@ -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",

View File

@ -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")