Handle sub-directories, show error on 0 images

3 files changed, 31 insertions, 13 deletions

diff --git a/lib/Crater/Gallery.rakumod b/lib/Crater/Gallery.rakumod
index 448593f..373231a 100644
--- a/lib/Crater/Gallery.rakumod
+++ b/lib/Crater/Gallery.rakumod
@@ -10,9 +10,17 @@ class Crater::Gallery {
     #| Accessor for $!title.
     method title() { $!title }
 
-    method list() {
+    method list(:@sub-dir) {
+        # This will be considered an attempt to attack. There is no
+        # reason to check '.' I belive.
+        if @sub-dir.grep('.'|'..').elems {
+            die "[!!!] @sub-dir contains '..'/'.'";
+        }
+
         my @gallery;
-        my @paths = $!directory.dir;
+        my @paths = @sub-dir
+                     ?? $!directory.add(@sub-dir.join("/")).dir
+                     !! $!directory.dir;
 
         with $!title {
             push @gallery, %( :type<heading>, :text($_) );
@@ -20,6 +28,7 @@ class Crater::Gallery {
 
         # Add directories on top.
         for @paths.grep(*.d) {
+            next if .ends-with(".crater");
             push @gallery, %( :type<directory>,
                               :text($_.relative($!directory)) );
         }
diff --git a/lib/Crater/Routes/Gallery.rakumod b/lib/Crater/Routes/Gallery.rakumod
index aa3e4b6..655e62e 100644
--- a/lib/Crater/Routes/Gallery.rakumod
+++ b/lib/Crater/Routes/Gallery.rakumod
@@ -17,9 +17,9 @@ sub gallery-routes(
         }
 
         # Gallery view.
-        get -> LoggedIn $session {
+        get -> LoggedIn $session, *@path {
             template 'gallery.crotmp', {
-                gallery => $gallery.list(),
+                gallery => $gallery.list(sub-dir => @path),
                 title => "Gallery"
             };
         }
diff --git a/resources/js/gallery.js b/resources/js/gallery.js
index b7b7e06..d188e49 100644
--- a/resources/js/gallery.js
+++ b/resources/js/gallery.js
@@ -38,6 +38,18 @@ document.addEventListener('DOMContentLoaded', event => {
  */
 // Packing after loading images ////////////////////////////////////////////
 
+const showLoadingError = (message) => {
+    const loadError = document.getElementById("loading-error");
+    const loadErrorText = document.getElementById("loading-error-text");
+    const loadErrorDismiss = document.getElementById("loading-error-dismiss");
+    loadError.style.display = "block";
+    loadErrorText.innerHTML = message;
+
+    loadErrorDismiss.addEventListener('click', function(){
+        loadError.style.display = "none";
+    });
+}
+
 const onImagesLoaded = (container, event) => {
     const images = container.getElementsByTagName("img");
     const progressBar = document.getElementById("loading-progress");
@@ -53,6 +65,11 @@ const onImagesLoaded = (container, event) => {
     let failed = 0;
     let remaining = images.length;
 
+    if (images.length === 0) {
+        showLoadingError("No images to display.");
+        event(remaining, failed, progressBar);
+    }
+
     for (let i = 0; i < images.length; i++) {
         if (images[i].complete)
             remaining--;
@@ -111,17 +128,9 @@ const imagesLoaded = (remaining, failed, progressBar) => {
     document.getElementById("loading").style.display = "none";
 
     // Show error on failure.
-    const loadError = document.getElementById("loading-error");
-    const loadErrorText = document.getElementById("loading-error-text");
-    const loadErrorDismiss = document.getElementById("loading-error-dismiss");
     if (failed !== 0) {
-        loadError.style.display = "block";
         const t = failed === 1 ? "image" : "images";
-        loadErrorText.innerHTML = `${failed} ${t} failed to load.`;
-
-        loadErrorDismiss.addEventListener('click', function(){
-            loadError.style.display = "none";
-        });
+        showLoadingError(`${failed} ${t} failed to load.`);
     }
 };