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
 
(252 intermediate revisions by the same user not shown)
Line 1: Line 1:
document.querySelectorAll('.HeroCard2').forEach(function(el) {
(function () {
  el.style.transition = 'none';
    'use strict';
  el.style.transformStyle = 'preserve-3d';
  el.style.willChange = 'transform';


  var animFrame;
    const urlCache = new Map();
  var current = { x: 0, y: 0 };
  var target = { x: 0, y: 0 };
  var mouseX = 0, mouseY = 0;
  var isOver = false;


  document.addEventListener('mousemove', function(e) {
    function getSize(element) {
    mouseX = e.clientX;
        const match = element.className.match(/model_size_(\d+)/);
    mouseY = e.clientY;
        return match ? parseInt(match[1], 10) : 500;
  });
    }
 
    function getFileUrl(fileName) {
        if (urlCache.has(fileName)) {
            return urlCache.get(fileName);
        }
 
        const apiUrl =
            mw.config.get('wgScriptPath') +
            '/api.php?action=query' +
            '&titles=File:' + encodeURIComponent(fileName) +
            '&prop=imageinfo' +
            '&iiprop=url' +
            '&format=json';
 
        const promise = fetch(apiUrl)
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('API request failed');
                }
                return response.json();
            })
            .then(function (data) {
                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 (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) {
        if (preview.dataset.loaded) {
            return;
        }
 
        preview.dataset.loaded = '1';


  var tick = function() {
        const fileName = preview.dataset.model;
    var rect = el.getBoundingClientRect();
        const displayName = preview.dataset.name || fileName;
    isOver = (
        const defaultAnimation = preview.dataset.animation || '';
      mouseX >= rect.left &&
        const autoplay = preview.dataset.autoplay === 'true';
      mouseX <= rect.right &&
        const size = getSize(preview);
      mouseY >= rect.top &&
      mouseY <= rect.bottom
    );


    if (isOver) {
        getFileUrl(fileName + '.glb')
      var cx = rect.left + rect.width / 2;
            .then(function (url) {
      var cy = rect.top + rect.height / 2;
                if (!url) {
      var dx = (mouseX - cx) / (rect.width / 2);
                    return;
      var dy = (mouseY - cy) / (rect.height / 2);
                }
      target.x = dy * -12;
 
      target.y = dx * 12;
                const wrap = document.createElement('div');
    } else {
                wrap.className = 'model-viewer-wrap';
      target.x = 0;
 
      target.y = 0;
                const container = document.createElement('div');
                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', '');
                }
 
                container.appendChild(viewer);
                wrap.appendChild(container);
 
                buildAnimationControls(wrap, container, viewer, defaultAnimation, autoplay);
 
                const name = document.createElement('div');
                name.className = 'model-name';
                name.textContent = displayName;
 
                wrap.appendChild(name);
 
                preview.replaceWith(wrap);
            });
     }
     }


     current.x += (target.x - current.x) * 0.12;
     function initPreview(preview) {
     current.y += (target.y - current.y) * 0.12;
        if (preview.dataset.initialized) {
            return;
        }
 
        preview.dataset.initialized = '1';
 
        const button = document.createElement('button');
        button.className = 'model-load-button';
        button.type = 'button';
        button.addEventListener('click', function () {
            loadModel(preview);
        });
 
        preview.appendChild(button);
     }
 
    function scan() {
        document
            .querySelectorAll('.model-placeholder')
            .forEach(initPreview);
    }
 
    let scanTimer = null;
 
    function debouncedScan() {
        clearTimeout(scanTimer);
        scanTimer = setTimeout(scan, 100);
    }
 
    scan();
 
    const observer = new MutationObserver(debouncedScan);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
 
})();
 
 


    el.style.transform = 'perspective(400px) rotateX(' + current.x + 'deg) rotateY(' + current.y + 'deg) scale(' + (isOver ? 1.05 : 1) + ')';


    requestAnimationFrame(tick);
  };


  tick();
const personal = document.querySelector(".vector-menu-content-list");
});
if (personal){
const test2 = document.createElement("li");
const test3 = document.createElement("li");
const test4 = document.createElement("li");
test2.innerHTML = `<a href="/User:Monster_Domosed/common.js">JS</a>`;
test3.innerHTML = `<a href="/User:Monster_Domosed/common.css">CSS</a>`;
test4.innerHTML = `<a href="/User:Monster_Domosed/Sandbox">SB</a>`;
personal.prepend(test2, test3, test4);
}
Retrieved from "https://deadlock.wiki/User:Monster_Domosed/common.js"