jgeorgi/GlModelViewer
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add file page model display

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-23 10:19:30 -07:00
parent 36f8cbe04b
commit 134d9203de
3 changed files with 25 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
extension.json
View File

@@ -3,7 +3,7 @@
"author": "Justin Georgi",
"url": "https://gitea.azgeorgis.net/jgeorgi/mwModelViewer",
"description": "This extension allows .glb and .gltf files to be added, displayed, and annotated in MediaWiki",
"version": "0.0.4",
"version": "0.0.5",
"license-name": "MIT",
"type": "media",
"manifest_version": 2,
@@ -14,7 +14,8 @@
"MimeMagicInit": "GlModelViewer::onMimeMagicInit",
"MimeMagicImproveFromExtension": "GlModelViewer::onMimeMagicImproveFromExtension",
"BeforePageDisplay": "GlModelViewer::onBeforePageDisplay",
"ImageBeforeProduceHTML": "GlModelViewer::onImageBeforeProduceHTML"
"ImageBeforeProduceHTML": "GlModelViewer::onImageBeforeProduceHTML",
"ImageOpenShowImageInlineBefore": "GlModelViewer::onImageOpenShowImageInlineBefore"
},
"ResourceFileModulePaths": {
"localBasePath": "modules",

31
includes/GlModelViewer.php
View File

@@ -26,6 +26,26 @@ class GlModelViewer extends ImageHandler {
if ($file->getMimeType() !== 'model/gltf-binary') {
return true;
}
$result = self::buildViewer($file,$frameParams);
return false;
}
public static function onImageOpenShowImageInlineBefore( $imagepage, $out ){
$file = $imagepage->getFile();
if ($file->getMimeType() !== 'model/gltf-binary') {
return;
}
$out->addModules('ext.glmv');
$viewer = self::buildViewer($file,['class' => 'view-default']);
$out->addHtml(Html::rawElement('div',['id' => 'file', 'class' => 'fullModelView'],$viewer));
#echo '<script>';
#self::console_log($imagepage->getFile()->getFullUrl());
#self::console_log($imagepage->getFile()->getDescriptionText());
#self::console_log($out);
#echo '</script>';
}
private static function buildViewer($file, $frameParams) {
preg_match('/<pre>([\S\s]*?)<\/pre>/',$file->getDescriptionText(),$modelDescript);
$metadata = json_decode($modelDescript[1], true);
if (isset($frameParams['class'])) {
@@ -51,7 +71,7 @@ class GlModelViewer extends ImageHandler {
}
}
$attrModelView = $metadata['viewerConfig'][$viewClass];
$attrModelView = array_merge(['src' => $file->getFullUrl(), 'class' => 'mv-model'], $attrModelView);
$attrModelView = array_merge(['src' => $file->getFullUrl(), 'class' => 'mv-model', 'interpolation-decay' => '100'], $attrModelView);
$attrModelView['style'] = 'width: 100%; height: 100%; min-height: 400px;';
$elModel = Html::rawElement('model-viewer', $attrModelView, implode($hotspots));
$attrContainer = array(
@@ -59,14 +79,7 @@ class GlModelViewer extends ImageHandler {
'onmousedown' => 'clearAnnotations()',
'ontouchstart' => 'clearAnnotations()'
);
$result = Html::rawElement('div', $attrContainer, $elModel);
echo '<script>';
#GlModelViewer::console_log($handlerParams);
#GlModelViewer::console_log($frameParams['class']);
#GlModelViewer::console_log($file->getDescriptionText());
#GlModelViewer::console_log($metadata->viewerConfig->default);
echo '</script>';
return false;
return Html::rawElement('div', $attrContainer, $elModel);
}
public static function console_log($data, $add_script_tags = false) {

66
modules/glmv.js
View File

@@ -4,72 +4,6 @@ modelLoad.setAttribute('src','https://ajax.googleapis.com/ajax/libs/model-viewer
let headElem = document.getElementsByTagName('head')[0]
headElem.appendChild(modelLoad)
/*
let urlProm, dataProm
let isFilePageImage = false
let glbElems = document.querySelectorAll('.mw-body-content [href$=".glb"][title$=".glb"')
if (glbElems.length > 0) {
[...glbElems].forEach((ge, idx) => {
console.log(ge)
const modelRef = ge.href
const modelTitle = ge.title
isFilePageImage = false
if (idx == 0
&& $('.mw-page-title-namespace').text() == 'File'
&& $('.mw-page-title-main').text() == modelTitle) {
isFilePageImage = true
}
if (modelRef.indexOf('File:') >= 0) {
urlProm = getModelUrl(modelTitle)
dataProm = getModelMeta(modelTitle)
} else {
urlProm = new Promise(resolve => {
resolve(modelRef)
})
dataProm = getModelMeta('File:' + modelTitle)
}
Promise.all([urlProm, dataProm]).then((modelInfo) => {
console.log(modelInfo[0])
const newModel = document.createElement('model-viewer')
newModel.src = modelInfo[0]
newModel.toggleAttribute('camera-controls')
newModel.toggleAttribute('ar')
newModel.style.width='800px'
newModel.style.height='600px'
if (isFilePageImage) {
ge.parentElement.insertBefore(newModel, ge)
$('.mediaWarning').remove()
} else {
ge.parentElement.replaceChild(newModel, ge)
}
console.log(modelInfo[1])
})
})
}
async function getModelUrl(getTitle) {
const urlApi = new mw.Api;
let urlApiResp = await urlApi.get({
"action": "query",
"format": "json",
"prop": "imageinfo",
"titles": getTitle,
"iiprop": "url"
});
return urlApiResp.query.pages[Object.keys(urlApiResp.query.pages)[0]].imageinfo[0].url
}
async function getModelMeta(getTitle) {
const metaApi = new mw.Api;
let metaApiResp = await metaApi.get({
"action": "parse",
"page": getTitle
});
return JSON.parse($(metaApiResp.parse.text['*']).find('pre').text() || '{}')
}
*/
if (mw.config.values.wgAction == 'submit') {
[...document.getElementsByTagName('model-viewer')].forEach( mv => {
mv.disableTap = true;