Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Bug in Academy: Not remembering scroll position. #822

Merged
merged 2 commits into from
Aug 16, 2024
Merged

Fix Bug in Academy: Not remembering scroll position. #822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48251cc
Fix Bug in Academy: Not remembering scroll position.
snoattoh Jun 7, 2024
bf6dd87
Rewrite the layout CSS so JS isn’t required to restore scroll state
chasenlehara Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 39 additions & 46 deletions static/static.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,54 +22,25 @@ window.PACKAGES = packages;
})();

(function () {
var articleContainer = document.querySelector("article.main");
/*
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();

if (articleContainer && window.history) {
var windowLoaded = false;
var pageScrollTimer;
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);

// 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();
}
});
}
// Listen for scroll events
document.addEventListener("scroll", highlight);

// Update the highlighting immediately on page load
highlight();
})();

(function () {
Expand Down Expand Up @@ -131,3 +102,25 @@ 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: 27 additions & 90 deletions static/styles/styles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,15 @@ header, footer {
}

.content {
flex-grow: 1;
overflow-x: hidden;
overflow-y: hidden;
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%);
}

// Navigation list will be flush with parent

.sidebar:extend(.container) {
Expand All @@ -96,7 +102,6 @@ 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 @@ -113,69 +118,6 @@ 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 @@ -463,15 +405,24 @@ 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 @@ -530,16 +481,11 @@ a {
// Course Content

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

.sidebar-right {
position: fixed;
top: 85px;
right: 30px;
bottom: 0px;
width: 240px;
margin-left: 30px;
padding: 0 10px;
grid-area: toc;
display: flex;
flex-direction: column;
@media (max-width: 1200px) {
display: none;
}
padding: 15px;
}
.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 @@ -652,9 +592,6 @@ 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
Loading