Switch to jQuery/AJAX folder navigation
This commit is contained in:
parent
c2e9053476
commit
eb4ac7bb61
101
ajax/getfoldercontents.php
Normal file
101
ajax/getfoldercontents.php
Normal file
|
|
@ -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:
|
||||
25
ajax/setpath.php
Normal file
25
ajax/setpath.php
Normal file
|
|
@ -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:
|
||||
4
htmlfooter.php
Normal file
4
htmlfooter.php
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div id='debug' class='debug'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
35
htmlheader.php
Normal file
35
htmlheader.php
Normal file
|
|
@ -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>
|
||||
173
index.php
173
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;
|
||||
*/
|
||||
?> </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'> </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:
|
||||
|
|
|
|||
53
js/comics.js
53
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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user