From 79aa4269eccfc6afdb6347b37956b16e7603f0b0 Mon Sep 17 00:00:00 2001 From: Andinus Date: Sat, 11 Jun 2022 15:49:16 +0530 Subject: Handle sub-directories, show error on 0 images --- lib/Crater/Gallery.rakumod | 13 +++++++++++-- lib/Crater/Routes/Gallery.rakumod | 4 ++-- resources/js/gallery.js | 27 ++++++++++++++++++--------- 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, :text($_) ); @@ -20,6 +28,7 @@ class Crater::Gallery { # Add directories on top. for @paths.grep(*.d) { + next if .ends-with(".crater"); push @gallery, %( :type, :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.`); } }; -- cgit 1.4.1-2-gfad0