【freo】管理画面のメディアで一部のディレクトリだけ逆順にする【Tips】

01/201328

【freo】管理画面のメディアで一部のディレクトリだけ逆順にする【Tips】

きっかけ

自分、記事内で使用するメディアのファイル名は「"日付"+"連番"+".png"」（例：2013012801.png）で管理しているのですが、これをメディアから挿入させようとするとどうしても最新のはソートの関係上一番下になってしまうんですね。

それでは毎回記事を作成するうえで面倒極まりない。という考えがきっかけです。ディレクトリ内のメディア数が多ければ多いだけスクロールする必要が出てきますからね。

ちなみに自分は記事で使用するメディアはblogというディレクトリにいれています。ですので逆順にするのはこのディレクトリだけでいいんです。他のディレクトでは上記のような管理方法はしていないので、逆順にするとかえって管理が面倒になってしまいます。

ですので、今回は一部のディレクトリだけを逆順にする方法を記載しようかと思います。

（余談ですが今回から段落を意識した文にすることを心がけていきます）

ソートするには？

まずメディアをソートするためには標準で導入されているjquery.tablesorter.jsを使用します。

そしてソートの設定をするのはadmin.jsです。

ソートするにはadmin.js内の#メディア管理とコメントアウトされている箇所がありますので、その箇所を変更することで可能となります。

$("#media").tablesorter({
	headers: {
		sortList: [[0, 1]],
		2: { sorter: 'digit' },
		3: { sorter: false },
		4: { sorter: false }
	}
});

解説

まずfreoではメディアのファイル名で昇順ソートがなされています。

そしてそのソートを変更するには上記のsortList: [[0, 1]]を追記することで降順ソートができるようになります。

この際に前者の0というのはメディア情報のあるtableの列番号を示し、0から数えます。なので初期状態のメディアページを見ると0=ファイル名、1=更新日時、2＝サイズ、3＝画像、4＝作業となります。

また、後者の1というのは昇順（0）か降順（1）かということです。今回はデフォルトの昇順の逆……つまり降順にしたかったので1としました。

参照する文字列

ちなみに2: { sorter: 'digit' }というのは2番目の列……つまりサイズを数字としてソートしますという意味です。falseはソートしませんとなります。記述なしというのは文字列としてソートするとなります。

数字でソートするときの注意点

数字としてソートする場合、ソート対象にカンマなどが含まれていると正常に行えません。その場合はjquery.tablesorter.js内の

var i = parseFloat(s);

を

var i = parseFloat(s.replace(/,/g,""));

に変更することで正常にソートが行えます。

本題

さて、ここにきてようやく本題です。

今回は一部のディレクトリのみをソート対象としたいわけですので、条件分岐が必要となります。

まずはmedia.htmlおよびiframe_media.htmlの

<table summary="メディア" id="media" class="tablesorter">

を

<table summary="メディア" id="media{if $freo.query.path == '対象のディレクトリ/'}_任意の文字{/if}" class="tablesorter">

に変更してください。

この際に対象のディレクトリの後に半角スラッシュ（/）、任意の文字の前に半角アンダーバー（_）を入れるのを忘れないでください。特に前者は後述のid名とは違い、入れていないと機能しなくなります。

次にadmin.js内の先ほどの部分を以下のように書き換えます。

if ($('#media_先ほどの任意の文字')) {
	$("#media_先ほどの任意の文字").tablesorter({
		sortList: [[0, 1]],
		headers: {
			2: { sorter: 'digit' },
			3: { sorter: false },
			4: { sorter: false }
		}
	});
} else {
	$("#media").tablesorter({
		headers: {
			2: { sorter: 'digit' },
			3: { sorter: false },
			4: { sorter: false }
		}
	});
}

先ほど任意の文字の前に半角アンダーバーを入れてくださいと書きましたが、そのほうが管理しやすかったためそうしました。ですので別になくてもいいです。いっそうのことmediaという文字すらもなくてもいいです。その際にきちんとadmin.js内も変更すればたぶんソートされますから。

言い訳

本来ならもっとスマートなadmin.jsの記述方法があると思います。

例えばsortList: [[0, 1]],の部分だけ条件分岐して、該当ディレクトリなら適用。そうすればわざわざmedia.htmlやiframe_media.htmlでmedia_任意の文字にする必要もなかったわけですが、自分が試してみたところなぜかエラーになってしまったので諦めました。

更新履歴