Merge pull request #1242 from mathjax/integrate_keyboard_events
Integrate keyboard events. Resolves issue #939
This commit is contained in:
commit
27bae487e6
|
@ -29,7 +29,13 @@
|
|||
|
||||
var STIXURL = "http://www.stixfonts.org/";
|
||||
var MENU = MathJax.Menu;
|
||||
var FALSE, KEY;
|
||||
HUB.Register.StartupHook("MathEvents Ready",function () {
|
||||
FALSE = MathJax.Extension.MathEvents.Event.False;
|
||||
KEY = MathJax.Extension.MathEvents.Event.KEY;
|
||||
});
|
||||
|
||||
|
||||
var CONFIG = HUB.CombineConfig("HelpDialog",{
|
||||
|
||||
styles: {
|
||||
|
@ -101,10 +107,10 @@
|
|||
HELP.Post = function () {
|
||||
this.div = MENU.Background(this);
|
||||
var help = HTML.addElement(this.div,"div",{
|
||||
id: "MathJax_Help"
|
||||
id: "MathJax_Help", tabIndex: 0, onkeydown: HELP.Keydown
|
||||
},LOCALE._("HelpDialog",[
|
||||
["b",{style:{fontSize:"120%"}},[["Help","MathJax Help"]]],
|
||||
["div",{id: "MathJax_HelpContent"},[
|
||||
["div",{id: "MathJax_HelpContent", tabIndex: 0},[
|
||||
["p",{},[["MathJax",
|
||||
"*MathJax* is a JavaScript library that allows page authors to include " +
|
||||
"mathematics within their web pages. As a reader, you don't need to do " +
|
||||
|
@ -148,10 +154,13 @@
|
|||
]
|
||||
]],
|
||||
["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]],
|
||||
["span",{id: "MathJax_HelpClose", onclick: HELP.Remove},
|
||||
["span",{id: "MathJax_HelpClose", onclick: HELP.Remove,
|
||||
onkeydown: HELP.Keydown, tabIndex: 0,
|
||||
"aria-label": "Close", "aria-describedby": "Close window"},
|
||||
[["span",{},["\u00D7"]]]
|
||||
]
|
||||
]));
|
||||
help.focus();
|
||||
LOCALE.setCSS(help);
|
||||
var doc = (document.documentElement||{});
|
||||
var H = window.innerHeight || doc.clientHeight || doc.scrollHeight || 0;
|
||||
|
@ -167,6 +176,15 @@
|
|||
HELP.Remove = function (event) {
|
||||
if (HELP.div) {document.body.removeChild(HELP.div); delete HELP.div}
|
||||
};
|
||||
HELP.Keydown = function(event) {
|
||||
if (event.keyCode === KEY.ESCAPE ||
|
||||
(this.id === "MathJax_HelpClose" &&
|
||||
(event.keyCode === KEY.SPACE || event.keyCode === KEY.RETURN))) {
|
||||
HELP.Remove(event);
|
||||
MENU.CurrentNode().focus();
|
||||
FALSE(event);
|
||||
}
|
||||
},
|
||||
|
||||
MathJax.Callback.Queue(
|
||||
HUB.Register.StartupHook("End Config",{}), // wait until config is complete
|
||||
|
|
|
@ -4,20 +4,20 @@
|
|||
/*************************************************************
|
||||
*
|
||||
* MathJax/extensions/MathEvents.js
|
||||
*
|
||||
*
|
||||
* Implements the event handlers needed by the output jax to perform
|
||||
* menu, hover, and other events.
|
||||
*
|
||||
* ---------------------------------------------------------------------
|
||||
*
|
||||
*
|
||||
* Copyright (c) 2011-2015 The MathJax Consortium
|
||||
*
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
@ -27,12 +27,12 @@
|
|||
|
||||
(function (HUB,HTML,AJAX,CALLBACK,LOCALE,OUTPUT,INPUT) {
|
||||
var VERSION = "2.5.0";
|
||||
|
||||
|
||||
var EXTENSION = MathJax.Extension;
|
||||
var ME = EXTENSION.MathEvents = {version: VERSION};
|
||||
|
||||
|
||||
var SETTINGS = HUB.config.menuSettings;
|
||||
|
||||
|
||||
var CONFIG = {
|
||||
hover: 500, // time required to be considered a hover
|
||||
frame: {
|
||||
|
@ -41,7 +41,7 @@
|
|||
bcolor: "#A6D", // frame border color
|
||||
hwidth: "15px", // haze width
|
||||
hcolor: "#83A" // haze color
|
||||
},
|
||||
},
|
||||
button: {
|
||||
x: -6, y: -3, // menu button offsets
|
||||
wx: -2 // button offset for full-width equations
|
||||
|
@ -99,16 +99,30 @@
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Common event-handling code
|
||||
//
|
||||
var EVENT = ME.Event = {
|
||||
|
||||
|
||||
LEFTBUTTON: 0, // the event.button value for left button
|
||||
RIGHTBUTTON: 2, // the event.button value for right button
|
||||
MENUKEY: "altKey", // the event value for alternate context menu
|
||||
|
||||
/*************************************************************/
|
||||
/*
|
||||
* Enum element for key codes.
|
||||
*/
|
||||
KEY: {
|
||||
RETURN: 13,
|
||||
ESCAPE: 27,
|
||||
SPACE: 32,
|
||||
LEFT: 37,
|
||||
UP: 38,
|
||||
RIGHT: 39,
|
||||
DOWN: 40
|
||||
},
|
||||
|
||||
Mousedown: function (event) {return EVENT.Handler(event,"Mousedown",this)},
|
||||
Mouseup: function (event) {return EVENT.Handler(event,"Mouseup",this)},
|
||||
Mousemove: function (event) {return EVENT.Handler(event,"Mousemove",this)},
|
||||
|
@ -117,7 +131,7 @@
|
|||
Click: function (event) {return EVENT.Handler(event,"Click",this)},
|
||||
DblClick: function (event) {return EVENT.Handler(event,"DblClick",this)},
|
||||
Menu: function (event) {return EVENT.Handler(event,"ContextMenu",this)},
|
||||
|
||||
|
||||
//
|
||||
// Call the output jax's event handler or the zoom handler
|
||||
//
|
||||
|
@ -129,7 +143,7 @@
|
|||
if (jax[type]) {return jax[type](event,math)}
|
||||
if (EXTENSION.MathZoom) {return EXTENSION.MathZoom.HandleEvent(event,type,math)}
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Try to cancel the event in every way we can
|
||||
//
|
||||
|
@ -143,6 +157,15 @@
|
|||
return false;
|
||||
},
|
||||
|
||||
//
|
||||
// Keydown event handler. Should only fire on Space key.
|
||||
//
|
||||
Keydown: function (event, math) {
|
||||
if (event.keyCode === EVENT.KEY.SPACE) {
|
||||
EVENT.ContextMenu(event, this);
|
||||
};
|
||||
},
|
||||
|
||||
//
|
||||
// Load the contextual menu code, if needed, and post the menu
|
||||
//
|
||||
|
@ -165,7 +188,7 @@
|
|||
}
|
||||
|
||||
//
|
||||
// If the menu code is loaded,
|
||||
// If the menu code is loaded,
|
||||
// Check if localization needs loading;
|
||||
// If not, post the menu, and return.
|
||||
// Otherwise wait for the localization to load
|
||||
|
@ -178,18 +201,18 @@
|
|||
load = LOCALE.loadDomain("MathMenu");
|
||||
if (!load) {
|
||||
MENU.jax = jax;
|
||||
var source = MENU.menu.Find("Show Math As").menu;
|
||||
source.items[0].name = jax.sourceMenuTitle;
|
||||
source.items[0].format = (jax.sourceMenuFormat||"MathML");
|
||||
var source = MENU.menu.Find("Show Math As").submenu;
|
||||
source.items[0].name = jax.sourceMenuTitle;
|
||||
source.items[0].format = (jax.sourceMenuFormat||"MathML");
|
||||
source.items[1].name = INPUT[jax.inputJax].sourceMenuTitle;
|
||||
source.items[5].disabled = !INPUT[jax.inputJax].annotationEncoding;
|
||||
|
||||
//
|
||||
//
|
||||
// Try and find each known annotation format and enable the menu
|
||||
// items accordingly.
|
||||
//
|
||||
var annotations = source.items[2]; annotations.disabled = true;
|
||||
var annotationItems = annotations.menu.items;
|
||||
var annotationItems = annotations.submenu.items;
|
||||
annotationList = MathJax.Hub.Config.semanticsAnnotations;
|
||||
for (var i = 0, m = annotationItems.length; i < m; i++) {
|
||||
var name = annotationItems[i].name[1]
|
||||
|
@ -226,7 +249,7 @@
|
|||
);
|
||||
return EVENT.False(event);
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Mousedown handler for alternate means of accessing menu
|
||||
//
|
||||
|
@ -243,26 +266,26 @@
|
|||
return JAX.ContextMenu(event,math,true);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
ClearSelection: function () {
|
||||
if (ME.safariContextMenuBug) {setTimeout("window.getSelection().empty()",0)}
|
||||
if (document.selection) {setTimeout("document.selection.empty()",0)}
|
||||
},
|
||||
|
||||
|
||||
getBBox: function (span) {
|
||||
span.appendChild(ME.topImg);
|
||||
var h = ME.topImg.offsetTop, d = span.offsetHeight-h, w = span.offsetWidth;
|
||||
span.removeChild(ME.topImg);
|
||||
return {w:w, h:h, d:d};
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Handle hover "discoverability"
|
||||
//
|
||||
var HOVER = ME.Hover = {
|
||||
|
||||
|
||||
//
|
||||
// Check if we are moving from a non-MathJax element to a MathJax one
|
||||
// and either start fading in again (if it is fading out) or start the
|
||||
|
@ -309,7 +332,7 @@
|
|||
return EVENT.False(event);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Clear the old timer and start a new one
|
||||
//
|
||||
|
@ -320,7 +343,7 @@
|
|||
ClearHoverTimer: function () {
|
||||
if (this.hoverTimer) {clearTimeout(this.hoverTimer); delete this.hoverTimer}
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Handle putting up the hover frame
|
||||
//
|
||||
|
@ -431,7 +454,7 @@
|
|||
jax.hover.timer = setTimeout(CALLBACK(["HoverFade",this,jax]),(delay||CONFIG.fadeDelay));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Handle a click on the menu button
|
||||
//
|
||||
|
@ -439,7 +462,7 @@
|
|||
if (!event) {event = window.event}
|
||||
return OUTPUT[this.jax].ContextMenu(event,this.math,true);
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Clear all hover timers
|
||||
//
|
||||
|
@ -449,7 +472,7 @@
|
|||
HOVER.ClearHoverTimer();
|
||||
delete jax.hover;
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Make a measurement in pixels
|
||||
//
|
||||
|
@ -469,9 +492,9 @@
|
|||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Handle touch events.
|
||||
// Handle touch events.
|
||||
//
|
||||
// Use double-tap-and-hold as a replacement for context menu event.
|
||||
// Use double-tap as a replacement for double click.
|
||||
|
@ -480,7 +503,7 @@
|
|||
|
||||
last: 0, // time of last tap event
|
||||
delay: 500, // delay time for double-click
|
||||
|
||||
|
||||
//
|
||||
// Check if this is a double-tap, and if so, start the timer
|
||||
// for the double-tap and hold (to trigger the contextual menu)
|
||||
|
@ -494,9 +517,9 @@
|
|||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// Check if there is a timeout pending, i.e., we have a
|
||||
// Check if there is a timeout pending, i.e., we have a
|
||||
// double-tap and were waiting to see if it is held long
|
||||
// enough for the menu. Since we got the end before the
|
||||
// timeout, it is a double-click, not a double-tap-and-hold.
|
||||
|
@ -512,7 +535,7 @@
|
|||
return EVENT.Handler((event.touches[0]||event.touch),"DblClick",this);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// If the timeout passes without an end event, we issue
|
||||
// the contextual menu event.
|
||||
|
@ -521,10 +544,10 @@
|
|||
delete TOUCH.timeout; TOUCH.last = 0; TOUCH.up = false;
|
||||
return EVENT.Handler((event.touches[0]||event.touch),"ContextMenu",math);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
* //
|
||||
* // Mobile screens are small, so use larger version of arrow
|
||||
* //
|
||||
|
@ -534,7 +557,7 @@
|
|||
* CONFIG.button.x = -6;
|
||||
* }
|
||||
*/
|
||||
|
||||
|
||||
//
|
||||
// Set up browser-specific values
|
||||
//
|
||||
|
@ -557,7 +580,7 @@
|
|||
ME.noContextMenuBug = true; // doesn't produce contextmenu event
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Used in measuring zoom and hover positions
|
||||
//
|
||||
|
@ -578,7 +601,7 @@
|
|||
haze["-moz-box-shadow"] = haze["-khtml-box-shadow"] =
|
||||
"0px 0px "+CONFIG.frame.hwidth+" "+CONFIG.frame.hcolor;
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Queue the events needed for startup
|
||||
//
|
||||
|
@ -590,6 +613,6 @@
|
|||
["Post",HUB.Startup.signal,"MathEvents Ready"],
|
||||
["loadComplete",AJAX,"[MathJax]/extensions/MathEvents.js"]
|
||||
);
|
||||
|
||||
|
||||
})(MathJax.Hub,MathJax.HTML,MathJax.Ajax,MathJax.Callback,
|
||||
MathJax.Localization,MathJax.OutputJax,MathJax.InputJax);
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -371,7 +371,9 @@
|
|||
id:jax.inputID+"-Frame", isMathJax:true, jaxID:this.id,
|
||||
oncontextmenu:EVENT.Menu, onmousedown: EVENT.Mousedown,
|
||||
onmouseover:EVENT.Mouseover, onmouseout:EVENT.Mouseout, onmousemove:EVENT.Mousemove,
|
||||
onclick:EVENT.Click, ondblclick:EVENT.DblClick
|
||||
onclick:EVENT.Click, ondblclick:EVENT.DblClick,
|
||||
// Added for keyboard accessible menu.
|
||||
onkeydown: EVENT.Keydown, tabIndex: "0"
|
||||
});
|
||||
if (jax.CHTML.display) {
|
||||
//
|
||||
|
|
|
@ -344,7 +344,23 @@
|
|||
"#MathJax_Tooltip *": {
|
||||
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
|
||||
|
@ -569,8 +585,11 @@
|
|||
span = div = this.Element("span",{
|
||||
className:"MathJax", id:jax.inputID+"-Frame", isMathJax:true, jaxID:this.id,
|
||||
oncontextmenu:EVENT.Menu, onmousedown: EVENT.Mousedown,
|
||||
onmouseover:EVENT.Mouseover, onmouseout:EVENT.Mouseout, onmousemove:EVENT.Mousemove,
|
||||
onclick:EVENT.Click, ondblclick:EVENT.DblClick
|
||||
onmouseover:EVENT.Mouseover, onmouseout:EVENT.Mouseout,
|
||||
onmousemove:EVENT.Mousemove, onclick:EVENT.Click,
|
||||
ondblclick:EVENT.DblClick,
|
||||
// Added for keyboard accessible menu.
|
||||
onkeydown: EVENT.Keydown, tabIndex: "0"
|
||||
});
|
||||
if (HUB.Browser.noContextMenu) {
|
||||
span.ontouchstart = TOUCH.start;
|
||||
|
@ -2868,7 +2887,6 @@
|
|||
var alttext = this.Get("alttext");
|
||||
if (alttext && !span.getAttribute("aria-label")) span.setAttribute("aria-label",alttext);
|
||||
if (!span.getAttribute("role")) span.setAttribute("role","math");
|
||||
// span.setAttribute("tabindex",0); // causes focus outline, so disable for now
|
||||
stack = HTMLCSS.createStack(span); box = HTMLCSS.createBox(stack);
|
||||
// Move font-size from outer span to stack to avoid line separation
|
||||
// problem in strict HTML mode
|
||||
|
|
|
@ -326,6 +326,9 @@
|
|||
container.onmousedown = EVENT.Mousedown;
|
||||
container.onclick = EVENT.Click;
|
||||
container.ondblclick = EVENT.DblClick;
|
||||
// Added for keyboard accessible menu.
|
||||
container.onkeydown = EVENT.Keydown;
|
||||
container.tabIndex = "0";
|
||||
if (HUB.Browser.noContextMenu) {
|
||||
container.ontouchstart = TOUCH.start;
|
||||
container.ontouchend = TOUCH.end;
|
||||
|
|
|
@ -197,7 +197,9 @@
|
|||
className:"MathJax_PHTML", id:jax.inputID+"-Frame", isMathJax:true, jaxID:this.id,
|
||||
oncontextmenu:EVENT.Menu, onmousedown: EVENT.Mousedown,
|
||||
onmouseover:EVENT.Mouseover, onmouseout:EVENT.Mouseout, onmousemove:EVENT.Mousemove,
|
||||
onclick:EVENT.Click, ondblclick:EVENT.DblClick
|
||||
onclick:EVENT.Click, ondblclick:EVENT.DblClick,
|
||||
// Added for keyboard accessible menu.
|
||||
onkeydown: EVENT.Keydown, tabIndex: "0"
|
||||
});
|
||||
if (HUB.Browser.noContextMenu) {
|
||||
span.ontouchstart = TOUCH.start;
|
||||
|
|
|
@ -220,7 +220,9 @@
|
|||
className:"MathJax_SVG", id:jax.inputID+"-Frame", isMathJax:true, jaxID:this.id,
|
||||
oncontextmenu:EVENT.Menu, onmousedown: EVENT.Mousedown,
|
||||
onmouseover:EVENT.Mouseover, onmouseout:EVENT.Mouseout, onmousemove:EVENT.Mousemove,
|
||||
onclick:EVENT.Click, ondblclick:EVENT.DblClick
|
||||
onclick:EVENT.Click, ondblclick:EVENT.DblClick,
|
||||
// Added for keyboard accessible menu.
|
||||
onkeydown: EVENT.Keydown, tabIndex: "0"
|
||||
});
|
||||
if (HUB.Browser.noContextMenu) {
|
||||
span.ontouchstart = TOUCH.start;
|
||||
|
|
Loading…
Reference in New Issue
Block a user