MediaWiki:Common.js: Difference between revisions
From Makerpedia
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 66: | Line 66: | ||
document.addEventListener("DOMContentLoaded", () => { | |||
const carouselTrack = document.querySelector(".carousel-track"); | |||
const items = document.querySelectorAll("gallery > *"); | |||
const prevButton = document.querySelector(".carousel-prev"); | |||
const nextButton = document.querySelector(".carousel-next"); | |||
function | let currentSlide = 0; | ||
const itemWidth = items[0].offsetWidth; // Ensure width matches the gallery item | |||
function moveCarousel() { | |||
carouselTrack.style.transform = `translateX(-${currentSlide * itemWidth}px)`; | |||
} | } | ||
nextButton.addEventListener("click", () => { | |||
currentSlide = (currentSlide + 1) % items.length; | |||
moveCarousel(); | |||
}); | }); | ||
prevButton.addEventListener("click", () => { | |||
currentSlide = (currentSlide - 1 + items.length) % items.length; | |||
moveCarousel(); | |||
}); | }); | ||
}); | }); | ||
Revision as of 03:16, 6 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.addEventListener("DOMContentLoaded", () => {
const carouselTrack = document.querySelector(".carousel-track");
const items = document.querySelectorAll("gallery > *");
const prevButton = document.querySelector(".carousel-prev");
const nextButton = document.querySelector(".carousel-next");
let currentSlide = 0;
const itemWidth = items[0].offsetWidth; // Ensure width matches the gallery item
function moveCarousel() {
carouselTrack.style.transform = `translateX(-${currentSlide * itemWidth}px)`;
}
nextButton.addEventListener("click", () => {
currentSlide = (currentSlide + 1) % items.length;
moveCarousel();
});
prevButton.addEventListener("click", () => {
currentSlide = (currentSlide - 1 + items.length) % items.length;
moveCarousel();
});
});