1. Qiita
  2. 投稿
  3. MovableType

MovableTypeのカテゴリ一覧画面をカスタマイズするときに注意すること

  • 3
    いいね
  • 0
    コメント

この記事は Movable Type Advent Calendar 2016 – Adventar の 11日目の記事です。

MovableType経験は浅いのですが、今年はちょいちょいMovableTypeを触る機会がありまして。
その際に経験した、カテゴリ一覧をカスタマイズしたらデータが飛んだお話を書きます。

前提条件

MTAppjQueryを使って管理画面カスタマイズを入れています。
また、実際の経験としてはPowerCMSでのお話なのですが、MovableTypeでも同じだと思っています。

やること

カテゴリ一覧で、条件にマッチしたカテゴリの表示を非表示にします。
今回私がやったのは、記事が0件となっているカテゴリを非表示にするものです。

やったこと

jQueryでカテゴリをループして、件数表示が0件だったらhideするという簡単なものです。
例えば、3階層目は非表示とする場合はこんな感じ。
ついでに、表示/非表示を切り替えるボタンも入れておきます。

user.js
$('.lv-3').hide();
$('#area-action').append('<input type="button" id="btn-toggleCategoryList" value="カテゴリ表示切替" class="button" />');
$('#btn-toggleCategoryList').on('click', function () {
    if (isHide) {
        $('.lv-3').hide();
        isHide = true;
    } else {
        $('.lv-3').show();
        isHide = false;
    }
});

起こったこと

カテゴリの並べ替えなどを行って保存をかけたら、非表示にしていたカテゴリが消えました

解説

movabletype/tmpl/cms/list_category.tmpl
function bulkUpdateCategoriesを見るとわかるのですが、jQuery('.sortable-item:visible')で取得したDOMからupdateのデータを作成してajaxで一気に更新処理をかけているようです。
つまり、hideしてしまうと、削除の扱いと同義なのですね。

そこまで調べてからカスタマイズしろって話だし、inputもないからそんな予感もしてなかったわけではないのですが...。

解決策

tmplを書き換えるのはバージョンアップができなくなってよろしくありませんので、user.jsで対応するのが望ましいと考えました。
で、bulkUpdateCategoriesが走る前に、hideしたカテゴリをshowしてあげれば良いわけです。
ただ、このイベントのフックのようなものがなさそうだったので、イベントを補足して先に実行してあげるようにしました。

user.js
var func;
$.each($('.save').data('events'), function(i, e) {
    func = e[0].handler;
});
$('.save').unbind().on('click', function () {
    $('.lv-3').show();
    func();
});

カスタマイズはよく調べて自己責任で

そもそもデータを消しちゃった点は、仕組みをちゃんと調べないでやってしまったことが問題で、反省点です。
ですが、そもそもこのカスタマイズ自体はデータ更新に絡むところを触っているので、トリッキーな部類だと思います。
あくまで自己責任ということで。

もしかしたらもっと良い方法があるかもしれませんので、ご存知の方は教えてください。