From fcb14a0cdef6783e70e4734f22cfaee6eabdb30f Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sun, 3 Nov 2024 14:05:18 -0700 Subject: [PATCH 1/3] Add model preview to upload page Signed-off-by: Justin Georgi --- extension.json | 9 +++++++++ includes/GlModelHooks.php | 17 +++++++++++++++++ modules/glmv-upl.css | 3 +++ modules/glmv-upl.js | 35 +++++++++++++++++++++++++++++++++++ 4 files changed, 64 insertions(+) create mode 100644 modules/glmv-upl.css create mode 100644 modules/glmv-upl.js diff --git a/extension.json b/extension.json index f2fcf2c..5cb1f38 100644 --- a/extension.json +++ b/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" + ] } } } \ No newline at end of file diff --git a/includes/GlModelHooks.php b/includes/GlModelHooks.php index 9ac6e7b..e224910 100644 --- a/includes/GlModelHooks.php +++ b/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 * diff --git a/modules/glmv-upl.css b/modules/glmv-upl.css new file mode 100644 index 0000000..a400ba8 --- /dev/null +++ b/modules/glmv-upl.css @@ -0,0 +1,3 @@ +.mv-preview { + pointer-events: none; +} \ No newline at end of file diff --git a/modules/glmv-upl.js b/modules/glmv-upl.js new file mode 100644 index 0000000..2551b86 --- /dev/null +++ b/modules/glmv-upl.js @@ -0,0 +1,35 @@ +/** + * Generate previews when glb or gltf files selected + * for upload + * + * @param {Event} e + */ +checkForGltf = function (e) { + fileName = e.target.value + if (fileName.match(/(.gl(?:b|(?:tf))$)/)) { + const mvPreview = document.createElement('model-viewer') + mvPreview.style['width'] = '180px' + mvPreview.style['height'] = '180px' + mvPreview.toggleAttribute('auto-rotate') + mvPreview.setAttribute('auto-rotate-delay',3000) + + const dThumbIn = document.createElement('div') + dThumbIn.classList.add('thumbinner') + dThumbIn.appendChild(mvPreview) + + 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) + },{once: true}) + reader.readAsDataURL(e.target.files[0]) + } +} + +$('#wpUploadFile').on('change', checkForGltf) -- 2.49.1 From 8b657f30771427bea398f8b311a80f06593f1b4f Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sun, 3 Nov 2024 14:22:43 -0700 Subject: [PATCH 2/3] Clean up unsed preview Signed-off-by: Justin Georgi --- modules/glmv-upl.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/modules/glmv-upl.js b/modules/glmv-upl.js index 2551b86..9da4e71 100644 --- a/modules/glmv-upl.js +++ b/modules/glmv-upl.js @@ -10,8 +10,6 @@ checkForGltf = function (e) { const mvPreview = document.createElement('model-viewer') mvPreview.style['width'] = '180px' mvPreview.style['height'] = '180px' - mvPreview.toggleAttribute('auto-rotate') - mvPreview.setAttribute('auto-rotate-delay',3000) const dThumbIn = document.createElement('div') dThumbIn.classList.add('thumbinner') @@ -27,8 +25,12 @@ checkForGltf = function (e) { const reader = new FileReader() reader.addEventListener("load", () => { $('model-viewer').attr('src',reader.result) - },{once: true}) + $('model-viewer').attr('auto-rotate-delay',3000) + $('model-viewer')[0].toggleAttribute('auto-rotate') + },{once: true}) reader.readAsDataURL(e.target.files[0]) + } else { + $('#glmv-upload-thumbnail').remove() } } -- 2.49.1 From 56aa552e8a33059837e5dc9a70fb626898045d05 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sun, 3 Nov 2024 16:58:41 -0700 Subject: [PATCH 3/3] Add preview caption Signed-off-by: Justin Georgi --- modules/glmv-upl.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/modules/glmv-upl.js b/modules/glmv-upl.js index 9da4e71..a3ef9e2 100644 --- a/modules/glmv-upl.js +++ b/modules/glmv-upl.js @@ -5,15 +5,30 @@ * @param {Event} e */ checkForGltf = function (e) { - fileName = e.target.value - if (fileName.match(/(.gl(?:b|(?:tf))$)/)) { + 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' @@ -28,7 +43,7 @@ checkForGltf = function (e) { $('model-viewer').attr('auto-rotate-delay',3000) $('model-viewer')[0].toggleAttribute('auto-rotate') },{once: true}) - reader.readAsDataURL(e.target.files[0]) + reader.readAsDataURL(fileInfo) } else { $('#glmv-upload-thumbnail').remove() } -- 2.49.1