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() {
  var categories = mw.config.get('wgCategories');

  // Define a mapping of categories to arrays of background images
  var categoryBackgrounds = {
    'Dead Island': [
      'https://www.chromengine.com/images/5/5b/Dead_islan_background.png'
    ],
    'Dying Light': [
      'https://www.chromengine.com/images/f/fe/Dying_light.png'
    ],
    'Call of Juarez: Gunslinger': [
      'https://www.chromengine.com/images/4/4b/Call_of_juaez_gunslinger.png'
    ],
    'Dead Island Riptide': [
      'https://www.chromengine.com/images/b/b6/Random_project_di_riptide_1.png',
      'https://www.chromengine.com/images/0/09/Dead_island_riptide_DE.png'
    ],
    'Call of Juarez: BiB': [
      'https://www.chromengine.com/images/2/24/Project_juaez_no_title_1.png'
    ],
    'Call of Juarez: The Cartel': [
      'https://www.chromengine.com/images/6/64/Callofjuarezcartel.png'
    ],
    'Call of Juarez':[
      'https://www.chromengine.com/images/c/cf/Call_of_juarez_background_1.png',
      'https://www.chromengine.com/images/3/38/Call_of_juarez_background_2.png'
    ],
    'Dead Island DE':[
    	'https://www.chromengine.com/images/4/45/Dead_island_DE.png'
    	],
    'Dying Light: The Beast':[
    	'https://www.chromengine.com/images/1/12/Dying_light_the_beast.png',
    	'https://www.chromengine.com/images/c/c3/Dying_light_the_beast_2.png'
    	],
    'Dying Light 2':[
    	'https://www.chromengine.com/images/0/04/Dying_light_2.png',
    	'https://www.chromengine.com/images/0/02/Dying_light_2_.png',
    	'https://www.chromengine.com/images/3/3f/Dying_light_2_some_layered_effects.png'
    	]
  };

  var defaultBackgrounds = [
    'https://www.chromengine.com/images/8/89/Newbackground.png',
  ];

  function preloadImage(url) {
    var img = new Image();
    img.src = url;
  }

  // Preload all background images
  for (var category in categoryBackgrounds) {
    categoryBackgrounds[category].forEach(preloadImage);
  }
  defaultBackgrounds.forEach(preloadImage);

  function getRandomBackground(images) {
    return images[Math.floor(Math.random() * images.length)];
  }

  var backgroundImageSet = false;

  // Set a random background for the matching category
  categories.forEach(function(category) {
    if (categoryBackgrounds[category]) {
      var randomImage = getRandomBackground(categoryBackgrounds[category]);
      $('body').css({
        'background': `linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("${randomImage}")`,
        'background-repeat': 'no-repeat',
        'background-position': 'top center',
        'background-size': 'cover',
        'opacity': 1,
        'transition': 'opacity 0.5s ease',
        'background-attachment': 'fixed'
      });
      backgroundImageSet = true;
    }
  });

  if (!backgroundImageSet) {
    var randomDefault = getRandomBackground(defaultBackgrounds);
    $('body').css({
      'background': `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("${randomDefault}")`,
      'background-repeat': 'no-repeat',
      'background-position': 'top center',
      'background-size': 'cover',
      'opacity': 1,
      'transition': 'opacity 0.5s ease',
      'background-attachment': 'fixed'
    });
  }
});


$(function () {
    var categoryList = [];
    
    // Fetch all existing categories
    $.get(mw.util.wikiScript('api'), {
        action: 'query',
        list: 'allcategories',
        aclimit: '500',
        format: 'json'
    }).done(function (data) {
        categoryList = data.query.allcategories.map(function (cat) {
            return cat['*'];
        });
    });

    // Create a suggestion dropdown
    function showSuggestions(input, suggestions, cursorPosition) {
        var suggestionBox = $('<ul class="category-suggestions"></ul>');
        suggestionBox.css({
            position: 'absolute',
            zIndex: 1000,
            background: '#fff',
            border: '1px solid #ccc',
            padding: '5px',
            margin: 0,
            listStyle: 'none',
            cursor: 'pointer'
        });

        suggestions.forEach(function (suggestion) {
            var item = $('<li></li>').text(suggestion).css({ padding: '5px' });
            item.on('mousedown', function () {  // Use mousedown to prevent blur before click
                var textBefore = input.val().substring(0, cursorPosition).replace(/\[\[Category:[^\]]*$/, '[[Category:' + suggestion);
                var textAfter = input.val().substring(cursorPosition);
                input.val(textBefore + textAfter);
                suggestionBox.remove();
                input.focus();
            });
            suggestionBox.append(item);
        });

        $('body').append(suggestionBox);

        // Position the suggestion box near the cursor
        var inputOffset = input.offset();
        var lineHeight = parseInt(input.css('line-height')) || 20;  // Default line height if undetectable
        var cursorOffset = calculateCursorPosition(input, cursorPosition, inputOffset);
        suggestionBox.css({ top: cursorOffset.top + lineHeight, left: cursorOffset.left });
    }

    function calculateCursorPosition(input, cursorPos, inputOffset) {
        var text = input.val().substring(0, cursorPos);
        var span = $('<span></span>').text(text).css({
            position: 'absolute',
            whiteSpace: 'pre-wrap',
            visibility: 'hidden',
            font: input.css('font'),
            lineHeight: input.css('line-height'),
            padding: input.css('padding')
        }).appendTo('body');
        var position = span.offset();
        span.remove();
        return { top: position.top, left: inputOffset.left + span.width() };
    }

    // Detect typing in the category tag
    $('#wpTextbox1').on('input', function () {
        var cursorPos = this.selectionStart;
        var text = $(this).val().substring(0, cursorPos);
        var match = text.match(/\[\[Category:([^\]]*)$/);
        $('.category-suggestions').remove();  // Remove existing suggestions
        if (match) {
            var partial = match[1].toLowerCase();
            var suggestions = categoryList.filter(function (cat) {
                return cat.toLowerCase().startsWith(partial);
            }).slice(0, 10);  // Limit to 10 suggestions
            if (suggestions.length > 0) {
                showSuggestions($(this), suggestions, cursorPos);
            }
        }
    });

    // Remove suggestions when clicking outside
    $(document).on('mousedown', function (e) {
        if (!$(e.target).closest('.category-suggestions').length) {
            $('.category-suggestions').remove();
        }
    });
});