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 @@ - - - - +