MediaWiki:Common.js: Difference between revisions

From Makerpedia

Chetitac (talk | contribs)
No edit summary
Chetitac (talk | contribs)
No edit summary
Line 64: Line 64:
     });
     });
});
});


$(document).ready(function () {
$(document).ready(function () {
    // Carousel variables
    let $carouselWrapper = $(".carousel-wrapper");
    let $carouselGallery = $(".carousel-gallery");
    let $images = $carouselGallery.find("img");
    let imageWidth = $images.first().outerWidth(true); // Get the width of one image including margins
    let totalImages = $images.length;
     let currentIndex = 0;
     let currentIndex = 0;
    let $carouselItems = $(".carousel-item");
    let totalItems = $carouselItems.length;


     // Add the "prev" and "next" buttons dynamically to the carousel container
     // Show the first item by default
    let prevButton = $('<button class="prev">Prev</button>');
     $carouselItems.eq(currentIndex).show();
    let nextButton = $('<button class="next">Next</button>');
     $(".carousel-container").append(prevButton).append(nextButton);


     // "Prev" button click - move carousel to the left
     // Create the Next and Previous buttons dynamically
     prevButton.click(function () {
    let $prevButton = $('<button class="carousel-prev">Prev</button>');
         if (currentIndex > 0) {
    let $nextButton = $('<button class="carousel-next">Next</button>');
             currentIndex--;
 
             $carouselWrapper.css("transform", "translateX(-" + (imageWidth * currentIndex) + "px)");
    // Append buttons to the carousel
     $(".carousel").append($prevButton, $nextButton);
 
    // Next button click
    $nextButton.click(function () {
         if (currentIndex < totalItems - 1) {
             currentIndex++;
        } else {
             currentIndex = 0; // Loop back to the first item
         }
         }
        updateCarousel();
     });
     });


     // "Next" button click - move carousel to the right
     // Previous button click
     nextButton.click(function () {
     $prevButton.click(function () {
         if (currentIndex < totalImages - 1) {
         if (currentIndex > 0) {
             currentIndex++;
             currentIndex--;
             $carouselWrapper.css("transform", "translateX(-" + (imageWidth * currentIndex) + "px)");
        } else {
             currentIndex = totalItems - 1; // Loop back to the last item
         }
         }
        updateCarousel();
     });
     });


     // Show the first image initially
     // Function to update the carousel view
     $carouselWrapper.css("transform", "translateX(0)");
     function updateCarousel() {
        $(".carousel-track").css("transform", `translateX(-${currentIndex * 100}%)`);
    }
});
});

Revision as of 21:53, 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 () {
    let currentIndex = 0;
    let $carouselItems = $(".carousel-item");
    let totalItems = $carouselItems.length;

    // Show the first item by default
    $carouselItems.eq(currentIndex).show();

    // Create the Next and Previous buttons dynamically
    let $prevButton = $('<button class="carousel-prev">Prev</button>');
    let $nextButton = $('<button class="carousel-next">Next</button>');

    // Append buttons to the carousel
    $(".carousel").append($prevButton, $nextButton);

    // Next button click
    $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() {
        $(".carousel-track").css("transform", `translateX(-${currentIndex * 100}%)`);
    }
});