feat(esl-anchornav): add active-class to set on active item

exadel-inc · Aug 21, 2024 · e452e71 · e452e71
1 parent 3d43ba1
commit e452e71
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/site/views/examples/anchornav.njk b/site/views/examples/anchornav.njk
@@ -47,7 +47,7 @@ aside:
  </div>
  <div>
  <div class="esl-anchornav-pseudo-fixed">
- <esl-anchornav>
+ <esl-anchornav active-class="active">
  <div class="h4 text-center">Anchornav</div>
  </esl-anchornav>
  </div>

diff --git a/src/modules/esl-anchornav/core/esl-anchornav.ts b/src/modules/esl-anchornav/core/esl-anchornav.ts
@@ -48,6 +48,8 @@ export class ESLAnchornav extends ESLBaseElement {
 
  /** Item renderer which is used to build inner markup */
  @attr({defaultValue: 'default', name: 'renderer'}) public rendererName: string;
+ /** CSS classes to set on active item */
+ @attr({defaultValue: 'active'}) public activeClass: string;
 
  protected _active: ESLAnchorData;
  protected _anchors: ESLAnchorData[] = [];
@@ -171,7 +173,7 @@ export class ESLAnchornav extends ESLBaseElement {
  if (y <= topBoundary) active = item;
  });
  if (active) {
- this._items.forEach(($item, id) => $item.classList.toggle('active', id === active.id));
+ this._items.forEach(($item, id) => $item.classList.toggle(this.activeClass, id === active.id));
  this.active = active;
  }
  }