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()};

       function loadCategory(category,offset){
           new mw.Api().get({
               action: 'query',
               list: 'categorymembers',
               cmtitle: 'Category:' + category.name,
               cmlimit: 5,
               cmcontinue: offset,
               format: 'json'
           }).done(function (data) {
               var pages = data.query.categorymembers;
               var galleryHtml = ;
               //console.log(data);
               if(data.continue) loadCategory(category, data.continue.cmcontinue);
               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(pageData.parse.text['*']);
                       let src = /<(?:img|figure).*?src=(?:'|")([^"'<>]*?)(?<!null)(?:'|").*?>/.exec(pageData.parse.text['*'])
                       console.log(src);
                       if(src != null){ 
                               if(src[1] != 'null' && card.src.includes("No-Image")) return card.src = src[1];
                       }
                       //card.src = µ('figure img',htmlDoc)[0].getAttribute('src');
                   });
               });
           });
       }

       // 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) {
               loadCategory(cat,0);
           });
       }

       // 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>