Add model preview to upload page

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
2024-11-03 14:05:18 -07:00
parent a3a9902070
commit fcb14a0cde
4 changed files with 64 additions and 0 deletions

3
modules/glmv-upl.css Normal file
View File

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

35
modules/glmv-upl.js Normal file
View File

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