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