Skip to content

Commit

Permalink
More cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
dlaliberte committed Oct 10, 2023
1 parent bc5bcb0 commit 3c9964d
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 71 deletions.
40 changes: 9 additions & 31 deletions bikeshed/dfnpanels/dfnpanels.js
Original file line number Diff line number Diff line change
Expand Up @@ -221,10 +221,6 @@
document.addEventListener("DOMContentLoaded", ()=>{
genAllDfnPanels();

// Add popup behavior to all dfns to show the corresponding dfn-panel.
var dfns = queryAll('.dfn-paneled');
for(let dfn of dfns) { ; }

document.body.addEventListener("click", (e) => {
// If not handled already, just hide all dfn panels.
hideAllDfnPanels();
Expand Down Expand Up @@ -334,23 +330,12 @@
})
}

/**
Calculates the root-level fixed position for an arbitrarily nested element.
This simply climbs up the possitioned ancestor tree accumulting
possibly scrolled offsets until the document body is reached.
Maybe use el.getBoundingClientRect()?
Args:
el: The element whose root-level fixed position is to be calculated.
Returns:
{
top: The distance from the top of the viewport.
left: The distance from the left of the viewport.
}
*/
// Calculates the root-level fixed position for an arbitrarily nested element.
// This simply climbs up the possitioned ancestor tree accumulting
// possibly scrolled offsets until the document body is reached.
// Returns: { top: <from the viewport>, left: <from the viewport> }
// Maybe use el.getBoundingClientRect()?
function getRootLevelFixedPosition(el) {

let xPos = 0;
let yPos = 0;

Expand All @@ -374,31 +359,24 @@
};
}

function scrolledIntoView(element) {
function notScrolledIntoView(element) {
const rect = element.getBoundingClientRect();
return (
rect.bottom > window.innerHeight ||
rect.top < 0
rect.top > window.innerHeight ||
rect.bottom < 0
);
}

function scrollAndHighlightTarget(event) {
let hash = event.target.hash;
if (hash) {
// Remove leading '#' character.
hash = decodeURIComponent(hash.substring(1));
const dest = document.getElementById(hash);
console.info('dest', dest);
if (dest) {
// If event.target is scrolled into view, prevent default scroll.
if (!scrolledIntoView(dest)) {
if (notScrolledIntoView(dest)) {
event.preventDefault();
} else {
// dest.scrollIntoView({
// behavior: "smooth",
// block: "start",
// inline: "nearest"
// });
}
// Always highlight destination.
dest.classList.add('highlighted');
Expand Down
57 changes: 17 additions & 40 deletions tests/github/w3c/csswg-drafts/css-align-3/Overview.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<title>CSS Box Alignment Module Level 3</title>
<meta content="ED" name="w3c-status">
<link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet">
<meta content="Bikeshed version f63b3e0b3, updated Sat Oct 7 15:56:37 2023 +0000" name="generator">
<meta content="Bikeshed version bc5bcb065, updated Tue Oct 10 21:18:40 2023 +0000" name="generator">
<link href="https://www.w3.org/TR/css-align-3/" rel="canonical">
<link href="https://drafts.csswg.org/csslogo.ico" rel="icon">
<meta content="f63b3e0b3bd37734cef8c34d40803f02b350899b" name="document-revision">
<meta content="bc5bcb0658ce6d635593afe98586884c20635c3c" name="document-revision">
<style>
.issue th:first-child { text-align: left !important; }
[rowspan] > img { float: right; }
Expand Down Expand Up @@ -3939,7 +3939,7 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
},
mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"},
`Info about the '${dfnText}' ${external?"external":""} reference.`),
mk.a({href:url, class: 'dfn-link'}, url),
mk.a({href:url, class:"dfn-link"}, url),
mk.b({}, "Referenced in:"),
mk.ul({},
...refSections.map(section=>
Expand Down Expand Up @@ -3967,21 +3967,17 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
const dfn = document.getElementById(dfnID);
if(!dfn) {
console.log(`Can't find dfn#${dfnID}.`, panelData);
} else {
const panel = genDfnPanel({ ...panelData, dfn });
append(document.body, panel);
insertDfnPopupAction(dfn, panel)
continue;
}
const panel = genDfnPanel({ ...panelData, dfn });
append(document.body, panel);
insertDfnPopupAction(dfn, panel)
}
}

document.addEventListener("DOMContentLoaded", ()=>{
genAllDfnPanels();

// Add popup behavior to all dfns to show the corresponding dfn-panel.
var dfns = queryAll('.dfn-paneled');
for(let dfn of dfns) { ; }

document.body.addEventListener("click", (e) => {
// If not handled already, just hide all dfn panels.
hideAllDfnPanels();
Expand Down Expand Up @@ -4016,9 +4012,8 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
dfnPanel.style.right = "0px";
}

// Now determine its root-level fixed position.
// Now determine its root-level fixed position, and move it there.
const fixedPos = getRootLevelFixedPosition(dfnPanel);
// Now move panel to the document level at fixed position.
document.body.appendChild(dfnPanel);
dfnPanel.style.position = "fixed";
dfnPanel.style.top = fixedPos.top + "px";
Expand Down Expand Up @@ -4092,23 +4087,12 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
})
}

/**
Calculates the root-level fixed position for an arbitrarily nested element.
This simply climbs up the possitioned ancestor tree accumulting
possibly scrolled offsets until the document body is reached.
Maybe use el.getBoundingClientRect()?

Args:
el: The element whose root-level fixed position is to be calculated.

Returns:
{
top: The distance from the top of the viewport.
left: The distance from the left of the viewport.
}
*/
// Calculates the root-level fixed position for an arbitrarily nested element.
// This simply climbs up the possitioned ancestor tree accumulting
// possibly scrolled offsets until the document body is reached.
// Returns: { top: <from the viewport>, left: <from the viewport> }
// Maybe use el.getBoundingClientRect()?
function getRootLevelFixedPosition(el) {

let xPos = 0;
let yPos = 0;

Expand All @@ -4132,31 +4116,24 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
};
}

function scrolledIntoView(element) {
function notScrolledIntoView(element) {
const rect = element.getBoundingClientRect();
return (
rect.bottom > window.innerHeight ||
rect.top < 0
rect.top > window.innerHeight ||
rect.bottom < 0
);
}

function scrollAndHighlightTarget(event) {
let hash = event.target.hash;
if (hash) {
// Remove leading '#' character.
hash = decodeURIComponent(hash.substring(1));
const dest = document.getElementById(hash);
console.info('dest', dest);
if (dest) {
// If event.target is scrolled into view, prevent default scroll.
if (!scrolledIntoView(dest)) {
if (notScrolledIntoView(dest)) {
event.preventDefault();
} else {
// dest.scrollIntoView({
// behavior: "smooth",
// block: "start",
// inline: "nearest"
// });
}
// Always highlight destination.
dest.classList.add('highlighted');
Expand Down

0 comments on commit 3c9964d

Please sign in to comment.