Add file page model display

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

extension.json

@@ -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",

includes/GlModelViewer.php

@@ -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);
+    return 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;
   }
 
   public static function console_log($data, $add_script_tags = false) {

modules/glmv.js

@@ -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;