User:Monster Domosed/common.jsGive feedback

Note: After publishing, you may need to reload with your cache disabled to see your changes.

• Windows / Linux: Press Ctrl-Shift-R
• macOS: Press ⌘-Shift-R

(function () {
    'use strict';

    const LQ_ICON = '/images/d/d8/LQ_icon.png';
    const HQ_ICON = '/images/1/10/HQ_icon.png';

    function getSize(wrapper) {
        const match = wrapper.className.match(/model_size_(\d+)/);
        return match ? parseInt(match[1], 10) : 500;
    }

    function updateViewerSize(viewer, wrapper) {
        const size = getSize(wrapper);

        viewer.style.width = size + 'px';
        viewer.style.height = size + 'px';
    }

    function updateQualityButtonSize(button, wrapper) {
        const size = getSize(wrapper);

        const buttonSize = Math.max(28, Math.min(56, Math.round(size * 0.14)));

        button.style.width = buttonSize + 'px';
        button.style.height = buttonSize + 'px';
    }

    function getFileUrl(fileName) {
        const apiUrl =
            mw.config.get('wgScriptPath') +
            '/api.php?action=query' +
            '&titles=File:' + encodeURIComponent(fileName) +
            '&prop=imageinfo' +
            '&iiprop=url' +
            '&format=json';

        return fetch(apiUrl)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                const page = Object.values(data.query.pages)[0];

                if (!page.imageinfo) {
                    return null;
                }

                return page.imageinfo[0].url;
            });
    }

    function addQualityButton(wrapper, viewer, lqUrl, hqUrl) {
        if (!hqUrl || lqUrl === hqUrl) {
            return;
        }

        const button = document.createElement('button');
        button.className = 'mv-quality-toggle';
        button.type = 'button';

        updateQualityButtonSize(button, wrapper);

        const icon = document.createElement('img');
        icon.src = LQ_ICON;
        icon.alt = '';

        button.appendChild(icon);

        button.addEventListener('click', function () {
            const isLQ = viewer.src === lqUrl;

            viewer.src = isLQ ? hqUrl : lqUrl;
            icon.src = isLQ ? HQ_ICON : LQ_ICON;
        });

        wrapper.appendChild(button);
    }

    function loadModel(wrapper) {
        if (wrapper.dataset.loaded) {
            return;
        }

        wrapper.dataset.loaded = '1';

        Promise.all([
            getFileUrl(wrapper.dataset.lq),
            getFileUrl(wrapper.dataset.hq)
        ]).then(function (urls) {

            const lqUrl = urls[0] || urls[1];
            const hqUrl = urls[1];

            if (!lqUrl) {
                return;
            }

            wrapper.innerHTML = '';

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

            viewer.src = lqUrl;

            viewer.setAttribute('camera-controls', '');
            viewer.setAttribute('touch-action', 'pan-y');
            viewer.setAttribute('loading', 'lazy');

            updateViewerSize(viewer, wrapper);

            wrapper.appendChild(viewer);

            viewer.addEventListener('load', function () {
                addQualityButton(wrapper, viewer, lqUrl, hqUrl);
            });

        });
    }

    function initPlaceholder(wrapper) {
        if (wrapper.dataset.initialized) {
            return;
        }

        wrapper.dataset.initialized = '1';

        wrapper.style.position = 'relative';

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

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

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

        button.addEventListener('click', function () {
            loadModel(wrapper);
        });

        wrapper.appendChild(button);
    }

    function scan() {
        document
            .querySelectorAll('.model-placeholder')
            .forEach(initPlaceholder);
    }

    scan();

    new MutationObserver(scan).observe(document.body, {
        childList: true,
        subtree: true
    });

    window.addEventListener('resize', function () {

        document.querySelectorAll('model-viewer').forEach(function (viewer) {

            const wrapper = viewer.closest('.model-placeholder');

            if (!wrapper) {
                return;
            }

            updateViewerSize(viewer, wrapper);

            const button = wrapper.querySelector('.mv-quality-toggle');

            if (button) {
                updateQualityButtonSize(button, wrapper);
            }

        });

    });

})();

function syncWrapperSize(viewer) {
    const wrapper = viewer.closest('.model-placeholder');

    if (!wrapper) {
        return;
    }

    const resizeObserver = new ResizeObserver(function () {
        wrapper.style.width = viewer.offsetWidth + 'px';
        wrapper.style.height = viewer.offsetHeight + 'px';
    });

    resizeObserver.observe(viewer);
}












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