Mercurial > dirlist-php
changeset 42:ddb5458658d2
Sortable list \o/
author | nanaya <me@myconan.net> |
---|---|
date | Sun, 24 May 2015 18:03:52 +0900 |
parents | e122e4e55e75 |
children | 54c13838f8bb |
files | index.php |
diffstat | 1 files changed, 57 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/index.php Sun May 24 17:21:04 2015 +0900 +++ b/index.php Sun May 24 18:03:52 2015 +0900 @@ -1,5 +1,5 @@ <?php - define('DL_VERSION', '2.0.2'); + define('DL_VERSION', '2.1.0'); // Required for strftime(). Set to UTC because :internet:. date_default_timezone_set('UTC'); @@ -81,29 +81,35 @@ return $tree_link; } + function up_link() { + if ($uri !== "/") { + return "<tr><td colspan=3>" . link_to(dirname($uri) . "/", "[up]") . "</td></tr>"; + } + } + function file_rows($files, $is_dir) { global $dir, $uri; $file_rows = ""; $file_suffix = ""; + $list_file_prefix = ""; if ($is_dir) { $file_suffix = "/"; - - if ($uri !== "/") { - $file_rows .= "<tr><td colspan=3>" . link_to(dirname($uri) . "/", "[up]") . "</td></tr>"; - } + $list_file_prefix = "<i>0</i>"; + } else { + $list_file_prefix = "<i>1</i>"; } foreach($files as $file) { $file_stat = @stat($dir . "/". $file); $file_rows .= "<tr>"; - $file_rows .= "<td>".link_to($file . $file_suffix, $file . $file_suffix)."</td>"; + $file_rows .= "<td>". $list_file_prefix . link_to($file . $file_suffix, $file . $file_suffix)."</td>"; $file_rows .= "<td>"; - if ($is_dir) { $file_rows .= "[dir]"; } - else { $file_rows .= human_size($file_stat['size']); } + if ($is_dir) { $file_rows .= "<i>0</i>[dir]"; } + else { $file_rows .= "<i>" . $file_stat["size"] . "</i>" . human_size($file_stat['size']); } $file_rows .= "</td>"; $file_rows .= "<td>".h(strftime("%Y-%m-%d %H:%M %Z", $file_stat['mtime']))."</td>"; @@ -145,8 +151,26 @@ padding: 2px 5px; } + i { + display: none; + } + + th span { + display: block; + text-decoration: underline; + } + th span.desc:after { + content: " ▼"; + } + th span.asc:after { + content: " ▲"; + } + @media (min-width: 768px) { - th { background: #ccc; } + th { + background: #ccc; + cursor: pointer; + } tr:nth-child(even) { background: #eee; } tr:hover { background: #ddd; } } @@ -176,13 +200,16 @@ <body> <h1>Index of <?php echo tree_link(); ?></h1> - <table> - <thead><tr> - <th>File</th> - <th>Size</th> - <th>Date</th> - </tr></thead> - <tbody> + <table id="files"> + <thead> + <tr> + <th><span class="sort" data-sort="filename">File</span></th> + <th><span class="sort" data-sort="size">Size</span></th> + <th><span class="sort" data-sort="date">Date</span></th> + </tr> + <?php echo up_link(); ?> + </thead> + <tbody class="list"> <?php echo file_rows($dirs, true); ?> <?php echo file_rows($files, false); ?> </tbody> @@ -197,8 +224,8 @@ </footer> <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script> - <script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script> + <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script> <script> $("table td a").each(function() { @@ -212,5 +239,18 @@ type: "image", gallery: { enabled: true } }) + + $("tbody td:nth-child(3n + 1)").addClass("filename") + $("tbody td:nth-child(3n + 2)").addClass("size") + $("tbody td:nth-child(3n + 3)").addClass("date") + + ;(function() { + var + options = { + valueNames: ["filename", "size", "date"], + page: <?php echo count($dirs) + count($files); ?> + }, + list = new List("files", options) + })() </script> </body>