The Deadlock Wiki

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

Browse history interactively
← Older edit

Monster Domosed (talk | contribs)

2 user groups
4,611 edits
No edit summary
No edit summary
 
(23 intermediate revisions by the same user not shown)
Line 2: Line 2:
     'use strict';
     'use strict';


     const LQ_ICON = '/images/d/d8/LQ_icon.png';
     const urlCache = new Map();
    const HQ_ICON = '/images/1/10/HQ_icon.png';


     function getSize(element) {
     function getSize(element) {
Line 11: 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 19: 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;
            });
        urlCache.set(fileName, promise);
        return promise;
    }
    function buildAnimationControls(wrap, container, viewer, defaultAnimation, autoplay) {
        const bar = document.createElement('div');
        bar.className = 'model-viewer-controls';
        const playButton = document.createElement('button');
        playButton.className = 'model-anim-button';
        playButton.type = 'button';
        const select = document.createElement('select');
        select.className = 'model-anim-select';
        const slider = document.createElement('input');
        slider.className = 'model-anim-slider';
        slider.type = 'range';
        slider.min = '0';
        slider.max = '1000';
        slider.value = '0';
        slider.step = '1';
        let paused = !autoplay;
        let rafId = null;
        let duration = 0;
        function updateSlider() {
            if (duration > 0) {
                slider.value = String(Math.round((viewer.currentTime / duration) * 1000));
            }
            rafId = requestAnimationFrame(updateSlider);
        }
        function startLoop() {
            cancelAnimationFrame(rafId);
            rafId = requestAnimationFrame(updateSlider);
        }
        function setPlaying(playing) {
            paused = !playing;
            playButton.textContent = playing ? '❚❚' : '▶';
            if (playing) {
                viewer.play();
            } else {
                viewer.pause();
            }
        }
        playButton.addEventListener('click', function () {
            setPlaying(paused);
        });
        slider.addEventListener('input', function () {
            if (duration > 0) {
                viewer.currentTime = (parseFloat(slider.value) / 1000) * duration;
            }
        });
        viewer.addEventListener('load', function () {
            const animations = viewer.availableAnimations || [];
            if (animations.length) {
                animations.forEach(function (animName) {
                    const option = document.createElement('option');
                    option.value = animName;
                    option.textContent = animName;
                    select.appendChild(option);
                });
                if (defaultAnimation && animations.indexOf(defaultAnimation) !== -1) {
                    select.value = defaultAnimation;
                }
                viewer.animationName = select.value;
                duration = viewer.duration || 0;
                select.addEventListener('change', function () {
                    viewer.animationName = select.value;
                    duration = viewer.duration || 0;
                    viewer.currentTime = 0;
                    if (paused) {
                        setPlaying(true);
                    }
                });


                 if (!page.imageinfo) {
                 if (paused) {
                     return null;
                     setPlaying(false);
                 }
                 }


                 return page.imageinfo[0].url;
                 startLoop();
             });
                bar.classList.add('model-viewer-controls--visible');
             }
        });
 
        bar.appendChild(playButton);
        bar.appendChild(select);
        bar.appendChild(slider);
        container.appendChild(bar);
     }
     }


    function addQualityButton(container, viewer, lqUrl, hqUrl) {
 
    if (!hqUrl || lqUrl === hqUrl) {
        return;
    }
    const button = document.createElement('button');
    button.className = 'mv-quality-toggle';
    button.type = 'button';
    const icon = document.createElement('img');
    icon.src = LQ_ICON;
    icon.alt = '';
    button.appendChild(icon);
    const buttonSize = Math.max(
        28,
        Math.min(56, Math.round(container.offsetWidth * 0.14))
    );
    button.style.width = buttonSize + 'px';
    button.style.height = buttonSize + 'px';
    let isLQ = true;
    button.addEventListener('click', function () {
        if (isLQ) {
            viewer.src = hqUrl;
            icon.src = HQ_ICON;
            isLQ = false;
        } else {
            viewer.src = lqUrl;
            icon.src = LQ_ICON;
            isLQ = true;
        }
    });
    container.appendChild(button);
}


     function loadModel(preview) {
     function loadModel(preview) {
Line 82: Line 147:


         const fileName = preview.dataset.model;
         const fileName = preview.dataset.model;
        const displayName = preview.dataset.name || fileName;
        const defaultAnimation = preview.dataset.animation || '';
        const autoplay = preview.dataset.autoplay === 'true';
         const size = getSize(preview);
         const size = getSize(preview);


         Promise.all([
         getFileUrl(fileName + '.glb')
            getFileUrl(fileName + '-compressed.glb'),
             .then(function (url) {
             getFileUrl(fileName + '.glb')
                if (!url) {
        ])
                    return;
        .then(function (urls) {
                }
            const lqUrl = urls[0] || urls[1];
            const hqUrl = urls[1];


            if (!lqUrl) {
                const wrap = document.createElement('div');
                 return;
                 wrap.className = 'model-viewer-wrap';
            }


            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.height = size + 'px';


            container.style.width = size + 'px';
                const viewer = document.createElement('model-viewer');
            container.style.height = size + 'px';
                viewer.src = url;
                viewer.setAttribute('camera-controls', '');
                viewer.setAttribute('touch-action', 'pan-y');
                if (preview.dataset.autoplay === 'true') {
                    viewer.setAttribute('autoplay', '');
                }


            const viewer = document.createElement('model-viewer');
                container.appendChild(viewer);
                wrap.appendChild(container);


            viewer.src = lqUrl;
                buildAnimationControls(wrap, container, viewer, defaultAnimation, autoplay);
            viewer.setAttribute('camera-controls', '');
            viewer.setAttribute('touch-action', 'pan-y');


            container.appendChild(viewer);
                const name = document.createElement('div');
                name.className = 'model-name';
                name.textContent = displayName;


            preview.replaceWith(container);
                wrap.appendChild(name);


            viewer.addEventListener('load', function () {
                preview.replaceWith(wrap);
                addQualityButton(
                    container,
                    viewer,
                    lqUrl,
                    hqUrl
                );
             });
             });
        });
    }
   
    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);
}


     function initPreview(preview) {
     function initPreview(preview) {
Line 146: Line 197:


         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 161: Line 210:
             .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,
Line 175: Line 228:


})();
})();




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