User:Jono Bean/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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Lorekeeper Widget Loader - v1.1.3 (Hardened Responsive Iframe) */
(function() {
    var username = mw.config.get('wgUserName');
    var isMobileParent = window.innerWidth < 768; // Measure the true Wiki window size
    
    // Uses the correct Firebase Hosted App URL
    var iframeUrl = 'https://npc-forge--npc-forge-qh4gc.asia-southeast1.hosted.app/widget';
    
    var params = [];
    if (username) {
        params.push('user=' + encodeURIComponent(username));
    } else {
        params.push('guest=Traveler');
    }
    
    // Tell the iframe if the user is ACTUALLY on mobile
    if (isMobileParent) {
        params.push('isMobile=true');
    }
    
    if (params.length > 0) {
        iframeUrl += '?' + params.join('&');
    }

    // Create a container that doesn't block the Wiki
    var widgetContainer = document.createElement('div');
    widgetContainer.id = 'lorekeeper-widget-container';
    widgetContainer.style.cssText = 'position:fixed; bottom:0; right:0; z-index:99999; pointer-events:none; transition: width 0.3s ease, height 0.3s ease;';
    widgetContainer.style.width = isMobileParent ? '80px' : '300px'; 
    widgetContainer.style.height = isMobileParent ? '80px' : '120px';

    var iframe = document.createElement('iframe');
    iframe.src = iframeUrl;
    iframe.style.cssText = 'width:100%; height:100%; border:none; background:transparent; pointer-events:auto;';
    iframe.setAttribute('allow', 'clipboard-write'); // For links/sharing later

    widgetContainer.appendChild(iframe);
    document.body.appendChild(widgetContainer);

    // Listen for the widget telling the Wiki to "Grow" and "Shrink"
    window.addEventListener('message', function(event) {
        // Enforce secure origin check for the correct App Hosting domain
        if (event.origin !== 'https://npc-forge--npc-forge-qh4gc.asia-southeast1.hosted.app') return;
        
        if (event.data.type === 'lorekeeper-resize') {
            var w = event.data.width;
            var h = event.data.height;
            // Handle both pixel numbers (desktop) and string values like "100vw" (mobile)
            widgetContainer.style.width = (typeof w === 'number') ? w + 'px' : w;
            widgetContainer.style.height = (typeof h === 'number') ? h + 'px' : h;
        }
    });

    // Optional: Resync if they resize the window wildly (desktop to mobile mode live)
    window.addEventListener('resize', function() {
        var newIsMobile = window.innerWidth < 768;
        if (newIsMobile !== isMobileParent) {
            isMobileParent = newIsMobile;
            // You could reload the iframe here, but keeping it simple is usually safest.
        }
    });
})();