ComicsViewer/js/comics.js

const NOREFRESH = false;

var curpath = "/";
var parentpath = "/";
var foldername = "";

// This function is executed after the page load completes on the client
$(document).ready(function() {
   $("#path").click(function() { changeFolder(parentpath, parentpath); });
   $("#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});
   $.ajax({
      url      : 'ajax/getfoldercontents.php',
      dataType : 'json',
      success  : function(data, stat, jqo) {
                    if ( !data.validated ) {
                       redirectToLogin();
                       return;
                    }
                    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")); });
                    toastr.remove();
                 }
   });
}

/**
 * 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 == "/" ) {
      navpath = "/";
   } else {
      navpath = "/Comics" + parentpath;
   }
   $("#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 folder \"" + name + "\"");
   $.ajax({
      url      : 'ajax/setpath.php',
      data     : {path: path},
      dataType : 'json',
      success  : function(data, stat, jqo) {
                    if ( !data.validated ) {
                       redirectToLogin();
                       return;
                    }
                    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({
      url      : 'ajax/setpage.php',
      data     : {page: currentPage},
      dataType : 'json',
      success  : function(data, stat, jqo) {
                    if ( !data.validated ) {
                       redirectToLogin();
                       return;
                    }
                    console.log(data.message);
                 }
   });
}

//
// This JS function is called when a user clicks on a comic.
// "showcomic.php" is called with the comic to view as a parameter.
// It returns a JSON object representing the collection of images.
// If in debug mode the javascript code is displayed in the browser.
// If not in debug mode a lightbox object is created to display the comic.
//
function showComic(comic, name) {
   toastr.success("Extracting comic and opening viewer...", "Showing: " + name);
   $.ajax({
      url      : 'ajax/showcomic.php',
      data     : {comic: comic},
      dataType : 'json',
      success  : function(data, stat, jqo) {
                    if ( !data.validated ) {
                       redirectToLogin();
                       return;
                    }
                    // Clear out the debug DIV and start the fancybox.
                    $("#debug").html("");
                    lightbox = SimpleLightbox.open({
                       items: data.images,
                       captions: data.captions,
                       startAt: data.startindex,
                       beforeSetContent: updateCurrentPage
                    });
                 }
   });
}

// vim: ts=3 sw=3 ai: