MediaWiki:Common.js: Difference between revisions

Latest revision as of 20:23, 13 April 2026

$(document).ready(function() {
    // 1. Define HTML for all elements
    var progressBarHTML = '<div id="scroll-progress"></div>';
    var topButtonHTML = '<div class="back-to-top-fixed" style="display:none;"><a href="#">↑ TOP</a></div>';
    var menuHTML = `
        <div class="floating-menu" id="floatingMenu">
            <div class="floating-menu-header" id="menuHeader">
                <span>📋 QUICK NAV</span>
                <span class="arrow">▼</span>
                <span class="drag-handle" style="margin-left: auto; font-size: 12px; opacity: 0.7; user-select: none;" title="Drag to move">⋮⋮</span>
            </div>
            <div class="floating-menu-items">
                <a href="/index.php/Main_Page">🏠 Main Page</a>
                <a href="/index.php/First_Steps">🚀 First Steps</a>
                <a href="/index.php/VIP">👑 VIP</a>
                <a href="/index.php/Enchant_Stones">💎 Enchant Stones</a>
                <a href="/index.php/Nyangvines">🐱 Nyangvines</a>
                <a href="/index.php/Custom_Systems">⚙️ Custom Systems</a>
                <a href="/index.php/Monthly_Kachua">📅 Monthly Kachua</a>
                <a href="/index.php/Troubleshooting">🔧 Troubleshooting</a>
                <a href="/index.php/Card_Trader_and_Kachua_Tokens">🃏 Card and Tokens</a>
                <a href="/index.php/Equipment_Enhancement">🛡️ EQ Enhancement</a>
            </div>
        </div>
        <div class="floating-menu-toggle" id="menuToggle">☰</div>
    `;

    $('body').append(progressBarHTML + topButtonHTML + menuHTML);

    var lastScrollTop = 0;
    
    // Store position
    function saveMenuPosition(x, y) {
        if (typeof(Storage) !== "undefined") {
            localStorage.setItem('quickNavX', x);
            localStorage.setItem('quickNavY', y);
        }
    }
    
    function loadMenuPosition() {
        if (typeof(Storage) !== "undefined") {
            var savedX = localStorage.getItem('quickNavX');
            var savedY = localStorage.getItem('quickNavY');
            
            if (savedX !== null && savedY !== null) {
                $('#floatingMenu').css({
                    transform: 'translate3d(' + savedX + 'px, ' + savedY + 'px, 0)',
                    right: 'auto',
                    left: '0',
                    top: '0'
                });
                return { x: parseFloat(savedX), y: parseFloat(savedY) };
            }
        }
        return null;
    }
    
    function setDefaultPosition() {
        var $menu = $('#floatingMenu');
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var menuWidth = $menu.outerWidth();
        var menuHeight = $menu.outerHeight();
        
        // Default: right side with 20px margin, vertically centered
        var defaultX = windowWidth - menuWidth - 20;
        var defaultY = (windowHeight / 2) - (menuHeight / 2);
        
        // Clamp values
        defaultX = Math.max(0, Math.min(defaultX, windowWidth - menuWidth));
        defaultY = Math.max(0, Math.min(defaultY, windowHeight - menuHeight));
        
        $menu.css({
            transform: 'translate3d(' + defaultX + 'px, ' + defaultY + 'px, 0)',
            right: 'auto',
            left: '0',
            top: '0'
        });
        
        saveMenuPosition(defaultX, defaultY);
        return { x: defaultX, y: defaultY };
    }
    
    // FAST DRAG with correct viewport positioning
    var $menu = $('#floatingMenu');
    var $dragHandle = $('.drag-handle');
    var isDragging = false;
    var currentX = 0, currentY = 0;
    var dragOffsetX = 0, dragOffsetY = 0;
    
    // Get current transform values
    function getCurrentPosition() {
        var transform = $menu.css('transform');
        if (transform === 'none') {
            return { x: 0, y: 0 };
        }
        var matrix = transform.match(/matrix.*\((.+)\)/);
        if (matrix) {
            var values = matrix[1].split(', ');
            if (values.length === 6) {
                return { x: parseFloat(values[4]), y: parseFloat(values[5]) };
            } else if (values.length === 16) {
                return { x: parseFloat(values[12]), y: parseFloat(values[13]) };
            }
        }
        return { x: 0, y: 0 };
    }
    
    // Set initial position
    var loadedPos = loadMenuPosition();
    if (loadedPos) {
        currentX = loadedPos.x;
        currentY = loadedPos.y;
    } else {
        var defaultPos = setDefaultPosition();
        currentX = defaultPos.x;
        currentY = defaultPos.y;
    }
    
    $dragHandle.on('mousedown', function(e) {
        e.preventDefault();
        e.stopPropagation();
        isDragging = true;
        
        // Get the menu's current viewport position
        var menuRect = $menu[0].getBoundingClientRect();
        var mouseX = e.clientX;
        var mouseY = e.clientY;
        
        // Calculate offset from mouse to menu's top-left corner (viewport-based)
        dragOffsetX = mouseX - menuRect.left;
        dragOffsetY = mouseY - menuRect.top;
        
        // Change cursor
        $dragHandle.css('cursor', 'grabbing');
        $menu.css('cursor', 'grabbing');
        $('body').css('user-select', 'none');
        
        return false;
    });
    
    var rafId = null;
    
    $(document).on('mousemove', function(e) {
        if (!isDragging) return;
        
        e.preventDefault();
        
        if (rafId) cancelAnimationFrame(rafId);
        
        rafId = requestAnimationFrame(function() {
            // Calculate new position based on mouse position minus the drag offset
            var newX = e.clientX - dragOffsetX;
            var newY = e.clientY - dragOffsetY;
            
            // Get boundaries (viewport-based)
            var maxX = $(window).width() - $menu.outerWidth();
            var maxY = $(window).height() - $menu.outerHeight();
            
            // Clamp to viewport boundaries
            newX = Math.min(Math.max(0, newX), maxX);
            newY = Math.min(Math.max(0, newY), maxY);
            
            // Apply transform
            $menu.css({
                transform: 'translate3d(' + newX + 'px, ' + newY + 'px, 0)'
            });
            
            currentX = newX;
            currentY = newY;
        });
    });
    
    $(document).on('mouseup', function() {
        if (isDragging) {
            if (rafId) cancelAnimationFrame(rafId);
            isDragging = false;
            $dragHandle.css('cursor', '');
            $menu.css('cursor', '');
            $('body').css('user-select', '');
            
            saveMenuPosition(currentX, currentY);
        }
    });
    
    // Reset button
    var resetButton = $('<span class="reset-pos" style="cursor: pointer; margin-left: 5px; font-size: 10px; opacity: 0.6;" title="Reset position">↺</span>');
    resetButton.on('click', function(e) {
        e.stopPropagation();
        var newPos = setDefaultPosition();
        currentX = newPos.x;
        currentY = newPos.y;
    });
    $('.floating-menu-header span:first-child').after(resetButton);

    $(window).scroll(function() {
        var st = $(this).scrollTop();
        
        // Progress Bar
        var docHeight = $(document).height() - $(window).height();
        var scrolled = (st / docHeight) * 100;
        $('#scroll-progress').css("width", scrolled + "%");

        // Top Button Fade
        if (st > 300) { $('.back-to-top-fixed').fadeIn(); } 
        else { $('.back-to-top-fixed').fadeOut(); }

        // Section Tracker
        var currentPath = window.location.pathname;
        $('.floating-menu-items a').each(function() {
            if (currentPath.includes($(this).attr('href'))) {
                $(this).addClass('reading-now');
            } else {
                $(this).removeClass('reading-now');
            }
        });
    });

    // Toggle Events
    $('#menuHeader').click(function(e) {
        if ($(e.target).hasClass('drag-handle') || $(e.target).hasClass('reset-pos')) {
            return;
        }
        $('#floatingMenu').toggleClass('collapsed');
    });
    $('#menuToggle').click(function() { $('#floatingMenu').toggleClass('mobile-visible'); });
    $('.back-to-top-fixed a').click(function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: 0}, 400);
    });
    
    // Handle window resize - keep menu within bounds
    $(window).on('resize', function() {
        var maxX = $(window).width() - $menu.outerWidth();
        var maxY = $(window).height() - $menu.outerHeight();
        
        var newX = Math.min(currentX, maxX);
        var newY = Math.min(currentY, maxY);
        newX = Math.max(0, newX);
        newY = Math.max(0, newY);
        
        if (newX !== currentX || newY !== currentY) {
            $menu.css({
                transform: 'translate3d(' + newX + 'px, ' + newY + 'px, 0)'
            });
            currentX = newX;
            currentY = newY;
            saveMenuPosition(currentX, currentY);
        }
    });
});

// Rest of your existing code (smooth scrolling, sticky header, collapsible, TOC)
$(document).ready(function() {
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = $(this.hash);
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 50
            }, 500);
        }
    });
});

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('#mw-head').addClass('sticky-header');
    } else {
        $('#mw-head').removeClass('sticky-header');
    }
});

jQuery(document).ready(function($) {
    console.log("Ragnawiki collapsible initializing...");
    
    if (typeof mw !== 'undefined' && mw.loader) {
        mw.loader.using('jquery.makeCollapsible', function() {
            $.fn.makeCollapsible = function() { return this; };
        });
    }
    
    $('.mw-collapsible-toggle').remove();
    $('.mw-made-collapsible').removeClass('mw-made-collapsible');
    
    setTimeout(function() {
        $('.mw-collapsible').each(function() {
            var $container = $(this);
            var $header = $container.find('.ragnawiki-card-header, .ragnawiki-nav-header').first();
            var $content = $container.find('.mw-collapsible-content').first();
            
            if ($header.length && $content.length) {
                $header.off('click.collapsible');
                $container.removeClass('expanded mw-collapsed');
                $content.hide();
                
                $header.on('click.collapsible', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    if ($container.hasClass('expanded')) {
                        $container.removeClass('expanded');
                        $content.slideUp(200);
                    } else {
                        $container.addClass('expanded');
                        $content.slideDown(200);
                    }
                    
                    return false;
                });
            }
        });
    }, 100);
});

$(document).ready(function() {
    var tocToggle = document.getElementById('togglelink');
    if (tocToggle && tocToggle.innerText !== 'show') {
        tocToggle.click();
    }
});