モジュールID編集画面のモーダル

a-blog cmsでは、モジュールID編集画面へのモーダルを表示する機能が実装されています。(Ver. 1.6.0より)

Ver. 1.7.0より、モーダルをより簡単に実装するテンプレートがsystemテーマの中に入っています
設置箇所:themes/system/admin/module/setting.html



デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

//-----------------------------
// module setting popup window
popupSettingMark    : '.js-popup_setting',
popupSettingConf    : {
    width       : 850,
    height      : 500,
    autoclose   : true,
    autoreload  : true
},


popupSettingMark 別ウィンドウとして設置するクラス名
popupSettingConf 別ウィンドウの設定

HTMLの編集

マウスオーバー時に表示されるウインドウを調整する場合:themes/system/admin/module/setting.html

<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
  <!-- BEGIN module_setting -->
  <!-- BEGIN_IF [{admin_module_mid}/nem] -->
  <p class="acms-admin-module-edit"><a href="#" class="js-module_management" data-bid="{admin_module_bid}" data-mid="{admin_module_mid}"><!--T-->モジュール<!--/T--></a></p>
  <!-- ELSE -->
  <p class="acms-admin-module-edit"><a href="{admin_module_url}" class="js-dialog-btn js-link_no_rewrite"><!--T--><!--$1-->{admin_module_name}<!--/$1--> を編集<!--/T--></a></p>
  <!-- END_IF -->
  <!-- END module_setting -->
<!-- END_MODULE Touch_SessionWithAdministration -->

モジュールID編集画面へのモーダルを設置する

モジュールのスニペットには、標準でモジュール設定画面へのリンクが記述してあります。旧バージョンからのアップデートや昔に作成したサイトをベースに構築する場合は個別にモジュール設定画面へのリンクを設置してください。

通常のモジュールの記述

<!-- BEGIN_MODULE Entry_List -->
<div>
  <ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
</div>
<!-- END_MODULE Entry_List -->

モーダルを設置した記述

3行目が追加されています。BEGINブロックとENDブロックの間にインクルード文を挿入します。 親の要素に相対した位置に表示されるためインクルード文をdiv要素で囲んでおくと(2行目と9行目)、マウスをホバーした際にモジュールの右上に編集ボタンが表示されます。

<!-- BEGIN_MODULE Entry_List -->
<div>
@include("/admin/module/setting.html")
  <ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
</div>
<!-- END_MODULE Entry_List -->