mirror of https://github.com/explosion/spaCy.git
34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
|
'use strict';
|
|||
|
|
|
|||
|
|
import { $, $$ } from './util.js';
|
|||
|
|
|
|||
|
|
export default class NavHighlighter {
|
|||
|
|
/**
|
|||
|
|
* Hightlight section in viewport in sidebar, using in-view library.
|
|||
|
|
* @param {string} sectionAttr - Data attribute of sections.
|
|||
|
|
* @param {string} navAttr - Data attribute of navigation items.
|
|||
|
|
* @param {string} activeClass – Class name of active element.
|
|||
|
|
*/
|
|||
|
|
constructor(sectionAttr, navAttr, activeClass = 'is-active') {
|
|||
|
|
this.sections = [...$$(`[${navAttr}]`)];
|
|||
|
|
this.navAttr = navAttr;
|
|||
|
|
this.sectionAttr = sectionAttr;
|
|||
|
|
this.activeClass = activeClass;
|
|||
|
|
if (window.inView) inView(`[${sectionAttr}]`)
|
|||
|
|
.on('enter', this.highlightSection.bind(this));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Check if section in view exists in sidebar and mark as active.
|
|||
|
|
* @param {node} section - The section in view.
|
|||
|
|
*/
|
|||
|
|
highlightSection(section) {
|
|||
|
|
const id = section.getAttribute(this.sectionAttr);
|
|||
|
|
const el = $(`[${this.navAttr}="${id}"]`);
|
|||
|
|
if (el) {
|
|||
|
|
this.sections.forEach(el => el.classList.remove(this.activeClass));
|
|||
|
|
el.classList.add(this.activeClass);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|