Add simple static vendors files

static/js/divhider.js

@@ -0,0 +1,62 @@
+function divhider() {
+   var x = document.getElementsByClassName("flashed");
+   x[0].style.visibility = "hidden";
+}
+
+
+function animation() {
+   var x = document.getElementsByClassName("flashed");
+   x[0].style.animation = "disparition 0.2s 1";
+}
+
+window.setTimeout(divhider, 8800);
+window.setTimeout(animation, 8000);
+
+let darkBoxVisible = false;
+
+window.addEventListener('load', (event) => {
+    let images = document.querySelectorAll("img");
+    if(images !== null && images !== undefined && images.length > 0) {
+	images.forEach(function(img) {
+	    img.addEventListener('click', (evt) => {
+		showDarkbox(img.src);
+	    });
+	});
+    }
+});
+
+function showDarkbox(url) {
+    if(!darkBoxVisible) {
+	let x = (window.innerWidth - 1280) / 2;
+	let y = window.scrollY + 50;
+
+	// Create the darkBox
+	var div = document.createElement("div");
+	div.id = "darkbox";
+        var tmp = url;
+        tmp = tmp.replace("thumbnails/", "");
+        tmp= tmp.trim();
+	div.innerHTML = '<img class="darkboximg" src="'+tmp+'" />';
+	document.body.appendChild(div);
+	let box = document.getElementById("darkbox");
+	box.style.left = x.toString()+"px";
+	box.style.top = y.toString()+"px";
+	box.style.height = 'auto';
+	box.addEventListener('click', (event) => {
+	    // Remove it
+	    let element = document.getElementById("darkbox");
+	    element.parentNode.removeChild(element);
+
+	    darkBoxVisible = false;
+	})
+
+	darkBoxVisible = true;
+
+    } else {
+	// Remove it
+	let element = document.getElementById("darkbox");
+	element.parentNode.removeChild(element);
+
+	darkBoxVisible = false;
+    }
+}

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'));
+  }
+});