User:Monster Domosed/common.js: Difference between revisions

Jump to navigation Jump to search
Browse history interactively
← Older editNewer edit →

Monster Domosed (talk | contribs)

2 user groups
4,611 edits
No edit summary
Remove HQ/LQ model switching; keep preview/actual model toggle (with Domosed MCP)
Line 1: Line 1:
(function () {
(function () {
     'use strict';
     'use strict';
    const LQ_ICON = '/images/d/d8/LQ_icon.png';
    const HQ_ICON = '/images/1/10/HQ_icon.png';


     function getSize(element) {
     function getSize(element) {
Line 34: Line 31:
     }
     }


function addQualityButton(container, viewer, lqUrl, hqUrl) {
    function loadModel(preview) {
    if (!hqUrl || lqUrl === hqUrl) {
        if (preview.dataset.loaded) {
        return;
            return;
    }
        }
 
    const button = document.createElement('button');
        preview.dataset.loaded = '1';
    button.className = 'mv-quality-toggle';
 
    button.type = 'button';
        const fileName = preview.dataset.model;
        const size = getSize(preview);
    const icon = document.createElement('img');
 
    icon.src = LQ_ICON;
        getFileUrl(fileName + '.glb')
    icon.alt = '';
            .then(function (url) {
                if (!url) {
    button.appendChild(icon);
                    return;
                }
    const buttonSize = Math.max(
 
        28,
                const container = document.createElement('div');
        Math.min(56, Math.round(container.offsetWidth * 0.14))
                container.className = 'model-viewer-container';
    );
 
                container.style.width = size + 'px';
    button.style.width = buttonSize + 'px';
                container.style.height = size + 'px';
    button.style.height = buttonSize + 'px';
 
                const viewer = document.createElement('model-viewer');
    let isLQ = true;
 
                viewer.src = url;
    button.addEventListener('click', function () {
                viewer.setAttribute('camera-controls', '');
        if (isLQ) {
                viewer.setAttribute('touch-action', 'pan-y');
            viewer.src = hqUrl;
 
            icon.src = HQ_ICON;
                container.appendChild(viewer);
            isLQ = false;
 
        } else {
                preview.replaceWith(container);
            viewer.src = lqUrl;
            });
            icon.src = LQ_ICON;
    }
            isLQ = true;
 
        }
    });
    container.appendChild(button);
}
function loadModel(preview) {
    if (preview.dataset.loaded) {
        return;
    }
    preview.dataset.loaded = '1';
    const fileName = preview.dataset.model;
    const size = getSize(preview);
    Promise.all([
        getFileUrl(fileName + '-compressed.glb'),
        getFileUrl(fileName + '.glb')
    ])
    .then(function (urls) {
        const lqUrl = urls[0] || urls[1];
        const hqUrl = urls[1];
        if (!lqUrl) {
            return;
        }
        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 = lqUrl;
        viewer.setAttribute('camera-controls', '');
        viewer.setAttribute('touch-action', 'pan-y');
        container.appendChild(viewer);
        preview.replaceWith(container);
        addQualityButton(
            container,
            viewer,
            lqUrl,
            hqUrl
        );
    });
}
   
     function syncWrapperSize(viewer) {
     function syncWrapperSize(viewer) {
    const wrapper = viewer.closest('.model-placeholder');
        const wrapper = viewer.closest('.model-placeholder');


    if (!wrapper) {
        if (!wrapper) {
        return;
            return;
    }
        }


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


    resizeObserver.observe(viewer);
        resizeObserver.observe(viewer);
}
    }


     function initPreview(preview) {
     function initPreview(preview) {
Line 173: Line 117:


})();
})();




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