diff --git a/assets/js/gallery.js b/assets/js/gallery.js
index abf7775..918d4d5 100644
--- a/assets/js/gallery.js
+++ b/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(
- "
");
+const initGallery = async () => {
+ const gallery = document.getElementById('gallery');
+ if (!gallery) return;
+
+ const galleryHTML = ({ id, title, url, img, name, creatorUrl }) => `
+ `;
+
+ /* 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("");
- }
-
- });
- });
-
-});
+let _gallery;
+/**
+ * TODO
+ * Used for legacy cross loading https://files.openscad.org/lists/gallery.jsonp
+ */
+function gallery(data) {
+ _gallery = data;
+}
diff --git a/gallery.html b/gallery.html
index b3b9d37..a5fb074 100644
--- a/gallery.html
+++ b/gallery.html
@@ -14,13 +14,8 @@
-
-
-
-
+