MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
 $(function(){
  $('.card').on('mousenter', function(event){
    event.preventDefault();
    $(this).toggleClass('hovered');
  });
   $('.card').on('mouseleave', function(event){
    event.preventDefault();
    $(this).toggleClass('hovered');
  });
});
document.querySelectorAll('.sub-card').forEach(card => {
    card.addEventListener('click', function(event) {
        event.stopPropagation(); // Prevent event bubbling

        // Toggle the expanded state of the clicked card
        const isExpanded = card.getAttribute('data-expanded') === 'true';
        
        // Flip the current sub-card
        card.setAttribute('data-expanded', isExpanded ? 'false' : 'true');

        // Hide all other sub-cards
        document.querySelectorAll('.sub-card').forEach(otherCard => {
            if (otherCard !== card) {
                otherCard.setAttribute('data-expanded', 'false');
            }
        });
    });
});

document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('mouseleave', function() {
        // Collapse all sub-cards when mouse leaves the main card
        document.querySelectorAll('.sub-card').forEach(subCard => {
            subCard.setAttribute('data-expanded', 'false');
        });
    });
});

$(document).ready(function() {
    // Click event for the header or the arrow
    $('.mw-collapsible-header').click(function() {
        var parentDiv = $(this).closest('.mw-collapsible');
        var content = parentDiv.find('.mw-collapsible-content');
        
        // Toggle the collapse/expand state
        parentDiv.toggleClass('mw-collapsed');
        
        // Toggle visibility of the content
        content.stop(true, true).slideToggle(); // Stop any ongoing animation before toggling visibility
    });

    // Ensure that the arrow starts pointing up for expanded sections by default
    $('.mw-collapsible').each(function() {
        var parentDiv = $(this);
        var content = parentDiv.find('.mw-collapsible-content');
        
        if (!parentDiv.hasClass('mw-collapsed')) {
            content.show(); // Ensure content is visible
        }
    });
});

$(document).ready(function() {
  // Check if there are categories in the page
  var categories = mw.config.get('wgCategories');

  // Define a mapping of categories to background images
  var categoryBackgrounds = {
    'Dead Island': 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.chromengine.com/images/c/c9/DIBackground.jpg")',
    'Dying Light': 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.chromengine.com/images/2/26/Background.png")',
    'Call of Juarez: Gunslinger': 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url("https://www.chromengine.com/images/3/36/Random_project_call_of_juaez_gunslingerupscaled.png")',
    'Dead Island Riptide': 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url("https://www.chromengine.com/images/b/b6/Random_project_di_riptide_1.png")',
    'Call of Juarez: BiB': 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url("https://www.chromengine.com/images/2/24/Project_juaez_no_title_1.png")'
  };

  // Default background image if no category matches
  var defaultBackground = 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.chromengine.com/images/8/89/Newbackground.png")';

  // Variable to check if a category matches
  var backgroundImageSet = false;

  // Preload function to cache the background images
  function preloadImage(url) {
    var img = new Image();
    img.src = url;
  }

  // Preload the background images (this can also be done for the default image)
  for (var category in categoryBackgrounds) {
    var imageUrl = categoryBackgrounds[category].match(/url\("([^"]+)"\)/)[1];
    preloadImage(imageUrl);
  }

  // Preload the default background image
  preloadImage(defaultBackground.match(/url\("([^"]+)"\)/)[1]);

  // Iterate through categories to find a matching background
  categories.forEach(function(category) {
    if (categoryBackgrounds[category]) {
      $('body').css({
        'background': categoryBackgrounds[category],
        'background-repeat': 'no-repeat',
        'background-position': 'top center',
        'background-size': 'cover',
        'opacity': 30,
        'transition': 'opacity 0.5s ease',
        'background-attachment': 'fixed'
      });
      backgroundImageSet = true;
    }
  });

  // If no category matched, apply the default background
  if (!backgroundImageSet) {
    $('body').css({
      'background-image': defaultBackground,
      'background-repeat': 'no-repeat',
      'background-position': 'top center',
      'background-size': 'cover',
      'opacity': 30,
      'transition': 'opacity 0.5s ease',
      'background-attachment': 'fixed'
    });
  }
});