MediaWiki:Gadget-CustomButtons.js

$(document).ready(function() {
	/* Quote Template Buttons */
    $('.quote-buttons').each(function() {
        var $quoteBox = $(this).closest('.quoteBox');

        $(this).find('#showAllButton').click(function() {
            $quoteBox.find('.nihongo-english').css('display', 'inline');
            $quoteBox.find('.nihongo-japanese').css('display', 'inline');
            $quoteBox.find('.nihongo-bracket').css('display', 'inline');
            $quoteBox.find('.nihongo-romaji').remove(); // Remove any appended romaji spans
        });

        $(this).find('#showEnglishButton').click(function() {
            $quoteBox.find('.nihongo-english').css('display', 'inline');
            $quoteBox.find('.nihongo-japanese').css('display', 'none');
            $quoteBox.find('.nihongo-romaji').css('display', 'none');
            $quoteBox.find('.nihongo-bracket').css('display', 'none');
        });

        $(this).find('#showJapaneseButton').click(function() {
            $quoteBox.find('.nihongo-english').css('display', 'none');
            $quoteBox.find('.nihongo-japanese').css('display', 'inline');
            $quoteBox.find('.nihongo-romaji').css('display', 'none');
            $quoteBox.find('.nihongo-bracket').css('display', 'none');
        });

        $(this).find('#showRomajiButton').click(function() {
            $quoteBox.find('.nihongo-english').css('display', 'none');
            $quoteBox.find('.nihongo-bracket').css('display', 'none');

            $quoteBox.find('.nihongo-japanese').each(function() {
                var $japaneseElement = $(this);
                var romaji = $japaneseElement.data('content');

                if (romaji) {
                    if ($japaneseElement.next('.nihongo-romaji').length === 0) {
                        $japaneseElement.after('<span class="nihongo-romaji" style="display:inline; font-family:Meiryo">' + romaji + '</span>');
                    } else {
                        $japaneseElement.next('.nihongo-romaji').css('display', 'inline');
                    }
                    $japaneseElement.css('display', 'none');
                } else {
                    $japaneseElement.closest('.popup-wrapper').find('.nihongo-english').css('display', 'inline');
                    $japaneseElement.css('display', 'none');
                }
            });

            $quoteBox.find('.popup-box').css('display', 'none');
        });
    });
    
    /* VolDiffs Template Buttons */
    // Function to toggle images within a specific container
    function toggleImages(container, showImage1) {
        if (showImage1) {
            container.find('.volDiffImage1').css('display', 'block');
            container.find('.volDiffImage2').css('display', 'none');
        } else {
            container.find('.volDiffImage1').css('display', 'none');
            container.find('.volDiffImage2').css('display', 'block');
        }
    }

    // Function to toggle the part class for buttons
    function toggleButtonPartClass(container, tab1Selected) {
        var part = container.find('.volDiffButtons').data('part');
        if (tab1Selected) {
            container.find('.volDiffTab1').addClass(part);
            container.find('.volDiffTab2').removeClass(part);
        } else {
            container.find('.volDiffTab1').removeClass(part);
            container.find('.volDiffTab2').addClass(part);
        }
    }

    // Event listener for individual tab buttons
    $(document).on('click', '.volDiffTab1', function() {
        var container = $(this).closest('.volDiffBox');
        toggleImages(container, true);
        toggleButtonPartClass(container, true);
    });

    $(document).on('click', '.volDiffTab2', function() {
        var container = $(this).closest('.volDiffBox');
        toggleImages(container, false);
        toggleButtonPartClass(container, false);
    });

    // Event listener for global buttons
    $('.volDiffBtn1').click(function() {
        $('.volDiffBox').each(function() {
            toggleImages($(this), true);
            toggleButtonPartClass($(this), true);
        });
    });

    $('.volDiffBtn2').click(function() {
        $('.volDiffBox').each(function() {
            toggleImages($(this), false);
            toggleButtonPartClass($(this), false);
        });
    });
    
    // Function to toggle expand/collapse (default behavior)
    function toggleExpandCollapseDefault() {
        var $containerBody = $(this).closest('.volDiffContainer').find('.volDiffContainerBody');
        var isExpanded = $containerBody.css('max-height') === 'none';

        if (isExpanded) {
            $containerBody.css('max-height', '385px');
            $(this).text('Expand');
        } else {
            $containerBody.css('max-height', 'none');
            $(this).text('Collapse');
        }
    }

    // Function to toggle expand/collapse (special case for List_of_Volume_Differences)
    function toggleExpandCollapseVolumeDifferences() {
        var $containerContent = $(this).closest('.volDiffContainer').find('.volDiffContainerContent');
        var isExpanded = $containerContent.css('display') === 'none';

        if (isExpanded) {
            $containerContent.css('display', '');
            $(this).text('Collapse');
        } else {
            $containerContent.css('display', 'none');
            $(this).text('Expand');
        }
    }

    // Function to check if the content is overflowing
    function checkOverflow() {
        $('.volDiffContainer').each(function() {
            var $containerBody = $(this).find('.volDiffContainerBody');
            var $expandBtn = $(this).find('.volDiffExpandBtn');

            // Check if content is overflowing or if the page is "List_of_Volume_Differences"
            if ($containerBody[0].scrollHeight > $containerBody[0].clientHeight || mw.config.get('wgPageName') === 'List_of_Volume_Differences') {
                $expandBtn.show();
            } else {
                $expandBtn.hide();
            }
        });
    }

    // Function to initialize expand/collapse state for "List_of_Volume_Differences" page
    function initializeForVolumeDifferencesPage() {
        $('.volDiffContainer').each(function() {
            var $containerContent = $(this).find('.volDiffContainerContent');
            var $expandBtn = $(this).find('.volDiffExpandBtn');

            // Set display to none (collapsed) and show the expand button
            $containerContent.css('display', 'none');
            $expandBtn.text('Expand').show();
        });
    }

    // Attach click event to the expand/collapse button
    if (mw.config.get('wgPageName') === 'List_of_Volume_Differences') {
        $('.volDiffExpandBtn').click(toggleExpandCollapseVolumeDifferences);
        initializeForVolumeDifferencesPage();
    } else {
        $('.volDiffExpandBtn').click(toggleExpandCollapseDefault);
    }

    // Always check for overflow and attach events
    checkOverflow();
    $(window).resize(function() {
        checkOverflow();
    });
});