MediaWiki:Common.js: Difference between revisions
From Makerpedia
No edit summary |
No edit summary |
||
| Line 75: | Line 75: | ||
$carouselItems.eq(currentIndex).show(); | $carouselItems.eq(currentIndex).show(); | ||
// Create the Next and Previous buttons | // Create the Next and Previous buttons | ||
let $prevButton = $('<button class="carousel-prev"> ◀ </button>'); | let $prevButton = $('<button class="carousel-prev"> ◀ </button>'); | ||
let $nextButton = $('<button class="carousel-next"> ▶ </button>'); | let $nextButton = $('<button class="carousel-next"> ▶ </button>'); | ||
// | // add buttons to the carousel container | ||
$(".carousel").append($prevButton, $nextButton); | $(".carousel-container").append($prevButton, $nextButton); | ||
$nextButton.click(function () { | $nextButton.click(function () { | ||
if (currentIndex < totalItems - 1) { | if (currentIndex < totalItems - 1) { | ||
Revision as of 01:51, 7 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
}
});