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

Jump to navigation Jump to search
Browse history interactively
← Older editNewer edit →

Monster Domosed (talk | contribs)

2 user groups
4,611 edits
No edit summary
No edit summary
Line 29: Line 29:
         }
         }


         const match = wrapper.className.match(/\bmodel_size_(\d+)\b/);
         const match = wrapper.className.match(/model_size_(\d+)/);


         if (!match) {
         if (!match) {
Line 35: Line 35:
         }
         }


         const size = parseInt(match[1], 10);
         const size = match[1];


         viewer.style.width = size + 'px';
         viewer.style.width = size + 'px';
Line 42: Line 42:




     function switchQuality(viewer, buttonIcon, lqUrl, hqUrl) {
     function addButton(viewer) {
        const currentSrc = viewer.src;
 
        const targetSrc = currentSrc === lqUrl ? hqUrl : lqUrl;
 
        const currentTime = viewer.currentTime;
        const animationName = viewer.animationName;
 
        const cameraOrbit = viewer.getAttribute('camera-orbit');
        const cameraTarget = viewer.getAttribute('camera-target');
 
        viewer.addEventListener('load', function restore() {
            viewer.removeEventListener('load', restore);
 
            if (cameraOrbit) {
                viewer.setAttribute('camera-orbit', cameraOrbit);
            }
 
            if (cameraTarget) {
                viewer.setAttribute('camera-target', cameraTarget);
            }
 
            if (animationName) {
                viewer.animationName = animationName;
            }
 
            if (typeof currentTime === 'number') {
                viewer.currentTime = currentTime;
            }
 
            if (viewer.hasAttribute('autoplay')) {
                viewer.play();
            }
        }, { once: true });
 
 
        viewer.src = targetSrc;
 
        buttonIcon.src = targetSrc === hqUrl ? HQ_ICON : LQ_ICON;
    }
 
 
    function initViewer(viewer) {
         if (viewer.dataset.qualityButton) {
         if (viewer.dataset.qualityButton) {
             return;
             return;
Line 93: Line 51:
         updateViewerSize(viewer);
         updateViewerSize(viewer);


        const parent = viewer.parentElement;


         const wrapper = viewer.closest('[class*="model_size_"]');
         const container = document.createElement('div');
        container.className = 'mv-quality-container';


         if (!wrapper) {
         parent.insertBefore(container, viewer);
            return;
         container.appendChild(viewer);
         }




         const hqName = wrapper.dataset.hqFile;
         const button = document.createElement('button');
        button.className = 'mv-quality-toggle';
        button.type = 'button';


        if (!hqName) {
            return;
        }


        const icon = document.createElement('img');
        icon.src = LQ_ICON;
        icon.alt = 'LQ/HQ';


        const lqUrl = viewer.src;


         const fileUrl = new URL(lqUrl);
         button.appendChild(icon);
        container.appendChild(button);


        const basePath = fileUrl.pathname.substring(
            0,
            fileUrl.pathname.lastIndexOf('/')
        );


        button.addEventListener('click', function () {
            console.log('quality button clicked');
            icon.src = icon.src.includes('2D_icon')
                ? HQ_ICON
                : LQ_ICON;
        });


        const apiUrl = mw.config.get('wgScriptPath') +
            '/api.php?action=query&titles=File:' +
            encodeURIComponent(hqName + '.glb') +
            '&prop=imageinfo&iiprop=url&format=json';


 
         console.log('Added quality button', viewer);
         fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
 
                const pages = data.query.pages;
 
                const page = Object.values(pages)[0];
 
                if (!page.imageinfo) {
                    return;
                }
 
                const hqUrl = page.imageinfo[0].url;
 
 
                const container = document.createElement('div');
 
                container.className = 'mv-quality-container';
 
 
                viewer.parentNode.insertBefore(container, viewer);
 
                container.appendChild(viewer);
 
 
                const button = document.createElement('button');
 
                button.className = 'mv-quality-toggle';
 
                button.type = 'button';
 
 
                const icon = document.createElement('img');
 
                icon.alt = '';
 
                icon.src = LQ_ICON;
 
 
                button.appendChild(icon);
 
                container.appendChild(button);
 
 
                button.addEventListener('click', function () {
                    switchQuality(
                        viewer,
                        icon,
                        lqUrl,
                        hqUrl
                    );
                });
 
            });
     }
     }




     function init() {
     function scan() {
         document.querySelectorAll('model-viewer').forEach(initViewer);
         document.querySelectorAll('model-viewer').forEach(addButton);
     }
     }




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


    const observer = new MutationObserver(function () {
        scan();
    });


     window.addEventListener('resize', function () {
     observer.observe(document.body, {
         document.querySelectorAll('model-viewer').forEach(updateViewerSize);
         childList: true,
        subtree: true
     });
     });


Retrieved from "https://deadlock.wiki/User:Monster_Domosed/common.js"