Mercurial > dirlist-php
annotate index.php @ 58:281a129299cf
Update js and use jquery
author | nanaya <me@myconan.net> |
---|---|
date | Tue, 04 Apr 2017 22:26:45 +0900 |
parents | aa12b7cbe1e8 |
children | 612d99622699 |
rev | line source |
---|---|
0 | 1 <?php |
56 | 2 |
57 | 3 define('DL_VERSION', '2.2.3'); |
56 | 4 // Required for strftime(). Set to UTC because :internet:. |
5 date_default_timezone_set('UTC'); | |
4 | 6 |
56 | 7 // $uri: web-facing path |
8 $uri = $_SERVER["REQUEST_URI"]; | |
9 $query_string_start = strpos($uri, "?"); | |
10 if ($query_string_start !== false) { | |
11 $uri = substr($uri, 0, $query_string_start); | |
12 } | |
13 $uri = urldecode($uri); | |
4 | 14 |
56 | 15 // $dir: filesystem path |
16 if (isset($_SERVER["DL_DIR"])) { | |
17 $dir = $_SERVER["DL_DIR"]; | |
18 } elseif (isset($_SERVER["CONTEXT_DOCUMENT_ROOT"])) { | |
19 $dir = $_SERVER["CONTEXT_DOCUMENT_ROOT"]; | |
20 $dir .= substr($uri, strlen($_SERVER["CONTEXT_PREFIX"])); | |
21 } else { | |
22 $dir = $_SERVER["DOCUMENT_ROOT"] . $uri; | |
23 } | |
4 | 24 |
56 | 25 if (realpath($dir) === false) { |
26 header("HTTP/1.0 404 Not Found"); | |
27 } elseif (substr($uri, -1) !== "/") { | |
28 header("Location: " . $uri . "/"); | |
29 } | |
4 | 30 |
56 | 31 if (http_response_code() !== 200) { |
32 exit; | |
33 } | |
3 | 34 |
56 | 35 $dir_handle = opendir($dir); |
36 $files = array(); | |
37 $dirs = array(); | |
38 while (($file = readdir($dir_handle)) !== false) { | |
39 if ($file === "." || $file === "..") { | |
40 continue; | |
41 } elseif (!(isset($_SERVER["DL_SHOWALL"]) && $_SERVER["DL_SHOWALL"] === "1") && substr($file, 0, 1) === ".") { | |
42 continue; | |
43 } elseif (is_dir($dir . $file)) { | |
44 $dirs[] = $file; | |
45 } else { | |
46 $files[] = $file; | |
47 } | |
3 | 48 } |
56 | 49 sort($files); |
50 sort($dirs); | |
43
54c13838f8bb
Add spacing to before/after hidden data part.
nanaya <me@myconan.net>
parents:
42
diff
changeset
|
51 |
56 | 52 // BEGIN UTILITY |
53 function h($string) | |
54 { | |
55 return htmlspecialchars($string, ENT_QUOTES, "UTF-8"); | |
56 } | |
57 function a($string) | |
58 { | |
59 return preg_replace("#(%2F)+#", "/", rawurlencode($string)); | |
60 } | |
61 function link_to($target, $title) | |
62 { | |
63 return('<a href="' . a($target) . '">' . h($title) . "</a>"); | |
4 | 64 } |
65 | |
56 | 66 function human_size($size) |
67 { | |
68 $thousand_units = array("ko", "Mo", "Go", "To", "Po"); | |
69 | |
70 $return_format = "%d %s"; | |
3 | 71 |
56 | 72 if ($size === 1) { |
73 $return_unit = "octet"; | |
74 } elseif ($size < 1000) { | |
75 $return_unit = "octets"; | |
76 } else { | |
77 $size /= 1000; | |
78 for ($i = 0; $size >= 1000 && $i < count($thousand_units); $i++) { | |
79 $size /= 1000; | |
80 } | |
81 $return_format = "%.2f %s"; | |
82 $return_unit = $thousand_units[$i]; | |
83 } | |
84 return sprintf($return_format, $size, $return_unit); | |
42 | 85 } |
86 | |
56 | 87 function hidden_data($data = "", $is_dir = false) |
88 { | |
89 return "<i> " . ($is_dir === true ? 0 : 1) . " " . $data . " </i>"; | |
90 } | |
91 // END UTILITY | |
92 | |
93 function tree_link($uri) | |
94 { | |
95 $uri_array = explode("/", trim($uri, "/")); | |
4 | 96 |
56 | 97 $tree_path = "/"; |
98 $tree_link = link_to($tree_path, "[root]"); | |
99 $tree_link .= "/"; | |
51 | 100 |
56 | 101 foreach ($uri_array as $p) { |
102 if ($p === "") { | |
103 continue; | |
104 } | |
105 $tree_path .= $p . "/"; | |
106 $tree_link .= link_to($tree_path, $p) . "/"; | |
107 } | |
3 | 108 |
56 | 109 return $tree_link; |
110 } | |
111 | |
112 function up_link($uri) | |
113 { | |
114 if ($uri !== "/") { | |
115 return "<tr><td colspan=3>" . link_to(dirname($uri) . "/", "[up]") . "</td></tr>"; | |
116 } | |
2 | 117 } |
56 | 118 |
119 function file_rows($dir, $files, $is_dir) | |
120 { | |
121 $file_suffix = ""; | |
122 if ($is_dir) { | |
123 $file_suffix = "/"; | |
124 } | |
125 | |
126 $file_rows = ""; | |
127 foreach ($files as $file) { | |
128 $file_path = $dir."/".$file; | |
129 | |
130 if (!file_exists($file_path)) { | |
131 continue; | |
132 } | |
133 $file_stat = stat($file_path); | |
134 | |
135 $file_rows .= | |
136 "<tr>". | |
137 "<td>". | |
138 hidden_data("", $is_dir). | |
139 link_to($file.$file_suffix, $file.$file_suffix). | |
140 "</td>". | |
141 "<td>". | |
142 hidden_data($file_stat["size"], $is_dir). | |
143 ($is_dir ? "[dir]" : human_size($file_stat["size"])). | |
144 "</td>". | |
145 "<td>". | |
146 hidden_data("", $is_dir).$columns["date"]. | |
147 h(strftime("%Y-%m-%d %H:%M %Z", $file_stat["mtime"])). | |
148 "</td>". | |
149 "</tr>"; | |
150 } | |
151 return $file_rows; | |
152 } | |
153 | |
154 header('Content-Type: text/html; charset=utf-8'); | |
0 | 155 ?> |
3 | 156 <!doctype html> |
157 <head> | |
56 | 158 <meta charset="utf-8"> |
57 | 159 <title>Index of <?= h($uri); ?></title> |
56 | 160 <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
58 | 161 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css"> |
3 | 162 |
56 | 163 <style type="text/css"> |
164 .mfp-content figure { margin: 0; } | |
165 * { box-sizing: border-box; } | |
166 body { | |
167 font-family: Segoe UI, sans-serif; | |
168 font-size: 14px; | |
169 } | |
170 h1 { margin: 5px; } | |
171 table { | |
172 width: 100%; | |
173 } | |
174 th:first-child, td:first-child { | |
175 width: 100%; | |
176 white-space: pre-wrap; | |
177 word-wrap: break-word; | |
178 word-break: break-all; | |
179 } | |
180 tr { | |
181 position: relative; | |
182 } | |
183 th, td { | |
184 white-space: nowrap; | |
185 padding: 2px 5px; | |
186 } | |
42 | 187 |
56 | 188 i { |
189 display: none; | |
190 } | |
191 | |
192 input { | |
193 width: 100%; | |
194 margin: 10px 0px; | |
195 } | |
46 | 196 |
56 | 197 th span { |
198 display: block; | |
199 text-decoration: underline; | |
200 } | |
201 th span.desc::after { | |
202 content: " ▼"; | |
203 } | |
204 th span.asc::after { | |
205 content: " ▲"; | |
206 } | |
42 | 207 |
56 | 208 @media (min-width: 768px) { |
209 th { | |
210 background: #ccc; | |
211 cursor: pointer; | |
212 } | |
213 tr:nth-child(even) { background: #eee; } | |
214 tr:hover { background: #ddd; } | |
215 } | |
3 | 216 |
56 | 217 @media (max-width: 767px) { |
218 table { | |
219 border-spacing: 0 10px; | |
220 } | |
221 th { display: none; } | |
222 tr { | |
223 background: #eee; | |
224 } | |
225 td { | |
226 display: inline-block; | |
227 } | |
228 td:first-child { | |
229 background: #ddd; | |
230 padding: 5px; | |
231 } | |
232 table a { | |
233 font-size: 18px; | |
234 display: block; | |
235 } | |
236 input { font-size: 18px; } | |
237 } | |
238 </style> | |
3 | 239 </head> |
46 | 240 <body id="files"> |
57 | 241 <h1>Index of <?= tree_link($uri); ?></h1> |
3 | 242 |
56 | 243 <input placeholder="search (non-recursive)" class="search" /> |
46 | 244 |
56 | 245 <table> |
246 <thead> | |
247 <tr> | |
248 <th><span class="sort" data-sort="filename">File</span></th> | |
249 <th><span class="sort" data-sort="size">Size</span></th> | |
250 <th><span class="sort" data-sort="date">Date</span></th> | |
251 </tr> | |
57 | 252 <?= up_link($uri); ?> |
56 | 253 </thead> |
254 <tbody class="list"> | |
57 | 255 <?= file_rows($dir, $dirs, true); ?> |
256 <?= file_rows($dir, $files, false); ?> | |
56 | 257 </tbody> |
258 </table> | |
4 | 259 |
56 | 260 <footer> |
261 <hr> | |
262 <em> | |
57 | 263 Running <a href="https://bitbucket.org/edogawaconan/dirlist-php">dirlist-php <?= DL_VERSION ?></a>. |
264 Powered by PHP <?= phpversion(); ?>. | |
56 | 265 </em> |
266 </footer> | |
14 | 267 |
58 | 268 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
269 <script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> | |
270 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script> | |
17
8b222e3ffe25
Set lightbox attributes through javascript instead of php.
edogawaconan <me@myconan.net>
parents:
16
diff
changeset
|
271 |
56 | 272 <script> |
273 $("table td a").each(function() { | |
274 if (!this.href.match(/\.(jpe?g|png|gif|webp)$/i)) return | |
275 | |
276 this.className = "image" | |
277 this.setAttribute("title", this.innerHTML) | |
278 }) | |
32
986aec12eb7f
Use magnific popup instead of lightbox.
edogawaconan <me@myconan.net>
parents:
30
diff
changeset
|
279 |
56 | 280 $("table > tbody").magnificPopup({ |
281 delegate: "a.image", | |
282 type: "image", | |
283 gallery: { enabled: true } | |
284 }) | |
42 | 285 |
56 | 286 $("tbody td:nth-child(3n + 1)").addClass("filename") |
287 $("tbody td:nth-child(3n + 2)").addClass("size") | |
288 $("tbody td:nth-child(3n + 3)").addClass("date") | |
289 | |
290 new List("files", { | |
291 valueNames: ["filename", "size", "date"], | |
57 | 292 page: <?= count($dirs) + count($files); ?> |
56 | 293 }) |
294 </script> | |
3 | 295 </body> |