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.

/* Any JavaScript here will be loaded for all users on every page load. */
function bpLoadStats() {
    var onlineEl = document.getElementById('bp-online');
    var updatedEl = document.getElementById('bp-updated');
    if (!onlineEl || !updatedEl) return;

    fetch('/api/roblox-stats')
        .then(function(r) { return r.json(); })
        .then(function(d) {
            if (d.playing !== undefined) {
                onlineEl.textContent = d.playing.toLocaleString('en-US');
            }
            if (d.updated) {
                updatedEl.textContent = d.updated;
            }
        })
        .catch(function() {});
}

if (document.getElementById('bp-online')) {
    bpLoadStats();
    setInterval(bpLoadStats, 60000);
}
(function() {
    var desc = '';
    if (mw.config.get('wgPageName') === 'Main_Page') {
        desc = 'Bridgerpedia — the fan-made wiki for Bridger Western, a Roblox game. Cards, Weapons, NPCs, Locations and more.';
    } else {
        var firstPara = document.querySelector('#mw-content-text p');
        if (firstPara) {
            desc = firstPara.textContent.trim().substring(0, 155);
        }
    }
    if (desc) {
        var meta = document.createElement('meta');
        meta.name = 'description';
        meta.content = desc;
        document.head.appendChild(meta);
    }
})();

/* NPC interaction access borders on Locations and NPCs. */
(function () {
    function initNpcAccess(content) {
        if (mw.config.get('wgPageName') !== 'Locations_and_NPCs') return;

        var galleries = content[0].querySelectorAll('.npc-gallery');
        if (!galleries.length || content[0].querySelector('.bp-access-legend')) return;

        galleries.forEach(function (gallery) {
            gallery.querySelectorAll('.gallerybox').forEach(function (card) {
                var marker = card.querySelector('.bp-npc-access');
                var link = card.querySelector('.gallerytext a[title]');
                if (!link || !marker) return;

                var access = ['outlaw', 'inlaw', 'vampire'].filter(function (name) {
                    return marker.classList.contains('bp-npc-access-' + name);
                });
                if (!access.length) return;

                card.classList.add('bp-access-card', 'bp-access-' + access.join('-'));
                card.setAttribute('data-access', access.join(', '));
                card.title = 'Available to: ' + access.map(function (name) {
                    return name.charAt(0).toUpperCase() + name.slice(1);
                }).join(', ');

                var thumb = card.querySelector('.thumb');
                if (thumb) {
                    var cubes = document.createElement('span');
                    cubes.className = 'bp-access-cubes';
                    var cube = document.createElement('i');
                    cube.className = 'bp-access-cube bp-access-cube-' + access.join('-');
                    cubes.appendChild(cube);
                    thumb.appendChild(cubes);
                }
            });
        });

        var legend = document.createElement('span');
        legend.className = 'bp-access-legend';
        legend.innerHTML =
            '<span><i class="bp-access-swatch bp-access-swatch-outlaw"></i>Outlaw</span>' +
            '<span><i class="bp-access-swatch bp-access-swatch-inlaw"></i>Inlaw</span>' +
            '<span><i class="bp-access-swatch bp-access-swatch-vampire"></i>Vampire</span>';
        var npcHeading = content[0].querySelector('#NPCs');
        var headingRow = npcHeading && npcHeading.closest('h2');
        if (headingRow) {
            headingRow.parentNode.insertBefore(legend, headingRow.nextSibling);
        } else {
            galleries[0].parentNode.insertBefore(legend, galleries[0]);
        }
    }

    mw.hook('wikipage.content').add(initNpcAccess);
})();

/* Interactive map: the image is a background, so zoom cannot resize the page. */
(function () {
    function initMap(root) {
        if (!root || root.dataset.bpMapReady) return;

        var viewport = root.querySelector('.bp-map-viewport');
        var scene = root.querySelector('.bp-map-scene');
        if (!viewport || !scene) return;

        root.dataset.bpMapReady = '1';
        var zoomed = false;

        function setZoom(isZoomed, x, y) {
            zoomed = isZoomed;
            if (zoomed) {
                scene.style.transformOrigin = x + '% ' + y + '%';
            }
            scene.style.setProperty('--bp-map-scale', zoomed ? '2.75' : '1');
            viewport.classList.toggle('is-zoomed', zoomed);
        }

        viewport.addEventListener('click', function (event) {
            if (event.target.closest('.bp-map-marker')) return;
            var rect = viewport.getBoundingClientRect();
            var x = Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100));
            var y = Math.max(0, Math.min(100, (event.clientY - rect.top) / rect.height * 100));
            setZoom(!zoomed, zoomed ? 50 : x, zoomed ? 50 : y);
        });

        viewport.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                setZoom(!zoomed, 50, 50);
            } else if (event.key === 'Escape') {
                setZoom(false, 50, 50);
            }
        });
    }

    mw.hook('wikipage.content').add(function (content) {
        initMap(content[0].querySelector('#bp-interactive-map'));
    });
})();