Merge pull request #1262 from dpvc/more-menu

A few menu display tweaks
This commit is contained in:
Davide P. Cervone 2015-09-17 06:13:23 -04:00
commit b2a53ac6bc
7 changed files with 85 additions and 45 deletions

View File

@ -1048,10 +1048,13 @@ MathJax.HTML = {
{def.style[id.replace(/-([a-z])/g,this.ucMatch)] = style[id]}}
}
MathJax.Hub.Insert(obj,def);
for (var id in def) {
if (id === "role" || id.substr(0,5) === "aria-") obj.setAttribute(id,def[id]);
}
}
if (contents) {
if (!(contents instanceof Array)) {contents = [contents]}
for (var i = 0; i < contents.length; i++) {
for (var i = 0, m = contents.length; i < m; i++) {
if (contents[i] instanceof Array) {
obj.appendChild(this.Element(contents[i][0],contents[i][1],contents[i][2]));
} else if (type === "script") { // IE throws an error if script is added as a text node
@ -2351,18 +2354,26 @@ MathJax.Hub = {
//
var errorSettings = this.config.errorSettings;
var errorText = LOCALIZE(errorSettings.messageId,errorSettings.message);
var error = MathJax.HTML.Element("span",
{className:"MathJax_Error", jaxID:"Error", isMathJax:true},errorText);
var error = MathJax.HTML.Element("span", {
className:"MathJax_Error", jaxID:"Error", isMathJax:true,
id: script.MathJax.error.inputID+"-Frame"
},errorText);
//
// Attach the menu events
//
if (MathJax.Extension.MathEvents) {
error.oncontextmenu = MathJax.Extension.MathEvents.Event.Menu;
error.onmousedown = MathJax.Extension.MathEvents.Event.Mousedown;
var EVENT = MathJax.Extension.MathEvents.Event;
error.oncontextmenu = EVENT.Menu;
error.onmousedown = EVENT.Mousedown;
error.onkeydown = EVENT.Keydown;
error.tabIndex = 0;
} else {
MathJax.Ajax.Require("[MathJax]/extensions/MathEvents.js",function () {
error.oncontextmenu = MathJax.Extension.MathEvents.Event.Menu;
error.onmousedown = MathJax.Extension.MathEvents.Event.Mousedown;
var EVENT = MathJax.Extension.MathEvents.Event;
error.oncontextmenu = EVENT.Menu;
error.onmousedown = EVENT.Mousedown;
error.keydown = EVENT.Keydown;
error.tabIndex = 0;
});
}
//
@ -3033,15 +3044,17 @@ MathJax.Hub.Startup = {
// Some "Fake" jax used to allow menu access for "Math Processing Error" messages
//
BASE.OutputJax.Error = {
id: "Error", version: "2.5.0", config: {},
id: "Error", version: "2.5.0", config: {}, errors: 0,
ContextMenu: function () {return BASE.Extension.MathEvents.Event.ContextMenu.apply(BASE.Extension.MathEvents.Event,arguments)},
Mousedown: function () {return BASE.Extension.MathEvents.Event.AltContextMenu.apply(BASE.Extension.MathEvents.Event,arguments)},
getJaxFromMath: function (math) {return (math.nextSibling.MathJax||{}).error},
Jax: function (text,script) {
var jax = MathJax.Hub.inputJax[script.type.replace(/ *;(.|\s)*/,"")];
this.errors++;
return {
inputJax: (jax||{id:"Error"}).id, // Use Error InputJax as fallback
outputJax: "Error",
inputID: "MathJax-Error-"+this.errors,
sourceMenuTitle: /*_(MathMenu)*/ ["ErrorMessage","Error Message"],
sourceMenuFormat: "Error",
originalText: MathJax.HTML.getScript(script),

View File

@ -58,6 +58,9 @@
"-khtml-box-shadow":"0px 10px 20px #808080", // Konqueror
filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')" // IE
},
"#MathJax_Help.MathJax_MousePost": {
outline:"none"
},
"#MathJax_HelpContent": {
overflow:"auto", "text-align":"left", "font-size":"80%",
@ -93,6 +96,9 @@
},
"#MathJax_HelpClose:hover span": {
"background-color":"#CCC!important"
},
"#MathJax_HelpClose:hover:focus": {
outline:"none"
}
}
});
@ -100,11 +106,11 @@
/*
* Handle the Help Dialog box
*/
HELP.Dialog = function () {
LOCALE.loadDomain("HelpDialog",["Post",HELP]);
HELP.Dialog = function (event) {
LOCALE.loadDomain("HelpDialog",["Post",HELP,event]);
};
HELP.Post = function () {
HELP.Post = function (event) {
this.div = MENU.Background(this);
var help = HTML.addElement(this.div,"div",{
id: "MathJax_Help", tabIndex: 0, onkeydown: HELP.Keydown
@ -156,10 +162,11 @@
["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]],
["span",{id: "MathJax_HelpClose", onclick: HELP.Remove,
onkeydown: HELP.Keydown, tabIndex: 0, role: "button",
"aria-label": "Close window"},
"aria-label": LOCALE._(["HelpDialog","CloseDialog"],"Close help dialog")},
[["span",{},["\u00D7"]]]
]
]));
if (event.type === "mouseup") help.className += " MathJax_MousePost";
help.focus();
LOCALE.setCSS(help);
var doc = (document.documentElement||{});

View File

@ -161,6 +161,7 @@
// Keydown event handler. Should only fire on Space key.
//
Keydown: function (event, math) {
if (!event) event = window.event;
if (event.keyCode === EVENT.KEY.SPACE) {
EVENT.ContextMenu(event, this);
};

View File

@ -93,6 +93,9 @@
"-khtml-box-shadow":"0px 10px 20px #808080", // Konqueror
filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')" // IE
},
"#MathJax_About.MathJax_MousePost": {
outline:"none"
},
".MathJax_Menu": {
position:"absolute", "background-color":"white", color:"black",
@ -152,12 +155,21 @@
".MathJax_MenuDisabled": {
color:"GrayText"
},
".MathJax_MenuActive": {
"background-color": (isPC ? "Highlight" : "#606872"),
color: (isPC ? "HighlightText" : "white")
},
".MathJax_MenuDisabled:focus, .MathJax_MenuLabel:focus": {
"background-color": "#E8E8E8"
},
".MathJax_ContextMenu:focus": {
outline:"none"
},
".MathJax_ContextMenu .MathJax_MenuItem:focus": {
outline:"none"
},
"#MathJax_AboutClose": {
top:".2em", right:".2em"
},
@ -193,6 +205,9 @@
},
".MathJax_MenuClose:hover span": {
"background-color":"#CCC!important"
},
".MathJax_MenuClose:hover:focus": {
outline:"none"
}
}
});
@ -267,7 +282,7 @@
* Display the menu
*/
Post: function (event,parent,forceLTR) {
if (!event) {event = window.event};
if (!event) {event = window.event||{}}
var div = document.getElementById("MathJax_MenuFrame");
if (!div) {
div = MENU.Background(this);
@ -282,6 +297,8 @@
menuItem: this, className: "MathJax_Menu", onkeydown: MENU.Keydown,
role: "menu"
});
if (event.type === "contextmenu" || event.type === "mouseover")
menu.className += " MathJax_ContextMenu";
if (!forceLTR) {MathJax.Localization.setCSS(menu)}
for (var i = 0, m = this.items.length; i < m; i++) {this.items[i].Create(menu)}
@ -294,17 +311,15 @@
div.appendChild(menu);
this.posted = true;
menu.style.width = (menu.offsetWidth+2) + "px";
if (event) {
var x = event.pageX, y = event.pageY;
}
if (!x && !y && event && event.clientX && event.clientY) {
if (menu.offsetWidth) menu.style.width = (menu.offsetWidth+2) + "px";
var x = event.pageX, y = event.pageY;
if (!x && !y && "clientX" in event) {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
if (!parent) {
var node = MENU.CurrentNode() || event.target;
if (!x && !y && node) {
if ((event.type === "keydown" || (!x && !y)) && node) {
var offsetX = window.pageXOffset || document.documentElement.scrollLeft;
var offsetY = window.pageYOffset || document.documentElement.scrollTop;
var rect = node.getBoundingClientRect();
@ -314,7 +329,7 @@
if (x + menu.offsetWidth > document.body.offsetWidth - this.margin)
{x = document.body.offsetWidth - menu.offsetWidth - this.margin}
if (MENU.isMobile) {x = Math.max(5,x-Math.floor(menu.offsetWidth/2)); y -= 20}
if (event) {MENU.skipUp = event.isContextMenu;}
MENU.skipUp = event.isContextMenu;
} else {
var side = "left", mw = parent.offsetWidth;
x = (MENU.isMobile ? 30 : mw - 2); y = 0;
@ -366,6 +381,7 @@
HOVER.UnHover(MENU.jax);
}
MENU.Unfocus(menu);
if (event.type === "mousedown") MENU.CurrentNode().blur();
return FALSE(event);
},
@ -1016,7 +1032,7 @@
/*
* Handle the ABOUT box
*/
MENU.About = function () {
MENU.About = function (event) {
var HTMLCSS = OUTPUT["HTML-CSS"] || {};
var font = MENU.About.GetFont();
var format = MENU.About.GetFormat();
@ -1046,9 +1062,10 @@
["span",{className:"MathJax_MenuClose",id:"MathJax_AboutClose",
onclick:MENU.About.Remove,
onkeydown: MENU.About.Keydown, tabIndex: 0, role: "button",
"aria-label": "Close window"},
"aria-label": _("CloseAboutDialog","Close about MathJax dialog")},
[["span",{},"\u00D7"]]]
]);
if (event.type === "mouseup") about.className += " MathJax_MousePost";
about.focus();
MathJax.Localization.setCSS(about);
var doc = (document.documentElement||{});
@ -1103,9 +1120,9 @@
/*
* Handle the MathJax HELP menu
*/
MENU.Help = function () {
MENU.Help = function (event) {
AJAX.Require("[MathJax]/extensions/HelpDialog.js",
function () {MathJax.Extension.Help.Dialog()});
function () {MathJax.Extension.Help.Dialog({type:event.type})});
};
/*

View File

@ -323,6 +323,7 @@
Element: function (type,def,content) {
if (type.substr(0,4) === "mjx-") {
if (!def) def = {};
if (def.isMathJax == null) def.isMathJax = true;
if (def.className) def.className = type+" "+def.className; else def.className = type;
type = "span";
}
@ -396,7 +397,7 @@
//
// Zoom box requires an outer container to get the positioning right.
//
var NODE = CHTML.Element("mjx-chtml",{className:"MJXc-display"});
var NODE = CHTML.Element("mjx-chtml",{className:"MJXc-display",isMathJax:false});
NODE.appendChild(node); node = NODE;
}
if (HUB.Browser.noContextMenu) {
@ -596,7 +597,7 @@
// Re-render at larger size
//
this.getMetrics(jax);
var node = CHTML.addElement(span,"mjx-chtml",{style:{"font-size":Math.floor(CHTML.scale*100)+"%"}});
var node = CHTML.addElement(span,"mjx-chtml",{style:{"font-size":Math.floor(CHTML.scale*100)+"%"},isMathJax:false});
this.idPostfix = "-zoom"; jax.root.toCommonHTML(node); this.idPostfix = "";
//
// Adjust margins to prevent overlaps at the edges

View File

@ -265,6 +265,22 @@
border: 0, padding: 0, margin: 0
},
// Focus elements for keyboard tabbing.
".MathJax:focus": (
(MathJax.Hub.Browser.isSafari || MathJax.Hub.Browser.isChrome) ? {
display:"inline-block",
outline:"none",
margin:"-3px",
padding:"3px",
"-webkit-box-shadow": "0px 0px 5px #345, inset 0px 0px 5px #345",
"box-shadow": "0px 0px 5px #345, inset 0px 0px 5px #345"
} : {
display:"inline-block",
outline:"none",
border:"1px dotted",
margin:"-1px"
}),
".MathJax_Display": {
position: "relative",
display: "block!important",
@ -345,22 +361,6 @@
filter: "none", opacity:1, background:"transparent" // for IE
},
// Focus elements for keyboard tabbing.
".MathJax:focus": (
(MathJax.Hub.Browser.isSafari || MathJax.Hub.Browser.isChrome) ? {
display:"inline-block",
outline:"none",
margin:"-3px",
padding:"3px",
"-webkit-box-shadow": "0px 0px 5px #345, inset 0px 0px 5px #345",
"box-shadow": "0px 0px 5px #345, inset 0px 0px 5px #345"
} : {
display:"inline-block",
outline:"none",
border:"1px dotted",
margin:"-1px"
}),
//
// Used for testing web fonts against the default font used while
// web fonts are loading
@ -2876,7 +2876,7 @@
MML.math.Augment({
toHTML: function (span,node,phase) {
var stack, box, html, math;
var stack, box, html, math, SPAN = span;
//
// Phase I lays out the math, but doesn't measure the final math yet
// (that is done for a chunk at a time, to avoid reflows)
@ -2934,7 +2934,7 @@
if (math && math.bbox.width != null) {
span.style.minWidth = (math.bbox.minWidth || span.style.width);
span.style.width = math.bbox.width;
box.style.width = stack.style.width = "100%";
box.style.width = stack.style.width = SPAN.style.width = "100%";
}
//
// Add color (if any)

View File

@ -2102,6 +2102,7 @@
var alttext = this.Get("alttext");
if (alttext && !svg.element.getAttribute("aria-label")) svg.element.setAttribute("aria-label",alttext);
if (!svg.element.getAttribute("role")) svg.element.setAttribute("role","img");
svg.element.setAttribute("focusable","false");
span.appendChild(svg.element);
svg.element = null;
//