MediaWiki:Common.js: Difference between revisions

Revision as of 20:22, 9 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>';
}

$(document).ready(function () {
    // Add the category filter buttons before the gallery
    $("#tool-gallery").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>');

    // Initially, show all galleries
    $("#tool-gallery, #makerspace-gallery, #machineshop-gallery, #woodshop-gallery").show();

    // Filter logic when a button is clicked
    $(".filter-btn").click(function () {
        var selectedCategory = $(this).data("filter");

        // Hide all galleries first
        $("#tool-gallery, #makerspace-gallery, #machineshop-gallery, #woodshop-gallery").hide();

        // Show the appropriate gallery based on the selected category
        if (selectedCategory === "Tools") {
            // Show all galleries when "Show All" is clicked
            $("#tool-gallery, #makerspace-gallery, #machineshop-gallery, #woodshop-gallery").show();
        } else if (selectedCategory === "Machine Shop Tools") {
            // Show only Machine Shop Tools gallery
            $("#machineshop-gallery").show();
        } else if (selectedCategory === "Makerspace Tools") {
            // Show only Makerspace Tools gallery
            $("#makerspace-gallery").show();
        } else if (selectedCategory === "Wood Shop Tools") {
            // Show only Wood Shop Tools gallery
            $("#woodshop-gallery").show();
        }
    });
});

$(document).ready(function () {
    let currentIndex = 0;
    let $carouselItems = $(".carousel-item");
    let totalItems = $carouselItems.length;

    $(".carousel-count").text(`Total Images: ${totalItems}`);
    // Hide all items and show the first one by default
    $carouselItems.hide();
    $carouselItems.eq(currentIndex).show();

    // Create the Next and Previous buttons 
    let $prevButton = $('<button class="carousel-prev"> ◀ </button>');
    let $nextButton = $('<button class="carousel-next"> ▶ </button>');

    // add buttons to the carousel container
    $(".carousel-container").append($prevButton, $nextButton);


    $nextButton.click(function () {
        if (currentIndex < totalItems - 1) {
            currentIndex++;
        } else {
            currentIndex = 0; // Loop back to the first item
        }
        updateCarousel();
    });

    // Previous button click
    $prevButton.click(function () {
        if (currentIndex > 0) {
            currentIndex--;
        } else {
            currentIndex = totalItems - 1; // Loop back to the last item
        }
        updateCarousel();
    });

    // Function to update the carousel view
    function updateCarousel() {
        $carouselItems.hide(); // Hide all items
        $carouselItems.eq(currentIndex).show(); // Show the active one
    }
});


// 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');  // Get the gallery container

        // Add filter buttons before the 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">Programing</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>');

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

            new mw.Api().get({
                action: 'query',
                list: 'categorymembers',
                cmtitle: 'Category:' + category,
                cmlimit: 50,  // Limit the number of results (adjust as needed)
                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 match = content.match(/img1=(https:\/\/[^\n|}%s]+)/);
                        
                        if (match) {
                            var imgUrl = match[1];
                            var pageUrl = mw.util.getUrl(page.title);

                            galleryHtml += `
                                <div class="gallery-item ${category}">
                                    <a href="${pageUrl}">
                                        <img src="${imgUrl}" alt="${page.title}">
                                    </a>
                                    <div class="gallery-caption">
                                        <a href="${pageUrl}">${page.title}</a>
                                    </div>
                                </div>
                            `;
                        }
                    });
                });

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

        // Initially, load all projects (Projects category)
        loadGallery("Projects");

        // Filter logic for buttons
        $(".filter-btn").click(function () {
            var selectedCategory = $(this).data("filter");
            loadGallery(selectedCategory);  // Load gallery based on selected category
        });
    });
});