freoカスタマイズ集

以前、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>

   に変更（緑字を削除）します。

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

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

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