Mercurial > dirlist-php

diff index.php @ 42:ddb5458658d2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Sortable list \o/
author nanaya <me@myconan.net>
date Sun, 24 May 2015 18:03:52 +0900
parents e122e4e55e75
children 54c13838f8bb
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>