Created
August 16, 2021 14:56
-
-
Save riga/c7325f55f9312e150737b5c942b7e1e1 to your computer and use it in GitHub Desktop.
Index page for viewing plots in web browsers (copy recursively to subdirectories)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <? | |
| // CHANGE ME: add your local www root here | |
| $local_root = "/eos/home-i03/m/mrieger/www"; | |
| // extensions to scan | |
| $additional_extensions = array("pdf", "cxx", "eps", "root", "txt"); | |
| // mode for showing hits when searching | |
| // "all", "any" or empty | |
| $search_pattern_mode = "any"; | |
| function show_entry($name) { | |
| global $search_pattern_mode; | |
| // always hide entries starting with "." or "_" | |
| if (substr($name, 0, 1) == "." || substr($name, 0, 1) == "_") { | |
| return False; | |
| } | |
| // show the entry when no search pattern is defined | |
| if (!isset($_GET["search"]) || empty($_GET["search"])) { | |
| return True; | |
| } | |
| // split into subpatterns by space | |
| $patterns = explode(" ", preg_replace("/\s+/", " ", $_GET["search"])); | |
| if ($search_pattern_mode == "all") { | |
| // all patterns must match | |
| foreach($patterns as $pattern) { | |
| if (!fnmatch("*" . $pattern . "*", $name)) { | |
| return False; | |
| } | |
| } | |
| return True; | |
| } else if ($search_pattern_mode == "any") { | |
| // at least one pattern must match | |
| foreach($patterns as $pattern) { | |
| if (fnmatch("*" . $pattern . "*", $name)) { | |
| return True; | |
| } | |
| } | |
| return False; | |
| } else { | |
| // match with the search pattern as is | |
| return fnmatch("*" . $_GET["search"] . "*", $name); | |
| } | |
| } | |
| ?> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <style type="text/css"> | |
| nav ol.breadcrumb { | |
| margin: 0; | |
| padding: 0; | |
| background-color: transparent; | |
| } | |
| body > div.container-fluid { | |
| margin: 15px 0; | |
| padding: 0 15px; | |
| } | |
| .empty-text { | |
| font-style: italic; | |
| font-size: 0.9rem; | |
| } | |
| #plot-listing .card { | |
| margin: 5px; | |
| } | |
| #plot-listing .card-header { | |
| font-size: 0.8rem; | |
| padding: 0.4rem; | |
| } | |
| #plot-listing .card-footer { | |
| height: 100%; | |
| font-size: 0.8rem; | |
| padding: 0.4rem; | |
| } | |
| @media screen and (min-width: 1200px) { | |
| #plot-listing .card { | |
| max-width: 350px; | |
| } | |
| } | |
| @media screen and (min-width: 800px) and (max-width: 1199px) { | |
| #plot-listing .card { | |
| max-width: 300px; | |
| } | |
| } | |
| @media screen and (min-width: 668px) and (max-width: 799px) { | |
| #plot-listing .card { | |
| max-width: 250px; | |
| } | |
| } | |
| /* iPhone 6, 6s, 7, 8, portrait mode, without pixel ratio setting */ | |
| @media only screen and (max-height: 667px) and (orientation: portrait) { | |
| #plot-listing .card { | |
| max-width: 162px; | |
| } | |
| } | |
| /* iPhone 6, 6s, 7, 8, landscape mode, without pixel ratio setting */ | |
| @media only screen and (max-height: 667px) and (orientation: landscape) { | |
| #plot-listing .card { | |
| max-width: 202px; | |
| } | |
| } | |
| </style> | |
| <title>PlotBrowser</title> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
| <ul class="navbar-nav mr-auto"> | |
| <li> | |
| <ol class="breadcrumb"> | |
| <? | |
| $rel_dir = trim(str_replace($local_root, "", getcwd()), "/"); | |
| $fragments = explode("/", $rel_dir); | |
| foreach($fragments as $i=>$fragment) { | |
| $href = implode("/", array_fill(0, count($fragments) - 1 - $i, "..")); | |
| if ($i < count($fragments) - 1) { | |
| echo "<li class=\"breadcrumb-item\"><a href=\"$href\">$fragment</a></li>"; | |
| } else { | |
| echo "<li class=\"breadcrumb-item active\">$fragment</li>"; | |
| } | |
| } | |
| ?> | |
| </ol> | |
| </li> | |
| </ul> | |
| <form class="form-inline"> | |
| <div class="input-group"> | |
| <input class="form-control" type="search" name="search" placeholder="Search" aria-label="Search" value="<?php if (isset($_GET["search"])) echo htmlspecialchars($_GET["search"]); ?>"> | |
| <div class="input-group-append"> | |
| <button class="btn btn-outline-success" type="submit">Search</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </nav> | |
| <? | |
| if (isset($_GET["search"]) && !empty($_GET["search"])) { | |
| echo "<div id=\"search-description\" class=\"container-fluid\">"; | |
| echo "<i>Searching for '<b>" . $_GET["search"] . "</b>'"; | |
| if ($search_pattern_mode != "") { | |
| echo " (mode '" . $search_pattern_mode . "')"; | |
| } | |
| echo "</i></div>"; | |
| } | |
| ?> | |
| <div id="directory-listing" class="container-fluid"> | |
| <h4><a id="directories">Directories</a></h4> | |
| <? | |
| $dir_names = array(); | |
| foreach (glob("*") as $dir_name) { | |
| if (!is_dir($dir_name) || !show_entry($dir_name)) { | |
| continue; | |
| } | |
| array_push($dir_names, $dir_name); | |
| } | |
| if (count($dir_names) == 0) { | |
| echo "<span class=\"empty-text\">No directories to display</span>"; | |
| } else { | |
| echo "<ul>"; | |
| sort($dir_names); | |
| foreach($dir_names as $dir_name) { | |
| echo "<li><a href=\"$dir_name\">$dir_name</a></li>"; | |
| } | |
| echo "</ul>"; | |
| } | |
| ?> | |
| </div> | |
| <div id="plot-listing" class="container-fluid"> | |
| <h4><a id="plots">Plots</a></h4> | |
| <div class="d-flex align-content-start flex-wrap"> | |
| <? | |
| $covered_files = array(); | |
| $plot_names = array(); | |
| foreach (glob("*.png") as $plot_name) { | |
| if (!is_file($plot_name) || !show_entry($plot_name)) { | |
| continue; | |
| } | |
| array_push($plot_names, $plot_name); | |
| } | |
| if (count($plot_names) == 0) { | |
| echo "<span class=\"empty-text\">No plots to display</span>"; | |
| } else { | |
| sort($plot_names); | |
| foreach ($plot_names as $plot_name) { | |
| array_push($covered_files, $plot_name); | |
| echo "<div class=\"card text-center\">"; | |
| echo " <div class=\"card-header\">"; | |
| echo " <a href=\"$plot_name\">" . substr($plot_name, 0, -4) . "</a>"; | |
| echo " </div>"; | |
| echo " <a href=\"$plot_name\">"; | |
| echo " <img class=\"card-img-top\" src=\"$plot_name\">"; | |
| echo " </a>"; | |
| echo " <div class=\"card-footer\">"; | |
| echo " <p class=\"card-text\">"; | |
| $others = array(); | |
| foreach ($additional_extensions as $ext) { | |
| $other = str_replace(".png", ".$ext", $plot_name); | |
| if (file_exists($other) && show_entry($other)) { | |
| array_push($covered_files, $other); | |
| $badge_style = "secondary"; | |
| if ($ext == "pdf") { | |
| $badge_style = "info"; | |
| } else if ($ext == "root") { | |
| $badge_style = "dark"; | |
| } else if ($ext == "txt") { | |
| $badge_style = "light"; | |
| } | |
| array_push($others, "<a href=\"$other\" class=\"badge badge-$badge_style\">$ext</a>"); | |
| } | |
| } | |
| if (count($others) == 0) { | |
| echo "<i>No other file extensions</i>"; | |
| } else { | |
| echo implode(" ", $others); | |
| } | |
| echo " </p>"; | |
| echo " </div>"; | |
| echo "</div>"; | |
| } | |
| } | |
| ?> | |
| </div> | |
| </div> | |
| <div id="file-listing" class="container-fluid"> | |
| <h4><a id="files">Other files</a></h4> | |
| <? | |
| $file_names = array(); | |
| foreach (glob("*") as $file_name) { | |
| if (!is_file($file_name) || $file_name == "index.php" || !show_entry($file_name) || in_array($file_name, $covered_files)) { | |
| continue; | |
| } | |
| array_push($file_names, $file_name); | |
| } | |
| if (count($file_names) == 0) { | |
| echo "<span class=\"empty-text\">No files to display</span>"; | |
| } else { | |
| echo "<ul>"; | |
| sort($file_names); | |
| foreach($file_names as $file_name) { | |
| echo "<li><a href=\"$file_name\">$file_name</a></li>"; | |
| } | |
| echo "</ul>"; | |
| } | |
| ?> | |
| </div> | |
| <div class="container-fluid"> | |
| <button type="button" class="btn btn-outline-primary btn-sm" id="scroll-top">To top</button> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| <script> | |
| $(document).ready(function() { | |
| $("#scroll-top").click(function() { | |
| window.scrollTo({top: 0, behavior: "smooth"}); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment