Skip to content

Commit

Permalink
Generalize toolbox positioning to support relative-offset context ele…
Browse files Browse the repository at this point in the history
…ments
  • Loading branch information
gibson042 committed Sep 1, 2023
1 parent b9e720f commit 0233e00
Showing 1 changed file with 15 additions and 2 deletions.
17 changes: 15 additions & 2 deletions js/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit 0233e00

Please sign in to comment.