Skip to content

Commit

Permalink
Revert "Fix Bug in Academy: Not remembering scroll position. (#822)"
Browse files Browse the repository at this point in the history 
This reverts commit bcd2bba.

Looks like there’s a bug when loading a URL with a fragment in it (the page does not automatically scroll down).
  • Loading branch information
@chasenlehara
chasenlehara committed Aug 16, 2024
1 parent bcd2bba commit 611cf2c
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 66 deletions.
85 changes: 46 additions & 39 deletions static/static.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,54 @@ window.PACKAGES = packages;
})();

(function () {
/*
The bit-docs-html-toc package will listen for scrolls to the element
specified by heading-container-selector, but with our CSS, this will
only work when the document scroll events are listened to.
*/
var highlight = debounce((function () {
document.querySelector("bit-toc").highlight();
var articleContainer = document.querySelector("article.main");

var elementToScroll = document.querySelector(".list-items");
var article = document.querySelector(".main");
var distance = (window.scrollY + article.offsetHeight / 2) / document.body.scrollHeight;
elementToScroll.scrollTop = (elementToScroll.scrollHeight * distance) - (elementToScroll.offsetHeight / 2);
}).bind(this), 1);
if (articleContainer && window.history) {
var windowLoaded = false;
var pageScrollTimer;

// Listen for scroll events
document.addEventListener("scroll", highlight);

// Update the highlighting immediately on page load
highlight();
// the page can change its layout up until load
window.addEventListener("load", function () {
windowLoaded = true;
});
// only wait 1 second at most
setTimeout(function () {
windowLoaded = true;
}, 1000);

function setArticleScroll() {
var articleScroll =
window.history.state && window.history.state.articleScroll;
if (articleScroll) {
articleContainer.scrollTop = articleScroll;
} else if (window.location.hash) {
//if there’s no state before and the URL has a hash eg. #collecting-data
//then let’s scroll to #collecting-data element
var element = document.querySelector(window.location.hash);
if (element) {
articleContainer.scrollTop = element.offsetTop - 60; // ~60px for the navigation height
}
}
}
setArticleScroll();

// If there’s a scroll before page load, we ignore saving the spot
// and instead try to force the original position
articleContainer.addEventListener("scroll", function () {
if (windowLoaded) {
clearTimeout(pageScrollTimer);
pageScrollTimer = setTimeout(function () {
window.history.replaceState(
{ articleScroll: articleContainer.scrollTop },
null,
window.location.href
);
}, 50);
} else {
setArticleScroll();
}
});
}
})();

(function () {
Expand Down Expand Up @@ -102,25 +131,3 @@ window.PACKAGES = packages;
}
}
})();

function debounce(func, wait) {
var timeout;

return function executedFunction() {
var context = this;
var args = arguments;

var later = function () {
timeout = null;
func.apply(context, args);
};

clearTimeout(timeout);

timeout = setTimeout(later, wait);

if (!timeout) {
func.apply(context, args);
}
};
}
117 changes: 90 additions & 27 deletions static/styles/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,9 @@ header, footer {
}

.content {
display: grid;
grid-template-areas: "sidebar" "toc" "main";
grid-template-columns: minmax(0, 1fr);

@media (min-width: 1024px) {
grid-template-areas: "sidebar main toc";
grid-template-columns: max-content minmax(0, 1fr) fit-content(25%);
}

flex-grow: 1;
overflow-x: hidden;
overflow-y: hidden;
// Navigation list will be flush with parent

.sidebar:extend(.container) {
Expand All @@ -102,6 +96,7 @@ header, footer {
}

.main:extend(.container) {
overflow-x: hidden; // fix to hide <pre> code overflow

// Collapse <p> for parameters, returns, and non-nested options
.parameters, .returns, div.options {
Expand All @@ -118,6 +113,69 @@ header, footer {
}
}

/*
Desktop:
┌──────────────────────────────────────────────────────┐
│ html ▶ height: 100% ├ Get window height.
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ body ▶ height: 100%, ┣━━ Use html/window height.
│ ┃ flex-direction: column ┣━━ Children are in column.
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
│ ┃ ┃ header ▶ flex: none ┣━━━━ Use content height.
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
│ ┃ ┃ .content ▶ flex: auto, ┣━━━━ Fill remaining height.
│ ┃ ┃ flex-direction: row ┃ ┃ │ Children are in a row.
│ ┃ ┃ ┏━━━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ │
│ ┃ ┃ ┃ .sidebar ▼ ┃ ┃ .main ▼ ┃ ┃ ┃ │
│ ┃ ┃ ┃ flex: none, ┃ ┃ flex: auto ┃ ┃ ┃ │
│ ┃ ┃ ┃ overflow-y: auto ┃ ┃ overflow-y: auto ┃ ┃ ┃ │
│ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ │
│ ┃ ┃ ┣ Use content width. ┃ ┣ Fill width. ┃ ┃ ┃ │
│ ┃ ┃ ┣ Fill height. ┃ ┣ Fill height. ┃ ┃ ┃ │
│ ┃ ┃ ┣ Scroll vertical. ┃ ┣ Scroll vertical. ┃ ┃ ┃ │
│ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━┛ ┗━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ │
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
│ ┃ ┃ footer ▶ flex: none ┣━━━━ Use content height.
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
└──────────────────────────────────────────────────────┘
*/

@media @desktops {
// Flex elements will fill html/body space and scroll themselves
html, body {
width: 100%;
height: 100%;
}

body {
.flex-column;
}

header, footer {
.flex-none; // fit to content height
}

.content {
.flex-auto; // fill remaining height
.flex-row;

// Note: Don’t add border, padding or margin to a flex-row or flex-column, // because IE 10-11 incorrectly assumes content-box sizing for flex-basis.

.sidebar {
.flex-none; // fit to content width
overflow-y: auto;
}

.main {
.flex-auto; // fill remaining width
overflow-y: auto;
}
}
}

.codepen {
border: solid 1px #dfdfdf;
display: block;
Expand Down Expand Up @@ -405,24 +463,15 @@ a {



.sidebar-left, .sidebar-right {
align-self: start;

@media (min-width: 1024px) {
max-height: ~"calc(100vh - 57px)";// 57px should not be hard-coded and should be flexible with the .header
overflow: auto;
position: sticky;
top: 0;
}
}


// Sidebar Left

.sidebar-left {
grid-area: sidebar;
padding: 15px;
white-space: nowrap;
overflow-y: auto;
flex-shrink: 0;
@media (max-width: 768px) {
padding-bottom: 0;
}
Expand Down Expand Up @@ -481,11 +530,16 @@ a {
// Course Content

.main {
display: contents;
padding: 15px 30px;
@media (max-width: 768px) {
padding-top: 0;
}
}
.main-content {
grid-area: main;
padding: 15px;
padding-right: 250px;
@media (max-width: 1200px) {
padding-right: 0;
}
}
.main-content .title h1 {
font-size: 28px;
Expand Down Expand Up @@ -545,16 +599,22 @@ hr:first-of-type {
// Sidebar Right

.sidebar-right {
grid-area: toc;
position: fixed;
top: 85px;
right: 30px;
bottom: 0px;
width: 240px;
margin-left: 30px;
padding: 0 10px;
display: flex;
flex-direction: column;
padding: 15px;
@media (max-width: 1200px) {
display: none;
}
}
.sidebar-right .content-nav {
display: flex;
flex-direction: column;
overflow-x: auto;
padding-top: 15px;
}
.content-nav .list-items {
flex-grow: 1;
Expand Down Expand Up @@ -592,6 +652,9 @@ hr:first-of-type {

.content-nav {
border-bottom: 1px solid #eee;
margin-top: 22px;
padding-bottom: 15px;
min-height: 45px;
}
.content-nav h6 {
font-size: 15px;
Expand Down

0 comments on commit 611cf2c

Please sign in to comment.