MediaWiki:Common.js: Difference between revisions
From Makerpedia
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 65: | Line 65: | ||
}); | }); | ||
$(document).ready(function() { | |||
document. | const $carouselTrack = $(".carousel-track"); | ||
const carouselTrack = | const $items = $("gallery > *"); | ||
const items = | const $prevButton = $(".carousel-prev"); | ||
const prevButton = | const $nextButton = $(".carousel-next"); | ||
const nextButton = | |||
let currentSlide = 0; | let currentSlide = 0; | ||
const itemWidth = items | const itemWidth = $items.first().outerWidth(); // Get the width of the first image | ||
function moveCarousel() { | function moveCarousel() { | ||
carouselTrack. | $carouselTrack.css("transform", `translateX(-${currentSlide * itemWidth}px)`); | ||
} | } | ||
nextButton. | $nextButton.on("click", function() { | ||
currentSlide = (currentSlide + 1) % items.length; | currentSlide = (currentSlide + 1) % $items.length; // Move to the next slide | ||
moveCarousel(); | moveCarousel(); | ||
}); | }); | ||
prevButton. | $prevButton.on("click", function() { | ||
currentSlide = (currentSlide - 1 + items.length) % items.length; | currentSlide = (currentSlide - 1 + $items.length) % $items.length; // Move to the previous slide | ||
moveCarousel(); | moveCarousel(); | ||
}); | }); | ||
}); | }); | ||
Revision as of 03:26, 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).ready(function() {
const $carouselTrack = $(".carousel-track");
const $items = $("gallery > *");
const $prevButton = $(".carousel-prev");
const $nextButton = $(".carousel-next");
let currentSlide = 0;
const itemWidth = $items.first().outerWidth(); // Get the width of the first image
function moveCarousel() {
$carouselTrack.css("transform", `translateX(-${currentSlide * itemWidth}px)`);
}
$nextButton.on("click", function() {
currentSlide = (currentSlide + 1) % $items.length; // Move to the next slide
moveCarousel();
});
$prevButton.on("click", function() {
currentSlide = (currentSlide - 1 + $items.length) % $items.length; // Move to the previous slide
moveCarousel();
});
});