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>';
}
// 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
var carouselContainer = $('.carousel-container); // Get carousel container
var carouselData = []; // will store image and page url for carousel
// 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">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>');
// Function to load gallery based on category
function loadGallery(category) {
galleryContainer.html('<div class="gallery-container">Loading gallery...</div>'); // Show loading message
carouselData = []; //resets carousel data when loading the category (start from scratch)
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 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;
}
// Add gallery and carousel items
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl });
}
});
} else {
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl });
}
}
});
});
Promise.all(requests).then(function () {
// Append gallery items after loading them
galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
loadCarousel(); //initialize carousel after galleries loaded
});
});
}
// Function to generate a gallery item
function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : '<div class="no-image">No Image Available</div>'}
</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</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
});
});
});
// Function to load carousel items from collected data
function loadCarousel() {
var carouselHtml = '';
carouselData.forEach(function (item) {
carouselHtml += `
<div class="carousel-item">
<a href="${item.pageUrl}">
<img src="${item.imgUrl}" alt="Carousel Image">
</a>
</div>
`;
});
carouselContainer.html(carouselHtml); // Inject the carousel items
initializeCarousel(); // Activate the carousel behavior
}
// Function to initialize carousel behavior
function initializeCarousel() {
let currentIndex = 0;
let $carouselItems = $(".carousel-item");
let totalItems = $carouselItems.length;
$(".carousel-count").text(`Total Images: ${totalItems}`);
$carouselItems.hide().eq(currentIndex).show();
let $prevButton = $('<button class="carousel-prev"> ◀ </button>');
let $nextButton = $('<button class="carousel-next"> ▶ </button>');
carouselContainer.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();
}
}
// 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'); // Get the gallery container
// 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 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 pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';
// Try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (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;
}
// Add the gallery item
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
});
} else {
// If no image is found, still display the title
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
}
});
});
Promise.all(requests).then(function () {
// Append gallery items after loading them
galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
});
});
}
// Function to generate a gallery item
function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : '<div class="no-image">No Image Available</div>'}
</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</div>
`;
}
// Initially, load all tools (Tools category)
loadGallery("Tools");
// Filter logic for buttons
$(".filter-btn").click(function () {
var selectedCategory = $(this).data("filter");
loadGallery(selectedCategory); // Load gallery based on selected category
});
});
});
