MediaWiki:Common.js: Difference between revisions

From Ragnafied Wiki
← Older editNewer edit →
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 1: Line 1:
$(document).ready(function() {
$(document).ready(function() {
     // ===========================================
     // 1. Define HTML for all elements
    // Remove any existing elements first
     var progressBarHTML = '<div id="scroll-progress"></div>';
     // ===========================================
     var topButtonHTML = '<div class="back-to-top-fixed" style="display:none;"><a href="#">↑ TOP</a></div>';
     $('.floating-menu, .floating-menu-toggle, .back-to-top-fixed').remove();
     var menuHTML = `
   
    // ===========================================
    // Add both elements at once
    // ===========================================
     var elementsHTML = `
        <!-- Quick Nav Menu -->
         <div class="floating-menu" id="floatingMenu">
         <div class="floating-menu" id="floatingMenu">
             <div class="floating-menu-header" id="menuHeader">
             <div class="floating-menu-header" id="menuHeader">
Line 28: Line 22:
             </div>
             </div>
         </div>
         </div>
       
        <!-- Mobile Menu Toggle -->
         <div class="floating-menu-toggle" id="menuToggle">☰</div>
         <div class="floating-menu-toggle" id="menuToggle">☰</div>
       
        <!-- Back to Top Button -->
        <div class="back-to-top-fixed" id="backToTop">
            <a href="#">↑ TOP</a>
        </div>
       
        <!-- Progress Bar -->
        <div id="scroll-progress"></div>
     `;
     `;
   
 
    // Append all elements at once
     $('body').append(progressBarHTML + topButtonHTML + menuHTML);
     $('body').append(elementsHTML);
 
   
    // ===========================================
    // Log to confirm elements were added
    // ===========================================
    console.log('Quick Nav added:', $('#floatingMenu').length);
    console.log('Back to Top added:', $('#backToTop').length);
    console.log('Progress Bar added:', $('#scroll-progress').length);
   
    // ===========================================
    // Scroll Handler
    // ===========================================
     var lastScrollTop = 0;
     var lastScrollTop = 0;
   
 
     $(window).scroll(function() {
     $(window).scroll(function() {
         var st = $(this).scrollTop();
         var st = $(this).scrollTop();
          
          
         // Progress Bar
         // A. Progress Bar
         var docHeight = $(document).height() - $(window).height();
         var docHeight = $(document).height() - $(window).height();
         var scrolled = (st / docHeight) * 100;
         var scrolled = (st / docHeight) * 100;
         $('#scroll-progress').css("width", scrolled + "%");
         $('#scroll-progress').css("width", scrolled + "%");
       
 
         // Back to Top Button
         // B. Top Button Fade
         if (st > 300) {  
         if (st > 300) { $('.back-to-top-fixed').fadeIn(); }
            $('#backToTop').fadeIn(300);  
         else { $('.back-to-top-fixed').fadeOut(); }
         } else {  
 
            $('#backToTop').fadeOut(300);  
         // C. Hide Menu on Scroll Down (Desktop Only)
        }
       
         // Hide Menu on Scroll Down (Desktop Only)
         if ($(window).width() > 768) {
         if ($(window).width() > 768) {
             if (st > lastScrollTop && st > 500) {
             if (st > lastScrollTop && st > 500) {
Line 79: Line 49:
             }
             }
         }
         }
       
         lastScrollTop = st;
         lastScrollTop = st;
    });
 
   
         // D. Section Tracker: Highlights the link if the URL matches current page
    // ===========================================
    // Toggle Events
    // ===========================================
    $('#menuHeader').click(function() {
        $('#floatingMenu').toggleClass('collapsed');
    });
   
    $('#menuToggle').click(function(e) {
        e.stopPropagation();
        $('#floatingMenu').toggleClass('mobile-visible');
       
        // Close menu when clicking outside
        $(document).one('click', function(e) {
            if (!$(e.target).closest('#floatingMenu, #menuToggle').length) {
                $('#floatingMenu').removeClass('mobile-visible');
            }
        });
    });
   
    // Close menu with Escape key
    $(document).keyup(function(e) {
        if (e.key === "Escape") {
            $('#floatingMenu').removeClass('mobile-visible');
        }
    });
   
    // ===========================================
    // Back to Top Click Handler
    // ===========================================
    $('#backToTop a').click(function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: 0}, 400);
       
         // Button feedback
        $(this).css('transform', 'scale(0.9)');
        setTimeout(() => {
            $(this).css('transform', 'scale(1)');
        }, 200);
    });
   
    // ===========================================
    // Section Tracker
    // ===========================================
    function updateActiveSection() {
         var currentPath = window.location.pathname;
         var currentPath = window.location.pathname;
         $('.floating-menu-items a').each(function() {
         $('.floating-menu-items a').each(function() {
             var href = $(this).attr('href');
             if (currentPath.includes($(this).attr('href'))) {
            if (currentPath.includes(href) || currentPath === href) {
                 $(this).addClass('reading-now');
                 $(this).addClass('reading-now');
             } else {
             } else {
Line 136: Line 60:
             }
             }
         });
         });
    }
   
    updateActiveSection();
   
    // ===========================================
    // Hover Effects
    // ===========================================
    $('#backToTop a').hover(
        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)'
            });
        },
        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)'
            });
        }
    );
   
    // ===========================================
    // Responsive Handler
    // ===========================================
    $(window).resize(function() {
        if ($(window).width() > 768) {
            $('#floatingMenu').removeClass('mobile-visible');
            $('#floatingMenu').css('right', '20px');
        } else {
            $('#floatingMenu').css('right', '');
        }
     });
     });
   
 
     // ===========================================
     // Toggle Events
     // Initialize states
     $('#menuHeader').click(function() { $('#floatingMenu').toggleClass('collapsed'); });
    // ===========================================
     $('#menuToggle').click(function() { $('#floatingMenu').toggleClass('mobile-visible'); });
    // Check if menu should start collapsed
    $('.back-to-top-fixed a').click(function(e) {
    if (localStorage.getItem('quickNavCollapsed') === 'true') {
        e.preventDefault();
        $('#floatingMenu').addClass('collapsed');
        $('html, body').animate({scrollTop: 0}, 400);
    }
   
    // Save collapse state
     $('#menuHeader').click(function() {
        localStorage.setItem('quickNavCollapsed', $('#floatingMenu').hasClass('collapsed'));
     });
     });
   
});
    // ===========================================
 
    // Smooth Scrolling for Anchor Links
// Add smooth scrolling to anchor links
    // ===========================================
$(document).ready(function() {
     $('a[href^="#"]').not('.no-smooth').on('click', function(e) {
     $('a[href^="#"]').on('click', function(e) {
         e.preventDefault();
         e.preventDefault();
         var target = $(this.hash);
         var target = $(this.hash);
         if (target.length) {
         if (target.length) {
             $('html, body').animate({
             $('html, body').animate({
                 scrollTop: target.offset().top - 60
                 scrollTop: target.offset().top - 50
             }, 500);
             }, 500);
         }
         }
     });
     });
      
});
     console.log('✅ All elements initialized successfully');
 
// Sticky header on scroll
$(window).scroll(function() {
     if ($(window).scrollTop() > 100) {
        $('#mw-head').addClass('sticky-header');
     } else {
        $('#mw-head').removeClass('sticky-header');
    }
});
});

Revision as of 11:01, 21 February 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>
            </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;

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

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

        // C. Hide Menu on Scroll Down (Desktop Only)
        if ($(window).width() > 768) {
            if (st > lastScrollTop && st > 500) {
                $('#floatingMenu').css('right', '-220px');
            } else {
                $('#floatingMenu').css('right', '20px');
            }
        }
        lastScrollTop = st;

        // D. Section Tracker: Highlights the link if the URL matches current page
        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() { $('#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);
    });
});

// Add smooth scrolling to anchor links
$(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);
        }
    });
});

// Sticky header on scroll
$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('#mw-head').addClass('sticky-header');
    } else {
        $('#mw-head').removeClass('sticky-header');
    }
});
Retrieved from "https://wiki.ragnafied.net/index.php?title=MediaWiki:Common.js&oldid=1383"