Mercurial > dirlist-php
comparison index.php @ 42:ddb5458658d2
Sortable list \o/
author | nanaya <me@myconan.net> |
---|---|
date | Sun, 24 May 2015 18:03:52 +0900 |
parents | e122e4e55e75 |
children | 54c13838f8bb |
comparison
equal
deleted
inserted
replaced
41:e122e4e55e75 | 42:ddb5458658d2 |
---|---|
1 <?php | 1 <?php |
2 define('DL_VERSION', '2.0.2'); | 2 define('DL_VERSION', '2.1.0'); |
3 // Required for strftime(). Set to UTC because :internet:. | 3 // Required for strftime(). Set to UTC because :internet:. |
4 date_default_timezone_set('UTC'); | 4 date_default_timezone_set('UTC'); |
5 | 5 |
6 // $uri: web-facing path | 6 // $uri: web-facing path |
7 $uri = $_SERVER["REQUEST_URI"]; | 7 $uri = $_SERVER["REQUEST_URI"]; |
79 } | 79 } |
80 | 80 |
81 return $tree_link; | 81 return $tree_link; |
82 } | 82 } |
83 | 83 |
84 function up_link() { | |
85 if ($uri !== "/") { | |
86 return "<tr><td colspan=3>" . link_to(dirname($uri) . "/", "[up]") . "</td></tr>"; | |
87 } | |
88 } | |
89 | |
84 function file_rows($files, $is_dir) { | 90 function file_rows($files, $is_dir) { |
85 global $dir, $uri; | 91 global $dir, $uri; |
86 | 92 |
87 $file_rows = ""; | 93 $file_rows = ""; |
88 $file_suffix = ""; | 94 $file_suffix = ""; |
95 $list_file_prefix = ""; | |
89 | 96 |
90 if ($is_dir) { | 97 if ($is_dir) { |
91 $file_suffix = "/"; | 98 $file_suffix = "/"; |
92 | 99 $list_file_prefix = "<i>0</i>"; |
93 if ($uri !== "/") { | 100 } else { |
94 $file_rows .= "<tr><td colspan=3>" . link_to(dirname($uri) . "/", "[up]") . "</td></tr>"; | 101 $list_file_prefix = "<i>1</i>"; |
95 } | |
96 } | 102 } |
97 | 103 |
98 foreach($files as $file) { | 104 foreach($files as $file) { |
99 $file_stat = @stat($dir . "/". $file); | 105 $file_stat = @stat($dir . "/". $file); |
100 | 106 |
101 $file_rows .= "<tr>"; | 107 $file_rows .= "<tr>"; |
102 $file_rows .= "<td>".link_to($file . $file_suffix, $file . $file_suffix)."</td>"; | 108 $file_rows .= "<td>". $list_file_prefix . link_to($file . $file_suffix, $file . $file_suffix)."</td>"; |
103 | 109 |
104 $file_rows .= "<td>"; | 110 $file_rows .= "<td>"; |
105 if ($is_dir) { $file_rows .= "[dir]"; } | 111 if ($is_dir) { $file_rows .= "<i>0</i>[dir]"; } |
106 else { $file_rows .= human_size($file_stat['size']); } | 112 else { $file_rows .= "<i>" . $file_stat["size"] . "</i>" . human_size($file_stat['size']); } |
107 $file_rows .= "</td>"; | 113 $file_rows .= "</td>"; |
108 | 114 |
109 $file_rows .= "<td>".h(strftime("%Y-%m-%d %H:%M %Z", $file_stat['mtime']))."</td>"; | 115 $file_rows .= "<td>".h(strftime("%Y-%m-%d %H:%M %Z", $file_stat['mtime']))."</td>"; |
110 | 116 |
111 $file_rows .= "</tr>"; | 117 $file_rows .= "</tr>"; |
143 th, td { | 149 th, td { |
144 white-space: nowrap; | 150 white-space: nowrap; |
145 padding: 2px 5px; | 151 padding: 2px 5px; |
146 } | 152 } |
147 | 153 |
154 i { | |
155 display: none; | |
156 } | |
157 | |
158 th span { | |
159 display: block; | |
160 text-decoration: underline; | |
161 } | |
162 th span.desc:after { | |
163 content: " ▼"; | |
164 } | |
165 th span.asc:after { | |
166 content: " ▲"; | |
167 } | |
168 | |
148 @media (min-width: 768px) { | 169 @media (min-width: 768px) { |
149 th { background: #ccc; } | 170 th { |
171 background: #ccc; | |
172 cursor: pointer; | |
173 } | |
150 tr:nth-child(even) { background: #eee; } | 174 tr:nth-child(even) { background: #eee; } |
151 tr:hover { background: #ddd; } | 175 tr:hover { background: #ddd; } |
152 } | 176 } |
153 | 177 |
154 @media (max-width: 767px) { | 178 @media (max-width: 767px) { |
174 </style> | 198 </style> |
175 </head> | 199 </head> |
176 <body> | 200 <body> |
177 <h1>Index of <?php echo tree_link(); ?></h1> | 201 <h1>Index of <?php echo tree_link(); ?></h1> |
178 | 202 |
179 <table> | 203 <table id="files"> |
180 <thead><tr> | 204 <thead> |
181 <th>File</th> | 205 <tr> |
182 <th>Size</th> | 206 <th><span class="sort" data-sort="filename">File</span></th> |
183 <th>Date</th> | 207 <th><span class="sort" data-sort="size">Size</span></th> |
184 </tr></thead> | 208 <th><span class="sort" data-sort="date">Date</span></th> |
185 <tbody> | 209 </tr> |
210 <?php echo up_link(); ?> | |
211 </thead> | |
212 <tbody class="list"> | |
186 <?php echo file_rows($dirs, true); ?> | 213 <?php echo file_rows($dirs, true); ?> |
187 <?php echo file_rows($files, false); ?> | 214 <?php echo file_rows($files, false); ?> |
188 </tbody> | 215 </tbody> |
189 </table> | 216 </table> |
190 | 217 |
195 Powered by PHP <?php echo phpversion(); ?>. | 222 Powered by PHP <?php echo phpversion(); ?>. |
196 </em> | 223 </em> |
197 </footer> | 224 </footer> |
198 | 225 |
199 <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script> | 226 <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script> |
200 | |
201 <script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script> | 227 <script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script> |
228 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script> | |
202 | 229 |
203 <script> | 230 <script> |
204 $("table td a").each(function() { | 231 $("table td a").each(function() { |
205 if (!this.href.match(/\.(jpe?g|png|gif|webp)$/i)) return | 232 if (!this.href.match(/\.(jpe?g|png|gif|webp)$/i)) return |
206 this.className = "image" | 233 this.className = "image" |
210 $("table > tbody").magnificPopup({ | 237 $("table > tbody").magnificPopup({ |
211 delegate: "a.image", | 238 delegate: "a.image", |
212 type: "image", | 239 type: "image", |
213 gallery: { enabled: true } | 240 gallery: { enabled: true } |
214 }) | 241 }) |
242 | |
243 $("tbody td:nth-child(3n + 1)").addClass("filename") | |
244 $("tbody td:nth-child(3n + 2)").addClass("size") | |
245 $("tbody td:nth-child(3n + 3)").addClass("date") | |
246 | |
247 ;(function() { | |
248 var | |
249 options = { | |
250 valueNames: ["filename", "size", "date"], | |
251 page: <?php echo count($dirs) + count($files); ?> | |
252 }, | |
253 list = new List("files", options) | |
254 })() | |
215 </script> | 255 </script> |
216 </body> | 256 </body> |