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
 
(35 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 updateViewerSize(viewer, wrapper) {
     function getSize(element) {
         const match = wrapper.className.match(/model_size_(\d+)/);
         const match = element.className.match(/model_size_(\d+)/);
 
         return match ? parseInt(match[1], 10) : 500;
         if (!match) {
            return;
        }
 
        const size = parseInt(match[1], 10);
 
        viewer.style.width = size + 'px';
        viewer.style.height = size + 'px';
     }
     }


     function updateButtonSize(button, wrapper) {
     function getFileUrl(fileName) {
         const match = wrapper.className.match(/model_size_(\d+)/);
         if (urlCache.has(fileName)) {
 
             return urlCache.get(fileName);
        if (!match) {
             return;
         }
         }


        const size = parseInt(match[1], 10);
        // 14% of viewer size, minimum 28px, maximum 56px
        const buttonSize = Math.max(28, Math.min(56, Math.round(size * 0.14)));
        button.style.width = buttonSize + 'px';
        button.style.height = buttonSize + 'px';
    }
    function getHQUrl(fileName) {
         const apiUrl =
         const apiUrl =
             mw.config.get('wgScriptPath') +
             mw.config.get('wgScriptPath') +
             '/api.php?action=query' +
             '/api.php?action=query' +
             '&titles=File:' + encodeURIComponent(fileName) +
             '&titles=File:' + encodeURIComponent(fileName) +
            '.glb' +
             '&prop=imageinfo' +
             '&prop=imageinfo' +
             '&iiprop=url' +
             '&iiprop=url' +
             '&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 pages = data.query.pages;
                 const page = Object.values(data.query.pages)[0];
                 const page = Object.values(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;
                }
    }
    function buildAnimationControls(wrap, container, viewer, defaultAnimation, autoplay) {
        const bar = document.createElement('div');
        bar.className = 'model-viewer-controls';


                return page.imageinfo[0].url;
        const playButton = document.createElement('button');
            });
        playButton.className = 'model-anim-button';
    }
        playButton.type = 'button';


    function switchQuality(viewer, icon, lqUrl, hqUrl) {
        const select = document.createElement('select');
const oldTime = viewer.currentTime;
        select.className = 'model-anim-select';
const oldAnimation = viewer.animationName;
viewer.addEventListener('load', function () {
    if (oldAnimation) {
        viewer.animationName = oldAnimation;
    }
    if (typeof oldTime === 'number') {
        viewer.currentTime = oldTime;
    }
    if (viewer.hasAttribute('autoplay')) {
        viewer.play();
    }
}, {
    once: true
});


         viewer.src = isLQ ? hqUrl : lqUrl;
         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';


         icon.src = isLQ ? HQ_ICON : LQ_ICON;
         let paused = !autoplay;
    }
        let rafId = null;
        let duration = 0;


    function initViewer(viewer) {
        function updateSlider() {
        if (viewer.dataset.qualityButtonAdded) {
            if (duration > 0) {
             return;
                slider.value = String(Math.round((viewer.currentTime / duration) * 1000));
            }
             rafId = requestAnimationFrame(updateSlider);
         }
         }


         const wrapper = viewer.closest('[class*="model_size_"]');
         function startLoop() {
            cancelAnimationFrame(rafId);
            rafId = requestAnimationFrame(updateSlider);
        }


         if (!wrapper) {
         function setPlaying(playing) {
             return;
            paused = !playing;
            playButton.textContent = playing ? '❚❚' : '▶';
            if (playing) {
                viewer.play();
             } else {
                viewer.pause();
            }
         }
         }


         const src = viewer.getAttribute('src');
         playButton.addEventListener('click', function () {
            setPlaying(paused);
        });
 
        slider.addEventListener('input', function () {
            if (duration > 0) {
                viewer.currentTime = (parseFloat(slider.value) / 1000) * duration;
            }
        });


         if (!src || !src.endsWith('-compressed.glb')) {
         viewer.addEventListener('load', function () {
             return;
            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 (paused) {
                    setPlaying(false);
                }
 
                startLoop();
                bar.classList.add('model-viewer-controls--visible');
             }
         });


         viewer.dataset.qualityButtonAdded = '1';
         bar.appendChild(playButton);
        bar.appendChild(select);
        bar.appendChild(slider);
        container.appendChild(bar);
    }


        updateViewerSize(viewer, wrapper);


        const fileMatch = src.match(/\/([^\/]+)-compressed\.glb$/);


         if (!fileMatch) {
    function loadModel(preview) {
         if (preview.dataset.loaded) {
             return;
             return;
         }
         }


         const baseName = fileMatch[1];
         preview.dataset.loaded = '1';


         getHQUrl(baseName)
         const fileName = preview.dataset.model;
            .then(function (hqUrl) {
        const displayName = preview.dataset.name || fileName;
        const defaultAnimation = preview.dataset.animation || '';
        const autoplay = preview.dataset.autoplay === 'true';
        const size = getSize(preview);


                 if (!hqUrl) {
        getFileUrl(fileName + '.glb')
            .then(function (url) {
                 if (!url) {
                     return;
                     return;
                 }
                 }
                const wrap = document.createElement('div');
                wrap.className = 'model-viewer-wrap';


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


                viewer.parentNode.insertBefore(container, viewer);
                 container.appendChild(viewer);
                 container.appendChild(viewer);
                wrap.appendChild(container);


                 const button = document.createElement('button');
                 buildAnimationControls(wrap, container, viewer, defaultAnimation, autoplay);
                button.className = 'mv-quality-toggle';
                button.type = 'button';


                 updateButtonSize(button, wrapper);
                 const name = document.createElement('div');
                name.className = 'model-name';
                name.textContent = displayName;
 
                wrap.appendChild(name);
 
                preview.replaceWith(wrap);
            });
    }


                const icon = document.createElement('img');
    function initPreview(preview) {
                icon.src = LQ_ICON;
        if (preview.dataset.initialized) {
                icon.alt = '';
            return;
        }


                button.appendChild(icon);
        preview.dataset.initialized = '1';
                container.appendChild(button);


                button.addEventListener('click', function () {
        const button = document.createElement('button');
                    switchQuality(
        button.className = 'model-load-button';
                        viewer,
        button.type = 'button';
                        icon,
        button.addEventListener('click', function () {
                        src,
            loadModel(preview);
                        hqUrl
        });
                    );
                });


            });
        preview.appendChild(button);
     }
     }


     function scan() {
     function scan() {
         document.querySelectorAll('model-viewer').forEach(initViewer);
         document
            .querySelectorAll('.model-placeholder')
            .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,
         subtree: true
         subtree: true
    });
    window.addEventListener('resize', function () {
        document.querySelectorAll('model-viewer').forEach(function (viewer) {
            const wrapper = viewer.closest('[class*="model_size_"]');
            if (!wrapper) {
                return;
            }
            updateViewerSize(viewer, wrapper);
            const button = viewer.parentNode.querySelector('.mv-quality-toggle');
            if (button) {
                updateButtonSize(button, wrapper);
            }
        });
     });
     });


})();
})();




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