User:Monster Domosed/common.js: Difference between revisionsGive feedback

(function () {
    '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();

    function getSize(element) {
        const className = typeof element.className === 'string'
            ? element.className
            : '';

        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) {
        if (urlCache.has(fileName)) {
            log('URL cache hit:', 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';

        log('Requesting file URL:', fileName);
        log('API URL:', apiUrl);

        const promise = fetch(apiUrl)
            .then(function (response) {
                log(
                    'API response:',
                    fileName,
                    'status:',
                    response.status,
                    'ok:',
                    response.ok
                );

                if (!response.ok) {
                    throw new Error(
                        'API request failed with status ' + response.status
                    );
                }

                return response.json();
            })
            .then(function (data) {
                log('API data received:', fileName, data);

                const pages = data.query && data.query.pages;

                if (!pages) {
                    warn('API response contains no pages:', fileName);
                    return null;
                }

                const page = Object.values(pages)[0];

                if (!page) {
                    warn('No page found in API response:', fileName);
                    return null;
                }

                if (!page.imageinfo || !page.imageinfo[0]) {
                    warn('No imageinfo found:', fileName, page);
                    return null;
                }

                const url = page.imageinfo[0].url;

                log('Resolved file URL:', fileName, url);

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

        urlCache.set(fileName, promise);

        return promise;
    }

    function loadModel(preview) {
        log(
            'loadModel called:',
            preview.dataset.model,
            'loaded:',
            preview.dataset.loaded
        );

        if (preview.dataset.loaded) {
            log(
                'Model already loaded/loading:',
                preview.dataset.model
            );

            return;
        }

        preview.dataset.loaded = '1';

        const fileName = preview.dataset.model;

        if (!fileName) {
            warn('Placeholder has no data-model:', preview);
            return;
        }

        const displayName = preview.dataset.name || fileName;
        const size = getSize(preview);

        log(
            'Loading model:',
            fileName,
            'display name:',
            displayName,
            'size:',
            size
        );

        getFileUrl(fileName + '.glb')
            .then(function (url) {
                log(
                    'GLB URL result:',
                    fileName,
                    url
                );

                if (!url) {
                    warn(
                        'No GLB URL returned:',
                        fileName
                    );

                    return;
                }

                if (!preview.isConnected) {
                    warn(
                        'Preview is no longer connected to DOM:',
                        fileName
                    );

                    return;
                }

                log('Creating model-viewer:', fileName);

                const wrap = document.createElement('div');
                wrap.className = 'model-viewer-wrap';

                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');

                viewer.addEventListener('load', function () {
                    log(
                        'model-viewer loaded successfully:',
                        fileName
                    );
                });

                viewer.addEventListener('error', function (event) {
                    error(
                        'model-viewer error:',
                        fileName,
                        event
                    );
                });

                container.appendChild(viewer);
                wrap.appendChild(container);

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

                wrap.appendChild(name);

                log(
                    'Replacing placeholder with model viewer:',
                    fileName
                );

                preview.replaceWith(wrap);

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

    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) {
            log(
                'Already initialized:',
                modelName
            );

            return;
        }

        preview.dataset.initialized = '1';

        log(
            'Initializing preview:',
            modelName
        );

        const button = document.createElement('button');

        button.className = 'model-load-button';
        button.type = 'button';

        log(
            'Creating button:',
            modelName
        );

        button.addEventListener('click', function () {
            log(
                'BUTTON CLICKED:',
                modelName
            );

            loadModel(preview);
        });

        preview.appendChild(button);

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

    function scan(root) {
        if (!root) {
            warn('scan called without root');
            return;
        }

        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() {
        if (!document.body) {
            warn(
                'document.body does not exist yet. Waiting for DOMContentLoaded.'
            );

            return;
        }

        log('Starting MutationObserver');

        const observer = new MutationObserver(function (mutations) {
            log(
                'MutationObserver fired:',
                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) {
        log('Registering wikipage.content hook');

        mw.hook('wikipage.content').add(function ($content) {
            log(
                'wikipage.content FIRED',
                $content
            );

            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();
    }

})();













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);
}