BookStack Code Mirror - bookstack/blob - resources/js/components/api-nav.ts

   1 import {Component} from "./component";
   2
   3 export class ApiNav extends Component {
   4     private select!: HTMLSelectElement;
   5     private sidebar!: HTMLElement;
   6     private body!: HTMLElement;
   7
   8     setup() {
   9         this.select = this.$refs.select as HTMLSelectElement;
  10         this.sidebar = this.$refs.sidebar;
  11         this.body = this.$el.ownerDocument.documentElement;
  12         this.select.addEventListener('change', () => {
  13             const section = this.select.value;
  14             const sidebarTarget = document.getElementById(`sidebar-header-${section}`);
  15             const contentTarget = document.getElementById(`section-${section}`);
  16             if (sidebarTarget && contentTarget) {
  17
  18                 const sidebarPos = sidebarTarget.getBoundingClientRect().top - this.sidebar.getBoundingClientRect().top + this.sidebar.scrollTop;
  19                 this.sidebar.scrollTo({
  20                     top: sidebarPos - 120,
  21                     behavior: 'smooth',
  22                 });
  23
  24                 const bodyPos = contentTarget.getBoundingClientRect().top + this.body.scrollTop;
  25                 this.body.scrollTo({
  26                     top: bodyPos - 20,
  27                     behavior: 'smooth',
  28                 });
  29             }
  30         });
  31     }
  32 }