maidr 2.27.1 → 2.28.1

package/dist/maidr.js

@@ -7722,12 +7722,8 @@ class Layer0Point {
    * @async
    */
   async ClearPoints() {
-    if (document.getElementById('highlight_point'))
-      document.getElementById('highlight_point').remove();
-    let points = document.getElementsByClassName('highlight_point');
-    for (let i = 0; i < points.length; i++) {
-      document.getElementsByClassName('highlight_point')[i].remove();
-    }
+    // kill all .highlight_point
+    document.querySelectorAll('.highlight_point').forEach((e) => e.remove());
   }
 
   /**
@@ -7803,12 +7799,8 @@ class Layer1Point {
    * @async
    */
   async ClearPoints() {
-    let points = document.getElementsByClassName('highlight_point');
-    for (let i = 0; i < points.length; i++) {
-      document.getElementsByClassName('highlight_point')[i].remove();
-    }
-    if (document.getElementById('highlight_point'))
-      document.getElementById('highlight_point').remove();
+    // kill all .highlight_point
+    document.querySelectorAll('.highlight_point').forEach((e) => e.remove());
   }
 
   /**
@@ -8817,95 +8809,97 @@ class Control {
   SetPrefixControls() {
     // prefix events, l + x, where x is a key for the title, axis, etc
     // we listen for a moment when l is hit for a key to follow
-    constants.events.push([
-      document,
-      'keydown',
-      function (e) {
-        // init
-        let pressedTimeout = null;
-
-        // enable / disable prefix mode
-        if (e.key == 'l') {
-          control.pressedL = true;
-          if (pressedTimeout != null) {
-            clearTimeout(pressedTimeout);
-            pressedTimeout = null;
-          }
-          pressedTimeout = setTimeout(function () {
-            control.pressedL = false;
-          }, constants.keypressInterval);
-        }
-
-        // Prefix mode stuff: L is enabled, look for these keys
-        if (control.pressedL) {
-          if (e.key == 'x') {
-            // X: x label
-            let xlabel = '';
-            if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
-              xlabel = plot.plotLegend.x;
-            } else if (singleMaidr.type == 'hist') {
-              xlabel = plot.legendX;
-            } else if (
-              singleMaidr.type == 'heat' ||
-              singleMaidr.type == 'box' ||
-              singleMaidr.type == 'point' ||
-              singleMaidr.type.includes('point')
-            ) {
-              xlabel = plot.x_group_label;
-            } else if (
-              singleMaidr.type == 'stacked_bar' ||
-              singleMaidr.type == 'stacked_normalized_bar' ||
-              singleMaidr.type == 'dodged_bar'
-            ) {
-              xlabel = plot.plotLegend.x;
+    for (let i = 0; i < this.allControlElements.length; i++) {
+      constants.events.push([
+        this.allControlElements[i],
+        'keydown',
+        function (e) {
+          // init
+          let pressedTimeout = null;
+
+          // enable / disable prefix mode
+          if (e.key == 'l') {
+            control.pressedL = true;
+            if (pressedTimeout != null) {
+              clearTimeout(pressedTimeout);
+              pressedTimeout = null;
             }
-            display.displayInfo('x label', xlabel);
-            control.pressedL = false;
-          } else if (e.key == 'y') {
-            // Y: y label
-            let ylabel = '';
-            if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
-              ylabel = plot.plotLegend.y;
-            } else if (singleMaidr.type == 'hist') {
-              ylabel = plot.legendY;
-            } else if (
-              singleMaidr.type == 'heat' ||
-              singleMaidr.type == 'box' ||
-              singleMaidr.type == 'point' ||
-              singleMaidr.type == 'line' ||
-              singleMaidr.type.includes('point')
-            ) {
-              ylabel = plot.y_group_label;
-            } else if (
-              singleMaidr.type == 'stacked_bar' ||
-              singleMaidr.type == 'stacked_normalized_bar' ||
-              singleMaidr.type == 'dodged_bar'
-            ) {
-              ylabel = plot.plotLegend.y;
+            pressedTimeout = setTimeout(function () {
+              control.pressedL = false;
+            }, constants.keypressInterval);
+          }
+
+          // Prefix mode stuff: L is enabled, look for these keys
+          if (control.pressedL) {
+            if (e.key == 'x') {
+              // X: x label
+              let xlabel = '';
+              if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
+                xlabel = plot.plotLegend.x;
+              } else if (singleMaidr.type == 'hist') {
+                xlabel = plot.legendX;
+              } else if (
+                singleMaidr.type == 'heat' ||
+                singleMaidr.type == 'box' ||
+                singleMaidr.type == 'point' ||
+                singleMaidr.type.includes('point')
+              ) {
+                xlabel = plot.x_group_label;
+              } else if (
+                singleMaidr.type == 'stacked_bar' ||
+                singleMaidr.type == 'stacked_normalized_bar' ||
+                singleMaidr.type == 'dodged_bar'
+              ) {
+                xlabel = plot.plotLegend.x;
+              }
+              display.displayInfo('x label', xlabel);
+              control.pressedL = false;
+            } else if (e.key == 'y') {
+              // Y: y label
+              let ylabel = '';
+              if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
+                ylabel = plot.plotLegend.y;
+              } else if (singleMaidr.type == 'hist') {
+                ylabel = plot.legendY;
+              } else if (
+                singleMaidr.type == 'heat' ||
+                singleMaidr.type == 'box' ||
+                singleMaidr.type == 'point' ||
+                singleMaidr.type == 'line' ||
+                singleMaidr.type.includes('point')
+              ) {
+                ylabel = plot.y_group_label;
+              } else if (
+                singleMaidr.type == 'stacked_bar' ||
+                singleMaidr.type == 'stacked_normalized_bar' ||
+                singleMaidr.type == 'dodged_bar'
+              ) {
+                ylabel = plot.plotLegend.y;
+              }
+              display.displayInfo('y label', ylabel);
+              control.pressedL = false;
+            } else if (e.key == 't') {
+              // T: title
+              display.displayInfo('title', plot.title);
+              control.pressedL = false;
+            } else if (e.key == 's') {
+              // subtitle
+              display.displayInfo('subtitle', plot.subtitle);
+              control.pressedL = false;
+            } else if (e.key == 'c') {
+              // caption
+              display.displayInfo('caption', plot.caption);
+              control.pressedL = false;
+            } else if (e.key == 'f') {
+              display.displayInfo('fill', plot.fill);
+              control.pressedL = false;
+            } else if (e.key != 'l') {
+              control.pressedL = false;
             }
-            display.displayInfo('y label', ylabel);
-            control.pressedL = false;
-          } else if (e.key == 't') {
-            // T: title
-            display.displayInfo('title', plot.title);
-            control.pressedL = false;
-          } else if (e.key == 's') {
-            // subtitle
-            display.displayInfo('subtitle', plot.subtitle);
-            control.pressedL = false;
-          } else if (e.key == 'c') {
-            // caption
-            display.displayInfo('caption', plot.caption);
-            control.pressedL = false;
-          } else if (e.key == 'f') {
-            display.displayInfo('fill', plot.fill);
-            control.pressedL = false;
-          } else if (e.key != 'l') {
-            control.pressedL = false;
           }
-        }
-      },
-    ]);
+        },
+      ]);
+    }
   }
 
   /**
@@ -11914,6 +11908,199 @@ class Control {
   }
 }
 
+class Goto {
+  //locations = ['Max Value', 'Min Value', 'Mean', 'Median'];
+  static options = ['Max Value', 'Min Value'];
+
+  constructor() {
+    this.menuOpen = false;
+    this.initMenu();
+    this.attachEventListeners();
+  }
+
+  initMenu() {
+    this.menu = document.createElement('div');
+    this.menu.id = 'goto-menu';
+    this.menu.style.display = 'none';
+    this.menu.innerHTML = `
+            <div class="menu-container">
+                <input 
+                    type="text" 
+                    id="menu-search" 
+                    placeholder="Search locations..." 
+                    aria-label="Search locations to go to"
+                />
+                <ul id="menu-items">
+                    ${Goto.options
+                      .map((option) => `<li><button>${option}</button></li>`)
+                      .join('')}
+                </ul>
+            </div>
+        `;
+
+    this.menuSearch = this.menu.querySelector('#menu-search');
+    this.menuItems = Array.from(
+      this.menu.querySelectorAll('#menu-items button')
+    );
+
+    constants.gotoMenu = this.menu;
+    document.body.appendChild(this.menu);
+  }
+
+  openMenu() {
+    this.whereWasMyFocus = document.activeElement;
+    constants.tabMovement = 0; // to prevent maidr from being destroyed as we leave the chart
+
+    this.menuOpen = true;
+    this.menu.style.display = 'block';
+    this.menuSearch.focus();
+  }
+
+  closeMenu() {
+    this.menuOpen = false;
+    this.menu.style.display = 'none';
+    this.whereWasMyFocus.focus();
+    this.whereWasMyFocus = null;
+  }
+
+  filterItems(query) {
+    const lowerCaseQuery = query.toLowerCase();
+    this.menuItems.forEach((item) => {
+      if (item.textContent.toLowerCase().includes(lowerCaseQuery)) {
+        item.parentElement.style.display = 'block';
+      } else {
+        item.parentElement.style.display = 'none';
+      }
+    });
+  }
+
+  attachEventListeners() {
+    this.menuSearch.addEventListener('input', (event) =>
+      this.filterItems(event.target.value)
+    );
+
+    // Open the modal when the user presses 'g'
+    constants.events.push([
+      [constants.chart, constants.brailleInput],
+      'keyup',
+      function (event) {
+        if (event.key === 'g' && !goto.popupOpen) {
+          goto.openMenu();
+        }
+      },
+    ]);
+    // arrow keys to navigate the list, escape to close
+    constants.events.push([
+      constants.gotoMenu,
+      'keydown',
+      function (event) {
+        if (goto.menuOpen) {
+          const focusableElements = [
+            goto.menuSearch,
+            ...goto.menuItems.filter(
+              (item) => item.parentElement.style.display !== 'none'
+            ),
+          ];
+          const currentIndex = focusableElements.indexOf(
+            document.activeElement
+          );
+
+          if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const nextIndex = (currentIndex + 1) % focusableElements.length;
+            focusableElements[nextIndex]?.focus();
+          } else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prevIndex =
+              (currentIndex - 1 + focusableElements.length) %
+              focusableElements.length;
+            focusableElements[prevIndex]?.focus();
+          } else {
+            if (event.key === 'Escape') {
+              goto.closeMenu();
+            }
+          }
+        }
+      },
+    ]);
+    // enter to select, which we register as a click event so it works with screen readers
+    constants.events.push([
+      constants.gotoMenu,
+      'click',
+      function (event) {
+        if (event.target.tagName === 'BUTTON') {
+          let loc = event.target.textContent;
+          goto.closeMenu();
+          goto.goToLocation(loc);
+        }
+      },
+    ]);
+  }
+
+  goToLocation(loc) {
+    console.log(`Navigating to: ${loc}`);
+    // Replace this with your actual navigation logic
+
+    if (loc == 'Max Value') {
+      if (constants.chartType == 'bar' || constants.chartType == 'hist') {
+        // get the max value of this array and return the index
+        let max = Math.max(...plot.plotData);
+        let index = plot.plotData.indexOf(max);
+        position.x = index;
+        control.UpdateAll();
+      } else if (constants.chartType == 'line') {
+        let max = Math.max(...plot.pointValuesY);
+        let index = plot.pointValuesY.indexOf(max);
+        position.x = index;
+        control.UpdateAll();
+      } else if (constants.chartType == 'point') {
+        let max = Math.max(...plot.curvePoints);
+        let index = plot.curvePoints.indexOf(max);
+        position.x = index;
+        control.UpdateAll();
+      } else if (constants.chartType == 'heat') {
+        // here we have a 2d array to search, and we need both y (parent) and x (child) indexes
+        let max = Math.max(...plot.data.flat());
+        let index = plot.data.flat().indexOf(max);
+        let y = Math.floor(index / plot.data[0].length);
+        let x = index % plot.data[0].length;
+        position.x = x;
+        position.y = y;
+        control.UpdateAll();
+      }
+    } else if (loc == 'Min Value') {
+      if (constants.chartType == 'bar' || constants.chartType == 'hist') {
+        // get the min value of this array and return the index
+        let min = Math.min(...plot.plotData);
+        let index = plot.plotData.indexOf(min);
+        position.x = index;
+        control.UpdateAll();
+      } else if (constants.chartType == 'line') {
+        let min = Math.min(...plot.pointValuesY);
+        let index = plot.pointValuesY.indexOf(min);
+        position.x = index;
+        control.UpdateAll();
+      } else if (constants.chartType == 'point') {
+        let min = Math.min(...plot.curvePoints);
+        let index = plot.curvePoints.indexOf(min);
+        position.x = index;
+        control.UpdateAll();
+      } else if (constants.chartType == 'heat') {
+        // here we have a 2d array to search, and we need both y (parent) and x (child) indexes
+        let min = Math.min(...plot.data.flat());
+        let index = plot.data.flat().indexOf(min);
+        let y = Math.floor(index / plot.data[0].length);
+        let x = index % plot.data[0].length;
+        position.x = x;
+        position.y = y;
+        control.UpdateAll();
+      }
+    } else if (loc == 'Mean') {
+    } else if (loc == 'Median') {
+    }
+  }
+}
+
 // events and init functions
 // we do some setup, but most of the work is done when user focuses on an element matching an id from maidr user data
 document.addEventListener('DOMContentLoaded', function (e) {
@@ -11981,6 +12168,7 @@ function InitMaidr(thisMaidr) {
     window.control = new Control(); // this inits the actual chart object and Position
     window.review = new Review();
     window.display = new Display();
+    window.goto = new Goto();
     window.audio = new Audio();
 
     // blur destruction events