bit part Products
MTAppjQuery P7

MTAppMakeWidget

右サイドバーに置くウィジェットのHTML文字列を生成して返すヘルパーメソッド。canClose を指定するとヘッダーのアイコンで開閉できるウィジェットになる。

右サイドバーに配置するウィジェットの HTML 文字列を生成して返すヘルパーメソッドです。返された文字列を jQuery の .after() / .append() などで任意の位置に挿入して使います。canClose: true を指定すると、PowerCMS 標準のウィジェットと同様にヘッダーのアイコンで開閉できるウィジェットになります。

構文

const html = $.MTAppMakeWidget(options);

静的メソッド（$.MTAppMakeWidget）です。DOM への挿入は行わず、HTML 文字列を返すだけです。

パラメータ

options {Object} — 省略可。以下のプロパティを持ちます。

プロパティ型既定値説明
basenamestring''生成するウィジェットの id。<basename>-field の形で付与される。空文字なら id なし
labelstring''ヘッダーに表示するラベル（テキスト/HTML）
contentstring''本文（テキスト/HTML）
actionstring''ヘッダー内のアクション領域（テキスト/HTML）
footerstring''フッター（テキスト/HTML）
canClosebooleanfalsetrue でヘッダーアイコンによる開閉に対応する

戻り値

{string} — ウィジェットの HTML 文字列。

使用例

基本（公開ウィジェットの下に追加）

$('#entry-publishing-widget').after($.MTAppMakeWidget({
    basename: 'my_widget',
    label: 'My Widget',
    content: '<p>本文をここに記述します。</p>'
}));

開閉できるウィジェット

$('#entry-publishing-widget').after($.MTAppMakeWidget({
    label: 'My Widget',
    content: '<p>本文をここに記述します。</p>',
    footer: 'フッター領域',
    canClose: true
}));

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#entry-publishing-widget').after($.MTAppMakeWidget({
            basename: 'my_widget',
            label: 'My Widget',
            content: '<p>本文をここに記述します。</p>'
        }));
    }
})(jQuery);

生成される HTML

canClose: false（既定）:

<div id="my_widget-field" class="widget">
    <div class="widget-header">
        <div class="widget-action"></div>
        <div class="widget-label"><h2><span>My Widget</span></h2></div>
    </div>
    <div class="widget-content"><p>本文をここに記述します。</p></div>
    <div class="widget-footer"></div>
</div>

canClose: true:

<div class="widget state-toggle-enable widget-wrapper mtapp-makewidget">
    <div class="widget-header state-toggle-active" role="tab" aria-expanded="true">
        <div class="widget-action"></div>
        <div class="widget-label"><h2><span>My Widget</span></h2></div>
        <a class="toggle-icon" href="javascript:void(0)" aria-label="開閉"></a>
    </div>
    <div class="widget-content" role="tabpanel" aria-hidden="false"><p>本文をここに記述します。</p></div>
    <div class="widget-footer">フッター領域</div>
</div>

補足

  • このメソッドは HTML 文字列を返すだけです。画面への挿入は呼び出し側で行ってください（.after() / .append() / .before() など）。
  • canClose: true のときは、ヘッダーの開閉アイコンに対する委譲ハンドラが一度だけ登録されます。対象は .mtapp-makewidget クラスを持つ MTApp 生成ウィジェットに限定されるため、PowerCMS 標準のウィジェット開閉とは干渉しません。開閉時は本文（.widget-content）とフッター（.widget-footer）がまとめて開閉します。
  • MTAppUserMenuWidget / MTAppMoveToWidget / MTAppMultiFileUpload / MTAppOtherTypeCategories の内部でも、ウィジェット生成に利用されています。

関連

  • MTAppMakeField — メインカラムのフィールドの HTML 文字列を生成する。
  • MTAppMoveToWidget — 既存のフィールドを新規ウィジェットにまとめてサイドバーへ移動する。