bit part Products
MTAppjQuery P7

MTAppAssetsGallery

MTAppJSONTable と MTAppAssetFields を組み合わせ、アセットをテーブル形式で管理するギャラリー UI を生成する jQuery プラグイン。一括選択アップロード欄付き。

MTAppJSONTable と MTAppAssetFields を組み合わせ、アセット（画像・ファイル・音声）をテーブル形式で管理するギャラリー UI を生成する jQuery プラグインです。フィールドの上に一括選択アップロード欄を作り、選択したアセットをテーブルの空行へまとめて流し込めます。各セルは MTAppAssetFields でアセット選択 UI になります。

構文

$(selector).MTAppAssetsGallery(options, words);

$.fn プラグイン（$(selector).MTAppAssetsGallery(...)）です。対象要素（this）を返すのでチェーンできます。

パラメータ

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

プロパティ型既定値説明
galleryTypestringimage扱うアセット種別（image / file / audio）
galleryLabelstring''アセット種別のラベル（空のときは種別名を自動使用）
MTAppJSONTableOptionsObject{}内部の MTAppJSONTable に渡す追加オプション（header / headerOrder など）
debugbooleanfalsetrue でデバッグ出力を有効化（隠しフィールドを表示）

words {Object} — 省略可。表示文言の L10N 上書き（select：一括選択リンクの文言）。

戻り値

{jQuery} — 対象要素（チェーン可能）。

保存される値

内部の MTAppJSONTable により、ギャラリーの各アセット情報を表す JSON 文字列が保存されます（各セルのアセット値は MTAppAssetFields が生成する文字列）。

使用例

画像ギャラリー（ヘッダー付き）

$('#customfield_gallery').MTAppAssetsGallery({
    galleryType: 'image',
    galleryLabel: '画像',
    MTAppJSONTableOptions: {
        header: { asset: '画像', caption: 'キャプション' },
        headerOrder: ['asset', 'caption']
    }
});

user.js での記述例

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

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_gallery').MTAppAssetsGallery({
            galleryType: 'image',
            galleryLabel: '画像',
            MTAppJSONTableOptions: {
                header: { asset: '画像', caption: 'キャプション' },
                headerOrder: ['asset', 'caption']
            }
        });
    }
})(jQuery);

生成される HTML

対象フィールドの前に一括アップロード欄（.MTAppAssetsGallery 内の textarea）が、対象フィールドには MTAppJSONTable によるテーブルが生成されます。

<div class="MTAppAssetsGallery">
    <textarea class="text full low"></textarea>   <!-- MTAppAssetFields(canMulti) が適用される -->
</div>
<textarea id="customfield_gallery">…</textarea>   <!-- 元フィールド。MTAppJSONTable が適用される -->
<div class="mtapp-json-table">…</div>             <!-- 生成されたギャラリーテーブル -->

テーブルの各 td.asset textarea には MTAppAssetFields が適用されます（テーブル生成時・行追加時の両方）。

補足

  • 一括アップロード欄は MTAppAssetFields の canMulti: true で動作し、「一括選択」リンク（a.mtapp-open-dialog）からアセットダイアログを開きます。
  • ダイアログを閉じると、選択結果（<form …> 単位）を分割し、不足分の行を追加してからテーブルの空セルへ順に流し込み、convert で各セルをアセット表示に変換します。
  • 内部で生成したテーブルへの参照を保持して処理するため、後続メソッド（MTAppRemoveVal など）が元フィールドをラップしても一括反映が動作します。
  • テーブルが表示されるには MTAppJSONTableOptions に header / headerOrder を指定する（またはフィールドに JSON データがある）必要があります。一括選択の完全な動作確認には、対象ブログに画像などのアセットが必要です。
  • 描画やダイアログ連携は MTAppAssetFields / MTAppJSONTable / アセット選択ダイアログ（Data API）に依存します。

関連

  • MTAppAssetFields — 単一フィールドをアセット選択 UI にする。
  • MTAppJSONTable — JSON をテーブル形式の UI で編集する。
  • MTAppMultiFileUpload — 複数ファイルのアップロード欄を提供する。