commit ea697f335a26405926f84988bcf5cf387af4bfe3
parent 8484e903458addfe34261b102e0b354faeb0dc98
Author: Davide P. Cervone <dpvc@union.edu>
Date: Thu, 9 Apr 2015 14:58:24 -0400
Make text-based close boxes appear closer to the original versions, and remove data URI for image in MathEvents. One motivatino for the change is the mobile menu close icon needs a background, which was missing in the previous version.
Diffstat:
3 files changed, 111 insertions(+), 50 deletions(-)
diff --git a/unpacked/extensions/HelpDialog.js b/unpacked/extensions/HelpDialog.js
@@ -59,13 +59,34 @@
"max-height":"20em", "max-width":"30em", "background-color":"#EEEEEE"
},
- ".MathJax_Menu_Close": {
- position:"absolute",
- width:"21px", height:"21px",
- top:".2em", right:".2em",
- cursor:"pointer",
- "font-weight": "bold",
- "font-size": "1.33em"
+ "#MathJax_HelpClose": {
+ position:"absolute", top:".2em", right:".2em",
+ cursor:"pointer",
+ display:"inline-block",
+ border:"2px solid #AAA",
+ "border-radius":"18px",
+ "-webkit-border-radius": "18px", // Safari and Chrome
+ "-moz-border-radius": "18px", // Firefox
+ "-khtml-border-radius": "18px", // Konqueror
+ "font-family":"'Courier New',Courier",
+ "font-size":"24px",
+ color:"#F0F0F0"
+ },
+ "#MathJax_HelpClose span": {
+ display:"block", "background-color":"#AAA", border:"1.5px solid",
+ "border-radius":"18px",
+ "-webkit-border-radius": "18px", // Safari and Chrome
+ "-moz-border-radius": "18px", // Firefox
+ "-khtml-border-radius": "18px", // Konqueror
+ "line-height":0,
+ padding:"8px 0 6px" // may need to be browser-specific
+ },
+ "#MathJax_HelpClose:hover": {
+ color:"white!important",
+ border:"2px solid #CCC!important"
+ },
+ "#MathJax_HelpClose:hover span": {
+ "background-color":"#CCC!important"
}
}
});
@@ -127,10 +148,8 @@
]
]],
["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]],
- ["span",{
- className: "MathJax_Menu_Close",
- onclick: HELP.Remove},
- ["\u00D7"]
+ ["span",{id: "MathJax_HelpClose", onclick: HELP.Remove},
+ [["span",{},["\u00D7"]]]
]
]));
LOCALE.setCSS(help);
diff --git a/unpacked/extensions/MathEvents.js b/unpacked/extensions/MathEvents.js
@@ -43,9 +43,8 @@
hcolor: "#83A" // haze color
},
button: {
- x: -4, y: -3, // menu button offsets
- wx: -2, // button offset for full-width equations
- src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA5CAMAAABJeiYSAAAAUVBMVEX////l5OTY19e2tbW3tbWVk5Owrq6cmpr5+Pj////X19fKycne3d3r6+vy8vKpp6fEwsLR0NCioaG5t7fl5OTT0tK9vLzY19eenJzt7e329vb9tHZmAAAABXRSTlMAQF+vr1FpKV4AAAEuSURBVHhe7dhrjsMgDARg0nRsyLvv7t7/oLtK1FCh3Thg/+wc4JNBExRwzlVH6HOs3G8OsMnBuQpWqVxtZtVuAS5dKE93WZDFegRdHtFqgzbtanm15V8WzWNSaeYNoneLUBoytT7WSJvJsaQvauDd1hikTLuts2jd7dbYQbD2D+Y5w0IrrDDHYr9B9ZldvW9YlGmh/5dqkGuRtPGyJfeixU5L7sWADEvoBRVZz7+oLxRZOAljCZZU2CsyLKGw52IL14Q6odwa05oqLDTJaaqx+DvZeIUFipR/KqykZBOUVizZALWFKTZeZ8VTsYOFRbHxagtNHEtt8RA8GVkAcQJ8/gunYmt6tzjow4sFNGqqwcviXkn1vFrgm1dI/jZTWO+1VB4sqS3v25bvAJbvEz/hAGybD4dbVwAAAABJRU5ErkJggg==" // button image
+ x: -6, y: -3, // menu button offsets
+ wx: -2 // button offset for full-width equations
},
fadeinInc: .2, // increment for fade-in
fadeoutInc: .05, // increment for fade-out
@@ -69,10 +68,33 @@
display: "inline-block", position:"absolute"
},
- ".MathJax_Hover_Arrow": {
+ ".MathJax_Menu_Button .MathJax_Hover_Arrow": {
position:"absolute",
- width:"15px", height:"11px",
- cursor:"pointer"
+ cursor:"pointer",
+ display:"inline-block",
+ border:"2px solid #AAA",
+ "border-radius":"4px",
+ "-webkit-border-radius": "4px", // Safari and Chrome
+ "-moz-border-radius": "4px", // Firefox
+ "-khtml-border-radius": "4px", // Konqueror
+ "font-family":"'Courier New',Courier",
+ "font-size":"9px",
+ color:"#F0F0F0"
+ },
+ ".MathJax_Menu_Button .MathJax_Hover_Arrow span": {
+ display:"block",
+ "background-color":"#AAA",
+ border:"1px solid",
+ "border-radius":"3px",
+ "line-height":0,
+ padding:"4px"
+ },
+ ".MathJax_Hover_Arrow:hover": {
+ color:"white!important",
+ border:"2px solid #CCC!important"
+ },
+ ".MathJax_Hover_Arrow:hover span": {
+ "background-color":"#CCC!important"
}
}
};
@@ -334,17 +356,17 @@
]]
);
var button = HTML.Element("span",{
- isMathJax: true, id:jax.hover.id+"Menu",
+ isMathJax: true, id:jax.hover.id+"Menu", className:"MathJax_Menu_Button",
style:{display:"inline-block", "z-index": 1, width:0, height:0, position:"relative"}
- },[["img",{
+ },[["span",{
className: "MathJax_Hover_Arrow", isMathJax: true, math: math,
- src: CONFIG.button.src, onclick: this.HoverMenu, jax:JAX.id,
+ onclick: this.HoverMenu, jax:JAX.id,
style: {
left:this.Px(bbox.w+dx+dd+(bbox.x||0)+CONFIG.button.x),
top:this.Px(-bbox.h-dy-dd-(bbox.y||0)-CONFIG.button.y),
opacity:0, filter:"alpha(opacity=0)"
}
- }]]
+ },[["span",{isMathJax:true},"\u25BC"]]]]
);
if (bbox.width) {
frame.style.width = button.style.width = bbox.width;
@@ -502,14 +524,16 @@
};
- //
- // Mobile screens are small, so use larger version of arrow
- //
- if (HUB.Browser.isMobile) {
- var arrow = CONFIG.styles[".MathJax_Hover_Arrow"];
- arrow.width = "25px"; arrow.height = "18px";
- CONFIG.button.x = -6;
- }
+ /*
+ * //
+ * // Mobile screens are small, so use larger version of arrow
+ * //
+ * if (HUB.Browser.isMobile) {
+ * var arrow = CONFIG.styles[".MathJax_Hover_Arrow"];
+ * arrow.width = "25px"; arrow.height = "18px";
+ * CONFIG.button.x = -6;
+ * }
+ */
//
// Set up browser-specific values
diff --git a/unpacked/extensions/MathMenu.js b/unpacked/extensions/MathMenu.js
@@ -158,21 +158,43 @@
color: (isPC ? "HighlightText" : "white")
},
- ".MathJax_Menu_Close": {
- position:"absolute",
- width:"21px", height:"21px",
- top:".2em", right:".2em",
- cursor:"pointer",
- "font-weight": "bold",
- "font-size": "1.33em"
+ "#MathJax_AboutClose": {
+ top:".2em", right:".2em"
},
- ".MathJax_Menu_Mobile_Close": {
- position:"absolute",
- width:"1em", height:"1em",
- top:"0", left:"0",
- "font-weight": "bold",
- "font-size": "1.33em"
+ ".MathJax_Menu .MathJax_MenuClose": {
+ top:"-10px", left:"-10px"
+ },
+
+ ".MathJax_MenuClose": {
+ position:"absolute",
+ cursor:"pointer",
+ display:"inline-block",
+ border:"2px solid #AAA",
+ "border-radius":"18px",
+ "-webkit-border-radius": "18px", // Safari and Chrome
+ "-moz-border-radius": "18px", // Firefox
+ "-khtml-border-radius": "18px", // Konqueror
+ "font-family":"'Courier New',Courier",
+ "font-size":"24px",
+ color:"#F0F0F0"
+ },
+ ".MathJax_MenuClose span": {
+ display:"block", "background-color":"#AAA", border:"1.5px solid",
+ "border-radius":"18px",
+ "-webkit-border-radius": "18px", // Safari and Chrome
+ "-moz-border-radius": "18px", // Firefox
+ "-khtml-border-radius": "18px", // Konqueror
+ "line-height":0,
+ padding:"8px 0 6px" // may need to be browser-specific
+ },
+ ".MathJax_MenuClose:hover": {
+ color:"white!important",
+ border:"2px solid #CCC!important"
+ },
+ ".MathJax_MenuClose:hover span": {
+ "background-color":"#CCC!important"
}
+
}
});
@@ -219,10 +241,9 @@
for (var i = 0, m = this.items.length; i < m; i++) {this.items[i].Create(menu)}
if (MENU.isMobile) {
HTML.addElement(menu,"span",{
- className: "MathJax_Menu_Mobile_Close", menu: parent,
+ className: "MathJax_MenuClose", menu: parent,
ontouchstart: MENU.Close, ontouchend: FALSE, onmousedown: MENU.Close, onmouseup: FALSE
- },"\u00D7"
- );
+ },[["span",{},"\u00D7"]]);
}
div.appendChild(menu);
@@ -668,11 +689,8 @@
"background-color":"#E4E4E4", padding:".4em .6em", border:"1px inset"
}},jax],["br"],["br"],
["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]],
- ["span",{
- className: "MathJax_Menu_Close",
- onclick: MENU.About.Remove},
- "\u00D7"
- ]
+ ["span",{className:"MathJax_MenuClose",id:"MathJax_AboutClose",onclick:MENU.About.Remove},
+ [["span",{},"\u00D7"]]]
]);
MathJax.Localization.setCSS(about);
var doc = (document.documentElement||{});
