モジュール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について：設定を編集する」を参照してください。

  moduleManagementMark: '.js-module_management',

使い方

使い方

moduleManagementMark で設定したクラスを、モジュールID編集モーダルを表示する場合にクリックする要素に指定します。

編集したいモジュールID のモジュールIDを data-mid 属性に、ブログIDを、data-bid 属性に指定することで、モジュールID編集モーダル機能を実装することができます。

マウスオーバー時に表示されるウインドウをカスタマイズする場合以下のテンプレートを編集してください。

themes/system/admin/module/setting.html

<!-- BEGIN_MODULE Touch_NotPreview -->
<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<!-- BEGIN module_setting -->
<!-- BEGIN_IF [{admin_module_mid}/nem] -->
<p class="{{class|default('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="{{class|default('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 -->
<!-- END_MODULE Touch_NotPreview -->

モジュール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 -->