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
Wrap loaded viewer in .model-viewer-wrap and add model name caption below (with Domosed MCP)
No edit summary
 
(17 intermediate revisions by the same user not shown)
Line 40: Line 40:
         return 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 (paused) {
                    setPlaying(false);
                }
                startLoop();
                bar.classList.add('model-viewer-controls--visible');
            }
        });
        bar.appendChild(playButton);
        bar.appendChild(select);
        bar.appendChild(slider);
        container.appendChild(bar);
    }


     function loadModel(preview) {
     function loadModel(preview) {
Line 49: 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);


Line 69: Line 170:
                 viewer.setAttribute('camera-controls', '');
                 viewer.setAttribute('camera-controls', '');
                 viewer.setAttribute('touch-action', 'pan-y');
                 viewer.setAttribute('touch-action', 'pan-y');
                if (preview.dataset.autoplay === 'true') {
                    viewer.setAttribute('autoplay', '');
                }


                 container.appendChild(viewer);
                 container.appendChild(viewer);
                 wrap.appendChild(container);
                 wrap.appendChild(container);
                buildAnimationControls(wrap, container, viewer, defaultAnimation, autoplay);


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


                 wrap.appendChild(name);
                 wrap.appendChild(name);
Line 122: Line 228:


})();
})();




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