From 6cd0f0bb47ac10c4aa6ef38381ff182acf0679e6 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Thu, 22 Aug 2024 11:16:48 +0700 Subject: [PATCH 1/4] Fix Back on docs --- docs/assets/js/main.js | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 9e4880780e916..3d99ac7e19620 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -194,8 +194,46 @@ const tocbotOptions = { // If there is a fixed article scroll container, set to calculate titles' offset scrollContainer: 'content-area', + + onClick: (e) => { + e.preventDefault(); + const hashText = e.target.href.split('#').pop(); + // Append hashText to the current URL without saving to history + const newUrl = `${window.location.pathname}#${hashText}`; + history.replaceState(null, '', newUrl); + }, }; +// Define the media query string for the mobile breakpoint +const mobileBreakpoint = window.matchMedia('(max-width: 799px)'); + +// Function to update tocbot options and refresh +function updateTocbotOptions(headingsOffset, scrollSmoothOffset) { + tocbotOptions.headingsOffset = headingsOffset; + tocbotOptions.scrollSmoothOffset = scrollSmoothOffset; + window.tocbot.refresh({ + ...tocbotOptions, + contentSelector: '#new-expensify', + }); +} + +// Function to handle changes in the media query statuses +function handleBreakpointChange() { + if (mobileBreakpoint.matches) { + updateTocbotOptions(80, -80); + console.log('[wildebug] Mobile breakpoint matched'); + } else { + updateTocbotOptions(0, 0); + console.log('[wildebug] Non-mobile breakpoint matched'); + } +} + +// Add listener for changes to the media query status using addEventListener +mobileBreakpoint.addEventListener('change', handleBreakpointChange); + +// Initial check +handleBreakpointChange(); + function selectNewExpensify(newExpensifyTab, newExpensifyContent, expensifyClassicTab, expensifyClassicContent) { newExpensifyTab.classList.add('active'); newExpensifyContent.classList.remove('hidden'); From 9d4b9d7ab05bdee6041532ede5af25a932ad5707 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Thu, 22 Aug 2024 12:45:51 +0700 Subject: [PATCH 2/4] remove unnecessary code --- docs/assets/js/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 3d99ac7e19620..dbf2ec36eee5c 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -212,8 +212,7 @@ function updateTocbotOptions(headingsOffset, scrollSmoothOffset) { tocbotOptions.headingsOffset = headingsOffset; tocbotOptions.scrollSmoothOffset = scrollSmoothOffset; window.tocbot.refresh({ - ...tocbotOptions, - contentSelector: '#new-expensify', + ...tocbotOptions }); } From 9b3610bc927c5bb761f9f198d6a82fe7979dee5f Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Thu, 29 Aug 2024 20:54:15 +0700 Subject: [PATCH 3/4] Update tocbot options only if there is a change in offsets --- docs/assets/js/main.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index dbf2ec36eee5c..5369828076cfc 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -165,6 +165,8 @@ window.addEventListener('load', () => { insertElementAfter(searchInput, searchLabel); }); +const FIXED_HEADER_HEIGHT = 80; + const tocbotOptions = { // Where to render the table of contents. tocSelector: '.article-toc', @@ -188,8 +190,8 @@ const tocbotOptions = { activeLinkClass: 'selected-article', // Headings offset between the headings and the top of the document (requires scrollSmooth enabled) - headingsOffset: 80, - scrollSmoothOffset: -80, + headingsOffset: FIXED_HEADER_HEIGHT, + scrollSmoothOffset: -FIXED_HEADER_HEIGHT, scrollSmooth: true, // If there is a fixed article scroll container, set to calculate titles' offset @@ -216,14 +218,14 @@ function updateTocbotOptions(headingsOffset, scrollSmoothOffset) { }); } -// Function to handle changes in the media query statuses function handleBreakpointChange() { - if (mobileBreakpoint.matches) { - updateTocbotOptions(80, -80); - console.log('[wildebug] Mobile breakpoint matched'); - } else { - updateTocbotOptions(0, 0); - console.log('[wildebug] Non-mobile breakpoint matched'); + const isMobile = mobileBreakpoint.matches; + const headingsOffset = isMobile ? FIXED_HEADER_HEIGHT : 0; + const scrollSmoothOffset = isMobile ? -FIXED_HEADER_HEIGHT : 0; + + // Update tocbot options only if there is a change in offsets + if (tocbotOptions.headingsOffset !== headingsOffset || tocbotOptions.scrollSmoothOffset !== scrollSmoothOffset) { + updateTocbotOptions(headingsOffset, scrollSmoothOffset); } } From 625076feb9fb21b0452b46f6ee94dffff1eea9d0 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Thu, 29 Aug 2024 21:48:43 +0700 Subject: [PATCH 4/4] run prettier --- docs/assets/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 5369828076cfc..63ab6f79c737f 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -214,7 +214,7 @@ function updateTocbotOptions(headingsOffset, scrollSmoothOffset) { tocbotOptions.headingsOffset = headingsOffset; tocbotOptions.scrollSmoothOffset = scrollSmoothOffset; window.tocbot.refresh({ - ...tocbotOptions + ...tocbotOptions, }); }