We are actively looking for staff to help us build the wiki. If you are interested please join our Discord server and apply.

MediaWiki:Common.js: Difference between revisions

From Moonbounce Wiki
Jump to navigation Jump to search
(Created page with "/** * Collapsible elements * * Add the "collapsible" class to an element and the child element with class "collapsible-content" * (or everything but the header row if a table) will be hidden when the element is collapsed. * * * Add the class "collapsed" to the element to make it start out collapsed. * * Add either "collapsetoggle-left" or "collapsetoggle-inline" to the element to choose the collapse * toggle alignment (defaults to right). * * Add an ID in the...")
 
mNo edit summary
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/**
$(document).ready(function() {
* Collapsible elements
    // Function to toggle the collapse
*
    function toggleSidebarCategory(category) {
* Add the "collapsible" class to an element and the child element with class "collapsible-content"
        $('#' + category + ' > .body').slideToggle();
* (or everything but the header row if a table) will be hidden when the element is collapsed.
        $('#' + category + ' > .head').toggleClass('collapsed');
*
    }
* * Add the class "collapsed" to the element to make it start out collapsed.
 
* * Add either "collapsetoggle-left" or "collapsetoggle-inline" to the element to choose the collapse
    // Add toggle link to each category header
*  toggle alignment (defaults to right).
    $('#mw-panel .portal > h3').each(function() {
* * Add an ID in the format of "collapsible-<x>" to the element to make any element with the class
        var category = $(this).parent().attr('id');
*  "collapsetoggle-custom" and a matching class in the format of "collapsible-<x>-toggle" control
        $(this).addClass('head').click(function() {
*  the collapsing instead of the standard button.
            toggleSidebarCategory(category);
*  If the custom toggle contains an element with the "jslink" class, only that will be clickable.
        });
*/
    });
( function() {
 
var $collapsibles = $wikipageContent.find( '.collapsible' );
    // Hide all categories by default
if ( !$collapsibles.length ) {
    $('#mw-panel .portal > .body').hide();
return;
    $('#mw-panel .portal > h3').addClass('collapsed');
}
});
 
var $toggleTemplate = $( '<span>' ).addClass( 'collapsetoggle' ).append(
document.addEventListener('DOMContentLoaded', function() {
'[', $( '<span>' ).addClass( 'jslink' ), ']'
    const icons = document.querySelectorAll('.masterlist-icon');
);
 
$collapsibles.each( function() {
    console.log('Custom script loaded');
var $collapsible = $( this );
    console.log('Icons found:', icons);
if ( $collapsible.data( 'made-collapsible' ) ) {
 
return true;
    icons.forEach(function(icon) {
}
        console.log('Icon:', icon);
    });
var $children = $collapsible.children();
 
var showText = $collapsible.data( 'expandtext' ) || i18n.showText;
    icons.forEach(function(icon) {
var hideText = $collapsible.data( 'collapsetext' ) || i18n.hideText;
        const itemId = icon.closest('.masterlist-item').dataset.id;
        console.log('Item ID:', itemId);
// If there is no content area, add it
        const isClicked = localStorage.getItem('icon-' + itemId) === 'true';
if ( !$collapsible.is( 'table' ) && !$children.filter( '.collapsible-content' ).length ) {
        if (isClicked) {
if ( $collapsible.is( 'tr' ) ) {
            icon.classList.add('clicked');
$children.addClass( 'collapsible-content' );
        }
} else {
    });
$collapsible.wrapInner( '<div class="collapsible-content">' );
 
$children = $collapsible.children();
    icons.forEach(function(icon) {
}
        icon.addEventListener('click', function(event) {
}
            event.preventDefault();
            const itemId = icon.closest('.masterlist-item').dataset.id;
var $toggle;
            console.log('Clicked Item ID:', itemId);
var id = $collapsible.attr( 'id' );
            icon.classList.toggle('clicked');
if ( id && id.match( /^collapsible-./ ) ) {
            localStorage.setItem('icon-' + itemId, icon.classList.contains('clicked'));
$toggle = $( $wikipageContent[0].getElementsByClassName( id + '-toggle' ) )
        });
.filter( '.collapsetoggle-custom' ).css( 'visibility', 'visible' );
    });
}
});
// Create and insert the toggle button if there is no custom one
if ( !$toggle || !$toggle.length ) {
var $toggleContainer;
if ( $collapsible.is( 'table' ) ) {
var $rows = $children.filter( 'thead' ).children();
if ( !$rows.length ) {
$rows = $children.filter( 'tbody' ).first().children();
if ( !$rows.length ) {
$rows = $children.filter( 'tr' );
}
}
$toggleContainer = $rows.first().children().last();
} else {
$toggleContainer = $children.first();
if ( $toggleContainer.hasClass( 'collapsible-content' ) ) {
$toggleContainer = $collapsible;
}
}
$toggle = $toggleTemplate.clone();
if (
$toggleContainer !== $collapsible && (
$collapsible.hasClass( 'collapsetoggle-inline' ) ||
$collapsible.hasClass( 'collapse-button-none' )
) ) {
$toggleContainer.append( $toggle );
} else {
$toggleContainer.prepend( $toggle );
}
}
var $toggleLink = $toggle.find( '.jslink' );
if ( !$toggleLink.length ) {
$toggleLink = $toggle;
}
$toggleLink.attr( 'tabindex', 0 ).text( hideText );
// Find max toggle size, and set its min-width to it
var hideWidth = $toggle.width();
$toggleLink.text( showText );
var showWidth = $toggle.width();
if ( hideWidth !== showWidth ) {
$toggle.css( 'min-width', hideWidth > showWidth ? hideWidth : showWidth );
}
// Set the text back to hide if it's not collapsed to begin with
if ( !$collapsible.hasClass( 'collapsed' ) ) {
$toggleLink.text( hideText );
}
$toggleLink.on( 'click keydown', function( e ) {
// Only trigger on enter press
if ( e.keyCode && e.keyCode !== 13 ) {
return;
}
// Don't toggle when clicking buttons or links inside the toggle
var $target = $( e.target );
if ( $target.is( 'button' ) || $target.is( 'a' ) ) {
return;
}
$collapsible.toggleClass( 'collapsed' );
if ( $collapsible.hasClass( 'collapsed' ) ) {
$toggleLink.text( showText );
} else {
$toggleLink.text( hideText );
}
// Stop table sorting activating when clicking the link
e.stopPropagation();
} );
$collapsible.data( 'made-collapsible', true );
} );
}() );

Latest revision as of 18:44, 25 June 2024

$(document).ready(function() {
    // Function to toggle the collapse
    function toggleSidebarCategory(category) {
        $('#' + category + ' > .body').slideToggle();
        $('#' + category + ' > .head').toggleClass('collapsed');
    }

    // Add toggle link to each category header
    $('#mw-panel .portal > h3').each(function() {
        var category = $(this).parent().attr('id');
        $(this).addClass('head').click(function() {
            toggleSidebarCategory(category);
        });
    });

    // Hide all categories by default
    $('#mw-panel .portal > .body').hide();
    $('#mw-panel .portal > h3').addClass('collapsed');
});

document.addEventListener('DOMContentLoaded', function() {
    const icons = document.querySelectorAll('.masterlist-icon');

    console.log('Custom script loaded');
    console.log('Icons found:', icons);

    icons.forEach(function(icon) {
        console.log('Icon:', icon);
    });

    icons.forEach(function(icon) {
        const itemId = icon.closest('.masterlist-item').dataset.id;
        console.log('Item ID:', itemId);
        const isClicked = localStorage.getItem('icon-' + itemId) === 'true';
        if (isClicked) {
            icon.classList.add('clicked');
        }
    });

    icons.forEach(function(icon) {
        icon.addEventListener('click', function(event) {
            event.preventDefault();
            const itemId = icon.closest('.masterlist-item').dataset.id;
            console.log('Clicked Item ID:', itemId);
            icon.classList.toggle('clicked');
            localStorage.setItem('icon-' + itemId, icon.classList.contains('clicked'));
        });
    });
});
Retrieved from "https://moonbounce.wiki/?title=MediaWiki:Common.js&oldid=2297"