Treeviewでツリー構造表示とファイルクリック時のハイライトを実装してみたメモ

はじめに

Treeviewでツリー構造データを表示する実装をされている記事を参考にサイドバーを開発してみて、ハイライトの機能が動くようにjsを追加したのでメモ。

実装

ツリー構造データをブラウザで表示するための手順はこちらの参考記事に詳しく書いてあるので、読んでください。

APIはほとんど同じ実装のため割愛しますが、ファイル名をクリックすると、swagger uiのドキュメントが読み込まれるようにreturnしています。

このままだとクリックしたファイル名にハイライトがつかなかったので、追加で以下のjavascriptを実装しました。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('treeview').addEventListener('click', function(event) {
        if (event.target && event.target.matches('a.link')) {
            event.preventDefault();
            var links = document.querySelectorAll('#treeview a.link');
            links.forEach(function(l) {
                l.classList.remove('selected');
            });
            event.target.classList.add('selected');
        }
    });
});

ここでファイルをクリックしてみると...

classにselectedが追加されて、ハイライト機能が動きました!

最後に

Qiitaはたくさんの記事があって本当に助かります。。。ありがとうございますmm
参考になれば幸いです🍏

参考