User:Monster Domosed/common.js: Difference between revisions

Remove HQ/LQ model switching; keep preview/actual model toggle (with Domosed MCP)
Optimize model viewer: cache file URLs, debounce scan, remove dead code, add error handling (with Domosed MCP)
Line 1: Line 1:
(function () {
(function () {
     'use strict';
     'use strict';
    const urlCache = new Map();


     function getSize(element) {
     function getSize(element) {
Line 8: Line 10:


     function getFileUrl(fileName) {
     function getFileUrl(fileName) {
        if (urlCache.has(fileName)) {
            return urlCache.get(fileName);
        }
         const apiUrl =
         const apiUrl =
             mw.config.get('wgScriptPath') +
             mw.config.get('wgScriptPath') +
Line 16: Line 22:
             '&format=json';
             '&format=json';


         return fetch(apiUrl)
         const promise = fetch(apiUrl)
             .then(function (response) {
             .then(function (response) {
                if (!response.ok) {
                    throw new Error('API request failed');
                }
                 return response.json();
                 return response.json();
             })
             })
             .then(function (data) {
             .then(function (data) {
                 const page = Object.values(data.query.pages)[0];
                 const page = Object.values(data.query.pages)[0];
                return page && page.imageinfo ? page.imageinfo[0].url : null;
            })
            .catch(function () {
                return null;
            });


                if (!page.imageinfo) {
        urlCache.set(fileName, promise);
                    return null;
        return promise;
                }
 
                return page.imageinfo[0].url;
            });
     }
     }


Line 49: Line 59:
                 const container = document.createElement('div');
                 const container = document.createElement('div');
                 container.className = 'model-viewer-container';
                 container.className = 'model-viewer-container';
                 container.style.width = size + 'px';
                 container.style.width = size + 'px';
                 container.style.height = size + 'px';
                 container.style.height = size + 'px';


                 const viewer = document.createElement('model-viewer');
                 const viewer = document.createElement('model-viewer');
                 viewer.src = url;
                 viewer.src = url;
                 viewer.setAttribute('camera-controls', '');
                 viewer.setAttribute('camera-controls', '');
Line 60: Line 68:


                 container.appendChild(viewer);
                 container.appendChild(viewer);
                 preview.replaceWith(container);
                 preview.replaceWith(container);
             });
             });
    }
    function syncWrapperSize(viewer) {
        const wrapper = viewer.closest('.model-placeholder');
        if (!wrapper) {
            return;
        }
        const resizeObserver = new ResizeObserver(function () {
            wrapper.style.width = viewer.offsetWidth + 'px';
            wrapper.style.height = viewer.offsetHeight + 'px';
        });
        resizeObserver.observe(viewer);
     }
     }


Line 88: Line 80:


         const button = document.createElement('button');
         const button = document.createElement('button');
         button.className = 'model-load-button';
         button.className = 'model-load-button';
         button.type = 'button';
         button.type = 'button';
         button.addEventListener('click', function () {
         button.addEventListener('click', function () {
             loadModel(preview);
             loadModel(preview);
Line 103: Line 93:
             .querySelectorAll('.model-placeholder')
             .querySelectorAll('.model-placeholder')
             .forEach(initPreview);
             .forEach(initPreview);
    }
    let scanTimer = null;
    function debouncedScan() {
        clearTimeout(scanTimer);
        scanTimer = setTimeout(scan, 100);
     }
     }


     scan();
     scan();


     const observer = new MutationObserver(function () {
     const observer = new MutationObserver(debouncedScan);
        scan();
    });
 
     observer.observe(document.body, {
     observer.observe(document.body, {
         childList: true,
         childList: true,