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
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
(function () {
(function () {
     'use strict';
     'use strict';
    const DEBUG = true;
    const LOG_PREFIX = '[ModelViewer]';
    function log() {
        if (!DEBUG) {
            return;
        }
        console.log.apply(console, [
            LOG_PREFIX,
            ...arguments
        ]);
    }
    function warn() {
        if (!DEBUG) {
            return;
        }
        console.warn.apply(console, [
            LOG_PREFIX,
            ...arguments
        ]);
    }
    function error() {
        console.error.apply(console, [
            LOG_PREFIX,
            ...arguments
        ]);
    }
    log('Gadget script loaded');
    log('URL:', location.href);
    log('User agent:', navigator.userAgent);
    log('Document readyState:', document.readyState);
    log('MediaWiki available:', typeof mw !== 'undefined');
    log('MediaWiki hook available:', typeof mw !== 'undefined' && !!mw.hook);
    log('MediaWiki loader available:', typeof mw !== 'undefined' && !!mw.loader);


     const urlCache = new Map();
     const urlCache = new Map();


     function getSize(element) {
     function getSize(element) {
         const className = typeof element.className === 'string'
         const match = element.className.match(/model_size_(\d+)/);
            ? element.className
         return match ? parseInt(match[1], 10) : 500;
            : '';
 
        const match = className.match(/model_size_(\d+)/);
 
         const size = match ? parseInt(match[1], 10) : 500;
 
        log(
            'getSize:',
            element.dataset.model || '(unknown)',
            '=>',
            size
        );
 
        return size;
     }
     }


     function getFileUrl(fileName) {
     function getFileUrl(fileName) {
         if (urlCache.has(fileName)) {
         if (urlCache.has(fileName)) {
            log('URL cache hit:', fileName);
             return urlCache.get(fileName);
             return urlCache.get(fileName);
         }
         }
Line 76: Line 21:
             '&iiprop=url' +
             '&iiprop=url' +
             '&format=json';
             '&format=json';
        log('Requesting file URL:', fileName);
        log('API URL:', apiUrl);


         const promise = fetch(apiUrl)
         const promise = fetch(apiUrl)
             .then(function (response) {
             .then(function (response) {
                log(
                    'API response:',
                    fileName,
                    'status:',
                    response.status,
                    'ok:',
                    response.ok
                );
                 if (!response.ok) {
                 if (!response.ok) {
                     throw new Error(
                     throw new Error('API request failed');
                        'API request failed with status ' + response.status
                    );
                 }
                 }
                 return response.json();
                 return response.json();
             })
             })
             .then(function (data) {
             .then(function (data) {
                 log('API data received:', fileName, 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);
        }


                const pages = data.query && data.query.pages;
        function startLoop() {
            cancelAnimationFrame(rafId);
            rafId = requestAnimationFrame(updateSlider);
        }


                 if (!pages) {
        function setPlaying(playing) {
                    warn('API response contains no pages:', fileName);
            paused = !playing;
                    return null;
            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;
            }
        });


                const page = Object.values(pages)[0];
        viewer.addEventListener('load', function () {
            const animations = viewer.availableAnimations || [];


                 if (!page) {
            if (animations.length) {
                     warn('No page found in API response:', fileName);
                 animations.forEach(function (animName) {
                     return null;
                     const option = document.createElement('option');
                 }
                     option.value = animName;
                    option.textContent = animName;
                    select.appendChild(option);
                 });


                 if (!page.imageinfo || !page.imageinfo[0]) {
                 if (defaultAnimation && animations.indexOf(defaultAnimation) !== -1) {
                     warn('No imageinfo found:', fileName, page);
                     select.value = defaultAnimation;
                    return null;
                 }
                 }


                 const url = page.imageinfo[0].url;
                 viewer.animationName = select.value;
                duration = viewer.duration || 0;


                 log('Resolved file URL:', fileName, url);
                 select.addEventListener('change', function () {
                    viewer.animationName = select.value;
                    duration = viewer.duration || 0;
                    viewer.currentTime = 0;
                    if (paused) {
                        setPlaying(true);
                    }
                });


                 return url;
                 if (paused) {
            })
                    setPlaying(false);
            .catch(function (err) {
                 }
                error('Failed to get file URL:', fileName, err);
                 return null;
            });


        urlCache.set(fileName, promise);
                startLoop();
                bar.classList.add('model-viewer-controls--visible');
            }
        });


         return promise;
         bar.appendChild(playButton);
        bar.appendChild(select);
        bar.appendChild(slider);
        container.appendChild(bar);
     }
     }


     function loadModel(preview) {
     function loadModel(preview) {
        log(
            'loadModel called:',
            preview.dataset.model,
            'loaded:',
            preview.dataset.loaded
        );
         if (preview.dataset.loaded) {
         if (preview.dataset.loaded) {
            log(
                'Model already loaded/loading:',
                preview.dataset.model
            );
             return;
             return;
         }
         }
Line 157: Line 147:


         const fileName = preview.dataset.model;
         const fileName = preview.dataset.model;
        if (!fileName) {
            warn('Placeholder has no data-model:', preview);
            return;
        }
         const displayName = preview.dataset.name || fileName;
         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);
        log(
            'Loading model:',
            fileName,
            'display name:',
            displayName,
            'size:',
            size
        );


         getFileUrl(fileName + '.glb')
         getFileUrl(fileName + '.glb')
             .then(function (url) {
             .then(function (url) {
                log(
                    'GLB URL result:',
                    fileName,
                    url
                );
                 if (!url) {
                 if (!url) {
                    warn(
                        'No GLB URL returned:',
                        fileName
                    );
                     return;
                     return;
                 }
                 }
                if (!preview.isConnected) {
                    warn(
                        'Preview is no longer connected to DOM:',
                        fileName
                    );
                    return;
                }
                log('Creating model-viewer:', fileName);


                 const wrap = document.createElement('div');
                 const wrap = document.createElement('div');
Line 212: Line 167:


                 const viewer = document.createElement('model-viewer');
                 const viewer = document.createElement('model-viewer');
                 viewer.src = url;
                 viewer.src = url;
                 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.addEventListener('load', function () {
                     viewer.setAttribute('autoplay', '');
                     log(
                 }
                        'model-viewer loaded successfully:',
                        fileName
                    );
                });
 
                viewer.addEventListener('error', function (event) {
                    error(
                        'model-viewer error:',
                        fileName,
                        event
                    );
                 });


                 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');
Line 240: Line 184:


                 wrap.appendChild(name);
                 wrap.appendChild(name);
                log(
                    'Replacing placeholder with model viewer:',
                    fileName
                );


                 preview.replaceWith(wrap);
                 preview.replaceWith(wrap);
                log(
                    'Model viewer inserted:',
                    fileName
                );
            })
            .catch(function (err) {
                error(
                    'Unexpected error while loading model:',
                    fileName,
                    err
                );
             });
             });
     }
     }


     function initPreview(preview) {
     function initPreview(preview) {
        if (!preview) {
            warn('initPreview called without element');
            return;
        }
        const modelName = preview.dataset.model || '(unknown)';
        log(
            'initPreview:',
            modelName,
            'initialized:',
            preview.dataset.initialized
        );
         if (preview.dataset.initialized) {
         if (preview.dataset.initialized) {
            log(
                'Already initialized:',
                modelName
            );
             return;
             return;
         }
         }


         preview.dataset.initialized = '1';
         preview.dataset.initialized = '1';
        log(
            'Initializing preview:',
            modelName
        );


         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';
        log(
            'Creating button:',
            modelName
        );
         button.addEventListener('click', function () {
         button.addEventListener('click', function () {
            log(
                'BUTTON CLICKED:',
                modelName
            );
             loadModel(preview);
             loadModel(preview);
         });
         });


         preview.appendChild(button);
         preview.appendChild(button);
        log(
            'Button appended:',
            modelName,
            'button:',
            button
        );
     }
     }


     function scan(root) {
     function scan() {
         if (!root) {
         document
            warn('scan called without root');
             .querySelectorAll('.model-placeholder')
            return;
             .forEach(initPreview);
        }
 
        const rootDescription =
            root === document
                ? 'document'
                : root.tagName || root.nodeName;
 
        log(
            'Scanning:',
            rootDescription
        );
 
        let count = 0;
 
        if (
            root.nodeType === Node.ELEMENT_NODE &&
            root.matches('.model-placeholder')
        ) {
            count++;
 
             log(
                'Root itself is a model-placeholder:',
                root.dataset.model
            );
 
            initPreview(root);
        }
 
        if (root.querySelectorAll) {
            const placeholders =
                root.querySelectorAll('.model-placeholder');
 
            log(
                'Found',
                placeholders.length,
                'model-placeholder element(s) inside',
                rootDescription
            );
 
             placeholders.forEach(function (preview) {
                count++;
 
                log(
                    'Found placeholder:',
                    preview.dataset.model,
                    preview
                );
 
                initPreview(preview);
            });
        }
 
        log(
            'Scan complete:',
            rootDescription,
            'processed:',
            count
        );
     }
     }


     function startObserver() {
     let scanTimer = null;
        if (!document.body) {
            warn(
                'document.body does not exist yet. Waiting for DOMContentLoaded.'
            );
 
            return;
        }
 
        log('Starting MutationObserver');


        const observer = new MutationObserver(function (mutations) {
    function debouncedScan() {
            log(
         clearTimeout(scanTimer);
                'MutationObserver fired:',
         scanTimer = setTimeout(scan, 100);
                mutations.length,
                'mutation(s)'
            );
 
            mutations.forEach(function (mutation) {
                if (!mutation.addedNodes.length) {
                    return;
                }
 
                log(
                    'Mutation added',
                    mutation.addedNodes.length,
                    'node(s)'
                );
 
                mutation.addedNodes.forEach(function (node) {
                    if (node.nodeType !== Node.ELEMENT_NODE) {
                        log(
                            'Ignoring non-element added node:',
                            node.nodeType
                        );
 
                        return;
                    }
 
                    log(
                        'Scanning added node:',
                        node.tagName,
                        node.className
                    );
 
                    scan(node);
                });
            });
        });
 
        observer.observe(document.body, {
            childList: true,
            subtree: true
         });
 
        log('MutationObserver started');
    }
 
    function init() {
         log('=== INITIALIZATION START ===');
 
        log(
            'Body available:',
            !!document.body
        );
 
        log(
            'Existing placeholders:',
            document.querySelectorAll('.model-placeholder').length
        );
 
        scan(document);
 
        startObserver();
 
        log('=== INITIALIZATION COMPLETE ===');
     }
     }


     if (typeof mw !== 'undefined' && mw.hook) {
     scan();
        log('Registering wikipage.content hook');


        mw.hook('wikipage.content').add(function ($content) {
     const observer = new MutationObserver(debouncedScan);
            log(
     observer.observe(document.body, {
                'wikipage.content FIRED',
        childList: true,
                $content
        subtree: true
            );
     });
 
            if ($content && $content[0]) {
                log(
                    'Hook content element:',
                    $content[0].tagName,
                    $content[0].className
                );
 
                scan($content[0]);
            } else {
                warn(
                    'wikipage.content fired without usable content'
                );
 
                scan(document);
            }
        });
     } else {
        error(
            'MediaWiki hook is NOT available'
        );
     }
 
    if (document.readyState === 'loading') {
        log(
            'Document still loading. Waiting for DOMContentLoaded.'
        );
 
        document.addEventListener(
            'DOMContentLoaded',
            function () {
                log('DOMContentLoaded FIRED');
                init();
            },
            {
                once: true
            }
        );
     } else {
        log(
            'Document already ready:',
            document.readyState
        );
 
        init();
    }


})();
})();




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