From 2f9a6c8690f56b7c1db6c0179ccebc5151e67a07 Mon Sep 17 00:00:00 2001 From: wareya Date: Tue, 23 Jan 2018 14:03:54 -0500 Subject: [PATCH] Positioning fixes/changes for very wide pages with horizontal scrolling --- options.js | 4 +-- texthook.js | 79 +++++++++++++++++++++++++++++++++++------------------ 2 files changed, 54 insertions(+), 29 deletions(-) diff --git a/options.js b/options.js index 6cd77af..0749c7b 100644 --- a/options.js +++ b/options.js @@ -117,9 +117,9 @@ function defaults() settings.push({ id: "corner", kind: "combobox", - options: ["Top left", "Top right", "Bottom left", "Bottom right"], + options: ["Top left", "Top right", "Bottom left", "Bottom right", "Top auto"], default: 0, - label: "Popup positioning corner (note: order of definitions is reversed, but \"original text\" still shows up at top of each lookup's definitions, not bottom)" + label: "Popup positioning corner (note: for \"bottom\" corners, order of definitions is reversed, but \"original text\" still shows up at top of each lookup's definitions, not bottom) (\"top auto\" feels very bad unless \"position as though fixed width\" is also enabled)" }); // theme diff --git a/texthook.js b/texthook.js index fe57438..4e5fd45 100644 --- a/texthook.js +++ b/texthook.js @@ -88,10 +88,15 @@ function display_div (middle, x, y, time) let styletext = ""; if(settings.fixedwidth) - styletext += "width: " + Math.round(Number(settings.width)) + "px; " - else + { styletext += "max-width: " + Math.round(Number(settings.width)) + "px; " - styletext += "min-width: 150px; " + styletext += "min-width: " + Math.round(Number(settings.width)) + "px; " + } + else + { + styletext += "max-width: " + Math.round(Number(settings.width)) + "px; " + styletext += "min-width: 150px; " + } styletext += "position: absolute; top: 0; left: 0; "; if(settings.superborder) @@ -128,61 +133,81 @@ function display_div (middle, x, y, time) if(!settings.fixedwidthpositioning) mywidth = outer.offsetWidth*settings.scale; + let corner = settings.corner; + let buffer = 25; - let pretend_doc_width = Math.max(mywidth, mydoc.defaultView.innerWidth); - if(settings.corner == 1 || settings.corner == 3) + if(corner != 1 && corner != 3) { + let pretend_doc_width = Math.max(mywidth, mydoc.defaultView.innerWidth) + mydoc.defaultView.scrollX; + if(newx + mywidth > pretend_doc_width-buffer) + { + if(corner == 4)// && Math.abs(newx + mywidth - pretend_doc_width) > mywidth/2) + corner = 1; + else + { + newx -= (newx + mywidth - pretend_doc_width); + newx -= buffer; + if(newx < mydoc.defaultView.scrollX) + newx = mydoc.defaultView.scrollX; + } + } + } + if(corner == 1 || corner == 3) // don't use else here, we might get here because of "corner = 1" a few lines above + { + let pretend_doc_width = Math.max(mywidth, mydoc.defaultView.innerWidth) - mydoc.defaultView.scrollX; newx = mydoc.defaultView.innerWidth - newx; if(newx + mywidth > pretend_doc_width-buffer) { - newx -= (newx + mywidth - pretend_doc_width); - newx -= buffer; - if(newx > mydoc.defaultView.innerWidth) - newx = mydoc.defaultView.innerWidth; + newx += (newx + mywidth - pretend_doc_width); + newx += buffer; + // this is wrong but it can't be fixed without invoking cthulhu + if(newx > mydoc.defaultView.innerWidth-mydoc.defaultView.scrollX-mywidth-buffer+5) + newx = mydoc.defaultView.innerWidth-mydoc.defaultView.scrollX-mywidth-buffer+5; } } - else - { - if(newx + mywidth > pretend_doc_width-buffer) - { - newx -= (newx + mywidth - pretend_doc_width); - newx -= buffer; - if(newx < 0) - newx = 0; - } - } - if(settings.corner == 2 || settings.corner == 3) - { - newy = mydoc.defaultView.innerHeight - newy; - } - if(settings.corner == 3) + if(corner == 2 || corner == 3) + { + newy = mydoc.defaultView.innerHeight - newy; + if(newy < 0) + newy = 0; + } + + if(corner == 3) { outer.style.top = "unset"; outer.style.bottom = (newy+settings.yoffset)+"px"; outer.style.right = (newx-settings.xoffset)+"px"; outer.style.left = "unset"; + outer.style.marginRight = "unset"; + outer.style.marginLeft = "unset"; } - else if(settings.corner == 2) + else if(corner == 2) { outer.style.top = "unset"; outer.style.bottom = (newy+settings.yoffset)+"px"; outer.style.right = "unset"; outer.style.left = (newx+settings.xoffset)+"px"; + outer.style.marginRight = "-10000000000000000px"; // fixes an absolute positioning """feature""" on very wide pages (e.g. pages of vertical text) + outer.style.marginLeft = "unset"; } - else if(settings.corner == 1) + else if(corner == 1) { outer.style.top = (newy+settings.yoffset)+"px"; outer.style.bottom = "unset"; outer.style.right = (newx-settings.xoffset)+"px"; outer.style.left = "unset"; + outer.style.marginRight = "unset"; + outer.style.marginLeft = "unset"; } - else // 0 etc + else // 0 or invalid { outer.style.top = (newy+settings.yoffset)+"px"; outer.style.bottom = "unset"; outer.style.right = "unset"; outer.style.left = (newx+settings.xoffset)+"px"; + outer.style.marginRight = "-10000000000000000px"; // fixes an absolute positioning """feature""" on very wide pages (e.g. pages of vertical text) + outer.style.marginLeft = "unset"; } }