Add model previews on upload (#27)

Closes #22

This modifies the upload form to allow for a preview of models.

Reviewed-on: #27

extension.json

@@ -14,6 +14,7 @@
 	    "model/gltf-binary": "MediaWiki\\Extension\\GlModelViewer\\GlModelHandler"
     },
     "Hooks": {
+        "UploadFormInitDescriptor": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onUploadFormInitDescriptor",
         "MimeMagicInit": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicInit",
         "MimeMagicImproveFromExtension": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicImproveFromExtension",
         "BeforePageDisplay": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onBeforePageDisplay",
@@ -38,6 +39,14 @@
 				"mediawiki.util",
 				"mediawiki.api"
 			]
+        },
+        "ext.glmv.upl": {
+            "styles": [
+                "glmv-upl.css"
+            ],
+            "packageFiles": [
+                "glmv-upl.js"
+            ]
         }
     }
 }

includes/GlModelHooks.php

@@ -2,6 +2,7 @@
 namespace MediaWiki\Extension\GlModelViewer;
 
 use MediaWiki\MediaWikiServices;
+use RequestContext;
 use Html;
 use ParserOutput;
 
@@ -100,6 +101,22 @@ class GlModelHooks {
         return false;
     }
 
+    /**
+     * MWHook: Occurs after the descriptor for the upload form as been assembled.
+     * 
+     * @param $descriptor the HTMLForm descriptor
+     */
+    public static function onUploadFormInitDescriptor( $descriptor ) {
+        $context = RequestContext::getMain();
+        $out = $context->getOutput();
+        $mvScriptAttr = array(
+            'src' => 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js',
+            'type' => 'module'
+            );
+        $out->addHeadItems(Html::rawElement('script',$mvScriptAttr));
+        $out->addModules('ext.glmv.upl');
+    }
+
     /**
      * Small helper function to display information on the browser console
      * 

modules/glmv-upl.css

@@ -0,0 +1,3 @@
+.mv-preview {
+    pointer-events: none;
+}

modules/glmv-upl.js

@@ -0,0 +1,52 @@
+/**
+ * Generate previews when glb or gltf files selected
+ * for upload
+ * 
+ * @param {Event} e
+ */
+checkForGltf = function (e) {
+    const fileInfo = e.target.files[0]
+    if (fileInfo.name.match(/(.gl(?:b|(?:tf))$)/) && fileInfo.type == 'model/gltf-binary') {
+        const mvPreview = document.createElement('model-viewer')
+        mvPreview.style['width'] = '180px'
+        mvPreview.style['height'] = '180px'
+
+        const dThumbCap = document.createElement('div')
+        dThumbCap.classList.add('thumbcaption')
+
+        const dThumbName = document.createElement('div')
+        dThumbName.classList.add('filename')
+        dThumbName.innerHTML = fileInfo.name
+
+        const dThumbInfo = document.createElement('div')
+        dThumbInfo.classList.add('fileinfo')
+        dThumbInfo.innerHTML = (fileInfo.size / 1024 / 1024).toFixed(1) + 'MB'
+
+        dThumbCap.appendChild(dThumbName)
+        dThumbCap.appendChild(dThumbInfo)
+
+        const dThumbIn = document.createElement('div')
+        dThumbIn.classList.add('thumbinner')
+        dThumbIn.appendChild(mvPreview)
+        dThumbIn.appendChild(dThumbCap)
+
+        const dThumb = document.createElement('div')
+        dThumb.id = 'glmv-upload-thumbnail'
+        dThumb.classList.add('thumb', 'tright')
+        dThumb.appendChild(dThumbIn)
+
+        $('#mw-htmlform-source').before(dThumb)
+
+        const reader = new FileReader()
+        reader.addEventListener("load", () => {
+            $('model-viewer').attr('src',reader.result)
+            $('model-viewer').attr('auto-rotate-delay',3000)
+            $('model-viewer')[0].toggleAttribute('auto-rotate')
+        },{once: true})
+        reader.readAsDataURL(fileInfo)
+    } else {
+        $('#glmv-upload-thumbnail').remove()
+    }
+}
+
+$('#wpUploadFile').on('change', checkForGltf)