MediaWiki:Common.js
From Makerpedia
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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 () {
var currentPageTitle = mw.config.get('wgTitle'); // Get the title of the current page
if (currentPageTitle !== "Gallery") {
return; // Do nothing if we're not on the "Gallery" page
}
var category = "Projects"; // Default category is "Projects"
var galleryContainer = $('#project-gallery'); // The container where the gallery will be displayed
// Dynamically create and insert filter buttons above the gallery
var filterContainer = $('<div id="category-filters" style="text-align: center; margin-bottom: 20px;"></div>');
var buttons = [
{ label: 'All', category: 'Projects' },
{ label: 'Textiles', category: 'Textiles' },
{ label: '3D Printing', category: '3D Printing' }
];
buttons.forEach(function (button) {
var btn = $('<button class="filter-btn"></button>')
.text(button.label)
.data('category', button.category)
.css({
padding: '10px 20px',
margin: '5px',
fontSize: '16px',
backgroundColor: '#4CAF50',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
})
.hover(
function() { $(this).css('background-color', '#45a049'); },
function() { $(this).css('background-color', '#4CAF50'); }
);
filterContainer.append(btn);
});
// Insert the filter container above the gallery
galleryContainer.before(filterContainer);
// Function to load gallery based on category
function loadGallery(category) {
galleryContainer.empty();
var galleryHtml = '<p>Loading gallery...</p>';
galleryContainer.html(galleryHtml); // Temporarily show the "Loading..." message
new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50, // Adjust limit if needed
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 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">
<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 () {
galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
});
});
}
// Load the default category (All Projects) on page load
loadGallery("Projects");
// Event listener for the category filter buttons
$('#category-filters').on('click', '.filter-btn', function () {
var selectedCategory = $(this).data('category');
loadGallery(selectedCategory); // Load the gallery for the selected category
});
});
});
