独自設定画面の追加

[munierujp]

What

direct helperの設定項目を独自設定画面に表示する。

Why

• オリジナルの設定項目との混同を避けるため
• 設定項目までめっちゃスクロールしなくても済むようにするため

How

環境設定画面のDOMを参考に、設定画面のDOMを生成する。

[munierujp]

drawSettingView()の処理を以下のようにすればいけそう。

function drawSettingView(){
    const $wrapper = $("#wrap");
    const $settingPage = $(`<div class="page" id="direct_helper-setting-page"></div>`);
    $settingPage.append(`<hr>`);
    $settingPage.append(`<h3 class="page-title"><span class="page-title-glyphicon glyphicon glyphicon-cog"></span>  ${SETTING_DATA.name}</h3>`);
    $settingPage.append(`<div>${SETTING_DATA.description}</div>`);
    SETTING_DATA.sections.forEach(section => appendSettingSection($settingPage, section));
    $wrapper.append($settingPage);
}

[munierujp]

問題は、設定画面のリンクをどこに表示するか（理想はナビゲーションメニュー内の環境設定の下あたりだが、DOM構造的に一意に特定するのが厳しい）

[munierujp]

#navbar-menu .navbar-rightあたりに追加するのがよさそう。

非選択時

<li class=""><a href="javascript:alert('clicked')" title="" id="navbar-menu-direct_helper" class="navbar-menu" data-original-title="direct helper"><span><img src="https://raw.githubusercontent.com/munierujp/direct_helper/master/doc/icon.png" style="height: 100%;"></span> <span class="navbar-menu-text">direct helper</span></a></li>

選択時

<li class="active"><a href="javascript:alert('clicked')" title="" id="navbar-menu-direct_helper" class="navbar-menu" data-original-title="direct helper"><span><img src="https://raw.githubusercontent.com/munierujp/direct_helper/master/doc/icon.png" style="height: 100%;"></span> <span class="navbar-menu-text">direct helper</span></a></li>