Issue #112

js/main.js

@@ -0,0 +1,42 @@
+import { setupNavigation, setBoneAndSubbones, disableButtons } from './navigation.js';
+import { updateDescription } from './description.js'; // Assuming you already have this
+
+document.addEventListener('DOMContentLoaded', () => {
+  const prevButton = document.getElementById('prev-button');
+  const nextButton = document.getElementById('next-button');
+  const subboneDropdown = document.getElementById('subbone-dropdown');
+
+  setupNavigation(prevButton, nextButton, subboneDropdown, updateDescription);
+
+  // Example: when a new bone is selected
+  document.getElementById('bone-dropdown').addEventListener('change', (event) => {
+    const selectedBone = event.target.value;
+    const selectedSubbones = getSubbonesForBone(selectedBone); // You need to implement this
+
+    setBoneAndSubbones(selectedBone, selectedSubbones);
+
+    // Update the dropdown options
+    populateSubboneDropdown(subboneDropdown, selectedSubbones);
+
+    disableButtons(prevButton, nextButton);
+  });
+});
+
+function populateSubboneDropdown(dropdown, subbones) {
+  dropdown.innerHTML = '';
+  subbones.forEach((subbone, index) => {
+    const option = document.createElement('option');
+    option.value = index;
+    option.textContent = subbone;
+    dropdown.appendChild(option);
+  });
+}
+
+// Dummy placeholder for subbones fetching
+function getSubbonesForBone(bone) {
+  const exampleData = {
+    Humerus: ['Lateral Epicondyle', 'Medial Epicondyle'],
+    Ulna: ['Olecranon', 'Coronoid Process']
+  };
+  return exampleData[bone] || [];
+}

js/navigation.js

@@ -0,0 +1,49 @@
+let currentBone = null;
+let currentSubboneIndex = -1;
+let subbones = [];
+
+export function setupNavigation(prevButton, nextButton, subboneDropdown, updateDescription) {
+  prevButton.addEventListener('click', () => {
+    prevSubbone();
+    updateUI(subboneDropdown, updateDescription);
+  });
+
+  nextButton.addEventListener('click', () => {
+    nextSubbone();
+    updateUI(subboneDropdown, updateDescription);
+  });
+
+  disableButtons(prevButton, nextButton);
+}
+
+export function setBoneAndSubbones(bone, boneSubbones) {
+  currentBone = bone;
+  subbones = boneSubbones || [];
+  currentSubboneIndex = subbones.length > 0 ? 0 : -1;
+}
+
+function prevSubbone() {
+  if (currentSubboneIndex > 0) {
+    currentSubboneIndex--;
+  }
+}
+
+function nextSubbone() {
+  if (currentSubboneIndex < subbones.length - 1) {
+    currentSubboneIndex++;
+  }
+}
+
+function updateUI(subboneDropdown, updateDescription) {
+  if (subbones.length === 0 || currentSubboneIndex === -1) return;
+
+  subboneDropdown.selectedIndex = currentSubboneIndex;
+  const selectedSubbone = subbones[currentSubboneIndex];
+  updateDescription(selectedSubbone);
+}
+
+export function disableButtons(prevButton, nextButton) {
+  const disabled = subbones.length === 0;
+  prevButton.disabled = disabled;
+  nextButton.disabled = disabled;
+}

templates/boneset.html

@@ -54,8 +54,8 @@ <h3>Description</h3>
             </div>
         </div>
     </div>
-
     <script type="module" src="js/main.js"></script>
+
 </body>
 
 </html>