View source for Widget:CardGallery

<script>
var cardWidget = {};

cardWidgetStart = function () {
    $(document).ready(function () {
        var sortCats = window["<!--{$category|escape:'url'}-->"];
        var superCats = Array.from(new Set(sortCats.map(x=>x.super)));
        var Category = pageParams['filter'] ? pageParams['filter'] : "<!--{$type|escape:'url'}-->"; // If no filter query in url, use default category type
        var galleryContainer = $('#card-gallery');
        galleryContainer.before('<div id="category-filter"></div>');

        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("<!--{$type|escape:'url'}-->");
        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("<div class='loadDial'><p>Retrieving Data...</p><div class='loadSpinner'></div></div>");
            // insert projects corresponding to each skill under broader category filter selected
            var filterCats = sortCats.filter(el=>el.super == category);
            if(category == "<!--{$type|escape:'url'}-->") filterCats = [{name:"<!--{$type|escape:'url'}-->"}];
            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 `
                <div class="gallery-item ${category}">
                    <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>
                    <div class="gallery-caption">
                        <a href="${pageUrl}">${title}</a>
                    </div>
                </div>
            `;
        }

        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>
<div id="card-gallery" class="gallery-container"></div>