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

Added TOC current items highlighting #3148

Merged
merged 3 commits into from
Jan 4, 2024
Merged

Added TOC current items highlighting #3148

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1923099
Replaced jekyll css and js bundling with webpack
aleksandrychev Dec 11, 2023
7a0b41f
Added TOC current items highlighting and scroll to top button
aleksandrychev Dec 11, 2023
2091824
Assign to the window object functions we use in the html onclick attr…
aleksandrychev Jan 3, 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
2 changes: 1 addition & 1 deletion generator/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ _generated/*
/pages/*
*.pyc
.DS_Store

node_modules
86 changes: 83 additions & 3 deletions generator/_assets/js/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
'use strict';
import '../styles/cfengine.less';

var is_mobile = true;
$(document).ready(function() {
if ($(window).width() > 800)
Expand Down Expand Up @@ -307,11 +309,16 @@ function selectVersion(value) {
}
};


document.addEventListener("DOMContentLoaded", function () {
fillVersionWrapperSelect('/docs/branches.json')

document.querySelectorAll(".article h1, .article h2, .article h3, .article h4, .article h5, .article h6").forEach(function(el){
var url = new URL(window.location.href);
const anchors = document.querySelectorAll(
".article h1[id], .article h2[id], .article h3[id], .article h4[id], .article h5[id], .article h6[id]"
);

anchors.forEach(function(el){
const url = new URL(window.location.href);
el.insertAdjacentHTML('beforeend', '<a class="anchor" href="' + url.origin + url.pathname + '#' + el.id + '"><i class="bi bi-link-45deg"></i></a>');
});

Expand All @@ -322,5 +329,78 @@ document.addEventListener("DOMContentLoaded", function () {
a.classList.add('url-copied');
setTimeout(function () { a.classList.remove('url-copied') }, 2000);
}
})
});

/**
* Highlight the current TOC item when a user scrolls to the corresponding page section.
*/
(() => {
const tocLinks = document.querySelectorAll('#TOCbox_list li a');

if (!tocLinks || !anchors) {
return;
}

// offsetTop returns offset to the offsetParent, which is main wrapper, we need to add 130px to get actual offset
const fetchOffsets = anchors => [...anchors].map(a => a.offsetTop + 130);
let anchorsOffsets = fetchOffsets(anchors);

let timeout = undefined;
const updateActiveTocItem = () => {
if (timeout) {
clearTimeout(timeout)
}

// The current TOC menu item will be calculated in 100 ms after the user stops scrolling.
// Otherwise, there might be redundant calculations.
timeout = setTimeout( () => {
let scrollTop = window.scrollY;
tocLinks.forEach(link => link.classList.remove('current'));

for (let i = anchorsOffsets.length - 1; i >= 0; i--) {
if (scrollTop > anchorsOffsets[i]) {
setActiveLink(anchors[i].id);
break;
}
}
}, 50); // 0.05s threshold

}

const setActiveLink = (id) => {
const activeLink = document.querySelector(`#TOCbox_list li a[href$="#${id}"]`);
if (activeLink) {
activeLink.classList.add('current');
}
}

window.addEventListener('scroll', updateActiveTocItem);
window.addEventListener("resize", () => {
// anchors position change when the window is resized
anchorsOffsets = fetchOffsets(anchors);
});
})();

/**
* Display scroll to top button when the scroll reaches 350px
* from the top and window width less than 1280px
*/
(() => {
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
const showClass = 'show';

if (!scrollToTopBtn) {
return;
}

const handleScrollToTopVisibility = () => {
if (window.scrollY > 350 && window.innerWidth <= 1280) {
scrollToTopBtn.classList.add(showClass);
} else {
scrollToTopBtn.classList.remove(showClass);
}
}

window.addEventListener('scroll', handleScrollToTopVisibility);
})();
});
22 changes: 22 additions & 0 deletions generator/_assets/styles/less/base.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,3 +452,25 @@ article {
margin-right: 0 !important;
}
}

#scrollToTopBtn {
position: fixed;
bottom: 4rem;
right: 3.2rem;
height: 4.4rem;
width: 4.4rem;
background-color: #aaa;
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
transform: scale(0);
transition: all .6s ease-out 0s;
i {
font-size: 1.6rem;
}
&.show {
transform: scale(1);
transition: all .6s ease-in 0s;
}
}
4 changes: 2 additions & 2 deletions generator/_assets/styles/less/dropdown.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

&:after {
content: url("../media/images/chevron-down.svg");
content: url("../../../media/images/chevron-down.svg");
position: absolute;
right: 9px;
top: 50%;
Expand Down Expand Up @@ -69,7 +69,7 @@

&[selected="selected"] {
&:after {
content: url("../media/images/check.svg");
content: url("../../../media/images/check.svg");
position: absolute;
left: 1.4rem;
}
Expand Down
94 changes: 47 additions & 47 deletions generator/_assets/styles/less/font.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,56 @@
// bootstrap icons
@import 'node_modules/bootstrap-icons/font/bootstrap-icons.css';
@import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';

// red hat display
@import "node_modules/@fontsource/red-hat-display/300.css";
@import "node_modules/@fontsource/red-hat-display/300-italic.css";
@import "node_modules/@fontsource/red-hat-display/400.css";
@import "node_modules/@fontsource/red-hat-display/400-italic.css";
@import "node_modules/@fontsource/red-hat-display/500.css";
@import "node_modules/@fontsource/red-hat-display/500-italic.css";
@import "node_modules/@fontsource/red-hat-display/600.css";
@import "node_modules/@fontsource/red-hat-display/600-italic.css";
@import "node_modules/@fontsource/red-hat-display/700.css";
@import "node_modules/@fontsource/red-hat-display/700-italic.css";
@import "node_modules/@fontsource/red-hat-display/800.css";
@import "node_modules/@fontsource/red-hat-display/800-italic.css";
@import "node_modules/@fontsource/red-hat-display/900.css";
@import "node_modules/@fontsource/red-hat-display/900-italic.css";
@import "../node_modules/@fontsource/red-hat-display/300.css";
@import "../node_modules/@fontsource/red-hat-display/300-italic.css";
@import "../node_modules/@fontsource/red-hat-display/400.css";
@import "../node_modules/@fontsource/red-hat-display/400-italic.css";
@import "../node_modules/@fontsource/red-hat-display/500.css";
@import "../node_modules/@fontsource/red-hat-display/500-italic.css";
@import "../node_modules/@fontsource/red-hat-display/600.css";
@import "../node_modules/@fontsource/red-hat-display/600-italic.css";
@import "../node_modules/@fontsource/red-hat-display/700.css";
@import "../node_modules/@fontsource/red-hat-display/700-italic.css";
@import "../node_modules/@fontsource/red-hat-display/800.css";
@import "../node_modules/@fontsource/red-hat-display/800-italic.css";
@import "../node_modules/@fontsource/red-hat-display/900.css";
@import "../node_modules/@fontsource/red-hat-display/900-italic.css";

// red hat text
@import "node_modules/@fontsource/red-hat-text/300.css";
@import "node_modules/@fontsource/red-hat-text/300-italic.css";
@import "node_modules/@fontsource/red-hat-text/400.css";
@import "node_modules/@fontsource/red-hat-text/400-italic.css";
@import "node_modules/@fontsource/red-hat-text/500.css";
@import "node_modules/@fontsource/red-hat-text/500-italic.css";
@import "node_modules/@fontsource/red-hat-text/600.css";
@import "node_modules/@fontsource/red-hat-text/600-italic.css";
@import "node_modules/@fontsource/red-hat-text/700.css";
@import "node_modules/@fontsource/red-hat-text/700-italic.css";
@import "../node_modules/@fontsource/red-hat-text/300.css";
@import "../node_modules/@fontsource/red-hat-text/300-italic.css";
@import "../node_modules/@fontsource/red-hat-text/400.css";
@import "../node_modules/@fontsource/red-hat-text/400-italic.css";
@import "../node_modules/@fontsource/red-hat-text/500.css";
@import "../node_modules/@fontsource/red-hat-text/500-italic.css";
@import "../node_modules/@fontsource/red-hat-text/600.css";
@import "../node_modules/@fontsource/red-hat-text/600-italic.css";
@import "../node_modules/@fontsource/red-hat-text/700.css";
@import "../node_modules/@fontsource/red-hat-text/700-italic.css";

// red hat mono
@import "node_modules/@fontsource/red-hat-mono/300.css";
@import "node_modules/@fontsource/red-hat-mono/300-italic.css";
@import "node_modules/@fontsource/red-hat-mono/400.css";
@import "node_modules/@fontsource/red-hat-mono/400-italic.css";
@import "node_modules/@fontsource/red-hat-mono/500.css";
@import "node_modules/@fontsource/red-hat-mono/500-italic.css";
@import "node_modules/@fontsource/red-hat-mono/600.css";
@import "node_modules/@fontsource/red-hat-mono/600-italic.css";
@import "node_modules/@fontsource/red-hat-mono/700.css";
@import "node_modules/@fontsource/red-hat-mono/700-italic.css";
@import "../node_modules/@fontsource/red-hat-mono/300.css";
@import "../node_modules/@fontsource/red-hat-mono/300-italic.css";
@import "../node_modules/@fontsource/red-hat-mono/400.css";
@import "../node_modules/@fontsource/red-hat-mono/400-italic.css";
@import "../node_modules/@fontsource/red-hat-mono/500.css";
@import "../node_modules/@fontsource/red-hat-mono/500-italic.css";
@import "../node_modules/@fontsource/red-hat-mono/600.css";
@import "../node_modules/@fontsource/red-hat-mono/600-italic.css";
@import "../node_modules/@fontsource/red-hat-mono/700.css";
@import "../node_modules/@fontsource/red-hat-mono/700-italic.css";

// roboto
@import "node_modules/@fontsource/roboto/100.css";
@import "node_modules/@fontsource/roboto/100-italic.css";
@import "node_modules/@fontsource/roboto/300.css";
@import "node_modules/@fontsource/roboto/300-italic.css";
@import "node_modules/@fontsource/roboto/400.css";
@import "node_modules/@fontsource/roboto/400-italic.css";
@import "node_modules/@fontsource/roboto/500.css";
@import "node_modules/@fontsource/roboto/500-italic.css";
@import "node_modules/@fontsource/roboto/700.css";
@import "node_modules/@fontsource/roboto/700-italic.css";
@import "node_modules/@fontsource/roboto/900.css";
@import "node_modules/@fontsource/roboto/900-italic.css";
@import "../node_modules/@fontsource/roboto/100.css";
@import "../node_modules/@fontsource/roboto/100-italic.css";
@import "../node_modules/@fontsource/roboto/300.css";
@import "../node_modules/@fontsource/roboto/300-italic.css";
@import "../node_modules/@fontsource/roboto/400.css";
@import "../node_modules/@fontsource/roboto/400-italic.css";
@import "../node_modules/@fontsource/roboto/500.css";
@import "../node_modules/@fontsource/roboto/500-italic.css";
@import "../node_modules/@fontsource/roboto/700.css";
@import "../node_modules/@fontsource/roboto/700-italic.css";
@import "../node_modules/@fontsource/roboto/900.css";
@import "../node_modules/@fontsource/roboto/900-italic.css";
2 changes: 1 addition & 1 deletion generator/_assets/styles/less/header.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@
right: 2.1rem;
top: 50%;
transform: translateY(-50%);
background-image: url("./../media/images/zoom-in.svg");
background-image: url("./../../../media/images/zoom-in.svg");
background-repeat: no-repeat;
width: 24px;
height: 24px;
Expand Down
52 changes: 26 additions & 26 deletions generator/_assets/styles/less/pages.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,23 +77,22 @@
}

&-title {
font-weight: 400;
font-size: 16px;
line-height: 24px;
border-bottom: 1px solid #E2E2E2;
font-weight: 500;
font-size: 14px;
line-height: 22px;
margin-bottom: .6rem;
display: inline-block;
@media @desktop-down {
font-weight: 500;
line-height: 4.5rem;
background: #F8F8FA;
padding-left: .8rem;
position: relative;
cursor: pointer;
&:after {
content: "\F286";
font-family: bootstrap-icons;
position: absolute;
right: 2rem;
right: -2.8rem;
top: 50%;
transform: translateY(-50%);
}
Expand All @@ -117,56 +116,57 @@
}

#TOCbox_list {
background: #F7F7F7;
border-radius: 2px;
color: @blue-700;
color: @gray-600;
font-weight: 500;
font-size: 14px;
line-height: 22px;
padding: .8rem 1.2rem;
max-height: 420px;
padding: .8rem 0;
overflow: auto;

ul {
list-style: none;
border-left: 1px solid #E1E1E1;
}

li {
margin-bottom: 8px;
padding-left: 2.4rem;
&:has(.current) {
border-left: 3px solid @blue-700;
transition: border 0.1s linear;
}
}

a {
color: @blue-700;
font-weight: 500;
color: @gray-600;
font-weight: 400;
font-size: 14px;
line-height: 22px;
text-decoration: none;
display: inline-block;

&:hover {
border-bottom: 1px solid @blue-700;
text-decoration: underline;
border: none;
}

&.current {
color: @blue-700;
font-weight: 700;
margin-left: -.3rem
}
}
}

#TOCbox_list .link_h3,
#TOCbox_list_mobile .sidr-class-link_h3 {
margin-left: 1rem;
}

#TOCbox_list .link_h3:before,
#TOCbox_list_mobile .sidr-class-link_h3:before,
#TOCbox_list .link_h4:before,
#TOCbox_list_mobile .sidr-class-link_h4:before {
font-size: 11px;
margin: 0 6px 0 0;
font-family: bootstrap-icons;
content: "\F280";
color: #000000;
padding-left: 4rem;
}

#TOCbox_list .link_h4,
#TOCbox_list_mobile .sidr-class-link_h4 {
margin-left: 2rem;
padding-left: 5.6rem;
}
}
}
Expand Down
Loading
Loading