chore: remove jquery from gallery

assets/js/gallery.js

@@ -1,45 +1,84 @@
-$(document).ready(function() {
-
-  /*initialize */
-  var id, title, url, image, image_thumb, image_preview, creator_name, creator_url;
+"use strict";
 
-  // static gallery coming from JSONP call already stored in page data
-  var cnt = 0;
-  for (var entry in _gallery) {
-    cnt++;
-    if (cnt > 32) break;
-    e = _gallery[entry];
-    $("#gallery").append(
-      "<div id='static-" + e.id + "' class='gallery-links'>" +
-      "<div class='img-container'>" +
-      "<a href='" + e.public_url + "' target='_blank'>" +
-      "<img src='" + e.thumbnail + "'/>" +
-      "<h4>"+e.name+"</h4>" +
-      "</a>" +
-      "<h5>by <a href='" + e.creator.public_url + "' target='_blank'>" + e.creator.name + "</a></h5>" +
-      "</div></a></div>");
+const initGallery = async () => {
+  const gallery = document.getElementById('gallery');
+  if (!gallery) return;
+
+  const galleryHTML = ({ id, title, url, img, name, creatorUrl }) => `
+    <div id="${id}" class="gallery-links">
+      <div class="img-container">
+        <a href="${url}" target="_blank" rel="noopener noreferrer">
+          <img src="${img}" alt="${title}">
+          <h4>${title}</h4>
+        </a>
+        <h5>by <a href="${creatorUrl}" target="_blank" rel="noopener noreferrer">${name}</a></h5>
+      </div>
+    </div>`;
+
+  /* TODO Refactoring jsonp to proper JSON with CORS. */
+  // Static _gallery
+  if (typeof _gallery !== 'undefined') {
+    gallery.insertAdjacentHTML(
+      'beforeend',
+      Object.values(_gallery)
+        .slice(0, 32)
+        .map(e =>
+          galleryHTML({
+            id: `static-${e.id}`,
+            title: e.name,
+            url: e.public_url,
+            img: e.thumbnail,
+            name: e.creator.name,
+            creatorUrl: e.creator.public_url,
+          })
+        )
+        .join('')
+    );
   }
+
+  // JSON files
+  try {
+    const [thingiverse_gallery, thingiverse_recent] = await Promise.all([
+      fetch('inc/thingiverse-gallery.json').then(r => r.json()),
+      fetch('inc/thingiverse-recent.json').then(r => r.json()),
+    ]);
+
+    let things = (thingiverse_gallery || []).concat(thingiverse_recent || []);
+    things = things.slice(0, 32);
+    gallery.insertAdjacentHTML(
+      'beforeend',
+      things
+        .map(v => {
+          const img = v.thumbnail.replace('thumb_medium', 'preview_featured');
+          return galleryHTML({
+            id: v.id,
+            title: v.name,
+            url: v.public_url,
+            img,
+            name: v.creator.name,
+            creatorUrl: v.creator.public_url,
+          });
+        })
+        .join('')
+    );
+  } catch (e) {
+    console.warn('Gallery JSON load failed:', e);
+  }
+};
 
-  /*retrieve data from openscad tag*/
-  $.when($.getJSON('inc/thingiverse-gallery.json'), $.getJSON('inc/thingiverse-recent.json')).done(function(r1, r2) {
-    var things = r1[0].concat(r2[0]);
-    $.each(things, function(key, val) {
-      id = val.id;
-      title = val.name;
-      url = val.public_url;
-      creator_name = val.creator.name;
-      creator_url = val.creator.public_url;
-      image = val.thumbnail;
-      image_thumb = image.replace("thumb_medium", "preview_large");
-      image_preview = image.replace("thumb_medium", "preview_featured");
-
-      if(key<32){
+// Failsafe loading pattern.
+if(document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initGallery);
+} else {
+  initGallery().then();
+}
 
-	$("#gallery").append("<div id='"+id+"' class='gallery-links'><div class='img-container'><a href='"+url+"' target='_blank'><img src='"+image_preview+"'/><h4>"+title+"</h4></a><h5>by <a href='"+creator_url+"' target='_blank'>"+creator_name+"</a></h5></div></a></div>");
 
-      }
-
-    });
-  });
-
-});
+let _gallery;
+/**
+ * TODO
+ * Used for legacy cross loading https://files.openscad.org/lists/gallery.jsonp
+ */
+function gallery(data) {
+    _gallery = data;
+}

gallery.html

@@ -14,13 +14,8 @@
 	<link href="assets/fontawesome/css/fontawesome.min.css" rel="stylesheet">
 	<link href="assets/fonts/open-sans/all.css" rel="stylesheet">
 
-	<script src="assets/js/jquery-1.9.1.min.js"></script>
-
 	<script src="assets/js/gallery.js"></script>
-	<script>
-		function gallery(data) { _gallery = data; }
-	</script>
-	<script type="text/javascript" src="https://files.openscad.org/lists/gallery.jsonp"></script>
+	<script src="https://files.openscad.org/lists/gallery.jsonp"></script>
 </head>
 <body>