Website: Update schema documentation sidebar behavior (#25758)

Closes: https://github.com/fleetdm/confidential/issues/9412

Changes:
- Updated the table of contents sidebar on osquery schema table pages to
scroll the table of contents to the currently viewed table when the page
loads.
This commit is contained in:
Eric 2025-01-24 16:28:43 -06:00 committed by GitHub
parent c21ad84345
commit 2589092849
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 1 deletions

View file

@ -119,6 +119,14 @@ parasails.registerPage('osquery-table-details', {
let tablePartialHeight = $('[purpose="table-container"]').height();
$('[purpose="table-of-contents"]').css({'max-height': tablePartialHeight - 120});
})();
// 5 ms after the page loads, scroll the table of contents to the currently active link.
await setTimeout(()=>{
let activeTableLink = $('[purpose="table-of-contents-link"].active')[0];
if(activeTableLink) {
$('[purpose="table-of-contents"]')[0].scrollTop = activeTableLink.offsetTop - 12;
}
// Note: we're running this code after a 5ms delay to make sure the tables have been filtered, otherwise it will scroll the table of contents to the links posiiton in the full list of tables.
}, 5);
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗

View file

@ -62,7 +62,7 @@
</div>
<div style="position: relative;">
<div purpose="table-of-contents">
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+[selectedPlatform !== 'all' ? '?platformFilter='+encodeURIComponent(selectedPlatform) : '' ]" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
<a class="d-block" purpose="table-of-contents-link" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+[selectedPlatform !== 'all' ? '?platformFilter='+encodeURIComponent(selectedPlatform) : '' ]" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
</div>
<div purpose="overflow-shadow" class="d-none d-lg-block"></div>
</div>