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'] : ""; // If no filter query in url, use default category type
       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);
       });

       function hideSpinner(){ $('#card-gallery .loadDial').hide();}

       // load gallery based on category
       function loadGallery(category) {
           
           let pageTitles = [];

galleryContainer.html("

Retrieving Data...

");

           // insert projects corresponding to each skill under broader category filter selected
           var filterCats = sortCats.filter(el=>el.super == category);
           if(category == "") filterCats = [{name:""}];
           filterCats.forEach(function(cat) {
               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 = ;
                   pages.forEach(function (page) {
                       var pageUrl = mw.util.getUrl(page.title);
                       var imgUrl = ;
                       $('.gallery-container').append(generateGalleryItem(pageUrl, page.title, imgUrl, category));
                       pageTitles.push(page.title);
                       hideSpinner();
                       let card = µ('.gallery-container .gallery-item:last-child img')[0];
                       new mw.Api().get({
                           action: 'parse',
                           page: page.title
                       }).done(function (pageData) {
                           const parser = new DOMParser();
                           const htmlDoc = parser.parseFromString(pageData.parse.text['*'], 'text/xml');
                           console.log(htmlDoc);
                           let imgs = µ('figure img',htmlDoc);
                           imgs.forEach(img=>{
                             if(img.getAttribute('src')!== 'null') return card.src = img.getAttribute('src');
                           });
                           //card.src = µ('figure img',htmlDoc)[0].getAttribute('src');
                       });
                   });
               });
           });
       }

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

                   <a href="${pageUrl}">
                       ${imgUrl ? `<img class="thumbs" 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;
 }

.gallery-item {

   width: 20%;
   min-width:200px;
   max-width: 30vw;
   margin: 10px;
   flex-grow: 2;

}

.loadDial {

 width: 100%;
 text-align: center;
 p {
   font-weight: bolder;
   font-size: x-large;
   color: #666;
 }

}

</style>