MTAppHasCategory

記事・ウェブページの保存時に、必要な数のカテゴリ、または指定した ID のカテゴリが選択されているかをチェックするメソッドです。条件を満たさない場合はエラーダイアログを表示し、保存を中断します。P7 では本体から削除しており、互換コードを掲載しています。

このメソッドは MTAppjQuery P7 には同梱していません(非推奨)。

カテゴリの選択を必須にするだけであれば、PowerCMS 標準の設定で実現できます。管理画面の「設定 → PowerCMS 設定」を開き、「カテゴリ / フォルダ」の 「カテゴリの選択を必須にする」(ウェブページの場合は「フォルダの選択を必須にする」)にチェックを入れてください。JavaScript を書く必要がなく、サーバー側でも検証されます。新しく作る場合はこちらをお使いください。

特定のカテゴリ ID を必須にしたい場合や、エラーダイアログの文言・見せ方を自分で決めたい場合に限り、このページのコードを user.js にコピーしてお使いください。

記事・ウェブページの保存時に、必要な数のカテゴリ、または指定した ID のカテゴリが選択されているかをチェックするメソッドです。条件を満たさない場合はエラーダイアログを表示し、保存を中断します。

P5 では本体に同梱していましたが、PowerCMS 7 の標準機能と重複するため P7 では削除しました。すでに user.js で使用中の場合は、下記のコードを user.js に貼り付ければ、呼び出し方・オプション名を変えずにそのまま動作します。

構文

$.MTAppHasCategory(options);

静的メソッド($.MTAppHasCategory)です。記事・ウェブページの編集画面でのみ動作します。

パラメータ

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

プロパティ既定値説明
requiredIdsstring''必須にするカテゴリ ID をカンマ区切りで指定(例: '3,5')。ここに挙げた ID がすべて選択されている必要があります
requiredCountnumber0選択が必要なカテゴリの数。1 を指定すると「1つ以上の選択」が必須になります
idErrorTitlestring'エラー'requiredIds を満たさないときのダイアログのタイトル
idErrorContentstring'必須カテゴリが選択されていません。'同・本文。HTML としてそのまま描画されます
countErrorTitlestring'エラー'requiredCount を満たさないときのダイアログのタイトル
countErrorContentstring'必要な数のカテゴリが選択されていません。'同・本文。HTML としてそのまま描画されます

requiredIdsrequiredCount は併用できます。その場合は requiredIds が先に判定されます。

戻り値

なし(undefined)。

保存される値

このメソッドは値を変更しません。条件を満たさない場合に保存(フォームの送信)そのものを中断します。

使用例

// カテゴリを1つ以上選択させる
$.MTAppHasCategory({
    requiredCount: 1,
    countErrorTitle: 'カテゴリ選択エラー',
    countErrorContent: 'カテゴリを選択してください。'
});

// 特定のカテゴリ(ID 3 と 5)を必ず選択させる
$.MTAppHasCategory({
    requiredIds: '3,5',
    idErrorTitle: 'カテゴリ選択エラー',
    idErrorContent: '「お知らせ」と「重要」の両方を選択してください。'
});

コード

以下を user.js の先頭(各メソッドの呼び出しより前)に貼り付けてください。

(function ($) {
    /**
     * 記事・ウェブページの保存時に、必要な数のカテゴリ、または指定した ID のカテゴリが
     * 選択されているかをチェックする。満たさない場合はダイアログを表示して保存を中断する。
     *
     * @param {Object}   [options]
     * @param {string}   [options.requiredIds='']    必須にするカテゴリ ID をカンマ区切りで指定
     * @param {number}   [options.requiredCount=0]   選択が必要なカテゴリの数
     * @param {string}   [options.idErrorTitle]      requiredIds を満たさないときのダイアログのタイトル
     * @param {string}   [options.idErrorContent]    同・本文
     * @param {string}   [options.countErrorTitle]   requiredCount を満たさないときのダイアログのタイトル
     * @param {string}   [options.countErrorContent] 同・本文
     */
    $.MTAppHasCategory = function (options) {
        const op = $.extend({}, $.MTAppHasCategory.defaults, options);
        const $form = $('form#entry_form');
        if ($form.length < 1) {
            return;
        }
        if (mtappVars.type !== 'entry' && mtappVars.type !== 'page') {
            return;
        }

        const requiredIds = op.requiredIds ? op.requiredIds.split(',') : [];
        // 中断した保存をやり直せるよう、ダイアログを閉じた時にボタンと mt:once を戻す
        const dialogOptions = {
            modal: true,
            close: function () {
                $('div.actions-bar :disabled').prop('disabled', false);
                $form.removeAttr('mt:once');
            }
        };
        const showError = (title, content) => {
            $.MTAppDialogMsg($.extend({}, dialogOptions, { title: title, content: content }));
        };

        $form.on('submit.MTAppHasCategory', function () {
            const isPreview = $(this).serializeArray().some(
                (param) => param.name === '__mode' && param.value === 'preview_entry'
            );
            if (!isPreview) {
                // このまま保存へ進むので、未保存の変更に対する警告は出さない
                if (typeof Editor !== 'undefined' && Editor.strings) {
                    delete Editor.strings.unsavedChanges;
                }
                $(window).off('beforeunload');
            }

            const value = $("input[name='category_ids']").val();
            const categoryIds = value ? value.split(',') : [];

            if (requiredIds.some((id) => !categoryIds.includes(id))) {
                showError(op.idErrorTitle, op.idErrorContent);
                return false;
            }
            if (op.requiredCount && op.requiredCount > categoryIds.length) {
                showError(op.countErrorTitle, op.countErrorContent);
                return false;
            }

            if (isPreview) {
                return true;
            }
            if (typeof window.indirectObjects !== 'undefined') {
                delete window.indirectObjects;
            }
            $(this).find('button.primary').prop('disabled', true);
            return true;
        });
    };
    $.MTAppHasCategory.defaults = {
        requiredIds: '',
        requiredCount: 0,
        idErrorTitle: 'エラー',
        idErrorContent: '必須カテゴリが選択されていません。',
        countErrorTitle: 'エラー',
        countErrorContent: '必要な数のカテゴリが選択されていません。'
    };
})(jQuery);

補足

  • 上記のコードは PowerCMS 7.1 の記事編集画面で動作を確認しています(カテゴリ未選択での保存の中断、ダイアログの表示、閉じた後の保存ボタンの復帰、カテゴリ選択後の保存)。P5 版から変数宣言の書き方を見直していますが、呼び出し方・オプション名・挙動は P5 と同じです。
  • エラーダイアログの表示には MTAppDialogMsg を使用します。こちらは P7 でも本体に同梱しているため、追加のコードは不要です。
  • プレビュー時はチェックしません。 プレビューは別ウィンドウ・別タブで開く一時的な表示であり、保存ではないためです。
  • ダイアログを閉じると、無効化された保存ボタンと mt:once 属性が元に戻ります。カテゴリを選び直して、そのまま保存し直せます。
  • idErrorContent / countErrorContent は HTML としてそのまま描画されます。外部から受け取った文字列をそのまま渡さないでください。

関連