Loading...

Preloading the cool stuff... be right there!

Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.js

MediaWiki interface page
Revision as of 21:18, 6 February 2025 by Idkman (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* 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).ready(function() {
    var categories = mw.config.get('wgCategories');

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

    var defaultBackgrounds = ['https://cemodding.wiki/images/1/1f/Wiki_page.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)];
    }

    // Handle background for categories and light mode
    function applyBackground() {
        var backgroundImageSet = false;
        const htmlElement = document.documentElement;
        const isLightMode = htmlElement.classList.contains("skin-citizen-light");

        // Apply light mode background if theme is light
        if (isLightMode) {
            $('body').css({
                'background': 'url("https://cemodding.wiki/images/c/c8/Lightgreybackground.png")',
                'background-repeat': 'no-repeat',
                'background-position': 'top center',
                'background-size': 'cover',
                'background-attachment': 'fixed'
            });
        } else {
            // Apply category backgrounds if not in light mode
            categories.forEach(function(category) {
                if (categoryBackgrounds[category]) {
                    var randomImage = getRandomBackground(categoryBackgrounds[category]);
                    $('body').css({
                        'background': `linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), 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.1), rgba(0, 0, 0, 0.1)), url("${randomDefault}")`,
                    'background-repeat': 'no-repeat',
                    'background-position': 'top center',
                    'background-size': 'cover',
                    'background-attachment': 'fixed'
                });
            }
        }
    }

    // Run background application on page load
    applyBackground();

    // Observe class changes on <html> for theme switching without reloading
    const observer = new MutationObserver(() => {
        applyBackground();
    });

    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
});







$(function () {
    var categoryList = [];

    // Fetch categories from the API
    $.ajax({
        url: mw.util.wikiScript('api'),
        data: {
            action: 'query',
            list: 'allcategories',
            aclimit: '500',
            format: 'json'
        },
        dataType: 'json',
        success: function (data) {
            categoryList = data.query.allcategories.map(function (cat) {
                return cat['*'];
            });
        }
    });

    function createSuggestionBox(input, suggestions, cursorPosition) {
        $('.category-suggestions').remove(); // Clear old suggestions

        var suggestionBox = $('<ul class="category-suggestions"></ul>').css({
            position: 'absolute',
            zIndex: 1000,
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            color: 'white',
            border: '1px solid #ccc',
            padding: '0',
            listStyleType: 'none',
            margin: '0',
            maxHeight: '200px',
            overflowY: 'auto',
            cursor: 'pointer'
        });

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

        $('body').append(suggestionBox);
        positionSuggestionBox(input, cursorPosition, suggestionBox);
    }

    function positionSuggestionBox(input, cursorPos, suggestionBox) {
        var text = input.val().substring(0, cursorPos);
        var textarea = input[0];
        var div = $('<div></div>').css({
            position: 'absolute',
            whiteSpace: 'pre-wrap',
            wordWrap: 'break-word',
            visibility: 'hidden',
            font: input.css('font'),
            padding: input.css('padding'),
            width: input.width(),
            lineHeight: input.css('line-height')
        }).appendTo('body');
        
        // Simulate the text up to the cursor
        var beforeCursorText = text.replace(/ /g, '\u00a0');  // Non-breaking spaces for correct width
        div.text(beforeCursorText);
        var span = $('<span>|</span>').appendTo(div);  // Add a cursor marker
        var cursorOffset = span.offset();

        // Adjust position to match textarea
        var inputOffset = input.offset();
        suggestionBox.css({
            top: inputOffset.top + (cursorOffset.top - div.offset().top) + parseInt(input.css('padding-top'), 10),
            left: inputOffset.left + (cursorOffset.left - div.offset().left) + parseInt(input.css('padding-left'), 10)
        });

        div.remove();
    }

    $('#wpTextbox1').on('input', function () {
        var input = $(this);
        var cursorPos = this.selectionStart;
        var text = input.val().substring(0, cursorPos);
        var match = text.match(/\[\[Category:([^\]]*)$/);
        if (match) {
            var partial = match[1].toLowerCase();
            var matches = categoryList.filter(function (category) {
                return category.toLowerCase().startsWith(partial);
            }).slice(0, 10);  // Limit suggestions
            if (matches.length) {
                createSuggestionBox(input, matches, cursorPos);
            }
        } else {
            $('.category-suggestions').remove();
        }
    });

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

$(document).ready(function() {
    // Click event for the header or the arrow
    $('.mw-collapsible-header').click(function() {
        var parentDiv = $(this).closest('.mw-collapsible'); // Get the closest collapsible container
        var content = parentDiv.find('.mw-collapsible-content'); // Get the collapsible content
        var arrow = $(this).find('.mw-collapsible-arrow'); // Get the arrow inside the header

        // Toggle the collapse/expand state by adding/removing the "mw-collapsed" class
        parentDiv.toggleClass('mw-collapsed');
        
        // Toggle visibility of the content with a sliding animation
        content.stop(true, true).slideToggle(); // Stop any ongoing animation before toggling visibility

        // Toggle the arrow direction
        if (parentDiv.hasClass('mw-collapsed')) {
            arrow.html('&#x2193;'); 
            arrow.css('transform', 'rotate(0deg)'); // No rotation when collapsed
        } else {
            arrow.html('&#x2193;'); 
            arrow.css('transform', 'rotate(180deg)'); // Rotate 180 degrees when expanded
        }
    });

    // 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');
        var arrow = parentDiv.find('.mw-collapsible-header .mw-collapsible-arrow');
        
        if (!parentDiv.hasClass('mw-collapsed')) {
            content.show(); // Ensure content is visible
            arrow.html('&#x2191;'); 
            arrow.css('transform', 'rotate(90deg)'); 
        } else {
            arrow.html('&#x2193;'); 
            arrow.css('transform', 'rotate(0deg)'); 
        }
    });
});
Cookies help us deliver our services. By using our services, you agree to our use of cookies.