Add simple static vendors files

static/js/medias.js

@@ -0,0 +1,122 @@
+ let cachedImageData = [];
+let isLoading = false;
+const targetHeight = 200;
+const spacing = 5;
+const preloadThreshold = 800;
+
+
+function appendRows(imageBatch) {
+  const $container = $('#mediasContainer');
+  const containerWidth = $container.width();
+  let row = [];
+  let rowWidth = 0;
+  $.each(imageBatch, function (_, imgData) {
+    const scaledWidth = targetHeight * imgData.ratio;
+    row.push(imgData);
+    rowWidth += scaledWidth + spacing;
+    if (rowWidth >= containerWidth || imgData === imageBatch[imageBatch.length - 1]) {
+      if (row.length === 1 && imgData === imageBatch[imageBatch.length - 1]) {
+        row.pop();
+        mediasQueryParams.offset -= 1;
+        return false;
+      }
+      const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
+      const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
+      const $rowDiv = $('<div>').addClass('mediasRow');
+      $.each(row, function (_, imgData) {
+        const $img = $('<img>')
+          .addClass('border-primary')
+          .attr('src', `/storage/medias/thumb_${imgData.filename}`)
+          .attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
+          .attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
+          .css({height: adjustedHeight + 'px',
+                width: adjustedHeight * imgData.ratio + 'px',
+                display: 'inline-block',
+                cursor: 'pointer'});
+        const $link = $('<a>')
+          .attr('href', `/media/${imgData.filename}`)
+          .append($img);
+        $rowDiv.append($link);
+      });
+      $container.append($rowDiv);
+      row = [];
+      rowWidth = 0;
+    }
+  });
+}
+
+function relayoutAll() {
+  const $container = $('#mediasContainer');
+  const containerWidth = $container.width();
+  $container.empty();
+  let row = [];
+  let rowWidth = 0;
+  $.each(cachedImageData, function (_, imgData) {
+    const scaledWidth = targetHeight * imgData.ratio;
+    row.push(imgData);
+    rowWidth += scaledWidth + spacing;
+    if (rowWidth >= containerWidth || imgData === cachedImageData[cachedImageData.length - 1]) {
+      if (row.length === 1 && imgData === cachedImageData[cachedImageData.length - 1]) {
+        row.pop();
+        mediasQueryParams.offset -= 1;
+        return false;
+      }
+      const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
+      const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
+      const $rowDiv = $('<div>').addClass('mediasRow');
+      $.each(row, function (_, imgData) {
+        const $img = $('<img>')
+            .addClass('border-primary')
+            .attr('src', `/storage/medias/thumb_${imgData.filename}`)
+            .attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
+            .attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
+            .css({ height: adjustedHeight + 'px',
+                  width: adjustedHeight * imgData.ratio + 'px',
+                  display: 'inline-block',
+                  cursor: 'pointer' });
+        const $link = $('<a>')
+          .attr('href', `/media/${imgData.filename}`)
+          .append($img);
+        $rowDiv.append($link);
+      });
+      $container.append($rowDiv);
+      row = [];
+      rowWidth = 0;
+    }
+  });
+}
+
+let resizeTimeout;
+$(window).on('resize', function () {
+  clearTimeout(resizeTimeout);
+  resizeTimeout = setTimeout(relayoutAll, 150);
+});
+
+$(window).on('scroll', function () {
+  const scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
+  if (!isLoading && scrollBottom < preloadThreshold) {
+    loadImages(
+    ).then(imageBatch => {
+      appendRows(imageBatch);
+    });
+  }
+});
+
+$(document).ready(function () {
+  loadImages(
+  ).then(imageBatch => {
+      appendRows(imageBatch);
+  });
+  $('#popularityButton').on('click', function () {
+    popularityButtonClicked($(this));
+  });
+  $('#filterButton').on('click', function () {
+    filterButtonClicked($(this));
+  });
+  if (mediasQueryParams.order_by !== 'uid,desc') {
+    toggleButtonClass($('#popularityButton'));
+  }
+  if (mediasQueryParams.hasOwnProperty('filter')) {
+    toggleButtonClass($('#filterButton'));
+  }
+});