diff --git a/unpacked/MathJax.js b/unpacked/MathJax.js index d08791358..e6b19ecbc 100644 --- a/unpacked/MathJax.js +++ b/unpacked/MathJax.js @@ -1009,6 +1009,34 @@ MathJax.fileversion = "1.1.11"; // Common event-handling code // var EVENT = BASE.HTML.Event = { + + LEFTBUTTON: 0, // the event.button value for left button + MENUKEY: "altKey", // the event value for alternate context menu + + styles: { + ".MathJax_Hover_Frame": { + "border-radius": ".25em", // Opera 10.5 and IE9 + "-webkit-border-radius": ".25em", // Safari and Chrome + "-moz-border-radius": ".25em", // Firefox + "-khtml-border-radius": ".25em", // Konqueror + + "box-shadow": "0px 0px 15px #83A", // Opera 10.5 and IE9 + "-webkit-box-shadow": "0px 0px 15px #83A", // Safari and Chrome + "-moz-box-shadow": "0px 0px 15px #83A", // Forefox 3.5 + "-khtml-box-shadow": "0px 0px 15px #83A", // Konqueror + + border: ".1em solid #A6D ! important", + display: "inline-block", position:"absolute" + }, + + ".MathJax_Hover_Arrow": { + position:"absolute", + top:"-5px", right:"-9px", + width:"15px", height:"11px", + cursor:"pointer" + } + }, + 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)}, @@ -1029,7 +1057,7 @@ MathJax.fileversion = "1.1.11"; return jax.HandleEvent(event,type,math); }, // - // For use in the handler + // For use in the output jax (this will be the output jax) // HandleEvent: function (event,type,math) { if (this[type]) {return this[type].call(this,event,math)} @@ -1084,13 +1112,122 @@ MathJax.fileversion = "1.1.11"; } }; - var TOUCH = BASE.HTML.Touch = { + // + // Handle hover "discoverability" + // + var HOVER = BASE.HTML.Hover = { + Mouseover: function (event,math) { + var from = event.fromElement || event.relatedTarget, + to = event.toElement || event.target; + if (from && to && from.isMathJax != to.isMathJax) { + var jax = this.getJaxFromMath(math); + if (jax.hover) {HOVER.ReHover(jax)} else {HOVER.HoverTimer(jax,math)} + return EVENT.False(event); + } + }, + Mouseout: function (event,math) { + var from = event.fromElement || event.relatedTarget, + to = event.toElement || event.target; + if (from && to && from.isMathJax != to.isMathJax) { + var jax = this.getJaxFromMath(math); + if (jax.hover) {HOVER.UnHover(jax)} else {HOVER.ClearHoverTimer()} + return EVENT.False(event); + } + }, + Mousemove: function (event,math) { + var jax = this.getJaxFromMath(math); if (jax.hover) return; + if (HOVER.lastX == event.clientX && HOVER.lastY == event.clientY) return; + HOVER.lastX = event.clientX; HOVER.lastY = event.clientY; + HOVER.HoverTimer(jax,math); + return EVENT.False(event); + }, - // Handle touch events. - // - // Use double-tap-and-hold as a replacement for context menu event. - // Use double-tap as a replacement for double click. - // + HoverTimer: function (jax,math) { + this.ClearHoverTimer(); + var delay = BASE.Hub.config.menuSettings.hover; + this.hoverTimer = setTimeout(CALLBACK(["Hover",this,jax,math]),delay); + }, + ClearHoverTimer: function () { + if (this.hoverTimer) {clearTimeout(this.hoverTimer); delete this.hoverTimer} + }, + + Hover: function (jax,math) { + // check for MathZoom hover + var JAX = jax.outputJax, span = JAX.getHoverSpan(jax), bbox = JAX.getHoverBBox(jax,span); + var dx = .25, dy = .33, dd = .1; // frame size + jax.hover = {opacity:0}; + if (this.msieBorderWidthBug) {dd = 0} + jax.hover.id = "MathJax-Hover-"+jax.inputID.replace(/.*-(\d+)$/,"$1"); + var frame = BASE.HTML.Element("span",{ + id:jax.hover.id, isMathJax: true, + 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), + opacity:0, filter:"alpha(opacity=0)" + }},[[ + "img",{ + className: "MathJax_Hover_Arrow", isMathJax: true, math: math, + src: BASE.Ajax.fileURL(MathJax.OutputJax.imageDir+"/MenuArrow-15.png"), + onclick: this.HoverMenu, jax:JAX.id + } + ]] + ]] + ); + span.parentNode.insertBefore(frame,span); span.style.position = "relative"; + this.ReHover(jax,.2); + }, + ReHover: function (jax) { + if (jax.hover.remove) {clearTimeout(jax.hover.remove)} + jax.hover.remove = setTimeout(MathJax.Callback(["UnHover",this,jax]),15*1000); + this.HoverFadeTimer(jax,.2); + }, + UnHover: function (jax) { + if (!jax.hover.nofade) {this.HoverFadeTimer(jax,-.05,400)} + }, + HoverFade: function (jax) { + delete jax.hover.timer; + jax.hover.opacity = Math.max(0,Math.min(1,jax.hover.opacity + jax.hover.inc)); + jax.hover.opacity = Math.floor(1000*jax.hover.opacity)/1000; + var span = document.getElementById(jax.hover.id); + span.firstChild.style.opacity = jax.hover.opacity; + span.firstChild.style.filter = "alpha(opacity="+Math.floor(100*jax.hover.opacity)+")"; + if (jax.hover.opacity === 1) {return} + if (jax.hover.opacity) {this.HoverFadeTimer(jax,jax.hover.inc); return} + var frame = document.getElementById(jax.hover.id); + frame.parentNode.removeChild(frame); + if (jax.hover.remove) {clearTimeout(jax.hover.remove)} + delete jax.hover; + }, + HoverFadeTimer: function (jax,inc,delay) { + jax.hover.inc = inc; + if (!jax.hover.timer) { + jax.hover.timer = setTimeout(MathJax.Callback(["HoverFade",this,jax]),(delay||50)); + } + }, + HoverMenu: function (event) { + if (!event) {event = window.event} + BASE.OutputJax[this.jax].ContextMenu(event,this.math,true); + }, + + Em: function (m) { + if (Math.abs(m) < .0006) {return "0em"} + return m.toFixed(3).replace(/\.?0+$/,"") + "em"; + } + + }; + + // + // Handle touch events. + // + // Use double-tap-and-hold as a replacement for context menu event. + // Use double-tap as a replacement for double click. + // + var TOUCH = BASE.HTML.Touch = { + last: 0, // time of last tap event delay: 500, // delay time for double-click @@ -1644,6 +1781,7 @@ MathJax.Hub = { } }; MathJax.Hub.Insert(MathJax.Hub.config.styles,MathJax.Message.styles); +MathJax.Hub.Insert(MathJax.Hub.config.styles,MathJax.HTML.Event.styles); MathJax.Hub.Insert(MathJax.Hub.config.styles,{".MathJax_Error":MathJax.Hub.config.errorSettings.style}); // @@ -2211,6 +2349,8 @@ MathJax.Hub.Startup = { browser.isIE9 = !!(document.documentMode && (window.performance || window.msPerformance)); MathJax.HTML.setScriptBug = !browser.isIE9 || document.documentMode < 9; MathJax.HTML.Event.msieButtonBug = (document.documentMode||0) >= 9; + if ((document.documentMode||0) < 9) {MathJax.HTML.Event.LEFTBUTTON = 1} + MathJax.HTML.Event.msieBorderWidthBug = (document.compatMode === "BackCompat"); } }); HUB.Browser.Select(MathJax.Message.browsers); diff --git a/unpacked/extensions/MathMenu.js b/unpacked/extensions/MathMenu.js index 02ea7567f..fdd52ec5c 100644 --- a/unpacked/extensions/MathMenu.js +++ b/unpacked/extensions/MathMenu.js @@ -229,7 +229,7 @@ } if (MENU.jax.hover) { delete MENU.jax.hover.nofade; - MENU.jax.outputJax.UnHover(MENU.jax); + HTML.Hover.UnHover(MENU.jax); } }, @@ -327,7 +327,7 @@ getImages: function () { if (MENU.isMobile) { var close = new Image(); - close.src = MathJax.Ajax.fileURL(MathJax.OutputJax.imageDir+"/CloseX-31.png"); + close.src = AJAX.fileURL(MathJax.OutputJax.imageDir+"/CloseX-31.png"); } } @@ -873,7 +873,7 @@ trigger.items = trigger.items.slice(0,4); if (navigator.appVersion.match(/[ (]Android[) ]/)) { - MathJax.Menu.ITEM.SUBMENU.Augment({marker: "\u00BB"}); + MENU.ITEM.SUBMENU.Augment({marker: "\u00BB"}); } })(); } diff --git a/unpacked/jax/output/HTML-CSS/jax.js b/unpacked/jax/output/HTML-CSS/jax.js index 4613a4c1a..e0c80652a 100644 --- a/unpacked/jax/output/HTML-CSS/jax.js +++ b/unpacked/jax/output/HTML-CSS/jax.js @@ -183,7 +183,8 @@ }); var EVENT = MathJax.HTML.Event; - var TOUCH = MathJax.HTML.Touch; + var TOUCH = MathJax.HTML.Touch; + var HOVER = MathJax.HTML.Hover; HTMLCSS.Augment({ @@ -233,7 +234,7 @@ }, ".MathJax nobr": { - "white-space": "nowrap" + "white-space": "nowrap ! important" }, ".MathJax img": { @@ -249,27 +250,6 @@ cursor: "text" }, - ".MathJax_Hover_Frame": { - "border-radius": ".25em", // Opera 10.5 and IE9 - "-webkit-border-radius": ".25em", // Safari and Chrome - "-moz-border-radius": ".25em", // Firefox - "-khtml-border-radius": ".25em", // Konqueror - - "box-shadow": "0px 0px 15px #83A", // Opera 10.5 and IE9 - "-webkit-box-shadow": "0px 0px 15px #83A", // Safari and Chrome - "-moz-box-shadow": "0px 0px 15px #83A", // Forefox 3.5 - "-khtml-box-shadow": "0px 0px 15px #83A", // Konqueror - - border: ".1em solid #A6D ! important", - display: "inline-block", position:"absolute" - }, - ".MathJax_Hover_Arrow": { - position:"absolute", - top:"-5px", right:"-9px", - width:"15px", height:"11px", - cursor:"pointer" - }, - "#MathJax_Tooltip": { position: "absolute", left: 0, top: 0, width: "auto", height: "auto", @@ -283,9 +263,6 @@ }, settings: HUB.config.menuSettings, - LEFTBUTTON: (HUB.Browser.isMSIE ? 1 : 0), // the event.button value for left button - MENUKEY: "altKey", // the event value for alternate context menu - Font: null, // created by Config() below Config: function () { @@ -446,7 +423,7 @@ if (this.config.showMathMenu && (this.settings.context === "MathJax" || force)) { if (this.safariContextMenuBug) {setTimeout("window.getSelection().empty()",0)} if (this.msieEventBug) {event = window.event} - this.ClearHoverTimer(); + HOVER.ClearHoverTimer(); return EVENT.ContextMenu(event,this.getJaxFromMath(math)); } }, @@ -456,110 +433,20 @@ if (!this.noContextMenuBug || event.button !== 2) return } else { var BUTTON = (EVENT.msieButtonBug ? event.buttons & 1 : event.button); - if (!event[HTMLCSS.MENUKEY] || BUTTON !== HTMLCSS.LEFTBUTTON) return + if (!event[EVENT.MENUKEY] || BUTTON !== EVENT.LEFTBUTTON) return } return this.ContextMenu(event,math,true); } }, - Mouseover: function (event,math) { - var from = event.fromElement || event.relatedTarget, - to = event.toElement || event.target; - if (from && to && from.isMathJax != to.isMathJax) { - var jax = this.getJaxFromMath(math); - if (jax.hover) {this.ReHover(jax)} else {this.HoverTimer(jax,math)} - return EVENT.False(event); - } - }, - Mouseout: function (event,math) { - var from = event.fromElement || event.relatedTarget, - to = event.toElement || event.target; - if (from && to && from.isMathJax != to.isMathJax) { - var jax = this.getJaxFromMath(math); - if (jax.hover) {this.UnHover(jax)} else {this.ClearHoverTimer()} - return EVENT.False(event); - } - }, - Mousemove: function (event,math) { - var jax = this.getJaxFromMath(math); if (jax.hover) return; - if (this.lastX == event.clientX && this.lastY == event.clientY) return; - this.lastX = event.clientX; this.lastY = event.clientY; - this.HoverTimer(jax,math); - return EVENT.False(event); - }, - - HoverTimer: function (jax,math) { - this.ClearHoverTimer(); - this.hoverTimer = setTimeout(MathJax.Callback(["Hover",this,jax,math]),this.settings.hover); - }, - ClearHoverTimer: function () { - if (this.hoverTimer) {clearTimeout(this.hoverTimer); delete this.hoverTimer} - }, - - Hover: function (jax,math) { - // check for MathZoom hover - jax.hover = {opacity:0}; - var span = jax.root.HTMLspanElement(), bbox = span.bbox; - var dx = .25, dy = .33, dd = .1; // frame size - if (this.msieBorderWidthBug) {dd = 0} - jax.hover.id = "MathJax-Hover-"+jax.inputID.replace(/.*-(\d+)$/,"$1"); - var frame = HTMLCSS.Element("span",{ - id:jax.hover.id, isMathJax: true, - 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:HTMLCSS.Em(-bbox.h-dy-dd), left:HTMLCSS.Em(-dx-dd), - width:HTMLCSS.Em(bbox.w+2*dx), height:HTMLCSS.Em(bbox.h+bbox.d+2*dy), - opacity:0, filter:"alpha(opacity=0)" - }},[[ - "img",{ - className: "MathJax_Hover_Arrow", isMathJax: true, math: math, - src: AJAX.fileURL(MathJax.OutputJax.imageDir+"/MenuArrow-15.png"), - onclick: this.HoverMenu - } - ]] - ]] - ); - span.parentNode.insertBefore(frame,span); span.style.position = "relative"; - this.ReHover(jax,.2); - }, - ReHover: function (jax) { - if (jax.hover.remove) {clearTimeout(jax.hover.remove)} - jax.hover.remove = setTimeout(MathJax.Callback(["UnHover",this,jax]),15*1000); - this.HoverFadeTimer(jax,.2); - }, - UnHover: function (jax) { - if (!jax.hover.nofade) {this.HoverFadeTimer(jax,-.05,400)} - }, - HoverFade: function (jax) { - delete jax.hover.timer; - jax.hover.opacity = Math.max(0,Math.min(1,jax.hover.opacity + jax.hover.inc)); - jax.hover.opacity = Math.floor(1000*jax.hover.opacity)/1000; - var span = document.getElementById(jax.hover.id); - span.firstChild.style.opacity = jax.hover.opacity; - span.firstChild.style.filter = "alpha(opacity="+Math.floor(100*jax.hover.opacity)+")"; - if (jax.hover.opacity === 1) {return} - if (jax.hover.opacity) {this.HoverFadeTimer(jax,jax.hover.inc); return} - var frame = document.getElementById(jax.hover.id); - frame.parentNode.removeChild(frame); - if (jax.hover.remove) {clearTimeout(jax.hover.remove)} - delete jax.hover; - }, - HoverFadeTimer: function (jax,inc,delay) { - jax.hover.inc = inc; - if (!jax.hover.timer) { - jax.hover.timer = setTimeout(MathJax.Callback(["HoverFade",this,jax]),(delay||50)); - } - }, - HoverMenu: function (event) { - if (!event) {event = window.event} - HTMLCSS.ContextMenu(event,this.math,true); - }, + Mouseover: HOVER.Mouseover, + Mouseout: HOVER.Mouseout, + Mousemove: HOVER.Mousemove, getJaxFromMath: function (math) { if (math.parentNode.className === "MathJax_Display") {math = math.parentNode} return HUB.getJaxFor(math.nextSibling); }, + getHoverSpan: function (jax) {return jax.root.HTMLspanElement()}, + getHoverBBox: function (jax,span) {return span.bbox}, initImg: function (span) {}, initHTML: function (math,span) {}, @@ -2263,11 +2150,13 @@ HUB.Register.StartupHook("End Config",function () { - if (MathJax.Hub.Browser.isMobile) { - var arrow = HTMLCSS.config.styles[".MathJax_Hover_Arrow"]; - arrow.width = "25px"; arrow.height = "18px"; - arrow.top = "-11px"; arrow.right = "-15px"; - } + /* + * if (MathJax.Hub.Browser.isMobile) { + * var arrow = HTMLCSS.config.styles[".MathJax_Hover_Arrow"]; + * arrow.width = "25px"; arrow.height = "18px"; + * arrow.top = "-11px"; arrow.right = "-15px"; + * } + */ // // Handle browser-specific setup