Adobe Illustrator Extensionの開発 脱Hello Worldその7
本当はcssを書ききってからjsに行こうかと思ったのですがさすがにmain formの切り替えを実装しないとレイアウトも形にならないので一度タブの切り替えの簡単なjsを書きます。まずこの切り替え用のjsですがメインの処置から独立させたいのでmain.jsとは別にnav.jsという名前でmain.jsと同じ階層にファイルを作ります。
わずか20行程のjsです。main.jsで実行するので全体を関数で囲みます。jsの解説に入る前にもう一度htmlを見てみます。
各種タブのラジオボタンにnav__radioというクラスが割り当てられています。getElementsByClassNameメソッドnav__radioクラスを指定してラジオボタンの各種要素を配列風に取得します。なんで配列（風）なのかというとfot文等で繰り返し処理はできるのですがArrayオブジェクトではないためArrayメソッドが使えないのです。後にArrayメソッドを使用するためArray.fromメソッドでArrayオブジェクトに変換します。ちなみにj-queryに慣れ親しんだ人はquerySelectorAllのメソッドの方がcssセレクタで要素を検索できて使い易いかもしれません。（というかもしかしたらこっちの方が主流かもしれない）ちなみにmainのタグにもmainクラスを割り当てています。
これもgetElementsByClassNameメソッドで取得。それでは最初にtabボタンにクリック時のイベント追加します。
取得したnav__radios、各種クラスに対してクリック時のイベントをforEachメソッドで追加します。ただし今回は「ラジオボタンの状態が変化した時」を発火の対象にしたいのでaddEventListenerに対してclickではなくchangeを指定しています。switchTabはイベント発火時の関数です。これから解説します。
まずdocument.nav.tab.valueで何か値を取得しています。これはnavはタブボタンを囲ったformにつけたname要素の名前、tabは各種タブボタンのname要素につけた名前,このvalueにチェックがオンになっているタブのラジオボタンのvalueが取得できます。例えばsetGuideのタブがオンになっている時はsetGuideの値が返ってきます。さらにmainタグをのid要素を調べてmainタグのidとチェックがオンになっているラジオボタンの値が同じだったらclassList.removeメソッドでhideクラスを外して表示させます。逆に一致しなかったらclassList.addメソッドでhideクラスを加えて非表示にします。これで関数が完成したのでこれをindex.htmlに読ませてmain.jsで実行させます。
main.jsはwindow.onloadでhtmlが読み込まれてからjsを実行するようにします。その他themeManager、use strictモード等デフォルトでもあったものはそのまま使います。
最後にhtmlでnav.jsを読み込ませて今回は終わりです。
ここまでの流れをこちらにまとめました。