Widget:CardGallery

<script> var cardWidget = {};

cardWidgetStart = function () {

   $(document).ready(function () {
       var sortCats = window[""];
       var superCats = Array.from(new Set(sortCats.map(x=>x.super)));
       var category = pageParams['filter'] ? pageParams['filter'] : "All"; // If no filter query in url, use default category Projects
       var galleryContainer = $('#card-gallery');

galleryContainer.before('

');

       var addFilterButton = (cat) => {
         var nextBut = µ('+button',µ('#category-filter'));
         nextBut.id = cat+'-filter-btn';
         nextBut.textContent = cat;
         nextBut.className = 'filter-btn';
         nextBut.setAttribute('data-filter',cat);
         sortCats.forEach((el,ind)=>{
           if(el.super == cat && el.image) µ('+img', nextBut).src = el.image;
         });
         return nextBut;
       }

       var allBut = addFilterButton("");
       allBut.textContent = 'Show All';

       superCats.forEach(el=>{
         addFilterButton(el);
       });

       // load gallery based on category
       function loadGallery(category) {
           
           let pageTitles = [];
           galleryContainer.innerHTML = ;
           // insert projects corresponding to each skill under broader category filter selected
           sortCats.forEach(function(cat) {
               
               if(cat.super == category) new mw.Api().get({
                   action: 'query',
                   list: 'categorymembers',
                   cmtitle: 'Category:' + cat.name,
                   cmlimit: 50,  
                   format: 'json'
               }).done(function (data) {
                   var pages = data.query.categorymembers;
                   var galleryHtml = ;
                   var requests = pages.map(function (page) {
                       return new mw.Api().get({
                           action: 'query',
                           prop: 'images',
                           titles: page.title,
                           format: 'json'
                       }).then(function (pageData) {
                           console.log(pageData);
                       });
                   });

               Promise.all(requests).then(function () {
                   $('.gallery-container').append(galleryHtml);
               });
               });
           });
       }

       // generate a gallery
       function generateGalleryItem(pageUrl, title, imgUrl, category) {
           return `

                   <a href="${pageUrl}">
                       ${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : `<img src="https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg" alt="No Image Available">`}

                   </a>

                       <a href="${pageUrl}">${title}</a>

           `;
       }

       loadGallery(category);

       // find filter button corresponding to selected category and add css class 'selected-filter'
       $(".filter-btn").each(function () { $(this).data("filter") === category ? $(this).addClass('selected-filter') : null});

       // when filter button is clicked, load projects for that category, deselect current filtered button, and select newly clicked filter button
       $(".filter-btn").click(function () {
           var selectedCategory = $(this).data("filter");
           loadGallery(selectedCategory); 
           $('.filter-btn.selected-filter').each((i, elem) => $(elem).removeClass('selected-filter'));
           $(this).addClass('selected-filter');
       });
   });

};

if(!window.widgets) window.widgets = []; window.widgets.push(cardWidgetStart); </script> <style>

 .filter-btn img{
   height:1.5em;
   padding-left:.4em;
 }

</style>