bit part Products
MTAppjQuery P7

MTAppMoveToWidget

指定フィールドを新しいサイドバーウィジェットへまとめる、または既存要素へ移動する静的メソッド。実 DOM ノード移動で値・ハンドラを保持。記事/ページ編集画面専用。

指定したフィールドを、新しいサイドバーウィジェットにまとめて入れるか、既存の要素の指定位置へ移動する静的メソッドです。記事／ウェブページ編集画面でのみ動作します。フィールドは実 DOM ノードとして移動するため、入力値や（先に適用された他メソッドの）イベントハンドラは保持されます。

構文

$.MTAppMoveToWidget(options);

静的メソッド（$.MTAppMoveToWidget(...)）です。

パラメータ

options {Object} — pointerSelector は必須。以下のプロパティを持ちます。

プロパティ型既定値説明
pointerSelectorstring''必須。移動先（挿入の基準）のセレクタ
methodstringafter挿入方法。after / before / append / prepend
basenamestring''移動するフィールドの basename（カンマ区切り）。c: 接頭辞はカスタムフィールド（customfield_）に変換される
selectorstring''移動するフィールドのセレクタ（カンマ区切り）。basename と併用可
makeWidgetbooleantruetrue で新規ウィジェットを生成してまとめる。false で対象フィールドだけを挿入する
widgetBasenamestring''生成するウィジェットの basename（id は <basename>-field）
widgetLabelstringNew Widgetウィジェット名（HTML 可）
widgetContentTopstring''本文の先頭に挿入する内容（HTML 可）
widgetContentBottomstring''本文の末尾に挿入する内容（HTML 可）
widgetActionstring''ウィジェットのアクション領域（HTML 可）
widgetFooterstring''ウィジェットのフッター（HTML 可）

戻り値

なし（undefined）。pointerSelector が未指定／不在のときは警告（alert）を出して終了します。

使用例

カスタムフィールドを新しいウィジェットへまとめる

$.MTAppMoveToWidget({
    basename: 'c:price,c:stock',                 // customfield_price / customfield_stock
    pointerSelector: '#entry-publishing-widget',
    method: 'after',
    widgetBasename: 'shop_info',
    widgetLabel: '商品情報',
    widgetContentTop: '<p class="hint">価格と在庫</p>'
});

user.js での記述例

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

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $.MTAppMoveToWidget({
            basename: 'c:price,c:stock',                 // customfield_price / customfield_stock
            pointerSelector: '#entry-publishing-widget',
            method: 'after',
            widgetBasename: 'shop_info',
            widgetLabel: '商品情報',
            widgetContentTop: '<p class="hint">価格と在庫</p>'
        });
    }
})(jQuery);

ウィジェットを作らず、既存要素へ移動するだけ

$.MTAppMoveToWidget({
    selector: '#customfield_note-field',
    pointerSelector: '#some-target',
    method: 'append',
    makeWidget: false
});

補足

  • 対象は実 DOM ノードとして移動します（outerHTML での文字列化ではありません）。そのため入力値や、移動前にバインドされたイベントハンドラ（MTAppRemoveVal の×ボタンなど）はそのまま保持されます。
  • 対象は selector のカンマ列 → basename のカンマ列の順に集め、その順序で挿入します。basename は <basename>-field を id とする要素を探します（c: 接頭辞は customfield_ に変換）。
  • makeWidget: true のときは、本文を widgetContentTop → 移動フィールド → widgetContentBottom の順に組み立てます（内部はアンカーで位置決め）。ウィジェットの生成には MTAppMakeWidget を使います。
  • 移動時に対象フィールドの hidden / sort-enabled クラスを除去します。
  • 記事（edit-entry）／ウェブページ（edit-page）編集画面以外では何もしません。

関連

  • MTAppMakeWidget — サイドバーのウィジェット（開閉可）の HTML 文字列を生成して返す。
  • MTAppMakeField — メインカラムのフィールドの HTML 文字列を生成して返す。
  • MTAppFieldSort — メインカラムのフィールドを指定順に並べ替える。