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

unpacked/extensions/MathZoom.js

@@ -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}
+ *       MSIEmouseover: function (event,math,span) {
-        return !HOVER.Mouseover(event,math);
+ *         if (this.settings.zoom !== "Hover") {return false}
-//        ZOOM.Timer(event,math); return true;
+ *         return !HOVER.Mouseover(event,math);
-      },
+ * //        ZOOM.Timer(event,math); return true;
-      MSIEmouseout: function (event,math,span) {
+ *       },
-        if (this.settings.zoom !== "Hover") {return false}
+ *       MSIEmouseout: function (event,math,span) {
-        return !HOVER.Mouseout(event,math);
+ *         if (this.settings.zoom !== "Hover") {return false}
-//        ZOOM.ClearTimer(); return true;
+ *         return !HOVER.Mouseout(event,math);
-      },
+ * //        ZOOM.ClearTimer(); return true;
-      MSIEmousemove: function (event,math,span) {
+ *       },
-        if (this.settings.zoom !== "Hover") {return false}
+ *       MSIEmousemove: function (event,math,span) {
-        return !HOVER.Mousemove(event,math);
+ *         if (this.settings.zoom !== "Hover") {return false}
-//        ZOOM.Timer(event,math); return true;
+ *         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;

unpacked/extensions/UIevents.js

@@ -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;
+      if (EXTENSION.MathZoom && EXTENSION.MathZoom.Hover({},math)) return;
-      var JAX = jax.outputJax, span = JAX.getHoverSpan(jax), bbox = JAX.getHoverBBox(jax,span);
+      var JAX = jax.outputJax,
-      var dx = .25, dy = .33, dd = .1;  // frame size
+          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),
+            top:bbox.Units(-bbox.h-dy-dd-(bbox.y||0)), left:bbox.Units(-dx-dd+(bbox.x||0)),
-            width:this.Em(bbox.w+2*dx), height:this.Em(bbox.h+bbox.d+2*dy),
+            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");
     }
   });
   

unpacked/jax/output/HTML-CSS/jax.js

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

unpacked/jax/output/NativeMML/config.js

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

unpacked/jax/output/NativeMML/jax.js

@@ -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;
+      var span = HTML.Element(type,{
-      span.className = "MathJax_MathML"; span.style.fontSize = this.config.scale+"%";
+        className: "MathJax_MathML", style: {"font-size": this.config.scale+"%"}
-      if (isMSIE && this.config.showMathMenuMSIE) {
+      },[["span",{
-        container = HTML.addElement(span,"span",{
+          className:"MathJax_MathContainer", isMathJax: true, jaxID: "NativeMML",
-          className:"MathJax_MathContainer",
+          style:{position:"relative", display:"inline-block", "white-space":"nowrap"}
-          style:{display:"inline-block",position:"relative"}
+        }, [["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);
+      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";
+        container.oncontextmenu = EVENT.Menu;
-        math.oncontextmenu = EVENT.Menu;
+        container.onmouseover   = EVENT.Mouseover;
-        math.onmouseover   = EVENT.Mouseover;
+        container.onmouseout    = EVENT.Mouseout;
-        math.onmousout     = EVENT.Mouseout;
+        container.onmousedown   = EVENT.Mousedown;
-        math.onmousedown   = EVENT.Mousedown;
+        container.onclick       = EVENT.Click;
-        math.onclick       = EVENT.Click;
+        container.ondblclick    = EVENT.DblClick;
-        math.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: (
+      NativeMMLelement: function (type) {
-	isMSIE ?
+        var math = (isMSIE ? document.createElement("mjx:"+type) :
-	  function (type) {return document.createElement("mjx:"+type)} :
+	                     document.createElementNS(nMML.MMLnamespace,type));
-	  function (type) {return 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) {
 	  //
@@ -472,6 +517,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")
       {AJAX.Require("[MathJax]/extensions/MathZoom.js")}