MediaWiki:Common.js: Difference between revisions

Revision as of 10:59, 21 February 2026

$(document).ready(function() {
    // ===========================================
    // 1. Back to Top Button - FIXED VERSION
    // ===========================================
    
    // Remove any existing back-to-top buttons first
    $('.back-to-top-fixed').remove();
    
    // Create the button with explicit inline styles
    var topButtonHTML = `
        <div class="back-to-top-fixed" id="back-to-top-btn" style="
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
            display: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        ">
            <a href="#" style="
                background: linear-gradient(135deg, #FF6A00, #D93800);
                color: white;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 16px;
                text-decoration: none;
                box-shadow: 0 4px 15px rgba(0,0,0,0.3);
                border: 3px solid white;
                transition: all 0.3s ease;
                cursor: pointer;
            ">↑ TOP</a>
        </div>
    `;
    
    // Append to body
    $('body').append(topButtonHTML);
    
    // Debug: Check if button was added
    console.log('Back to top button added:', $('#back-to-top-btn').length);
    
    // ===========================================
    // 2. Alternative Button (if first one fails)
    // ===========================================
    setTimeout(function() {
        if ($('#back-to-top-btn').length === 0) {
            console.log('First button failed, adding alternative...');
            $('body').append('<div style="position:fixed;bottom:30px;right:30px;z-index:99999;background:red;color:white;padding:10px;" id="emergency-top">TOP</div>');
        }
    }, 1000);
    
    // ===========================================
    // 3. Scroll Handler for Button Visibility
    // ===========================================
    var lastScrollTop = 0;
    var scrollTimeout;
    
    $(window).scroll(function() {
        var st = $(this).scrollTop();
        
        // Clear previous timeout
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        
        scrollTimeout = setTimeout(function() {
            // Show/hide based on scroll position
            if (st > 300) {
                $('#back-to-top-btn').css({
                    'display': 'block',
                    'opacity': '1',
                    'visibility': 'visible'
                }).fadeIn(300);
            } else {
                $('#back-to-top-btn').fadeOut(300, function() {
                    $(this).css({
                        'display': 'none',
                        'opacity': '0',
                        'visibility': 'hidden'
                    });
                });
            }
            
            // Hide on scroll down (optional)
            if ($(window).width() > 768) {
                if (st > lastScrollTop && st > 500) {
                    $('#back-to-top-btn').css('right', '-100px');
                } else {
                    $('#back-to-top-btn').css('right', '30px');
                }
            }
            
            lastScrollTop = st;
        }, 50);
    });
    
    // ===========================================
    // 4. Click Handler
    // ===========================================
    $(document).on('click', '#back-to-top-btn a, #emergency-top', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        }, 600, 'swing');
        
        // Button feedback
        $(this).css('transform', 'scale(0.9)');
        setTimeout(() => {
            $(this).css('transform', 'scale(1)');
        }, 200);
    });
    
    // ===========================================
    // 5. Hover Effects
    // ===========================================
    $(document).on('mouseenter', '#back-to-top-btn a', function() {
        $(this).css({
            'background': 'linear-gradient(135deg, #FF7A20, #F4B400)',
            'transform': 'translateY(-5px) scale(1.1)',
            'box-shadow': '0 6px 20px rgba(0,0,0,0.4)'
        });
    }).on('mouseleave', '#back-to-top-btn a', function() {
        $(this).css({
            'background': 'linear-gradient(135deg, #FF6A00, #D93800)',
            'transform': 'translateY(0) scale(1)',
            'box-shadow': '0 4px 15px rgba(0,0,0,0.3)'
        });
    });
    
    // ===========================================
    // 6. Responsive Adjustments
    // ===========================================
    $(window).resize(function() {
        if ($(window).width() <= 768) {
            $('#back-to-top-btn').css({
                'bottom': '20px',
                'right': '20px'
            });
            $('#back-to-top-btn a').css({
                'width': '50px',
                'height': '50px',
                'font-size': '14px'
            });
        } else {
            $('#back-to-top-btn').css({
                'bottom': '30px',
                'right': '30px'
            });
            $('#back-to-top-btn a').css({
                'width': '60px',
                'height': '60px',
                'font-size': '16px'
            });
        }
    }).resize(); // Trigger on load
    
    // ===========================================
    // 7. Check if button is visible on page load
    // ===========================================
    setTimeout(function() {
        var btn = $('#back-to-top-btn');
        console.log('Button exists:', btn.length > 0);
        console.log('Button display:', btn.css('display'));
        console.log('Button visibility:', btn.css('visibility'));
        console.log('Button opacity:', btn.css('opacity'));
        console.log('Button position:', btn.offset());
        
        // Force show for testing (remove after confirming it works)
        // btn.css({'display': 'block', 'opacity': '1', 'visibility': 'visible'});
    }, 2000);
    
    // ===========================================
    // 8. Alternative: Add to existing menu
    // ===========================================
    // Add to floating menu as alternative
    setTimeout(function() {
        if ($('.floating-menu-items').length && $('#back-to-top-btn').css('display') === 'none') {
            $('.floating-menu-items').append(
                '<a href="#" id="menu-back-to-top" style="border-top: 1px solid #eee; margin-top: 10px;">⬆️ Back to Top</a>'
            );
            
            $('#menu-back-to-top').click(function(e) {
                e.preventDefault();
                $('html, body').animate({scrollTop: 0}, 600);
            });
        }
    }, 1000);
});