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.4 (MediaWiki Hardened Loader) */
(function () {
    if (window.__lorekeeperWidgetLoaded) return;
    window.__lorekeeperWidgetLoaded = true;

    var APP_ORIGIN = 'https://npc-forge--npc-forge-qh4gc.asia-southeast1.hosted.app';
    var APP_WIDGET_URL = APP_ORIGIN + '/widget';
    var MOBILE_BREAKPOINT = 768;
    var CONTAINER_ID = 'lorekeeper-widget-container';
    var IFRAME_ID = 'lorekeeper-widget-frame';

    function isMobileViewport() {
        return window.innerWidth < MOBILE_BREAKPOINT;
    }

    function getUsername() {
        try {
            return (mw && mw.config && mw.config.get('wgUserName')) || '';
        } catch (err) {
            return '';
        }
    }

    function buildIframeUrl() {
        var params = [];
        var username = getUsername();

        if (username) {
            params.push('user=' + encodeURIComponent(username));
        } else {
            params.push('guest=' + encodeURIComponent('Traveler'));
        }

        if (isMobileViewport()) {
            params.push('isMobile=true');
        }

        params.push('parentOrigin=' + encodeURIComponent(window.location.origin));

        return APP_WIDGET_URL + '?' + params.join('&');
    }

    function setCollapsedSize(container) {
        if (isMobileViewport()) {
            container.style.width = '80px';
            container.style.height = '80px';
        } else {
            container.style.width = '300px';
            container.style.height = '120px';
        }
    }

    function ensureContainer() {
        var existing = document.getElementById(CONTAINER_ID);
        if (existing) return existing;

        var container = document.createElement('div');
        container.id = CONTAINER_ID;
        container.style.position = 'fixed';
        container.style.bottom = '0';
        container.style.right = '0';
        container.style.zIndex = '99999';
        container.style.pointerEvents = 'none';
        container.style.overflow = 'hidden';
        container.style.background = 'transparent';
        container.style.transition = 'width 0.3s ease, height 0.3s ease';
        setCollapsedSize(container);

        return container;
    }

    function ensureIframe() {
        var existing = document.getElementById(IFRAME_ID);
        if (existing) return existing;

        var iframe = document.createElement('iframe');
        iframe.id = IFRAME_ID;
        iframe.src = buildIframeUrl();
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = 'none';
        iframe.style.background = 'transparent';
        iframe.style.pointerEvents = 'auto';
        iframe.setAttribute('allow', 'clipboard-write');
        iframe.setAttribute('loading', 'lazy');
        iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');

        return iframe;
    }

    function mountWidget() {
        if (!document.body) return false;

        var container = ensureContainer();
        var iframe = ensureIframe();

        if (!container.parentNode) {
            container.appendChild(iframe);
            document.body.appendChild(container);
        } else if (!iframe.parentNode) {
            container.appendChild(iframe);
        }

        return true;
    }

    function applyResize(container, width, height) {
        if (!container) return;

        if (typeof width === 'number') {
            container.style.width = width + 'px';
        } else if (typeof width === 'string' && width) {
            container.style.width = width;
        }

        if (typeof height === 'number') {
            container.style.height = height + 'px';
        } else if (typeof height === 'string' && height) {
            container.style.height = height;
        }
    }

    function handleMessage(event) {
        if (event.origin !== APP_ORIGIN) return;
        if (!event.data || event.data.type !== 'lorekeeper-resize') return;

        var container = document.getElementById(CONTAINER_ID);
        if (!container) return;

        applyResize(container, event.data.width, event.data.height);
    }

    function handleWindowResize() {
        var container = document.getElementById(CONTAINER_ID);
        var iframe = document.getElementById(IFRAME_ID);
        if (!container || !iframe) return;

        var wasMobile = iframe.getAttribute('data-is-mobile') === 'true';
        var nowMobile = isMobileViewport();

        if (wasMobile !== nowMobile) {
            iframe.setAttribute('data-is-mobile', nowMobile ? 'true' : 'false');
            iframe.src = buildIframeUrl();
            setCollapsedSize(container);
            return;
        }

        if (
            container.style.width === '80px' ||
            container.style.width === '300px' ||
            container.style.width === '100vw'
        ) {
            setCollapsedSize(container);
        }
    }

    function init() {
        if (!mountWidget()) {
            window.setTimeout(init, 50);
            return;
        }

        var iframe = document.getElementById(IFRAME_ID);
        if (iframe) {
            iframe.setAttribute('data-is-mobile', isMobileViewport() ? 'true' : 'false');
        }

        window.addEventListener('message', handleMessage, false);
        window.addEventListener('resize', handleWindowResize, false);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init, { once: true });
    } else {
        init();
    }
})();