Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-07 22:45:23 +02:00
Code Issues Releases Activity

update logic

Browse source
This commit is contained in:
Taly 2022-07-13 15:37:28 +03:00
parent d1c64c2666
commit 4088fffad8
2 changed files with 29 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/frontend/js/classes/table-of-content.js
View file

@ -7,8 +7,9 @@ export default class TableOfContent {
* *
* @param {string} tagSelector - selector for tags to observe * @param {string} tagSelector - selector for tags to observe
* @param {string} tocParentElement - selector for table of content wrapper * @param {string} tocParentElement - selector for table of content wrapper
* @param {string|null} fixedHeaderSelector - selector for fixed site header
*/ */
constructor({ tagSelector, tocParentElement }) { constructor({ tagSelector, tocParentElement, fixedHeaderSelector = null }) {
/** /**
* Array of tags to observe * Array of tags to observe
*/ */
@ -25,6 +26,12 @@ export default class TableOfContent {
*/ */
this.tocParentElement = tocParentElement; this.tocParentElement = tocParentElement;
/**
* Selector for getting real height of the fixed header to detect active section correctly
* @type {null}
*/
this.fixedHeaderSelector = fixedHeaderSelector;
this.CSS = { this.CSS = {
tocContainer: 'table-of-content', tocContainer: 'table-of-content',
tocHeader: 'table-of-content__header', tocHeader: 'table-of-content__header',
@ -57,7 +64,7 @@ export default class TableOfContent {
this.addTableOfContent(); this.addTableOfContent();
/** /**
* * Calculate boundings for each tag and watch active section
*/ */
this.calculateBoundings(); this.calculateBoundings();
this.watchActiveSection(); this.watchActiveSection();
@ -78,8 +85,6 @@ export default class TableOfContent {
const rect = tag.getBoundingClientRect(); const rect = tag.getBoundingClientRect();
const top = rect.top + window.scrollY; const top = rect.top + window.scrollY;
console.log(`${tag.tagName} top ${top}`);
return { return {
top, top,
tag, tag,
@ -93,8 +98,6 @@ export default class TableOfContent {
return tag.top < scrollPosition; return tag.top < scrollPosition;
}).pop(); }).pop();
console.log(section ? section.tag.innerText : null);
if (section) { if (section) {
const targetLink = section.tag.querySelector('a').getAttribute('href'); const targetLink = section.tag.querySelector('a').getAttribute('href');
@ -106,11 +109,27 @@ export default class TableOfContent {
let ticking; let ticking;
document.addEventListener('scroll', function(e) { document.addEventListener('scroll', (event) => {
const lastKnownScrollPosition = window.scrollY + 55; /**
* Calculate scroll position
*/
let lastKnownScrollPosition = 1 + window.scrollY;
/**
* If fixed header is present then calculate scroll position based on it
*/
if (this.fixedHeaderSelector) {
const fixedHeader = document.querySelector(this.fixedHeaderSelector);
if (fixedHeader) {
lastKnownScrollPosition += fixedHeader.getBoundingClientRect().height;
} else {
console.warn(`Fixed header was not found by selector ${this.fixedHeaderSelector}`);
}
}
if (!ticking) { if (!ticking) {
window.requestAnimationFrame(function() { window.requestAnimationFrame(() => {
detectSection(lastKnownScrollPosition); detectSection(lastKnownScrollPosition);
ticking = false; ticking = false;

1
src/frontend/js/modules/page.js
View file

@ -49,6 +49,7 @@ export default class Page {
'h3.block-header--anchor,' + 'h3.block-header--anchor,' +
'h4.block-header--anchor', 'h4.block-header--anchor',
tocParentElement: '#layout-sidebar-right', tocParentElement: '#layout-sidebar-right',
fixedHeaderSelector: '.docs-header',
}); });
} }
} }