diff options
| -rw-r--r-- | resources/css/style.css | 4 | ||||
| -rw-r--r-- | resources/js/gallery.js | 35 | ||||
| -rw-r--r-- | templates/gallery.crotmp | 2 |
3 files changed, 39 insertions, 2 deletions
diff --git a/resources/css/style.css b/resources/css/style.css index 240c98d..b2132df 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -111,6 +111,10 @@ img { width: 400px; } #gallery { margin: auto; } +#gallery a { + color: var(--fg-main); + text-decoration: none; +} #gallery img { transform-origin: center; transition: 0.5s; diff --git a/resources/js/gallery.js b/resources/js/gallery.js index 0289e58..b7b7e06 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -29,15 +29,26 @@ bricks )); document.addEventListener('DOMContentLoaded', event => { - bricks.resize(true); // bind resize handler + bricks.resize(true).pack(); // bind resize handler & initial pack }); +/** + * packing should be done multiple times. Sometimes the div of + * directories is not properly packed if packing is done only once. + */ // Packing after loading images //////////////////////////////////////////// const onImagesLoaded = (container, event) => { const images = container.getElementsByTagName("img"); const progressBar = document.getElementById("loading-progress"); + // Keeps track of how many times we've packed the images. + let packed = 0; + const incrementPackedAndPack = () => { + packed++; + bricks.pack(); + }; + // failed keeps track of images that failed to load. let failed = 0; let remaining = images.length; @@ -52,6 +63,28 @@ const onImagesLoaded = (container, event) => { progressBar.value = round( ((images.length - remaining) / images.length) * 100 ); + + // pack multiple times for better experience. This way + // the initial pictures are properly visible to the + // user while the other load. It's very cheap to pack + // lots of elements too using bricks.js so it's not an + // issue. + // + // There is no point in specifying such large ranges + // as this runs in a single thread to for sure we'll + // hit the range. + if (5 < progressBar.value && progressBar.value < 20) + if (packed < 2) + incrementPackedAndPack(); + + if (30 < progressBar.value && progressBar.value < 50) + if (packed < 4) + incrementPackedAndPack(); + + if (80 < progressBar.value && progressBar.value < 95) + if (packed < 5) + incrementPackedAndPack(); + if (remaining === failed) event(remaining, failed, progressBar); }); diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp index 253339e..6cc7fbf 100644 --- a/templates/gallery.crotmp +++ b/templates/gallery.crotmp @@ -14,7 +14,7 @@ <div id="gallery"> <@gallery : $i> <?{ $i.<type> eq 'directory' }> - <div class="directory"><$i.<text>></div> + <div><a href="./<$i.<text>>"><p class="directory"><$i.<text>></p></a></div> </?> <?{ $i.<type> eq 'img' }> <img alt="<$i.<alt>>" src="/resources/img/<$i.<src>>"> |