Working prototype for Lychee like image grid

onlylegs/__init__.py

@@ -102,7 +102,7 @@ def create_app():  # pylint: disable=R0914
     assets.init_app(app)
 
     scripts = Bundle(
-        "js/*.js", filters="jsmin", output="gen/js.js", depends="js/*.js"
+        "js/*.js", output="gen/js.js", depends="js/*.js"
     )  # filter jsmin is broken :c
     styles = Bundle(
         "sass/style.sass",

onlylegs/static/js/grid.js

@@ -0,0 +1,73 @@
+function makeGrid() {
+    // Get the container and images
+    const container = document.querySelector('.gallery-grid');
+    const images = document.querySelectorAll('.gallery-item');
+
+    // Set the gap between images
+    const gap = 0.6 * 16;
+    const maxWidth = container.clientWidth - gap;
+    const maxHeight = 13 * 16;
+
+    // Calculate the width and height of each image
+    let calculated = {};
+    for (let i = 0; i < images.length; i++) {
+        const image = images[i].querySelector('img');
+        const width = image.naturalWidth;
+        const height = image.naturalHeight;
+
+        let ratio = width / height;
+        const newWidth = maxHeight * ratio;
+
+        if (newWidth > maxWidth) {
+            newWidth = maxWidth / 3 - gap; // 3 images per row max
+            ratio = newWidth / height;
+        }
+
+        calculated[i] = {"width": newWidth,
+                         "height": maxHeight,
+                         "ratio": ratio};
+    }
+
+    // Next images position
+    let nextTop = gap;
+    let nextLeft = gap;
+
+    for (let i = 0; i < images.length; i++) {
+        let currentRow = [];
+        let currectLength = 0;
+
+        // While the row is not full add images to it
+        while (currectLength < maxWidth) {
+            currentRow.push(i);
+            currectLength += calculated[i]["width"];
+            i++;
+        }
+        // currentRow.push(i);
+        // currectLength += calculated[i]["width"];
+
+        // Go back one image as it can't be added to the row
+        i--;
+
+        // Calculate the amount of space required to fill the row
+        const currentRowDiff = (currectLength - maxWidth);
+
+        // Cycle through the images in the row and adjust their width and left position
+        for (let j = 0; j < currentRow.length; j++) {
+            const image = images[currentRow[j]];
+            const data = calculated[currentRow[j]];
+            // Shrink compared to the % of the row it takes up
+            const shrink = currentRowDiff * (data["width"] / currectLength);
+
+            image.style.width = data["width"] - shrink - gap + 'px';
+            image.style.height = data["height"] + 'px';
+            image.style.left = nextLeft + 'px';
+            image.style.top = nextTop + 'px';
+
+            nextLeft += data["width"] - shrink;
+        }
+
+        // Reset for the next row
+        nextTop += maxHeight + gap;
+        nextLeft = gap;
+    }
+}

onlylegs/templates/index.html

@@ -34,9 +34,9 @@
     </div>
 
     {% if images %}
-        <div class="gallery-grid">
+        <div class="gallery-grid" style="position: relative;">
             {% for image in images %}
-                <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
+                <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}; position: absolute; margin: 0;">
                     <div class="image-filter">
                         <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
                     </div>

onlylegs/templates/layout.html

@@ -206,6 +206,7 @@
 
         window.onresize = () => {
             keepSquare();
+            makeGrid();
         }
         window.onscroll = () => {
             if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {