suzanne.soy/scribble-mathjax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make zoom box fit inside closest parent with overflow clipping (if any). Also make the clicable background fit the area properly (it is restricted to that parent element).

Browse Source
This commit is contained in:
Davide P. Cervone 2014-04-10 06:40:47 -04:00
parent a47b1fa009
commit 26775b9520
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
unpacked/extensions/MathZoom.js
View File

@ -137,23 +137,25 @@
// //
// Create the DOM elements for the zoom box // Create the DOM elements for the zoom box
// //
var Mw = Math.floor(.85*document.body.clientWidth), var container = this.findContainer(math);
Mh = Math.floor(.85*Math.max(document.body.clientHeight,document.documentElement.clientHeight)); var Mw = Math.floor(.85*container.clientWidth),
Mh = Math.max(document.body.clientHeight,document.documentElement.clientHeight);
if (this.getOverflow(container) !== "visible") {Mh = Math.min(container.clientHeight,Mh)}
Mh = Math.floor(.85*Mh);
var div = HTML.Element( var div = HTML.Element(
"span",{id:"MathJax_ZoomFrame"},[ "span",{id:"MathJax_ZoomFrame"},[
["span",{id:"MathJax_ZoomOverlay", onmousedown:this.Remove}], ["span",{id:"MathJax_ZoomOverlay", onmousedown:this.Remove}],
["span",{ ["span",{
id:"MathJax_Zoom", onclick:this.Remove, id:"MathJax_Zoom", onclick:this.Remove,
style:{ style:{visibility:"hidden", fontSize:this.settings.zscale}
visibility:"hidden", fontSize:this.settings.zscale,
"max-width":Mw+"px", "max-height":Mh+"px"
}
},[["span",{style:{display:"inline-block", "white-space":"nowrap"}}]] },[["span",{style:{display:"inline-block", "white-space":"nowrap"}}]]
]] ]]
); );
var zoom = div.lastChild, span = zoom.firstChild, overlay = div.firstChild; var zoom = div.lastChild, span = zoom.firstChild, overlay = div.firstChild;
math.parentNode.insertBefore(div,math); math.parentNode.insertBefore(math,div); // put div after math math.parentNode.insertBefore(div,math); math.parentNode.insertBefore(math,div); // put div after math
if (span.addEventListener) {span.addEventListener("mousedown",this.Remove,true)} if (span.addEventListener) {span.addEventListener("mousedown",this.Remove,true)}
var eW = zoom.offsetWidth; Mw -= eW; Mh -= eW;
zoom.style.maxWidth = Mw+"px"; zoom.style.maxHeight = Mh+"px";
if (this.msieTrapEventBug) { if (this.msieTrapEventBug) {
var trap = HTML.Element("span",{id:"MathJax_ZoomEventTrap", onmousedown:this.Remove}); var trap = HTML.Element("span",{id:"MathJax_ZoomEventTrap", onmousedown:this.Remove});
@ -187,7 +189,7 @@
if (zoom.offsetWidth > Mw) {zoom.style.width = Mw+"px"; zoom.style.height = (bbox.zH+this.scrollSize)+"px"} if (zoom.offsetWidth > Mw) {zoom.style.width = Mw+"px"; zoom.style.height = (bbox.zH+this.scrollSize)+"px"}
} }
if (this.operaPositionBug) {zoom.style.width = Math.min(Mw,bbox.zW)+"px"} // Opera gets width as 0? if (this.operaPositionBug) {zoom.style.width = Math.min(Mw,bbox.zW)+"px"} // Opera gets width as 0?
if (zoom.offsetWidth && zoom.offsetWidth < Mw && zoom.offsetHeight < Mh) if (zoom.offsetWidth > eW && zoom.offsetWidth < Mw && zoom.offsetHeight < Mh)
{zoom.style.overflow = "visible"} // don't show scroll bars if we don't need to {zoom.style.overflow = "visible"} // don't show scroll bars if we don't need to
this.Position(zoom,bbox); this.Position(zoom,bbox);
if (this.msieTrapEventBug) { if (this.msieTrapEventBug) {
@ -223,7 +225,7 @@
var XY = this.Resize(), x = XY.x, y = XY.y, W = bbox.mW; var XY = this.Resize(), x = XY.x, y = XY.y, W = bbox.mW;
var dx = -W-Math.floor((zoom.offsetWidth-W)/2), dy = bbox.Y; var dx = -W-Math.floor((zoom.offsetWidth-W)/2), dy = bbox.Y;
zoom.style.left = Math.max(dx,10-x)+"px"; zoom.style.top = Math.max(dy,10-y)+"px"; zoom.style.left = Math.max(dx,10-x)+"px"; zoom.style.top = Math.max(dy,10-y)+"px";
if (!ZOOM.msiePositionBug) {ZOOM.SetWH()} // refigure overlay width/height this.Resize(); // refigure overlay position and size
}, },
// //
@ -233,13 +235,8 @@
if (ZOOM.onresize) {ZOOM.onresize(event)} if (ZOOM.onresize) {ZOOM.onresize(event)}
var div = document.getElementById("MathJax_ZoomFrame"), var div = document.getElementById("MathJax_ZoomFrame"),
overlay = document.getElementById("MathJax_ZoomOverlay"); overlay = document.getElementById("MathJax_ZoomOverlay");
var xy = ZOOM.getXY(div); var xy = ZOOM.getXY(div), obj = ZOOM.findContainer(div);
var obj = div.parentNode, overflow = ZOOM.getOverflow(obj); if (ZOOM.getOverflow(obj) !== "visible") {
while (obj.parentNode && obj !== document.body && overflow === "visible") {
obj = obj.parentNode
overflow = ZOOM.getOverflow(obj);
}
if (overflow !== "visible") {
overlay.scroll_parent = obj; // Save this for future reference. overlay.scroll_parent = obj; // Save this for future reference.
var XY = ZOOM.getXY(obj); // Remove container position var XY = ZOOM.getXY(obj); // Remove container position
xy.x -= XY.x; xy.y -= XY.y; xy.x -= XY.x; xy.y -= XY.y;
@ -247,7 +244,7 @@
xy.x -= XY.x; xy.y -= XY.y; xy.x -= XY.x; xy.y -= XY.y;
} }
overlay.style.left = (-xy.x)+"px"; overlay.style.top = (-xy.y)+"px"; overlay.style.left = (-xy.x)+"px"; overlay.style.top = (-xy.y)+"px";
if (ZOOM.msiePositionBug) {setTimeout(ZOOM.SetWH,0)} else {ZOOM.SetWH()} setTimeout(ZOOM.SetWH,0);
return xy; return xy;
}, },
SetWH: function () { SetWH: function () {
@ -257,6 +254,12 @@
overlay.style.width = doc.scrollWidth + "px"; overlay.style.width = doc.scrollWidth + "px";
overlay.style.height = Math.max(doc.clientHeight,doc.scrollHeight) + "px"; overlay.style.height = Math.max(doc.clientHeight,doc.scrollHeight) + "px";
}, },
findContainer: function (obj) {
var obj = obj.parentNode;
while (obj.parentNode && obj !== document.body && ZOOM.getOverflow(obj) === "visible")
{obj = obj.parentNode}
return obj;
},
// //
// Look up CSS properties (use getComputeStyle if available, or currentStyle if not) // Look up CSS properties (use getComputeStyle if available, or currentStyle if not)
// //