Switch to jQuery/AJAX folder navigation

ajax/getfoldercontents.php

@@ -0,0 +1,101 @@
+<?php
+
+require '../header.php';
+
+require_login();
+
+# usort function for sorting by array's "mtime"
+# Return 1 or -1 in reverse order so newest is first
+function compareDates($a, $b) {
+    if ( $a["mtime"] == $b["mtime"] ) return 0;
+    return ($a["mtime"] < $b["mtime"]) ? 1 : -1;
+}
+
+# usort function for sorting by array's "name"
+# Does "natural" sorting so "28 Days Later" comes before "2099 Hulk"
+function compareNames($a, $b) {
+    if ( $a["name"] == $b["name"] ) return 0;
+    return strnatcmp($a["name"], $b["name"]);
+}
+
+$compath = $_SESSION['compath'];
+$fullcompath = COMICSDIR . (($compath == "/") ? "" : $compath) . "/";
+
+// build up a list of comics and issues which have been
+$query = "SELECT comic, issue FROM pagetracker WHERE username=:username";
+$fields = array();
+$fields[":username"] = $_SESSION['username'];
+$sth = $globaldbh->prepare($query);
+$sth->execute($fields);
+$comics_read = array();
+$issues_read = array();
+while ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
+    if ( !in_array($row['comic'], $comics_read) ) $comics_read[] = $row['comic'];
+    if ( !in_array($row['issue'], $issues_read) ) $issues_read[] = $row['issue'];
+}
+
+$data = array();
+$folders = array();
+$issues = array();
+$entries = scandir($fullcompath);
+foreach ( $entries as $entry ) {
+    if ( ($entry == ".") || ($entry == "..") ) continue;
+    $info = array();
+    $info["name"] = $entry;
+    $info["namesafe"] = htmlspecialchars($entry, ENT_QUOTES);
+    if ( is_dir($fullcompath . $entry) ) {
+        $info["comname"] = (strpos($entry, " - ") !== false) ? str_replace(" - ", "<br />", $entry) : $entry;
+        $info["newpath"] = $compath . (($compath == "/") ? "" : "/") . $entry;
+        $info["mtime"] = filemtime($fullcompath . $entry);
+        //$info["thumburl"] = htmlentities(THUMBSDIR . $compath . (($compath == "/") ? "" : "/") . $entry, ENT_QUOTES) . ".jpg";
+        $info["thumburl"] = THUMBSDIR . $compath . (($compath == "/") ? "" : "/") . $entry . ".jpg";
+        if ( in_array($entry, $comics_read) ) {
+            $info["read"] = true;
+            $readclass = " readborder";
+        } else {
+            $info["read"] = false;
+            $readclass = "";
+        }
+        $info["div"] = "<div class='item folder{$readclass}' data-path=\"{$info["newpath"]}\" data-name=\"{$info["comname"]}\">";
+        $info["div"] .= "<img src=\"{$info["thumburl"]}\"><br clear=all />{$info["comname"]}</div>";
+        $folders[] = $info;
+    } else {
+        if ( (substr($entry, -3) == "cbz") || (substr($entry, -3) == "cbr") ) {
+            $info["comname"] = substr(((strpos($entry, " - ") !== false) ? str_replace(" - ", "<br />", $entry) : $entry), 0, -4);
+            $info["relcomic"] = base64_encode($compath . (($compath == "/") ? "" : "/") . $entry);
+            $info["mtime"] = filemtime($fullcompath . $entry);
+            $info["thumburl"] = htmlentities(THUMBSDIR . $compath . (($compath == "/") ? "" : "/") . substr($entry, 0, -4), ENT_QUOTES) . ".jpg";
+            if ( in_array($entry, $issues_read) ) {
+                $info["read"] = true;
+                $readclass = " readborder";
+            } else {
+                $info["read"] = false;
+                $readclass = "";
+            }
+            $info["div"] = "<div class='item{$readclass}'>";
+            $info["div"] .= "<img class='issue' data-relcomic=\"{$info["relcomic"]}\" data-comname=\"{$info["comname"]}\" border=0 src=\"{$info["thumburl"]}\">";
+            $info["div"] .= "<br clear=all /><a href=\"downloadcomic.php?comic={$info["relcomic"]}\">{$info["comname"]}</a></div>";
+            $issues[] = $info;
+        }
+    }
+    if ( isset($info["thumburl"]) && !file_exists("../" . $info["thumburl"]) ) {
+        $havethumb = makeThumb($fullcompath . $entry);
+    }
+}
+
+if ( $_SESSION["sortorder"] == SORTBYNAME ) {
+    usort($folders, "compareNames");
+    usort($issues, "compareNames");
+} else {
+    usort($folders, "compareDates");
+    usort($issues, "compareDates");
+}
+
+$data["compath"] = $compath;
+$data["contents"] = array_merge($folders, $issues);
+
+header('Content-Type: application/json');
+echo json_encode($data);
+exit();
+
+// vim: set ts=4 sw=4 et:

ajax/setpath.php

@@ -0,0 +1,25 @@
+<?php
+
+require "../header.php";
+
+require_login();
+
+if ( !isset($_REQUEST['path']) ) exit();
+
+$data = array();
+$data["error"] = false;
+$data["message"] = "";
+
+$comicfull = realpath(COMICSDIR . urldecode($_REQUEST['path']));
+if ( ($comicfull === false) || (substr($comicfull, 0, strlen(COMICSDIR)) != COMICSDIR) ) {
+    $_SESSION['compath'] = "/";
+} else {
+    $_SESSION['compath'] = substr($comicfull, strlen(COMICSDIR));
+}
+$data["message"] = "New comic path: {$_SESSION["compath"]}";
+
+header('Content-Type: application/json');
+echo json_encode($data);
+exit();
+
+// vim: set ts=4 sw=4 et:

functions.php

@@ -7,6 +7,7 @@ function microtime_float() {
 
 function makeThumb($item = "") {
    if ( $item == "" ) { return false; }
+   $prefix = (substr(getcwd(), -4) == "ajax") ? "../" : "";
    if ( is_dir($item) ) {
       $isfolder = true;
       $folder = $item;
@@ -23,12 +24,12 @@ function makeThumb($item = "") {
       if ( count($files) == 0 ) { return false; }
       reset($files);
       $comic = $folder . "/" . current($files);
-      $outfile = THUMBSDIR . substr($folder, strlen(COMICSDIR)) . "_oem";
+      $outfile = $prefix . THUMBSDIR . substr($folder, strlen(COMICSDIR)) . "_oem";
    } elseif ( is_file($item) ) {
       $isfolder = false;
       $file = $item;
       $comic = $file;
-      $targetdir = THUMBSDIR . substr(dirname($file), strlen(COMICSDIR)) . "/";
+      $targetdir = $prefix . THUMBSDIR . substr(dirname($file), strlen(COMICSDIR)) . "/";
       if ( !is_dir($targetdir) ) {
          mkdir($targetdir, 0755, true);
       }

htmlfooter.php

@@ -0,0 +1,4 @@
+<div id='debug' class='debug'></div>
+
+</body>
+</html>

htmlheader.php

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=0.5" />
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<link rel="icon" sizes="128x128" href="img/comics_128.png">
+<link rel="icon" sizes="196x196" href="img/comics_196.png">
+<link rel="apple-touch-icon" sizes="76x76" href="img/comics_76.png">
+<link rel="apple-touch-icon" sizes="120x120" href="img/comics_120.png">
+<link rel="apple-touch-icon" sizes="152x152" href="img/comics_152.png">
+<title>Comics Fancy</title>
+<link rel='stylesheet' type='text/css' href='css/reset.css' media='screen' />
+<link rel='stylesheet' type='text/css' href='css/comics.css' media='screen' />
+<link rel="stylesheet" type="text/css" href="core/simpleLightbox.min.css" />
+<!-- Toastr CSS -->
+<link rel="stylesheet" type="text/css" href="core/toastr.min.css" />
+<script type='text/javascript' src='core/jquery-3.6.0.min.js'></script>
+<script type='text/javascript' src='js/comics.js'></script>
+<script type='text/javascript' src='core/simpleLightbox.min.js'></script>
+<script type='text/javascript' src='core/toastr.min.js'></script>
+<style type='text/css'>
+.fancybox-outer { background: #323231; }
+.fancybox-title { font: normal 10px "Comic Sans MS"; }
+.fancybox-title-over-wrap { color: #bbb; padding: 0px 4px 0px 4px; }
+.mtest {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border: 1px solid red;
+}
+</style>
+</head>
+<body>

index.php

@@ -10,101 +10,8 @@ if ( isset($_REQUEST['sortorder']) ) {
    }
 }
 
-$validext = array('cbr', 'cbz');
-
-if ( $_SESSION['compath'] == "" ) $_SESSION['compath'] = "/";
-if ( isset($_REQUEST['newpath']) ) {
-   $comicfull = realpath(COMICSDIR . urldecode($_REQUEST['newpath']));
-   if ( ($comicfull === false) || (substr($comicfull, 0, strlen(COMICSDIR)) != COMICSDIR) ) {
-      $_SESSION['compath'] = "/";
-   } else {
-      $_SESSION['compath'] = substr($comicfull, strlen(COMICSDIR));
-   }
-}
-
-$compath = $_SESSION['compath'];
-
-$fullcompath = COMICSDIR . $compath;
-$header = basename($compath);
-if ( $header == "" ) { $header = "Comics"; }
-
-$fltime = microtime_float();
-$folders = array();
-$files = array();
-if ( $fh = opendir($fullcompath) ) {
-   while ( false !== ($entry = readdir($fh)) ) {
-      $mtime = filemtime($fullcompath . "/" . $entry);
-      if ( ($entry != ".") && ($entry != "..") && is_dir($fullcompath . "/" . $entry) ) {
-         $folders[$mtime] = $entry;
-      }
-      if ( is_file($fullcompath . "/" . $entry)
-           && in_array(substr($entry, -3), $validext) ) {
-         $files[] = $entry;
-      }
-   }
-   closedir($fh);
-   if ( $_SESSION['sortorder'] == SORTBYNAME ) {
-      natsort($folders);
-   } else {
-      ksort($folders);
-      $folders = array_reverse($folders);
-   }
-   sort($files);
-}
-$items = array_merge($folders, $files);
-$fltime = microtime_float() - $fltime;
-
-$updir = dirname($compath);
-$updirlink = urlencode($updir);
-
-// build up a list of comics and issues which have been
-$query = "SELECT comic, issue FROM pagetracker WHERE username=:username";
-$fields = array();
-$fields[":username"] = $_SESSION['username'];
-$sth = $globaldbh->prepare($query);
-$sth->execute($fields);
-$comics = array();
-$issues = array();
-while ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
-   if ( !in_array($row['comic'], $comics) ) $comics[] = $row['comic'];
-   if ( !in_array($row['issue'], $issues) ) $issues[] = $row['issue'];
-}
+require_once 'htmlheader.php';
 ?>
-<!DOCTYPE html>
-<html>
-<head>
-<meta name="viewport" content="width=device-width, initial-scale=0.5" />
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="mobile-web-app-capable" content="yes">
-<link rel="icon" sizes="128x128" href="img/comics_128.png">
-<link rel="icon" sizes="196x196" href="img/comics_196.png">
-<link rel="apple-touch-icon" sizes="76x76" href="img/comics_76.png">
-<link rel="apple-touch-icon" sizes="120x120" href="img/comics_120.png">
-<link rel="apple-touch-icon" sizes="152x152" href="img/comics_152.png">
-<title>Comics Fancy</title>
-<link rel='stylesheet' type='text/css' href='css/reset.css' media='screen' />
-<link rel='stylesheet' type='text/css' href='css/comics.css' media='screen' />
-<link rel="stylesheet" type="text/css" href="core/simpleLightbox.min.css" />
-<!-- Toastr CSS -->
-<link rel="stylesheet" type="text/css" href="core/toastr.min.css" />
-<script type='text/javascript' src='core/jquery-3.6.0.min.js'></script>
-<script type='text/javascript' src='js/comics.js'></script>
-<script type='text/javascript' src='core/simpleLightbox.min.js'></script>
-<script type='text/javascript' src='core/toastr.min.js'></script>
-<style type='text/css'>
-.fancybox-outer { background: #323231; }
-.fancybox-title { font: normal 10px "Comic Sans MS"; }
-.fancybox-title-over-wrap { color: #bbb; padding: 0px 4px 0px 4px; }
-.mtest {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  border: 1px solid red;
-}
-</style>
-</head>
-<body>
 <div class='sorter'>Sort: 
 <?php
 if ( $_SESSION['sortorder'] == SORTBYNAME ) {
@@ -114,80 +21,14 @@ if ( $_SESSION['sortorder'] == SORTBYNAME ) {
 }
 ?>
 </div>
-<div class='header' id='header'><?php
-/*
-if ( $compath != "/" ) {
-   echo "<a href='index.php?newpath=$updirlink'>$updir";
-   if ( dirname($compath) == "/" ) { echo "Comics"; }
-   echo "</a>/";
-}
-echo $header;
- */
-?>&nbsp;</div>
-<!-- <div class='name'><a href='logout.php'><?php echo htmlspecialchars($_SESSION['name']); ?></a></div> -->
-<div class='name'><?php
-if ( $compath != "/" ) {
-   echo "<a href='index.php?newpath=$updirlink'>$updir";
-   if ( dirname($compath) == "/" ) { echo "Comics"; }
-   echo "</a>/";
-}
-?></div>
-<div class='list'>
+<div class='header' id='header'>&nbsp;</div>
+<div id="path" class='name'></div>
+<div id="list" class='list'>
 <!-- <div class='listcontainer'> -->
+<!-- </div> -->
+</div>
 <?php
 
-$htime = microtime_float();
-$thumbtime = 0;
-$newthumbs = 0;
-$thumbfiles = "";
-$total = count($items);
-for ( $i=1; $i<=$total; $i++ ) {
-   if ( $i <= count($folders) ) {
-      $np = urlencode((($compath == "/") ? "" : $compath) . "/" . $items[$i-1]);
-      $thumbfile = THUMBSDIR . $compath . "/" . $items[$i-1] . ".jpg";
-   } else {
-      $np = urlencode($compath . "/" . substr($items[$i-1], 0, -4) . ".jpg");
-      $thumbfile = THUMBSDIR . $compath . "/" . substr($items[$i-1], 0, -4) . ".jpg";
-   }
-   $thumbfile = str_replace("#", "", $thumbfile);
-   if ( !file_exists($thumbfile) ) {
-      $thumbfiles .= $thumbfile . "<br>";
-      $newthumbs++;
-      $st = microtime_float();
-      $havethumb = makeThumb($fullcompath . "/" . $items[$i-1]);
-      $thumbtime += microtime_float() - $st;
-      if ( !$havethumb ) {
-         $havethumb = true;
-         $thumb = "img/nothumb.png";
-      }
-   }
-   $thumb = "thumbs" . $compath . "/" .basename($thumbfile);
-   $comname = pathinfo($items[$i-1], PATHINFO_FILENAME);
-   if ( strpos($comname, " - ") !== false ) $comname = str_replace(" - ", "<br />", $comname);
-   $classmod = "";
-   if ( $i <= count($folders) ) {
-      if ( in_array($items[$i-1], $comics) ) $classmod=" readborder";
-      echo "<div class='item folder{$classmod}' ";
-      echo "data-path=\"{$np}\" ";
-      echo "data-name=\"{$comname}\">";
-      $thumburl = htmlentities($thumb, ENT_QUOTES);
-      echo "<img src='$thumburl'><br clear=all />{$comname}</div>\n";
-   } else {
-      if ( in_array($items[$i-1], $issues) ) $classmod=" readborder";
-      $relcomic = trim(base64_encode($compath . "/" . $items[$i-1]), "=");
-      $thumburl = htmlentities($thumb, ENT_QUOTES);
-      echo "<div class='item{$classmod}'>";
-      echo "<img class='issue' data-relcomic=\"{$relcomic}\" data-comname=\"" . htmlspecialchars($comname, ENT_QUOTES) . "\" border=0 src='$thumburl'><br clear=all />";
-      echo "<a href='downloadcomic.php?comic={$relcomic}'>{$comname}</a></div>\n";
-   }
-}
-$htime = microtime_float() - $htime;
-?>
-<!-- </div> -->
-<div id='debug' class='debug'></div>
-</div>
-
-</body>
-</html><?php
+require_once 'htmlfooter.php';
 
 // vim: set ai et ts=3 sw=3:

js/comics.js

@@ -1,11 +1,54 @@
+var curpath = "/";
+
 // This function is executed after the page load completes on the client
 $(document).ready(function() {
-   $(".folder").click(function() { changeFolder($(this).data("name"), $(this).data("path")); });
-   $(".issue").click(function() { showComic($(this).data("relcomic"), $(this).data("comname")); });
+   $("#path").click(function() { changeFolder("/", "/"); });
+   getFolderContents();
 });
 
 var lightbox = null;
 
+function getFolderContents() {
+   $("#list").html("");
+   $.ajax({
+      url      : 'ajax/getfoldercontents.php',
+      dataType : 'json',
+      success  : function(data, stat, jqo) {
+                    curpath = data.compath;
+                    updatePathNavigator();
+                    data.contents.forEach(function(entry, index) {
+                       $("#list").append(entry.div);
+                    });
+                    $(".folder").click(function() { changeFolder($(this).data("name"), $(this).data("path")); });
+                    $(".issue").click(function() { $(this).parent().addClass("readborder"); showComic($(this).data("relcomic"), $(this).data("comname")); });
+                 }
+   });
+}
+
+function updatePathNavigator() {
+   var navpath = "";
+   if ( curpath == "/" ) {
+      navpath = "/";
+   } else {
+      navpath = "/Comics";
+   }
+   $("#path").html(navpath);
+}
+
+function changeFolder(name, path) {
+   toastr.success("Opening comic \"" + name + "\"<br>If this is the first time it may take a while to generate thumbnails.");
+   $.ajax({
+      url      : 'ajax/setpath.php',
+      data     : {path: path},
+      dataType : 'json',
+      success  : function(data, stat, jqo) {
+                    console.log(data.message);
+                    curpath = path;
+                    getFolderContents();
+                 }
+   });
+}
+
 function updateCurrentPage() {
    var currentPage = lightbox.currentPosition;
    $.ajax({
@@ -18,11 +61,6 @@ function updateCurrentPage() {
    });
 }
 
-function changeFolder(name, path) {
-   toastr.success("Opening comic \"" + name + "\"<br>If this is the first time it may take a while to generate thumbnails.");
-   window.location.replace("index.php?newpath=" + path);
-}
-
 //
 // This JS function is called when a user clicks on a comic.
 // "showcomic.php" is called with the comic to view as a parameter.
@@ -31,7 +69,6 @@ function changeFolder(name, path) {
 // If not in debug mode a lightbox object is created to display the comic.
 //
 function showComic(comic, name) {
-   $("#" + comic).addClass("readborder");
    toastr.success("Extracting and showing the comic \"" + name + "\"...", "Showing Comic");
    $.ajax({
       url      : 'ajax/showcomic.php',