MediaWiki:Common.js: Difference between revisions

Revision as of 18:58, 17 February 2025

/* Any JavaScript here will be loaded for all users on every page load. */

if (document) window.µ = function (id, elem) {
  var ret;
  var root = ((elem) ? elem : document);
  switch (id.charAt(0)) {
    case '|':
      ret = root;
      break;
    case '+':
      ret = document.createElement(id.substring(1));
      if (elem) elem.appendChild(ret);
      break;
    case '#':
      ret = root.querySelector(id);
      break;
    default:
      ret = Array.prototype.slice.call(root.querySelectorAll(id));
      break;
  }

  return ret;
};

/* add additional edit button (prioritize 'Edit' over 'Edit Source' when available) -- styled in Medik.css */ 
if(document.getElementById("ca-edit") != null || document.getElementById("ca-ve-edit") != null) {
    let link = document.getElementById("ca-ve-edit") != null ? document.querySelector("#ca-ve-edit a").href : document.querySelector("#ca-edit a").href;
    document.getElementById("content").innerHTML += '<a href='+link+'><button class="big-edit-button"><p>EDIT</p></button></a>';
}


// Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
    $(document).ready(function () {
        if (mw.config.get('wgPageName') !== 'GALLERY') return;  // Ensure script runs only on the Gallery page

        var category = "Projects";  // Default category
        var galleryContainer = $('#project-gallery');  

        
        galleryContainer.before('<div id="category-filter">' +
            '<button class="filter-btn" data-filter="Projects">Show All</button>' +
            '<button class="filter-btn" data-filter="Textiles">Textiles</button>' +
            '<button class="filter-btn" data-filter="Crafting">Crafting</button>' +
            '<button class="filter-btn" data-filter="Airbrushing">Airbrushing</button>' +
            '<button class="filter-btn" data-filter="Button Pressing">Button Pressing</button>' +
            '<button class="filter-btn" data-filter="Cassette Making">Cassette Making</button>' +
            '<button class="filter-btn" data-filter="Graphic Design">Graphic Design</button>' +
            '<button class="filter-btn" data-filter="Hand Sewing">Hand Sewing</button>' +
            '<button class="filter-btn" data-filter="Laser Cutting">Laser Cutting</button>' +
            '<button class="filter-btn" data-filter="Machining">Machining</button>' +
            '<button class="filter-btn" data-filter="3D Modeling">3D Modeling</button>' +
            '<button class="filter-btn" data-filter="3D Printing">3D Printing</button>' +
            '<button class="filter-btn" data-filter="Programming">Programming</button>' +
            '<button class="filter-btn" data-filter="Soldering">Soldering</button>' +
            '<button class="filter-btn" data-filter="Technical Design">Technical Design</button>' +
            '<button class="filter-btn" data-filter="Welding">Welding</button>' +
            '<button class="filter-btn" data-filter="Woodworking">Woodworking</button>' +
        '</div>');

        // load gallery based on category
        function loadGallery(category) {
            galleryContainer.html('<div class="gallery-container">Loading gallery...</div>');  

            new mw.Api().get({
                action: 'query',
                list: 'categorymembers',
                cmtitle: 'Category:' + category,
                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: 'revisions',
                        rvprop: 'content',
                        titles: page.title,
                        format: 'json'
                    }).then(function (pageData) {
                        var pageId = Object.keys(pageData.query.pages)[0];
                        var content = pageData.query.pages[pageId].revisions[0]['*'];
                        var pageUrl = mw.util.getUrl(page.title);
                        var imgUrl = '';

                        // Try to find a direct image URL (img1=https://...)
                        var directMatch = content.match(/img1=(https:\/\/[^\n|}%s]+)/);
                        if (directMatch) {
                            imgUrl = directMatch[1];
                        }

                        // If no direct URL, try to find a [[File:...]] entry
                        var fileMatch = content.match(/\[\[File:([^|\]]+)/);
                        if (!imgUrl && fileMatch) {
                            var fileName = fileMatch[1].trim();

                            // Fetch full image URL from MediaWiki API
                            return new mw.Api().get({
                                action: 'query',
                                titles: 'File:' + fileName,
                                prop: 'imageinfo',
                                iiprop: 'url',
                                format: 'json'
                            }).then(function (imageData) {
                                var imagePageId = Object.keys(imageData.query.pages)[0];
                                if (imageData.query.pages[imagePageId].imageinfo) {
                                    imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
                                }

                               
                                galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
                            });
                        } else {
                            // Add the gallery item if the image was found
                            galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
                        }
                    });
                });

                Promise.all(requests).then(function () {
                    
                    galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
                });
            });
        }

        // generate a gallery
        function generateGalleryItem(pageUrl, title, imgUrl, category) {
            return `
                <div class="gallery-item ${category}">
                    <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>
                    <div class="gallery-caption">
                        <a href="${pageUrl}">${title}</a>
                    </div>
                </div>
            `;
        }

        loadGallery("Projects");

        $(".filter-btn").click(function () {
            var selectedCategory = $(this).data("filter");
            loadGallery(selectedCategory);  
        });
    });
});

// TOOLS Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
    $(document).ready(function () {
        if (mw.config.get('wgPageName') !== 'TOOLS') return;  // Ensure script runs only on the TOOLS page

        var category = "Tools";  // Default category
        var galleryContainer = $('#tools-gallery');  

        // Add filter buttons before the gallery
        galleryContainer.before('<div id="category-filter">' +
            '<button class="filter-btn" data-filter="Tools">Show All</button>' +  
            '<button class="filter-btn" data-filter="Makerspace Tools">Makerspace Tools</button>' +
            '<button class="filter-btn" data-filter="Wood Shop Tools">Wood Shop Tools</button>' +
            '<button class="filter-btn" data-filter="Machine Shop Tools">Machine Shop Tools</button>' +
        '</div>');

        // Function to get URL parameters
        function getUrlParameter(name) {
            var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
            return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
        }

        // Check if a filter is passed in the URL
        var selectedCategory = getUrlParameter('filter');
        if (!selectedCategory) selectedCategory = "Tools"; // Default to Tools if no parameter

        function loadGallery(category) {
            galleryContainer.html('<div class="gallery-container">Loading gallery...</div>');  

            new mw.Api().get({
                action: 'query',
                list: 'categorymembers',
                cmtitle: 'Category:' + category,
                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: 'revisions',
                        rvprop: 'content',
                        titles: page.title,
                        format: 'json'
                    }).then(function (pageData) {
                        var pageId = Object.keys(pageData.query.pages)[0];
                        var content = pageData.query.pages[pageId].revisions[0]['*'];
                        var pageUrl = mw.util.getUrl(page.title);
                        var imgUrl = '';

                        var fileMatch = content.match(/\[\[File:([^|\]]+)/);
                        if (fileMatch) {
                            var fileName = fileMatch[1].trim();
                            return new mw.Api().get({
                                action: 'query',
                                titles: 'File:' + fileName,
                                prop: 'imageinfo',
                                iiprop: 'url',
                                format: 'json'
                            }).then(function (imageData) {
                                var imagePageId = Object.keys(imageData.query.pages)[0];
                                if (imageData.query.pages[imagePageId].imageinfo) {
                                    imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
                                }
                                galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
                            });
                        } else {
                            galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
                        }
                    });
                });

                Promise.all(requests).then(function () {
                    galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
                });
            });
        }

        function generateGalleryItem(pageUrl, title, imgUrl, category) {
            return `
                <div class="gallery-item ${category}">
                    <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>
                    <div class="gallery-caption">
                        <a href="${pageUrl}">${title}</a>
                    </div>
                </div>
            `;
        }

        // Load gallery with the selected category
        loadGallery(selectedCategory);

        // Highlight the correct filter button and load the selected category on click
        $(".filter-btn").click(function () {
            var newCategory = $(this).data("filter");
            loadGallery(newCategory);
            history.replaceState(null, "", "?filter=" + encodeURIComponent(newCategory)); // Update URL without reloading
        });

        // Auto-select the correct filter button based on URL parameter
        $(".filter-btn").each(function () {
            if ($(this).data("filter") === selectedCategory) {
                $(this).addClass("active");
            }
        });
    });
});



//CAROUSEL
function loadCarouselData() {
    // Make the API query to fetch pages for carousel
    var category = "Projects"; 
    var carouselData = [];

    new mw.Api().get({
        action: 'query',
        list: 'categorymembers',
        cmtitle: 'Category:' + category,
        cmlimit: 50, 
        format: 'json'
    }).done(function (data) {
        var pages = data.query.categorymembers;

        var requests = pages.map(function (page) {
            return new mw.Api().get({
                action: 'query',
                prop: 'revisions',
                rvprop: 'content',
                titles: page.title,
                format: 'json'
            }).then(function (pageData) {
                var pageId = Object.keys(pageData.query.pages)[0];
                var content = pageData.query.pages[pageId].revisions[0]['*'];
                var pageUrl = mw.util.getUrl(page.title);
                var imgUrl = '';

                // Try to find a direct image URL (img1=https://...)
                var directMatch = content.match(/img1=(https:\/\/[^\n|}%s]+)/);
                if (directMatch) {
                    imgUrl = directMatch[1];
                }

                // If no direct URL, try to find a [[File:...]] entry
                var fileMatch = content.match(/\[\[File:([^|\]]+)/);
                if (!imgUrl && fileMatch) {
                    var fileName = fileMatch[1].trim();

                    // Fetch full image URL from MediaWiki API
                    return new mw.Api().get({
                        action: 'query',
                        titles: 'File:' + fileName,
                        prop: 'imageinfo',
                        iiprop: 'url',
                        format: 'json'
                    }).then(function (imageData) {
                        var imagePageId = Object.keys(imageData.query.pages)[0];
                        if (imageData.query.pages[imagePageId].imageinfo) {
                            imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
                        }

                        // Store carousel item data
                        if (imgUrl) {
                            carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
                        }
                    });
                } else {
                    // Store carousel item data
                    if (imgUrl) {
                        carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
                    }
                }
            });
        });

        Promise.all(requests).then(function () {
            // Call the function to display carousel
            displayCarousel(carouselData);
        });
    });
}


function displayCarousel(carouselData) {
    var carouselHtml = '';

    carouselData.forEach(function (item) {
        carouselHtml += `
            <div class="carousel-item">
                <a href="${item.pageUrl}">
                    <img src="${item.imgUrl}" alt="Carousel Image">
                </a>
               <div class="carousel-title">${item.title}</div>
            </div>
        `;
    });

    // Inject the HTML into the carousel container
    var carouselContainer = $('.carousel-container');
    carouselContainer.html(carouselHtml);

    // Initialize the carousel behavior
    initializeCarousel();
}

function initializeCarousel() {
    let currentIndex = 0;
    let $carouselItems = $(".carousel-item");
    let totalItems = $carouselItems.length;
    
    $carouselItems.hide().eq(currentIndex).show();

    let $prevButton = $('<button class="carousel-prev"> ◀ </button>');
    let $nextButton = $('<button class="carousel-next"> ▶ </button>');
    $('.carousel-container').append($prevButton, $nextButton);

    $nextButton.click(function () {
        currentIndex = (currentIndex + 1) % totalItems;
        updateCarousel();
    });

    $prevButton.click(function () {
        currentIndex = (currentIndex - 1 + totalItems) % totalItems;
        updateCarousel();
    });

    function updateCarousel() {
        $carouselItems.hide().eq(currentIndex).show();
    }
}

$(document).ready(function () {
    loadCarouselData(); // Load the carousel data on page load
});


// if page is part of a category, insert any corresponding skill badges (individual project pages)
if(document.getElementById("catlinks") != null) {
    document.querySelectorAll("#catlinks li a").forEach((cat) => {
        let query = "#firstHeading";
        if(cat.title.includes("Category:Textiles")) {
            insertSkillBadgeLink('File:Textile_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Crafting")) {
            insertSkillBadgeLink('File:Crafting_badge_small.png', query);
        }
        if(cat.title.includes("Category:Airbrushing")) {
            insertSkillBadgeLink('File:Airbrushing_badge_small.png', query);
        }
        if(cat.title.includes("Category:Button Pressing")) {
            insertSkillBadgeLink('File:Button_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Cassette Making")) {
            insertSkillBadgeLink('File:Cassette_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Graphic Design")) {
            insertSkillBadgeLink('File:Graphic_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Hand Sewing")) {
            insertSkillBadgeLink('File:Handsewing_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Laser Cutting")) {
            insertSkillBadgeLink('File:Laser_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Machining")) {
            insertSkillBadgeLink('File:Machining_badge_small.png', query);
        } 
        if(cat.title.includes("Category:3D Modeling")) {
            insertSkillBadgeLink('File:Modeling_badge_small.png', query);
        } 
        if(cat.title.includes("Category:3D Printing")) {
            insertSkillBadgeLink('File:Printing_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Programming")) {
            insertSkillBadgeLink('File:Programming_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Soldering")) {
            insertSkillBadgeLink('File:Soldering_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Technical design")) {
            insertSkillBadgeLink('File:Technical_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Welding")) {
            insertSkillBadgeLink('File:Welding_badge_small.png', query);
        } 
        if(cat.title.includes("Category:Woodworking")) {
            insertSkillBadgeLink('File:Woodworking_badge_small.png', query);
        } 
    })
}

// inserts image at given selector element in html, using image in mediawiki format (eg [[File:filename...]])
function insertSkillBadgeLink(image, selector) {
    $.getJSON(
        mw.util.wikiScript( 'api' ), {
            format: 'json',
            action: 'query',
            titles: image,
            prop: 'imageinfo',
            iiprop: 'url'
        },
        function( obj ) {
            let pages = obj.query.pages;
            let result1 = pages[Object.keys(pages)[0]];
            let url = result1.imageinfo[0].url;
            let alt = result1.title; // set alt text to image title
            let urlSub = url.substring(url.indexOf("/wiki"));
            document.querySelector(selector).innerHTML += '<img src="'+urlSub+'" alt="'+alt+'" width="50px" style="padding-left:.3em">';
        }
    );
}