MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

$(function () {
    // Ensure required MediaWiki modules are loaded, including 'mediawiki.config'
    mw.loader.using(['mediawiki.util', 'mediawiki.config']).then(function () {
        console.log('[ReportAbuseLink] Initializing...');

        // --- Mobile Check ---
        // Get the current skin name from MediaWiki's configuration
        const currentSkin = mw.config.get('skin');

        // Check if the current skin is a known mobile skin (e.g., 'minerva', 'minervaneue')
        // You might need to adjust this list if your wiki uses a different custom mobile skin.
        if (currentSkin === 'minerva' || currentSkin === 'minervaneue') {
            console.log('[ReportAbuseLink] Mobile skin (' + currentSkin + ') detected. Button will not be added.');
            return; // Exit the function early if it's a mobile skin
        }
        // --- End Mobile Check ---

        console.log('[ReportAbuseLink] Desktop skin (' + currentSkin + ') detected. Proceeding to add button...');

        const pageTitle = 'Report_Animal_Abuse';
        const linkHref = mw.util.getUrl(pageTitle);
        const linkText = '🚨 Report Animal Abuse';

        // Check if the button already exists to avoid duplicates
        if (document.getElementById('report-abuse-button')) {
            console.log('[ReportAbuseLink] Button element already exists. Exiting.');
            return;
        }

        // Create a <style> element for hover effect
        console.log('[ReportAbuseLink] Creating styles...');
        const style = document.createElement('style');
        style.textContent = `
            #report-abuse-button a {
                /* Add initial transition for smoothness when hover ends */
                transition: all 0.2s ease-in-out;
            }
            #report-abuse-button a:hover {
                background-color: #ff0000 !important; /* Brighter red on hover */
                box-shadow: 0 0 12px rgba(255, 0, 0, 0.8); /* Red glow */
                transform: scale(1.05); /* Slightly enlarge */
                /* Transition is already defined above */
            }
        `;
        document.head.appendChild(style);

        // Create the button container and the link
        console.log('[ReportAbuseLink] Creating button element...');
        const container = document.createElement('div');
        container.id = 'report-abuse-button';
        container.innerHTML = `<a href="${linkHref}" style="
            display: inline-block;
            background-color: #b10000; /* Dark red */
            color: #fff; /* White text */
            font-weight: bold;
            font-size: 18px; /* Large font */
            padding: 10px 18px; /* Generous padding */
            border-radius: 8px; /* Rounded corners */
            text-decoration: none; /* No underline */
            position: fixed; /* Fixed position relative to viewport */
            top: 12px; /* Position from top */
            right: 12px; /* Position from right */
            z-index: 9999; /* Ensure it's on top */
            box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* Subtle shadow */
        ">${linkText}</a>`;

        // Append the button container to the body
        document.body.appendChild(container);
        console.log('[ReportAbuseLink] Button rendered with hover effect.');

    }).catch(function(e) {
         // Optional: Add error handling in case modules fail to load
         console.error('[ReportAbuseLink] Failed to load required MediaWiki modules:', e);
    });
});