MediaWiki:Common.js: Difference between revisions

Revision as of 12:49, 18 May 2025

/* Any JavaScript here will be loaded for all users on every page load. */


/* === Viewport Meta Tag Injection for Mobile Responsiveness - START === */
$(document).ready(function() {
    if ($('meta[name="viewport"]').length === 0) {
        $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
        console.log('Viewport meta tag added dynamically');
    }
});
/* === Viewport Meta Tag Injection for Mobile Responsiveness - END === */


$(document).ready(function() {
    if (mw.config.get('wgNamespaceNumber') === 120) {
        var warningHtml = '<div class="template-td" style="background-color: #ffcc00; color: black; padding: 10px; border-radius: 5px; font-weight: bold; text-align: center; margin-bottom:10px;">⚠ This is a draft article created for review. It is not yet published in the main space. Once approved, it will be moved to the main site and become publicly visible. ⚠</div>';
        
        // Insert after the subtitle, which is below the title and action tabs
        $('#mw-content-subtitle').after(warningHtml);
    }
});



$(document).ready(function() {
    var footerDisclaimer = $('<div style="text-align:center; font-size:12px; padding:10px; background:#f9f9f9; border-top:1px solid #ccc;">This website is not affiliated with Wikipedia or the Wikimedia Foundation. Content is independently published.</div>');
    $('#footer').append(footerDisclaimer);
});



$(document).ready(function () {
    if (mw.config.get("wgNamespaceNumber") === 0) { // Main/article pages only
        var title = $('#firstHeading');
        var badgeUrl = 'https://globalwiki.org/images/2/22/Verified.png';

        $('<img>', {
            src: badgeUrl,
            alt: 'Verified',
            style: 'margin-left: 10px; height: 20px; vertical-align: middle;'
        }).appendTo(title);
    }
});


$(document).ready(function () {
    if (mw.config.get('wgPageName') === 'Prasad') {

        // Create a container for custom header and title
        var headerContainer = $('<div class="custom-header-container" style="width: 100%; display: block; margin-bottom: 15px;"></div>');

        // Create header box with button
        var customHeader = $('<div class="custom-header" style="background: #e0f7fa; padding: 10px; text-align: center;">' +
            '<h2 style="margin: 5px 0;">🌟 Featured Profile</h2>' +
            '<p style="margin: 5px 0;">This is the official profile of Prasad Khanna.</p>' +
            '<button onclick="alert(\'Header button clicked!\')" style="margin-top: 10px; padding: 8px 16px; font-size: 14px; background-color: #0288d1; color: white; border: none; border-radius: 4px; cursor: pointer;">Know More</button>' +
        '</div>');

        // Move the page title and wrap everything
        var $title = $('#firstHeading');
        $title.before(headerContainer);
        headerContainer.append(customHeader);
        headerContainer.append($title);

        // Create footer box with button
        var customFooter = $('<div class="custom-footer" style="background: #f1f8e9; padding: 10px; text-align: center; margin-top: 20px;">' +
            '<h3 style="margin: 5px 0;">📌 More About Prasad</h3>' +
            '<p style="margin: 5px 0;">Scroll through his achievements, contributions, and recognitions below.</p>' +
            '<button onclick="alert(\'Footer button clicked!\')" style="margin-top: 10px; padding: 8px 16px; font-size: 14px; background-color: #689f38; color: white; border: none; border-radius: 4px; cursor: pointer;">Contact</button>' +
        '</div>');

        // Insert the footer
        customFooter.insertAfter('#mw-content-text');
    }
});





/* === Sticky Footer with WhatsApp CTA button on Prasad page - START === */
$(document).ready(function () {
    var pageName = mw.config.get('wgPageName');
    console.log('Common.js loaded on page:', pageName);

    if (pageName === 'Prasad') {
        console.log('On Prasad page - adding sticky footer');

        // Responsive CSS for footer and button
        var responsiveCSS = `
            <style>
                #custom-sticky-footer {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background: #f1f8e9;
                    color: white;
                    text-align: center;
                    padding: 20px 0;
                    z-index: 99999;
                    box-shadow: 0 -2px 5px rgba(0,0,0,0.15);
                    box-sizing: border-box;
                }
                #sticky-footer-button {
                    padding: 15px 40px; /* half size padding on desktop */
                    font-size: 20px;    /* half font size desktop */
                    background: #044b4f;
                    color: white;
                    border: 3px solid #30a0a2;
                    border-radius: 8px;
                    font-weight: bold;
                    cursor: pointer;
                    max-width: 90%;
                    width: 350px;      /* half width desktop */
                    box-sizing: border-box;
                    transition: box-shadow 0.3s ease-in-out;
                }
                #sticky-footer-button:hover {
                    box-shadow: 0 0 12px #30a0a2;
                }
                /* Mobile styles */
                @media (max-width: 600px) {
                    #sticky-footer-button {
                        padding: 30px 80px !important; /* original larger padding */
                        font-size: 40px !important;    /* original font size */
                        width: 90% !important;         /* full width on mobile */
                        max-width: none !important;
                    }
                    #custom-sticky-footer {
                        padding: 15px 0;
                    }
                }
            </style>
        `;
        $('head').append(responsiveCSS);

        // Create sticky footer HTML without inline styles (styles are in CSS above)
        var stickyFooter = $(
            '<div id="custom-sticky-footer">' +
                '<button id="sticky-footer-button">Publish My Profile</button>' +
            '</div>'
        );

        // Append footer and add bottom padding to body to avoid overlap
        $('body').append(stickyFooter);
        $('body').css('padding-bottom', '120px'); 

        // Button click event opens WhatsApp chat in new tab
        $('#sticky-footer-button').click(function () {
            window.open('https://api.whatsapp.com/send?phone=918464032709&text=Hi,%20I%20checked%20the%20sample%20profile%20and%20would%20like%20to%20publish%20my%20profile.', '_blank');
        });

        // Show footer always on scroll (both up and down)
        var footer = $('#custom-sticky-footer');
        $(window).on('scroll', function () {
            footer.show();
        });
    }
});
/* === Sticky Footer with WhatsApp CTA button on Prasad page - END === */












$(document).ready(function () {
    if (mw.config.get('wgPageName') === 'Prasad') {
        // Hide the Table of Contents (usually has id="toc")
        $('#toc').hide();
        
        // Optional: if your skin uses a different TOC class or id, adjust the selector
        // Example for Vector skin: $('.mw-parser-output .toc').hide();
    }
});