本文欄の表示と非表示を切り替える

今日はMTの管理画面をJavaScriptでカスタマイズするためのハックを紹介します。

何をするか

それほど多くあるケースではないと思いますが、時には、はエントリーの状態によって本文欄に書き込みができないようにしたり(入力欄を消したり)本文欄が書けるようにしたり(表示したり)したい場合もあったりするので、それに対応してみます。

標準のMTのブログ記事作成画面だと、本文欄の表示や非表示を切り替える適当なトリガーになりそうな要素があまりないのですが、ここでは例として「タイトル欄に何か入力されている場合に本文欄を表示する」「タイトル欄に何も入力されていない時には本文欄を隠す」ということでやってみようと思います。

動作環境

この記事で紹介している方法はMT4.25とMT5b2で動作の確認をしています。ただMT5からMTの管理画面に取り入れられているjQueryを使っているので、MT5の方がすぐに試せると思います。MT4しかないという方はjQuery For MTを使ってみてもいいかもしれません。

スケルトン

まずは下準備として、タイトル欄の変更時に実行されるような雛形を用意しておきます。

このような感じです。

jQuery(function($) {
    $('#title').change(function() {
        if ($(this).val() != '') {
            //表示する
        }
        else {
            //隠す
        }
    }).trigger('change');
});

まずは簡単に試してみる

まずはもっとも素直に、hideとshowでやってみます。

jQuery(function($) {
    $('#title').change(function() {
        if ($(this).val() != '') {
            $('#text-field').show();
        }
        else {
            $('#text-field').hide();
        }
    }).trigger('change');
});

この方法だと確かに消えたり出たりはするのですが、一度消えてから再び出てきたときに入力欄へテキストを書き込むことができなくなってしまいます。(正確にはリッチテキストにした入力欄へできない) どうもCSSのdisplayやpositionを変えるとそれ以降うまく動かなくなってしまうようです。(動かないことはFirefoxで確認をしていますが、確か他のブラウザでも似たような症状になったような記憶があります。)

違う方法を試してみる

ではそれでだめなら、widthやheightを調整して見えなくしてみようと考えてみます。

jQuery(function($) {
    $('#title').change(function() {
        if ($(this).val() != '') {
            $('#text-field').css('width', '').css('height', '');
        }
        else {
            $('#text-field').css('width', '0').css('height', '0');
        }
    }).trigger('change');
});

この場合は出したときにリッチテキストのエリアも編集できるのですが、消した際にタブやテキストフィルター指定のインターフェイスにゴミが残ります。

jQuery(function($) {
    $('#title').change(function() {
        if ($(this).val() != '') {
            $('#text-field').find('*').css('width', '').css('height', '');
        }
        else {
            $('#text-field').find('*').css('width', '0').css('height', '0');
        }
    }).trigger('change');
});

ではこうか？とやってみてもやはりだめです。

これでできるようです

ちょっと引っ張ってしまいましたが、「hideとshowで消したり出したりはできる」というところと「widthとheightで消したり出したりすると入力欄に影響がない」というところをあわせて、#text-field内のそれぞれのdivに対して操作をすると、無事消したり出したりできて、入力欄にも影響を与えないようにすることができます。

jQuery(function($) {
    $('#title').change(function() {
        if ($(this).val() != '') {
            $('#editor').show();
            $('#editor-content').css('width', '').css('height', '');
        }
        else {
            $('#editor').hide();
            $('#editor-content').css('width', '0').css('height', '0');
        }
    }).trigger('change');
});