bugfix: Fix O3DV script since it broke in 1.24.0 (#231)

Reviewed-on: https://gitea.com/gitea/docs/pulls/231
Reviewed-by: Lunny Xiao <[email protected]>
Co-authored-by: recoolcz <[email protected]>
Co-committed-by: recoolcz <[email protected]>
This commit is contained in:
recoolcz
2025-06-16 17:10:30 +00:00
committed by Lunny Xiao
parent c8ebd4e896
commit 3a82ab51f3
+114 -51
View File
@@ -180,9 +180,13 @@ In $GITEA_CUSTOM we need to add our template.
This template needs to be saved in "$GITEA_CUSTOM/templates/custom/". This template needs to be saved in "$GITEA_CUSTOM/templates/custom/".
Here create file "footer.tmpl" and add following text into it: Here create file "footer.tmpl" and add following text into it:
```
nano $GITEA_CUSTOM/templates/custom/footer.tmpl
```
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded', () => { function onPageChange() {
// Supported 3D file types // Supported 3D file types
const fileTypes = ['3dm', '3ds', '3mf', 'amf', 'bim', 'brep', 'dae', 'fbx', 'fcstd', 'glb', 'gltf', 'ifc', 'igs', 'iges', 'stp', 'step', 'stl', 'obj', 'off', 'ply', 'wrl']; const fileTypes = ['3dm', '3ds', '3mf', 'amf', 'bim', 'brep', 'dae', 'fbx', 'fcstd', 'glb', 'gltf', 'ifc', 'igs', 'iges', 'stp', 'step', 'stl', 'obj', 'off', 'ply', 'wrl'];
@@ -193,47 +197,112 @@ Here create file "footer.tmpl" and add following text into it:
return href.includes('/raw/') && fileTypes.some(ext => href.endsWith(`.${ext}`)); return href.includes('/raw/') && fileTypes.some(ext => href.endsWith(`.${ext}`));
}); });
if (link3D) { if (link3D) {
const script = document.createElement('script'); const existingScript = document.querySelector('script[src="/assets/o3dv/o3dv.min.js"]');
script.onload = () => {
const fileUrl = link3D.getAttribute('href'); const initializeViewer = () => {
const fileUrl = link3D.getAttribute('href');
// Prepare the container for the viewer
const fileView = document.querySelector('.file-view'); const fileView = document.querySelector('.file-view');
if (fileView) {
fileView.setAttribute('id', 'view-3d'); if (!fileView) return;
fileView.style.padding = '0';
fileView.style.margin = '0'; // Remove only the old viewer container if it exists
fileView.style.height = '400px'; const oldView3D = document.getElementById('view-3d');
fileView.style.width = '100%'; if (oldView3D) {
fileView.innerHTML = ''; oldView3D.remove(); // safely remove old viewer container div
} } else {
// No #view-3d, so remove all children inside .file-view
// Initialize viewer while (fileView.firstChild) {
const parentDiv = document.getElementById('view-3d'); fileView.removeChild(fileView.firstChild);
if (parentDiv) { }
const viewer = new OV.EmbeddedViewer(parentDiv, { }
backgroundColor: new OV.RGBAColor(59, 68, 76, 0), // Transparent
defaultColor: new OV.RGBColor(200, 200, 200), // Create a new container for the viewer
edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1), const newView3D = document.createElement('div');
environmentSettings: new OV.EnvironmentSettings([ newView3D.id = 'view-3d';
'/assets/o3dv/envmaps/fishermans_bastion/negx.jpg', newView3D.style.padding = '0';
'/assets/o3dv/envmaps/fishermans_bastion/posx.jpg', newView3D.style.margin = '0';
'/assets/o3dv/envmaps/fishermans_bastion/posy.jpg', newView3D.style.flexGrow = '1';
'/assets/o3dv/envmaps/fishermans_bastion/negy.jpg', newView3D.style.minHeight = '0';
'/assets/o3dv/envmaps/fishermans_bastion/posz.jpg', newView3D.style.width = '100%';
'/assets/o3dv/envmaps/fishermans_bastion/negz.jpg'
], false) const header = document.querySelector('header');
}); const headerHeight = header ? header.offsetHeight : 0;
// Load the model newView3D.style.height = `calc(100vh - ${headerHeight}px)`;
viewer.LoadModelFromUrlList([fileUrl]);
} // Append the new container inside fileView
}; fileView.appendChild(newView3D);
script.src = '/assets/o3dv/o3dv.min.js'; const parentDiv = document.getElementById('view-3d');
document.head.appendChild(script); if (parentDiv) {
const viewer = new OV.EmbeddedViewer(parentDiv, {
backgroundColor: new OV.RGBAColor(59, 68, 76, 0),
defaultColor: new OV.RGBColor(200, 200, 200),
edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
environmentSettings: new OV.EnvironmentSettings([
'/assets/o3dv/envmaps/fishermans_bastion/negx.jpg',
'/assets/o3dv/envmaps/fishermans_bastion/posx.jpg',
'/assets/o3dv/envmaps/fishermans_bastion/posy.jpg',
'/assets/o3dv/envmaps/fishermans_bastion/negy.jpg',
'/assets/o3dv/envmaps/fishermans_bastion/posz.jpg',
'/assets/o3dv/envmaps/fishermans_bastion/negz.jpg'
], false)
});
viewer.LoadModelFromUrlList([fileUrl]);
}
};
if (typeof OV === 'undefined') {
if (!existingScript) {
const script = document.createElement('script');
script.onload = initializeViewer;
script.src = '/assets/o3dv/o3dv.min.js';
document.head.appendChild(script);
} else {
// Script is loading but OV not yet ready — wait for it
existingScript.addEventListener('load', initializeViewer);
}
} else {
// OV already loaded
initializeViewer();
}
}
};
// Run when the page is fully loaded
document.addEventListener('DOMContentLoaded', onPageChange);
const targetSelector = 'a.ui.mini.basic.button[href*="/raw/"]';
let lastHref = null;
let timeoutId = null;
const checkAndRun = () => {
const rawLink = document.querySelector(targetSelector);
if (!rawLink) return;
const currentHref = rawLink.getAttribute('href');
if (currentHref !== lastHref) {
lastHref = currentHref;
const fileName = currentHref.split('/').pop();
console.log('New Raw file link detected after delay:', fileName);
onPageChange();
} }
};
const observer = new MutationObserver(() => {
// Delay execution by 300ms after last mutation
clearTimeout(timeoutId);
timeoutId = setTimeout(checkAndRun, 300);
});
observer.observe(document.body, {
childList: true,
subtree: true,
}); });
</script> </script>
``` ```
@@ -248,11 +317,11 @@ mkdir o3dv
cd o3dv cd o3dv
``` ```
Copy latest release zip link from [`GitHub`](https://github.com/kovacsv/Online3DViewer/releases) (v0.15.0 as of now). Copy latest release zip link from [`GitHub`](https://github.com/kovacsv/Online3DViewer/releases) (v0.16.0 as of now).
Here use e.g. wget to download the file: Here use e.g. wget to download the file:
``` ```
wget https://github.com/kovacsv/Online3DViewer/releases/download/0.15.0/o3dv.zip wget https://github.com/kovacsv/Online3DViewer/releases/download/0.16.0/o3dv.zip
``` ```
Use e.g. unzip to unzip the archive: Use e.g. unzip to unzip the archive:
@@ -262,20 +331,14 @@ unzip o3dv.zip
#### Part 3: Folder permissions #### Part 3: Folder permissions
Now the last thing. Change permissions on the "footer.tmpl": Now the last thing. Change permissions on the public folder:
```
chown git:git $GITEA_CUSTOM/templates/custom/footer.tmpl
chmod 770 $GITEA_CUSTOM/templates/custom/footer.tmpl
```
And on the public folder:
``` ```
chown -R git:git $GITEA_CUSTOM/public chown -R git:git $GITEA_CUSTOM/public
``` ```
Now we have everything ready! Restart your gitea instance to apply these changes and test it in your browser. Now we have everything ready! Restart your gitea instance to apply these changes and test it in your browser.
You should end-up with a folder structure similar to this: Sanity check. You should end-up with a folder structure similar to this:
``` ```
$GITEA_CUSTOM/templates $GITEA_CUSTOM/templates