Clean up code

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2022 Oliver Tacke
+Copyright (c) 2023 Oliver Tacke
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/scripts/components/panel-list/panel-list.js

@@ -10,6 +10,7 @@ export default class PanelList {
   /**
    * @class
    * @param {object} [params={}] Parameters.
+   * @param {object[]} [params.options] Options for panels.
    * @param {object} [callbacks={}] Callbacks.
    * @param {function} [callbacks.onAnswered] Option was answered.
    */
@@ -34,58 +35,12 @@ export default class PanelList {
     this.dom = document.createElement('ul');
     this.dom.classList.add('h5p-discrete-option-multi-choice-panel-list');
     this.dom.addEventListener('keydown', (event) => {
-      if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
-        if (![...this.dom.childNodes].includes(event.target)) {
-          return; // Only care about panels
-        }
-
-        if (this.currentFocusPanel > 0) {
-          this.currentFocusPanel--;
-          this.focus(this.currentFocusPanel);
-        }
-      }
-      else if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
-        if (![...this.dom.childNodes].includes(event.target)) {
-          return; // Only care about panels
-        }
-
-        if (this.currentFocusPanel < this.dom.childNodes.length - 1) {
-          this.currentFocusPanel++;
-          this.focus(this.currentFocusPanel);
-        }
-      }
-      else if (event.code === 'Home') {
-        if (![...this.dom.childNodes].includes(event.target)) {
-          return; // Only care about panels
-        }
-
-        this.focus(0);
-      }
-      else if (event.code === 'End') {
-        if (![...this.dom.childNodes].includes(event.target)) {
-          return; // Only care about panels
-        }
-
-        this.focus(this.dom.childNodes.length - 1);
-      }
-      else if (event.code === 'Escape') {
-        this.panels.forEach((panel) => {
-          panel.collapse();
-        });
-        this.focus(this.currentFocusPanel);
-      }
-      else {
-        return;
-      }
-
-      event.preventDefault();
+      this.handleKeydown(event);
     });
 
     this.panels = params.options.map((option, index) => {
       return new Panel(
-        {
-          options: option
-        },
+        { options: option },
         {
           onAnswered: (score) => {
             this.handleAnswered(index, score);
@@ -154,12 +109,64 @@ export default class PanelList {
     this.panels.forEach((panel, index) => {
       // Mark expected answer option
       const markOptions = (this.params.options[index].correct) ?
-        ({ correct: true }) :
-        ({ incorrect: true });
+        { correct: true } :
+        { incorrect: true };
       panel.markOption(markOptions);
     });
   }
 
+  /**
+   * Handle keydown. Implements recommended ARIA pattern
+   * @param {KeyboardEvent} event Keyboard event.
+   */
+  handleKeydown(event) {
+    if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
+      if (![...this.dom.childNodes].includes(event.target)) {
+        return; // Only care about panels
+      }
+
+      if (this.currentFocusPanel > 0) {
+        this.currentFocusPanel--;
+        this.focus(this.currentFocusPanel);
+      }
+    }
+    else if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
+      if (![...this.dom.childNodes].includes(event.target)) {
+        return; // Only care about panels
+      }
+
+      if (this.currentFocusPanel < this.dom.childNodes.length - 1) {
+        this.currentFocusPanel++;
+        this.focus(this.currentFocusPanel);
+      }
+    }
+    else if (event.code === 'Home') {
+      if (![...this.dom.childNodes].includes(event.target)) {
+        return; // Only care about panels
+      }
+
+      this.focus(0);
+    }
+    else if (event.code === 'End') {
+      if (![...this.dom.childNodes].includes(event.target)) {
+        return; // Only care about panels
+      }
+
+      this.focus(this.dom.childNodes.length - 1);
+    }
+    else if (event.code === 'Escape') {
+      this.panels.forEach((panel) => {
+        panel.collapse();
+      });
+      this.focus(this.currentFocusPanel);
+    }
+    else {
+      return;
+    }
+
+    event.preventDefault();
+  }
+
   /**
    * Handle user answered.
    * @param {number} index Index of answer option.
@@ -212,7 +219,7 @@ export default class PanelList {
   }
 
   /**
-   * Show panel.
+   * Show all panels.
    */
   showAll() {
     for (let index = 0; index < this.panels.length; index++) {

src/scripts/components/panel-list/panel/cycle-button.js

@@ -8,6 +8,8 @@ export default class CycleButton {
   /**
    * @class
    * @param {object} [params={}] Parameters.
+   * @param {object} [params.selector] Options for confidence selector.
+   * @param {number} [params.confidenceIndex] Index of chosen confidence option.
    * @param {object} [callbacks={}] Callbacks.
    * @param {function} [callbacks.onClicked] On clicked handler.
    * @param {function} [callbacks.onGotFocus] Panel element got gocus.
@@ -64,7 +66,7 @@ export default class CycleButton {
   }
 
   /**
-   * Select index.
+   * Select option.
    * @param {number} index Index of option to choose.
    */
   select(index) {
@@ -81,7 +83,10 @@ export default class CycleButton {
 
     this.selectedIndex = index;
     this.dom.innerHTML = this.params.selector.options[this.selectedIndex].label;
-    this.dom.setAttribute('aria-label', `Change confidence. Current value: ${this.params.selector.options[this.selectedIndex].value}`);
+    this.dom.setAttribute(
+      'aria-label',
+      `Change confidence. Current value: ${this.params.selector.options[this.selectedIndex].value}`
+    );
   }
 
   /**

src/scripts/components/panel-list/panel/option-button.js

@@ -9,7 +9,6 @@ export default class OptionButton {
   /**
    * @class
    * @param {object} [params={}] Parameters.
-   * @param {string[]} params.classes Class names.
    * @param {object} [callbacks={}] Callbacks.
    * @param {function} [callbacks.onClicked] Called on button clicked.
    * @param {function} [callbacks.onGotFocus] Panel element got gocus.

src/scripts/components/panel-list/panel/option.js

@@ -41,57 +41,52 @@ export default class Option {
 
     this.focusElements = [];
 
+    this.buildDOM();
+
+    this.updateAriaLabel();
+  }
+
+  /**
+   * Get DOM.
+   * @returns {HTMLElement} Option DOM.
+   */
+  getDOM() {
+    return this.dom;
+  }
+
+  /**
+   * BuildDOM.
+   */
+  buildDOM() {
     this.dom = document.createElement('div');
     this.dom.classList.add('h5p-discrete-option-multi-choice-option');
-    if (params.selector) {
+    if (this.params.selector) {
       this.dom.classList.add('has-confidence-selector');
     }
 
     this.dom.addEventListener('keydown', (event) => {
-      if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
-        const position = this.focusElements.indexOf(this.currentFocusElement);
-        if (position > 0) {
-          this.currentFocusElement = this.focusElements[position - 1];
-          this.currentFocusElement.focus();
-        }
-      }
-      else if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
-        const position = this.focusElements.indexOf(this.currentFocusElement);
-        if (position < this.focusElements.length - 1) {
-          this.currentFocusElement = this.focusElements[position + 1];
-          this.currentFocusElement.focus();
-        }
-      }
-      else if (event.code === 'Home') {
-        this.focusElements[0].focus();
-      }
-      else if (event.code === 'End') {
-        this.focusElements[this.focusElements.length - 1].focus();
-      }
-      else {
-        return;
-      }
-
-      event.preventDefault();
+      this.handleKeydown(event);
     });
 
     const text = document.createElement('div');
     text.classList.add('h5p-discrete-option-multi-choice-option-text');
-    text.innerHTML = params.text;
+    text.innerHTML = this.params.text;
     this.dom.append(text);
 
+    // Actions
     this.actions = document.createElement('div');
     this.actions.classList.add(
       'h5p-discrete-option-multi-choice-option-actions'
     );
-    this.actions.setAttribute('id', params.uuid);
+    this.actions.setAttribute('id', this.params.uuid);
     this.dom.append(this.actions);
 
-    if (params.selector) {
+    // Selector
+    if (this.params.selector) {
       this.confidenceSelector = new CycleButton(
         {
-          selector: params.selector,
-          confidenceIndex: params.confidenceIndex
+          selector: this.params.selector,
+          confidenceIndex: this.params.confidenceIndex
         },
         {
           onClicked: (confidenceIndex) => {
@@ -107,14 +102,13 @@ export default class Option {
       this.focusElements.push(this.confidenceSelector);
     }
 
+    // Choices
     const choices = document.createElement('div');
     choices.classList.add('h5p-discrete-option-multi-choice-choices');
     this.actions.append(choices);
 
     this.choiceCorrect = new OptionButton(
-      {
-        type: 'correct'
-      },
+      { type: 'correct' },
       {
         onClicked: () => {
           this.selected = this.choiceCorrect;
@@ -132,9 +126,7 @@ export default class Option {
     this.focusElements.push(this.choiceCorrect);
 
     this.choiceIncorrect = new OptionButton(
-      {
-        type: 'incorrect'
-      },
+      { type: 'incorrect' },
       {
         onClicked: () => {
           this.selected = this.choiceIncorrect;
@@ -150,16 +142,6 @@ export default class Option {
     );
     choices.append(this.choiceIncorrect.getDOM());
     this.focusElements.push(this.choiceIncorrect);
-
-    this.updateAriaLabel();
-  }
-
-  /**
-   * Get DOM.
-   * @returns {HTMLElement} Option DOM.
-   */
-  getDOM() {
-    return this.dom;
   }
 
   /**
@@ -243,7 +225,6 @@ export default class Option {
     }
 
     this.answeredCorrectly = correct;
-
     this.selected?.markAnswer(correct, scorePoints);
 
     this.updateAriaLabel();
@@ -258,8 +239,7 @@ export default class Option {
       this.choiceCorrect.markOption(params.correct);
       this.correctIsCorrect = true;
     }
-
-    if (typeof params.incorrect === 'boolean' || params.incorrect === null) {
+    else if (typeof params.incorrect === 'boolean' || params.incorrect === null) {
       this.choiceIncorrect.markOption(params.incorrect);
       this.correctIsCorrect = false;
     }
@@ -308,6 +288,7 @@ export default class Option {
   /**
    * Reset.
    * @param {object} [params={}] Parameters.
+   * @param {object} [params.previousState] Previous state.
    */
   reset(params = {}) {
     this.answeredCorrectly = null;
@@ -334,4 +315,36 @@ export default class Option {
 
     this.updateAriaLabel();
   }
+
+  /**
+   * Handle keydown.
+   * @param {KeyboardEvent} event Keyboard event.
+   */
+  handleKeydown(event) {
+    if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
+      const position = this.focusElements.indexOf(this.currentFocusElement);
+      if (position > 0) {
+        this.currentFocusElement = this.focusElements[position - 1];
+        this.currentFocusElement.focus();
+      }
+    }
+    else if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
+      const position = this.focusElements.indexOf(this.currentFocusElement);
+      if (position < this.focusElements.length - 1) {
+        this.currentFocusElement = this.focusElements[position + 1];
+        this.currentFocusElement.focus();
+      }
+    }
+    else if (event.code === 'Home') {
+      this.focusElements[0].focus();
+    }
+    else if (event.code === 'End') {
+      this.focusElements[this.focusElements.length - 1].focus();
+    }
+    else {
+      return;
+    }
+
+    event.preventDefault();
+  }
 }