diff --git a/js/menu.js b/js/menu.js index adffa64c..30cf281e 100644 --- a/js/menu.js +++ b/js/menu.js @@ -875,6 +875,19 @@ let referencePane = { }, }; +function getAbsoluteOffset(el, offsetName) { + // "offsetTop" => "borderTopWidth", "offsetLeft" => "borderLeftWidth" + const borderWidthName = offsetName.replace(/offset(.*)/, 'border$1Width'); + let d = el[offsetName]; + for (let parent = el.offsetParent; parent; parent = parent.offsetParent) { + const parentStyle = getComputedStyle(parent); + const parentBorderWidth = parentStyle[borderWidthName]; + const parentBorderPx = parseFloat(parentBorderWidth); + d += (parentBorderPx || 0) + parent[offsetName]; + } + return d; +} + let Toolbox = { init() { this.$outer = document.createElement('div'); @@ -914,8 +927,8 @@ let Toolbox = { this.entry = entry; this.$pinLink.textContent = menu._pinnedIds[entry.id] ? 'Unpin' : 'Pin'; this.$outer.classList.add('active'); - this.top = el.offsetTop - this.$outer.offsetHeight; - this.left = el.offsetLeft - 10; + this.top = getAbsoluteOffset(el, 'offsetTop') - this.$outer.offsetHeight; + this.left = getAbsoluteOffset(el, 'offsetLeft') - 10; this.$outer.setAttribute('style', 'left: ' + this.left + 'px; top: ' + this.top + 'px'); this.updatePermalink(); this.updateReferences();