Sortable list \o/
1 files changed, 57 insertions(+), 17 deletions(-)

M index.php
M index.php +57 -17
@@ 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>