User:Monster Domosed/common.js: Difference between revisionsGive feedback
Remove HQ/LQ model switching; keep preview/actual model toggle (with Domosed MCP) |
Optimize model viewer: cache file URLs, debounce scan, remove dead code, add error handling (with Domosed MCP) |
||
| Line 1: | Line 1: | ||
(function () { | (function () { | ||
'use strict'; | 'use strict'; | ||
const urlCache = new Map(); | |||
function getSize(element) { | function getSize(element) { | ||
| Line 8: | Line 10: | ||
function getFileUrl(fileName) { | function getFileUrl(fileName) { | ||
if (urlCache.has(fileName)) { | |||
return urlCache.get(fileName); | |||
} | |||
const apiUrl = | const apiUrl = | ||
mw.config.get('wgScriptPath') + | mw.config.get('wgScriptPath') + | ||
| Line 16: | Line 22: | ||
'&format=json'; | '&format=json'; | ||
const promise = fetch(apiUrl) | |||
.then(function (response) { | .then(function (response) { | ||
if (!response.ok) { | |||
throw new Error('API request failed'); | |||
} | |||
return response.json(); | return response.json(); | ||
}) | }) | ||
.then(function (data) { | .then(function (data) { | ||
const page = Object.values(data.query.pages)[0]; | 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; | |||
} | } | ||
| Line 49: | Line 59: | ||
const container = document.createElement('div'); | const container = document.createElement('div'); | ||
container.className = 'model-viewer-container'; | container.className = 'model-viewer-container'; | ||
container.style.width = size + 'px'; | container.style.width = size + 'px'; | ||
container.style.height = size + 'px'; | container.style.height = size + 'px'; | ||
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', ''); | ||
| Line 60: | Line 68: | ||
container.appendChild(viewer); | container.appendChild(viewer); | ||
preview.replaceWith(container); | preview.replaceWith(container); | ||
}); | }); | ||
} | } | ||
| Line 88: | Line 80: | ||
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'; | ||
button.addEventListener('click', function () { | button.addEventListener('click', function () { | ||
loadModel(preview); | loadModel(preview); | ||
| Line 103: | Line 93: | ||
.querySelectorAll('.model-placeholder') | .querySelectorAll('.model-placeholder') | ||
.forEach(initPreview); | .forEach(initPreview); | ||
} | |||
let scanTimer = null; | |||
function debouncedScan() { | |||
clearTimeout(scanTimer); | |||
scanTimer = setTimeout(scan, 100); | |||
} | } | ||
scan(); | scan(); | ||
const observer = new MutationObserver( | const observer = new MutationObserver(debouncedScan); | ||
observer.observe(document.body, { | observer.observe(document.body, { | ||
childList: true, | childList: true, | ||