ユーティリティ

2017年08月

- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoのtablesorter.jsを最新版にしてメディアの挿入ファイルを更新日時の新しいもの順に並べる

以前、freoのインラインフレームのメディア管理で常に更新日時の新しいファイルを上に表示させる方法 を紹介しましたが、望みどおりの表示にならない場合がありました。

そこで、方法を模索しているうちに tablesorter.js の 非公式フォーク版(2017/6/8現在ver2.28.14)を見つけ、ver2.1.16(※freoに搭載されているのはver2.0.5)から emptyTo オプションにより空のセルの位置をオプションで設定することが可能となり、それを導入するともう少し簡単に設定できたので、その方法をご紹介します。

  1. jquery.tablesorter.js の最新版を こちら からダウンロードし、tablesorter-master.zip を解凍して、dist/js/ にある jquery.tablesorter.min.js を jquery.tablesorter.js にリネームして、freoの js/ ディレクトリにアップします。
  2. js/iframe.js の10~17行目あたりにある
    	//メディア管理
    	$("#media").tablesorter({
    		headers: {
    			2: { sorter: 'digit'},
    			3: { sorter: false },
    			4: { sorter: false }
    		}
    	});
    の部分を
    	//メディア管理
    	$("#media").tablesorter({
    		sortList :[[1,1]],
    		emptyTo: 'top',
    		headers: {
    			2: { sorter: 'digit'},
    			3: { sorter: false },
    			4: { sorter: false }
    		}
    	});
    に変更(赤字を追加)します。
  3. 同じく js/admin.js の10~17行目あたりにある
    	//メディア管理
    	$("#media").tablesorter({
    		headers: {
    			2: { sorter: 'digit' },
    			3: { sorter: false },
    			4: { sorter: false }
    		}
    	});
    の部分も
    	//メディア管理
    	$("#media").tablesorter({
    		emptyTo: 'top',
    		headers: {
    			2: { sorter: 'digit' },
    			3: { sorter: false },
    			4: { sorter: false }
    		}
    	});
    
    に変更(赤字を追加)します。
    注:こちらは通常の管理画面での「メディア管理」用の設定で、更新日時の新しいファイル順に並べるようにはしていません。
  4. css/iframe.css の20~31行目あたりと css/admin.css の156~167行目あたりにある
    table.tablesorter thead tr .header {
    	background-image: url(../images/tablesorter/bg.gif);
    	background-repeat: no-repeat;
    	background-position: center right;
    	cursor: pointer;
    }
    table.tablesorter thead tr .headerSortUp {
    	background-image: url(../images/tablesorter/asc.gif);
    }
    table.tablesorter thead tr .headerSortDown {
    	background-image: url(../images/tablesorter/desc.gif);
    }
    の部分を
    table.tablesorter thead tr .tablesorter-header {
    	background-image: url(../images/tablesorter/bg.gif);
    	background-repeat: no-repeat;
    	background-position: center right;
    	cursor: pointer;
    	white-space: normal;
    	padding: 4px 20px 4px 4px;
    }
    table.tablesorter thead tr .tablesorter-headerAsc {
    	background-image: url(../images/tablesorter/asc.gif);
    }
    table.tablesorter thead tr .tablesorter-headerDesc {
    	background-image: url(../images/tablesorter/desc.gif);
    }
    table.tablesorter thead tr .sorter-false {
    	background-image: none;
    	cursor: default;
    	padding: 4px;
    }
    
    に変更(緑字赤字に)します。
  5. これだけでインラインフレームが開いた時に更新日時が新しいファイルの順になるのですが、同一日付内で時間の新しい順にならない場合は、templates/internals/admin/iframe_media.html の93行目あたりにある
    <td><span title="{$file.datetime|date_format:'%Y/%m/%d %H:%M:%S'}"><!--{if $file.datetime|date_format:'%Y%m%d' == $smarty.now|date_format:'%Y%m%d'}-->{$file.datetime|date_format:'%H:%M:%S'}<!--{else}-->{$file.datetime|date_format:'%Y/%m/%d'}<!--{/if}--></span></td>
    の部分を
    <td>{$file.datetime|date_format:'%Y/%m/%d %H:%M:%S'}</td>
    に変更(緑字を削除)します。

※もし変更してアップしたにもかかわらず反映されていない場合は、

  • ブラウザのキャッシュをクリアする
  • フレームを再読み込みする
  • http://~ (freoのURL)~/index.php/admin/media?type=iframe にアクセスしてインラインフレームのみを表示させた状態

のいずれかでブラウザを更新してみてください。 

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)