Modularize Script in boneset.html

templates/boneset.html

@@ -22,7 +22,6 @@
     </div>
 
     <div id="sidebar-container"></div>
-    <script src="sidebar.js"></script>
 
     <div id="editor-view">
         <div class="container">
@@ -56,114 +55,7 @@ <h3>Description</h3>
         </div>
     </div>
 
-    <script>
-        const API_URL = 'http://127.0.0.1:8000/combined-data';
-        const GITHUB_RAW_URL = 'https://raw.githubusercontent.com/oss-slu/DigitalBonesBox/data/DataPelvis/descriptions/';
-
-        let combinedData = { bonesets: [], bones: [], subbones: [] };
-
-        async function fetchCombinedData() {
-            try {
-                const response = await fetch(API_URL);
-                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-                return await response.json();
-            } catch (error) {
-                console.error("Error fetching data:", error);
-                alert("Failed to load data.");
-                return { bonesets: [], bones: [], subbones: [] };
-            }
-        }
-
-        function populateDropdowns() {
-            const bonesetSelect = document.getElementById('boneset-select');
-            bonesetSelect.innerHTML = '<option value="">--Please select a Boneset--</option>';
-            combinedData.bonesets.forEach(set => {
-                const option = document.createElement('option');
-                option.value = set.id;
-                option.textContent = set.name;
-                bonesetSelect.appendChild(option);
-            });
-        }
-
-        document.getElementById('boneset-select').addEventListener('change', (e) => {
-            const selectedBonesetId = e.target.value;
-            const boneSelect = document.getElementById('bone-select');
-            const subboneSelect = document.getElementById('subbone-select');
-
-            boneSelect.innerHTML = '<option value="">--Please select a Bone--</option>';
-            subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
-            subboneSelect.disabled = true;
-
-            const relatedBones = combinedData.bones.filter(b => b.boneset === selectedBonesetId);
-            relatedBones.forEach(bone => {
-                const option = document.createElement('option');
-                option.value = bone.id;
-                option.textContent = bone.name;
-                boneSelect.appendChild(option);
-            });
-
-            boneSelect.disabled = false;
-            loadDescription(selectedBonesetId);
-        });
-
-        document.getElementById('bone-select').addEventListener('change', (e) => {
-            const selectedBoneId = e.target.value;
-            const subboneSelect = document.getElementById('subbone-select');
-
-            subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
-            const relatedSubbones = combinedData.subbones.filter(sb => sb.bone === selectedBoneId);
-            relatedSubbones.forEach(sb => {
-                const option = document.createElement('option');
-                option.value = sb.id;
-                option.textContent = sb.name;
-                subboneSelect.appendChild(option);
-            });
-
-            subboneSelect.disabled = relatedSubbones.length === 0;
-            loadDescription(selectedBoneId);
-        });
-
-        document.getElementById('subbone-select').addEventListener('change', (e) => {
-            const selectedSubboneId = e.target.value;
-            if (selectedSubboneId) loadDescription(selectedSubboneId);
-        });
-
-        async function loadDescription(id) {
-            const container = document.getElementById('description-Container');
-            container.innerHTML = "";
-            const descUrl = `${GITHUB_RAW_URL}${id}_description.json`;
-
-            try {
-                const response = await fetch(descUrl);
-                const data = await response.json();
-
-                const nameItem = document.createElement('li');
-                nameItem.innerHTML = `<strong>${data.name}</strong>`;
-                container.appendChild(nameItem);
-
-                data.description.forEach(point => {
-                    const li = document.createElement('li');
-                    li.textContent = point;
-                    container.appendChild(li);
-                });
-            } catch (error) {
-                container.innerHTML = "<li>Error loading description.</li>";
-                console.error("Failed to fetch description:", error);
-            }
-        }
-
-        document.addEventListener('DOMContentLoaded', async () => {
-            combinedData = await fetchCombinedData();
-            populateDropdowns();
-
-            const boneset = combinedData.bonesets[0];
-            if (boneset) {
-                document.getElementById('boneset-select').value = boneset.id;
-                const event = new Event('change');
-                document.getElementById('boneset-select').dispatchEvent(event);
-            }
-        });
-    </script>
+    <script type="module" src="js/main.js"></script>
 </body>
 
 </html>

templates/js/api.js

@@ -0,0 +1,14 @@
+// js/api.js
+export async function fetchCombinedData() {
+    const API_URL = 'http://127.0.0.1:8000/combined-data';
+
+    try {
+        const response = await fetch(API_URL);
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+        return await response.json();
+    } catch (error) {
+        console.error("Error fetching combined data:", error);
+        alert("Failed to load data.");
+        return { bonesets: [], bones: [], subbones: [] };
+    }
+}

templates/js/description.js

@@ -0,0 +1,26 @@
+// js/description.js
+const GITHUB_RAW_URL = 'https://raw.githubusercontent.com/oss-slu/DigitalBonesBox/data/DataPelvis/descriptions/';
+
+export async function loadDescription(id) {
+    const container = document.getElementById('description-Container');
+    container.innerHTML = "";
+    const descUrl = `${GITHUB_RAW_URL}${id}_description.json`;
+
+    try {
+        const response = await fetch(descUrl);
+        const data = await response.json();
+
+        const nameItem = document.createElement('li');
+        nameItem.innerHTML = `<strong>${data.name}</strong>`;
+        container.appendChild(nameItem);
+
+        data.description.forEach(point => {
+            const li = document.createElement('li');
+            li.textContent = point;
+            container.appendChild(li);
+        });
+    } catch (error) {
+        container.innerHTML = "<li>Error loading description.</li>";
+        console.error("Failed to fetch description:", error);
+    }
+}

templates/js/dropdowns.js

@@ -0,0 +1,60 @@
+// js/dropdowns.js
+import { loadDescription } from './description.js';
+
+export function populateBonesetDropdown(bonesets) {
+    const bonesetSelect = document.getElementById('boneset-select');
+    bonesetSelect.innerHTML = '<option value="">--Please select a Boneset--</option>';
+
+    bonesets.forEach(set => {
+        const option = document.createElement('option');
+        option.value = set.id;
+        option.textContent = set.name;
+        bonesetSelect.appendChild(option);
+    });
+}
+
+export function setupDropdownListeners(combinedData) {
+    const bonesetSelect = document.getElementById('boneset-select');
+    const boneSelect = document.getElementById('bone-select');
+    const subboneSelect = document.getElementById('subbone-select');
+
+    bonesetSelect.addEventListener('change', (e) => {
+        const selectedBonesetId = e.target.value;
+
+        boneSelect.innerHTML = '<option value="">--Please select a Bone--</option>';
+        subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
+        subboneSelect.disabled = true;
+
+        const relatedBones = combinedData.bones.filter(b => b.boneset === selectedBonesetId);
+        relatedBones.forEach(bone => {
+            const option = document.createElement('option');
+            option.value = bone.id;
+            option.textContent = bone.name;
+            boneSelect.appendChild(option);
+        });
+
+        boneSelect.disabled = relatedBones.length === 0;
+        if (selectedBonesetId) loadDescription(selectedBonesetId);
+    });
+
+    boneSelect.addEventListener('change', (e) => {
+        const selectedBoneId = e.target.value;
+
+        subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
+        const relatedSubbones = combinedData.subbones.filter(sb => sb.bone === selectedBoneId);
+        relatedSubbones.forEach(sb => {
+            const option = document.createElement('option');
+            option.value = sb.id;
+            option.textContent = sb.name;
+            subboneSelect.appendChild(option);
+        });
+
+        subboneSelect.disabled = relatedSubbones.length === 0;
+        if (selectedBoneId) loadDescription(selectedBoneId);
+    });
+
+    subboneSelect.addEventListener('change', (e) => {
+        const selectedSubboneId = e.target.value;
+        if (selectedSubboneId) loadDescription(selectedSubboneId);
+    });
+}

templates/js/main.js

@@ -0,0 +1,23 @@
+// js/main.js
+import { fetchCombinedData } from './api.js';
+import { populateBonesetDropdown, setupDropdownListeners } from './dropdowns.js';
+import { initializeSidebar } from './sidebar.js';
+
+let combinedData = { bonesets: [], bones: [], subbones: [] };
+
+document.addEventListener('DOMContentLoaded', async () => {
+    // Initialize sidebar toggle behavior
+    initializeSidebar();
+
+    // Fetch and render bone data
+    combinedData = await fetchCombinedData();
+    populateBonesetDropdown(combinedData.bonesets);
+    setupDropdownListeners(combinedData);
+
+    const boneset = combinedData.bonesets[0];
+    if (boneset) {
+        document.getElementById('boneset-select').value = boneset.id;
+        const event = new Event('change');
+        document.getElementById('boneset-select').dispatchEvent(event);
+    }
+});

templates/js/sidebar.js

@@ -0,0 +1,32 @@
+// js/sidebar.js
+export function initializeSidebar() {
+    const toggleButton = document.getElementById('toggle-sidebar');
+    const sidebarContainer = document.getElementById('sidebar-container');
+
+    async function loadSidebar() {
+        if (!sidebarContainer.innerHTML) {
+            try {
+                const response = await fetch('sidebar.html');
+                const sidebarHTML = await response.text();
+                sidebarContainer.innerHTML = sidebarHTML;
+            } catch (error) {
+                console.error('Error loading sidebar:', error);
+            }
+        }
+    }
+
+    if (toggleButton) {
+        toggleButton.addEventListener('click', async () => {
+            await loadSidebar(); // Ensure the sidebar is loaded
+            const sidebarElement = document.getElementById('sidebar');
+
+            if (sidebarElement) {
+                if (sidebarElement.style.left === '0px') {
+                    sidebarElement.style.left = '-250px'; // Close sidebar
+                } else {
+                    sidebarElement.style.left = '0px'; // Open sidebar
+                }
+            }
+        });
+    }
+}