Make menu button float on top of math, and make delays and other values into paramaters that can be changed (needed for menu arrow positioning

unpacked/MathJax.js

@@ -1203,7 +1203,6 @@ MathJax.Hub = {
       ALT: false,          //    require Alt or Option?
       CMD: false,          //    require CMD?
       Shift: false,        //    require Shift?
-      hover: 500,          //  length of time mouse must be still to count as hover
       discoverable: true,  //  make math menu discoverable on hover?
       zscale: "200%",      //  the scaling factor for MathZoom
       renderer: "",        //  set when Jax are loaded

unpacked/extensions/UIevents.js

@@ -49,7 +49,6 @@
 
       ".MathJax_Hover_Arrow": {
         position:"absolute",
-        top:"1px", right:"-11px",
         width:"15px", height:"11px",
         cursor:"pointer"
       }
@@ -173,6 +172,18 @@
   //  Handle hover "discoverability"
   //
   var HOVER = UI.Hover = {
+    delay: 500,                                      // time required to be considered a hover
+    frame: {x: 3.5, y: 5, d: 1},                     // frame padding and thickness
+    button: {
+      x: -4, y: -3, wx: -2,                                   // menu button offsets
+      src: AJAX.fileURL(OUTPUT.imageDir+"/MenuArrow-15.png")  // button image
+    },
+    fadeinInc: .2,           // increment for fade-in
+    fadeoutInc: .05,         // increment for fade-out
+    fadeinStart: 50,         // delay before fadein after mouseover
+    fadeoutStart: 400,       // delay before fadeout after mouseout
+    fadeoutDelay: 15*1000,   // delay before automatic fade-out
+    
     //
     //  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
@@ -223,7 +234,7 @@
     //
     HoverTimer: function (jax,math) {
       this.ClearHoverTimer();
-      this.hoverTimer = setTimeout(CALLBACK(["Hover",this,jax,math]),SETTINGS.hover);
+      this.hoverTimer = setTimeout(CALLBACK(["Hover",this,jax,math]),HOVER.delay);
     },
     ClearHoverTimer: function () {
       if (this.hoverTimer) {clearTimeout(this.hoverTimer); delete this.hoverTimer}
@@ -244,7 +255,7 @@
           span = JAX.getHoverSpan(jax,math),
           bbox = JAX.getHoverBBox(jax,span,math),
           show = (JAX.config.showMathMenu != null ? JAX : HUB).config.showMathMenu;
-      var dx = 3.5, dy = 5, dd = 1;  // frame size
+      var dx = this.frame.x, dy = this.frame.y, dd = this.frame.d;  // frame size
       if (UI.msieBorderWidthBug) {dd = 0}
       jax.hover = {opacity:0, id: jax.inputID+"-Hover"};
       //
@@ -260,46 +271,53 @@
             top:this.Px(-bbox.h-dy-dd-(bbox.y||0)), left:this.Px(-dx-dd+(bbox.x||0)),
             width:this.Px(bbox.w+2*dx), height:this.Px(bbox.h+bbox.d+2*dy),
             opacity:0, filter:"alpha(opacity=0)"
-          }},[[
+          }}
-           "img",{
-             className: "MathJax_Hover_Arrow", isMathJax: true, math: math,
-             src: AJAX.fileURL(OUTPUT.imageDir+"/MenuArrow-15.png"),
-             onclick: this.HoverMenu, jax:JAX.id
-           }
-          ]]
         ]]
       );
-      if (UI.msieZIndexBug) {frame.style.zIndex = 1}
+      var button = HTML.Element("span",{
+         isMathJax: true, id:jax.hover.id+"Menu",
+         style:{display:"inline-block", "z-index": 1, width:0, height:0, position:"relative"}
+        },[["img",{
+            className: "MathJax_Hover_Arrow", isMathJax: true, math: math,
+            src: this.button.src, onclick: this.HoverMenu, jax:JAX.id,
+            style: {
+              left:this.Px(bbox.w+dx+dd+(bbox.x||0)+this.button.x),
+              top:this.Px(-bbox.h-dy-dd-(bbox.y||0)-this.button.y),
+              opacity:0, filter:"alpha(opacity=0)"
+            }
+          }]]
+      );
       if (bbox.width) {
-        frame.style.width = bbox.width;
+        frame.style.width = button.style.width = bbox.width;
-        frame.style.marginRight = "-"+bbox.width;
+        frame.style.marginRight = button.style.marginRight = "-"+bbox.width;
         frame.firstChild.style.width = bbox.width;
-        frame.firstChild.firstChild.style.right = "-5px";
+        button.firstChild.style.left = "";
+        button.firstChild.style.right = this.Px(this.button.wx);
       }
-      if (!show) {frame.firstChild.removeChild(frame.firstChild.firstChild)}
       //
-      //  Add the frame
+      //  Add the frame and button
       //
       span.parentNode.insertBefore(frame,span);
+      if (show) {span.parentNode.insertBefore(button,span)}
       if (span.style) {span.style.position = "relative"} // so math is on top of hover frame
       //
       //  Start the hover fade-in
       //
-      this.ReHover(jax,.2);
+      this.ReHover(jax);
     },
     //
     //  Restart the hover fade in and fade-out timers
     //
     ReHover: function (jax) {
       if (jax.hover.remove) {clearTimeout(jax.hover.remove)}
-      jax.hover.remove = setTimeout(CALLBACK(["UnHover",this,jax]),15*1000);
+      jax.hover.remove = setTimeout(CALLBACK(["UnHover",this,jax]),this.fadeoutDelay);
-      this.HoverFadeTimer(jax,.2);
+      this.HoverFadeTimer(jax,this.fadeinInc);
     },
     //
     //  Start the fade-out
     //
     UnHover: function (jax) {
-      if (!jax.hover.nofade) {this.HoverFadeTimer(jax,-.05,400)}
+      if (!jax.hover.nofade) {this.HoverFadeTimer(jax,-this.fadeoutInc,this.fadeoutStart)}
     },
     //
     //  Handle the fade-in and fade-out
@@ -308,13 +326,18 @@
       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);
+      var frame = document.getElementById(jax.hover.id),
-      span.firstChild.style.opacity = jax.hover.opacity;
+          button = document.getElementById(jax.hover.id+"Menu");
-      span.firstChild.style.filter = "alpha(opacity="+Math.floor(100*jax.hover.opacity)+")";
+      frame.firstChild.style.opacity = jax.hover.opacity;
+      frame.firstChild.style.filter = "alpha(opacity="+Math.floor(100*jax.hover.opacity)+")";
+      if (button) {
+        button.firstChild.style.opacity = jax.hover.opacity;
+        button.firstChild.style.filter = frame.style.filter;
+      }
       if (jax.hover.opacity === 1) {return}
-      if (jax.hover.opacity) {this.HoverFadeTimer(jax,jax.hover.inc); return}
+      if (jax.hover.opacity > 0) {this.HoverFadeTimer(jax,jax.hover.inc); return}
-      var frame = document.getElementById(jax.hover.id);
       frame.parentNode.removeChild(frame);
+      if (button) {button.parentNode.removeChild(button)}
       if (jax.hover.remove) {clearTimeout(jax.hover.remove)}
       delete jax.hover;
     },
@@ -324,7 +347,7 @@
     HoverFadeTimer: function (jax,inc,delay) {
       jax.hover.inc = inc;
       if (!jax.hover.timer) {
-        jax.hover.timer = setTimeout(CALLBACK(["HoverFade",this,jax]),(delay||50));
+        jax.hover.timer = setTimeout(CALLBACK(["HoverFade",this,jax]),(delay||this.fadeinStart));
       }
     },
     
@@ -333,7 +356,7 @@
     //
     HoverMenu: function (event) {
       if (!event) {event = window.event}
-      OUTPUT[this.jax].ContextMenu(event,this.math,true);
+      return OUTPUT[this.jax].ContextMenu(event,this.math,true);
     },
     
     //
@@ -359,7 +382,7 @@
     //
     getImages: function () {
       var menu = new Image();
-      menu.src = AJAX.fileURL(OUTPUT.imageDir+"/MenuArrow-15.png");
+      menu.src = this.button.src;
     }
 
   };
@@ -419,10 +442,10 @@
   //
   //  Mobile screens are small, so use larger version of arrow
   //
-  var arrow = CONFIG.styles[".MathJax_Hover_Arrow"];
   if (HUB.Browser.isMobile) {
+    var arrow = CONFIG.styles[".MathJax_Hover_Arrow"];
     arrow.width = "25px"; arrow.height = "18px";
-    arrow.top = "-11px"; arrow.right = "-15px";
+    HOVER.button.x = -6;
   }
   
   //
@@ -432,9 +455,7 @@
     MSIE: function (browser) {
       var mode = (document.documentMode||0);
       UI.msieBorderWidthBug = (document.compatMode === "BackCompat");  // borders are inside offsetWidth/Height
-      UI.msieZIndexBug = (mode < 8);    // put hover frame on top of math
+      UI.msieEventBug = browser.isIE9;      // must get event from window even though event is passed
-      UI.msieEventBug = browser.isIE9;  // must get event from window even though event is passes
-      if (mode < 8 && !browser.isIE9) {arrow.top = arrow.right = "-1px"}  // IE < 8 clips to frame
       if (mode < 9) {EVENT.LEFTBUTTON = 1}  // IE < 9 has wrong event.button values
     },
     Safari: function (browser) {