.gitignore

@@ -9,7 +9,7 @@ Thumbs.db
 ~$*
 
 # The active config file copied from config-dist.php
-config.php
+variables.php
 
 # Vim
 *.swp

README.md

@@ -14,7 +14,7 @@ This small project provides a web based viewer for comics in the CBZ and CBR for
 * Create a MySQL/MariaDB database for the app with privileges granted to a user
 * Import the `install/initial_db_mysql.sql` database structure
 * Change the ownership of the `comics/` and `thumbs/` folders to the web server user
-* Copy the `config-dist.php` file to `config.php` and edit that file appropriately
+* Copy the `variables-dist.php` file to `variables.php` and edit that file appropriately
 * Set up the cron job for things in [cron/](cron/). If installing on a systemd OS see services below.
 
 ## Services

ajax/showcomic.php

@@ -96,7 +96,9 @@ foreach ( $files as $file ) {
    $images[] = $comicoutputurl . $file;
    $captions[] = substr(basename($comicoutputurl), 0, -4) . ": {$count} of {$last}";
 }
+$debug = (DEBUG_SHOWCOMICAJAX || DEBUG_ALL);
 
+$data["debug"] = $debug;
 $data["images"] = $images;
 $data["captions"] = $captions;
 header('Content-Type: application/json');

css/comics.css

@@ -1,43 +1,36 @@
-:root {
-   --default-font: 'Comic Sans MS';
-   --background-color: #121211;
-   --foreground-color: #ddddd1;
-   --text-color: #22dd22;
-   --read-color: green;
-}
 
 body {
-   background-color: var(--background-color);
+   background-color: #121211;
-   color: var(--foreground-color);
+   color: #ddddd1;
-   font-family: var(--default-font);
+   font-family: 'Comic Sans MS';
    font-weight: bold;
    font-size: 15pt;
 }
 
 a, a:link, a:visited, a:active {
    text-decoration: none;
-   color: var(--text-color);
+   color: #22dd22;
 }
 
 #sortorder {
    cursor: pointer;
-   color: var(--text-color);
+   color: #22dd22;
 }
 
 .link {
    cursor: pointer;
-   color: var(--text-color);
+   color: #22dd22;
 }
 
 .header {
    height: 1em;
    font-size: 24pt;
    font-weight: bold;
-   font-family: var(--default-font);
+   font-family: 'Comic Sans MS';
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
-   border-bottom: 2px solid var(--default-color);
+   border-bottom: 2px solid #ddddd1;
 }
 .sorter {
    float: left;
@@ -65,24 +58,20 @@ a, a:link, a:visited, a:active {
    width: 330px;
    height: 495px;
    margin: 5px;
-   border: 2px solid var(--default-color);
+   border: 2px solid #ddddd1;
    padding: 2px;
    display: inline-block;
    overflow: hidden;
 }
 
 .readborder {
-   border-color: var(--read-color) !important;
+   border-color: green !important;
 }
 
-.fancybox-outer {
+.debug {
-   background: #323231;
+   position: absolute;
-}
+   top: 0px;
-.fancybox-title {
+   left: 0px;
-   font: normal 10px "Comic Sans MS";
+   z-index: 42;
-}
-.fancybox-title-over-wrap {
-   color: #bbb; padding: 0px 4px 0px 4px;
 }
 
-/* vim:sw=3 ts=3 et:

header.php

@@ -1,7 +1,7 @@
 <?php
 
-// Config file
+// Script defining constants and variables used in the comics system
-require 'config.php';
+require 'variables.php';
 // Script containing global functions used by all scripts
 require 'functions.php';
 // Script containing the "require_login() function"
@@ -21,7 +21,7 @@ if ( php_sapi_name() != "cli" ) {
     }
 
     // This session variable is set to the current browsing folder.
-    // It is relative to the COMICSDIR constant defined in config.php
+    // It is relative to the COMICSDIR constant defined in variables.php
     if ( !isset($_SESSION['compath']) ) {
         $_SESSION['compath'] = '/';
     }

htmlfooter.php

@@ -1,6 +1,4 @@
-<script type='text/javascript' src='core/jquery-3.6.0.min.js'></script>
+<div id='debug' class='debug'></div>
-<script type='text/javascript' src='core/simpleLightbox.min.js'></script>
+
-<script type='text/javascript' src='core/toastr.min.js'></script>
-<script type='text/javascript' src='js/comics.js'></script>
 </body>
 </html>

htmlheader.php

@@ -16,6 +16,23 @@
 <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.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>

js/comics.js

@@ -194,7 +194,8 @@ function updateCurrentPage() {
 // 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.
-// A lightbox/modal object is created to display the comic.
+// 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);
@@ -207,6 +208,8 @@ function showComic(comic, name) {
                        redirectToLogin();
                        return;
                     }
+                    // Clear out the debug DIV and start the fancybox.
+                    $("#debug").html("");
                     lightbox = SimpleLightbox.open({
                        items: data.images,
                        captions: data.captions,

variables-dist.php

@@ -37,6 +37,13 @@ define('DBUSER', 'comics');
 define('DBPASS', 'comics');
 define('DBNAME', 'comics');
 
+//
+// These are some variables used for development and debugging.
+// They can be safely ignored.
+//
+define('DEBUG_ALL', false);
+define('DEBUG_SHOWCOMICAJAX', false);
+
 //
 // Constants
 //