これは MTAppjQuery Advent Calendar 2018 16日目の記事です。
うっかり1日遅れました。。。
管理画面のヘッダー付近に固定メッセージを表示させ、開発環境を操作中だと直感的に判別できるよう user.js を定義してみます。
開発環境で調整したテンプレートを本番環境に反映するため画面を行き来している際、どの環境を操作しているのか混乱して不安になる。そんな自分のためのカスタマイズです w
user.js の調整
管理画面で読み込まれる user.js
に、次のコードを定義します。
(function($){
// 現在のホスト
var _currentHost = location.host;
// 開発環境のホスト
var _developHosts = ['mt7.docker', 'mtappjquery.docker'];
// メッセージバーの HTML
var _warningMessageBar = '<div id="warning-bar">開発環境(' + _currentHost + ')を操作中</div>';
// 現在のホストが開発環境のホストに含まれる場合のみ
if($.inArray(_currentHost, _developHosts) > -1){
// メッセージバーを追加
$('body').append(_warningMessageBar);
// メッセージバーのスタイルを調整
$('#warning-bar').css({
'color': 'white',
'background': '#c20',
'width': '100vw',
'position': 'fixed',
'top': 0,
'left': 0,
'text-align': 'center',
'padding': '.75rem 1.25rem',
'font-weight': 'bold'
});
// メッセージバーの高さ分、body に上余白を追加
$('body').css({
'padding-top': '42px'
});
}
})(jQuery);
開発環境のホストを配列にセットしておき、そこに現在のホストが含まれるかを $.inArray
で判別。該当する場合のみ、body
直下にメッセージバーを追加しています。
適用すると管理画面のヘッダーにメッセージバーが固定表示されます。
記憶が確かなら Movable Type 6 系ではログイン画面に user.js
が適用されなかったと思うのですが、Movable Type 7 だと管理画面すべてで利用できるようですね。