User:Monster Domosed/common.js: Difference between revisionsGive feedback
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 16: | Line 16: | ||
}); | }); | ||
(function () { | |||
'use strict'; | |||
const LQ_ICON = '/images/6/65/2D_icon.png'; | |||
const HQ_ICON = '/images/7/7e/3D_icon.png'; | |||
function updateViewerSize(viewer) { | |||
const wrapper = viewer.closest('[class*="model_size_"]'); | |||
if (!wrapper) { | |||
return; | |||
} | |||
const match = wrapper.className.match(/\bmodel_size_(\d+)\b/); | |||
if (!match) { | |||
return; | |||
} | |||
const size = parseInt(match[1], 10); | |||
viewer.style.width = size + 'px'; | |||
viewer.style.height = size + 'px'; | |||
} | |||
function switchModel(viewer, icon) { | |||
const isHQ = !viewer.src.endsWith('-compressed.glb'); | |||
const currentTime = viewer.currentTime || 0; | |||
const animationName = viewer.animationName; | |||
const cameraOrbit = viewer.getAttribute('camera-orbit'); | |||
const cameraTarget = viewer.getAttribute('camera-target'); | |||
const newSrc = isHQ | |||
? viewer.src.replace(/\.glb$/i, '-compressed.glb') | |||
: viewer.src.replace(/-compressed\.glb$/i, '.glb'); | |||
viewer.src = newSrc; | |||
viewer.addEventListener('load', function restore() { | |||
if (cameraOrbit) { | |||
viewer.setAttribute('camera-orbit', cameraOrbit); | |||
} | |||
if (cameraTarget) { | |||
viewer.setAttribute('camera-target', cameraTarget); | |||
} | |||
if (animationName) { | |||
viewer.animationName = animationName; | |||
} | |||
viewer.currentTime = currentTime; | |||
if (viewer.hasAttribute('autoplay')) { | |||
viewer.play(); | |||
} | |||
icon.src = isHQ ? LQ_ICON : HQ_ICON; | |||
}, { once: true }); | |||
} | |||
function initViewer(viewer) { | |||
if (viewer.dataset.modelViewerEnhanced) { | |||
return; | |||
} | |||
viewer.dataset.modelViewerEnhanced = '1'; | |||
updateViewerSize(viewer); | |||
const wrapper = document.createElement('div'); | |||
wrapper.className = 'mv-quality-container'; | |||
viewer.parentNode.insertBefore(wrapper, viewer); | |||
wrapper.appendChild(viewer); | |||
const button = document.createElement('button'); | |||
button.className = 'mv-quality-toggle'; | |||
button.type = 'button'; | |||
button.title = 'Switch quality'; | |||
const icon = document.createElement('img'); | |||
icon.alt = ''; | |||
const isHQ = !viewer.src.endsWith('-compressed.glb'); | |||
icon.src = isHQ ? HQ_ICON : LQ_ICON; | |||
button.appendChild(icon); | |||
wrapper.appendChild(button); | |||
button.addEventListener('click', function () { | |||
switchModel(viewer, icon); | |||
}); | |||
} | |||
function init() { | |||
document.querySelectorAll('model-viewer').forEach(initViewer); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', init); | |||
} else { | |||
init(); | |||
} | |||
window.addEventListener('resize', function () { | |||
document.querySelectorAll('model-viewer').forEach(updateViewerSize); | |||
}); | |||
})(); | |||