Begin adding additional sort order for most recently read comics

ajax/cyclesortorder.php

@@ -0,0 +1,30 @@
+<?php
+
+require '../header.php';
+
+$orders = [SORTBYNAME => SORTBYDATE, SORTBYDATE => SORTBYREAD, SORTBYREAD => SORTBYNAME];
+
+$validated = require_login(NOREDIRECT);
+
+$data = array();
+$data["error"] = false;
+$data["message"] = "";
+$data["validated"] = $validated;
+
+if ( !$validated ) {
+    $data["error"] = true;
+    $data["message"] = "Clients must validate accounts";
+    header('Content-Type: application/json');
+    echo json_encode($data);
+    exit();
+}
+
+$_SESSION['sortorder'] = $orders[$_SESSION['sortorder']];
+
+$data["order"] = $_SESSION['sortorder'];
+
+header('Content-Type: application/json');
+echo json_encode($data);
+exit();
+
+// vim: set ts=4 sw=4 et:

ajax/getfoldercontents.php

@@ -36,8 +36,9 @@ $adultcomics = getAdultComics();
 $compath = $_SESSION['compath'];
 $fullcompath = COMICSDIR . (($compath == "/") ? "" : $compath) . "/";
 
-// build up a list of comics and issues which have been
+// Build up a list of comics and issues which have been read in descending order by lastupdate
 $query = "SELECT comic, issue FROM pagetracker WHERE username=:username";
+//$query = "SELECT comic, issue FROM pagetracker WHERE username=:username ORDER BY lastupdate DESC";
 $fields = array();
 $fields[":username"] = $_SESSION['username'];
 $sth = $globaldbh->prepare($query);

ajax/getsortorder.php

@@ -0,0 +1,26 @@
+<?php
+
+require '../header.php';
+
+$validated = require_login(NOREDIRECT);
+
+$data = array();
+$data["error"] = false;
+$data["message"] = "";
+$data["validated"] = $validated;
+
+if ( !$validated ) {
+    $data["error"] = true;
+    $data["message"] = "Clients must validate accounts";
+    header('Content-Type: application/json');
+    echo json_encode($data);
+    exit();
+}
+
+$data["order"] = $_SESSION['sortorder'];
+
+header('Content-Type: application/json');
+echo json_encode($data);
+exit();
+
+// vim: set ts=4 sw=4 et:

css/comics.css

@@ -4,7 +4,7 @@ body {
    color: #ddddd1;
    font-family: 'Comic Sans MS';
    font-weight: bold;
-   font-size: 10pt;
+   font-size: 15pt;
 }
 
 a, a:link, a:visited, a:active {
@@ -12,6 +12,11 @@ a, a:link, a:visited, a:active {
    color: #22dd22;
 }
 
+#sortorder {
+   cursor: pointer;
+   color: #22dd22;
+}
+
 .link {
    cursor: pointer;
    color: #22dd22;
@@ -50,8 +55,8 @@ a, a:link, a:visited, a:active {
 
 .item {
    cursor: pointer;
-   width: 220px;
+   width: 330px;
-   height: 330px;
+   height: 495px;
    margin: 5px;
    border: 2px solid #ddddd1;
    padding: 2px;

functions.php

@@ -100,12 +100,12 @@ function makeThumb($item = "") {
    $input->setImageFormat("jpg");
    $width = $input->getImageWidth();
    $height = $input->getImageHeight();
-   $scale = 200 / $width;
+   $scale = 300 / $width;
-   $newx = 200;
+   $newx = 300;
    $newy = intval($height * $scale);
-   if ( $newy > 300 ) {
+   if ( $newy > 450 ) {
-      $newy = 300;
+      $newy = 450;
-      $scale = $height / 300;
+      $scale = $height / 450;
       $newx = intval($width / $scale);
    }
    $thumb = substr($outfile, 0, -4) . ".jpg";

index.php

@@ -4,23 +4,10 @@ require 'header.php';
 
 require_login();
 
-if ( isset($_REQUEST['sortorder']) ) {
-   if ( ($_REQUEST['sortorder'] == SORTBYNAME) || ($_REQUEST['sortorder'] == SORTBYDATE) ) {
-      $_SESSION['sortorder'] = $_REQUEST['sortorder'];
-   }
-}
-
 require_once 'htmlheader.php';
 ?>
 <div class='header' id='header'>
-  <div class='sorter'>Sort:<?php
+  <div class='sorter'>Sort: <span id="sortorder"></span></div>
-    if ( $_SESSION['sortorder'] == SORTBYNAME ) {
-       echo "<a href='index.php?sortorder=", SORTBYDATE, "'>Name</a>";
-    } else {
-       echo "<a href='index.php?sortorder=", SORTBYNAME, "'>Date</a>";
-    }
-    ?>
-  </div>
   <div id="path" class='name link'></div>
 </div>
 <div id="list" class='list'></div>

js/comics.js

@@ -1,3 +1,5 @@
+const NOREFRESH = false;
+
 var curpath = "/";
 var parentpath = "/";
 var foldername = "";
@@ -5,16 +7,77 @@ var foldername = "";
 // This function is executed after the page load completes on the client
 $(document).ready(function() {
    $("#path").click(function() { changeFolder(parentpath, parentpath); });
-   getFolderContents();
+   $("#sortorder").on("click", cycleSortOrder);
+   getSortOrder();
 });
 
 var lightbox = null;
 
+/**
+ * Redirects the user to the login page by replacing the current location with "index.php".
+ * Logs a message to the console before redirecting.
+ */
 function redirectToLogin() {
    console.log("Redirecting for login...");
    window.location.replace("index.php");
 }
 
+/**
+ * Gets the current sort order and optionally refreshes the folder contents.
+ * @param {boolean} [refresh=true] - Whether to refresh the folder contents after getting the sort order.
+ */
+function getSortOrder(refresh = true) {
+   $.ajax({
+      url      : 'ajax/getsortorder.php',
+      dataType : 'json',
+      success  : function(data, stat, jqo) {
+                    if ( !data.validated ) {
+                       redirectToLogin();
+                       return;
+                    } else {
+                       $("#sortorder").html(data.order);
+                       if ( refresh ) getFolderContents();
+                    }
+      }
+   });
+}
+
+/**
+ * Sends an AJAX request to update and display the current sort order.
+ * If the user is not validated, redirects to the login page.
+ * On success, updates the #sortorder element with the new order and refreshes folder contents.
+ */
+function cycleSortOrder() {
+   $.ajax({
+      url      : 'ajax/cyclesortorder.php',
+      dataType : 'json',
+      success  : function(data, stat, jqo) {
+                    if ( !data.validated ) {
+                       redirectToLogin();
+                       return;
+                    } else {
+                       $("#sortorder").html(data.order);
+                       getFolderContents();
+                    }
+      }
+   });
+}
+
+/**
+ * Loads and displays the contents of the current comic folder.
+ * 
+ * - Clears the current list of displayed items.
+ * - Shows a loading notification to the user.
+ * - Sends an AJAX request to retrieve folder contents as JSON.
+ * - If the user is not validated, redirects to the login page.
+ * - Updates the current path and path navigator.
+ * - Appends each folder or issue entry to the list.
+ * - Attaches click handlers to folder and issue elements for navigation and reading.
+ * - Removes the loading notification upon completion.
+ *
+ * @function
+ * @returns {void}
+ */
 function getFolderContents() {
    $("#list").html("");
    toastr.info("Loading folder contents. Comics containing a large number of issues, or issues with a large number of pages, that have not been opened recently may take some time to load. Thank you for your patience!", "Loading Contents...", {timeOut: 15000});
@@ -38,6 +101,13 @@ function getFolderContents() {
    });
 }
 
+/**
+ * Updates the navigation path displayed in the element with id "path".
+ * If the current path is the root ("/"), it sets the navigation path to "/".
+ * Otherwise, it sets the navigation path to "/Comics" followed by the parent path.
+ *
+ * Assumes the existence of global variables `curpath` and `parentpath`.
+ */
 function updatePathNavigator() {
    var navpath = "";
    if ( curpath == "/" ) {
@@ -48,8 +118,15 @@ function updatePathNavigator() {
    $("#path").html(navpath);
 }
 
+/**
+ * Changes the current folder by sending an AJAX request to update the path on the server.
+ * Displays a notification to the user and updates global variables upon success.
+ *
+ * @param {string} name - The display name of the folder to open.
+ * @param {string} path - The path of the folder to open.
+ */
 function changeFolder(name, path) {
-   toastr.success("If this is the first time it may take a while to generate thumbnails.", "Opening comic \"" + name + "\"");
+   toastr.success("If this is the first time it may take a while to generate thumbnails.", "Opening folder \"" + name + "\"");
    $.ajax({
       url      : 'ajax/setpath.php',
       data     : {path: path},
@@ -59,15 +136,24 @@ function changeFolder(name, path) {
                        redirectToLogin();
                        return;
                     }
-                    console.log(data.message);
                     curpath = path;
                     parentpath = data.parentpath;
                     foldername = data.foldername;
+                    toastr.remove();
                     getFolderContents();
                  }
    });
 }
 
+/**
+ * Sends the current page number to the server via AJAX to update the user's current page
+ * in the comic being read.
+ * If the server response indicates the user is not validated, redirects to the login page.
+ * Logs the server response message to the console on success.
+ *
+ * @function
+ * @returns {void}
+ */
 function updateCurrentPage() {
    var currentPage = lightbox.currentPosition;
    $.ajax({
@@ -113,3 +199,5 @@ function showComic(comic, name) {
                  }
    });
 }
+
+// vim: ts=3 sw=3 ai:

variables-dist.php

@@ -47,5 +47,6 @@ define('DEBUG_SHOWCOMICAJAX', false);
 //
 // Constants
 //
-define('SORTBYNAME', 10000001);
+define('SORTBYNAME', "Name");
-define('SORTBYDATE', 10000002);
+define('SORTBYDATE', "Date");
+define('SORTBYREAD', "Read");