maidr 1.0.0

package/src/js/init.js

@@ -0,0 +1,427 @@
+// 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) {
+  // we wrap in DOMContentLoaded to make sure everything has loaded before we run anything
+
+  // create global vars
+  window.constants = new Constants();
+  window.resources = new Resources();
+  window.tracker = new Tracker();
+  window.logError = new LogError();
+
+  // set focus events for all charts matching maidr ids
+  let maidrObjects = [];
+  if (!Array.isArray(maidr)) {
+    maidrObjects.push(maidr);
+  } else {
+    maidrObjects = maidr;
+  }
+  // set focus events for all maidr ids
+  DestroyMaidr(); // just in case
+  window.maidrIds = [];
+  for (let i = 0; i < maidrObjects.length; i++) {
+    let maidrId = maidrObjects[i].id;
+    maidrIds.push(maidrId);
+    let maidrElemn = document.getElementById(maidrId);
+    if (maidrElemn) {
+      maidrElemn.addEventListener('focus', function (e) {
+        ShouldWeInitMaidr(maidrObjects[i]);
+      });
+      // blur done elsewhere
+    }
+  }
+
+  // events etc for user study page
+  // run tracker stuff only on user study page
+  if (document.getElementById('download_data_trigger')) {
+    // download data button
+    document
+      .getElementById('download_data_trigger')
+      .addEventListener('click', function (e) {
+        tracker.DownloadTrackerData();
+      });
+
+    // general events
+    document.addEventListener('keydown', function (e) {
+      // reset tracking with Ctrl + F5 / command + F5, and Ctrl + Shift + R / command + Shift + R
+      // future todo: this should probably be a button with a confirmation. This is dangerous
+      if (
+        (e.key == 'F5' && (constants.isMac ? e.metaKey : e.ctrlKey)) ||
+        (e.key == 'R' && (constants.isMac ? e.metaKey : e.ctrlKey))
+      ) {
+        e.preventDefault();
+        tracker.Delete();
+        location.reload(true);
+      }
+
+      // Tracker
+      if (constants.isTracking) {
+        if (e.key == 'F10') {
+          //tracker.DownloadTrackerData();
+        } else {
+          if (plot) {
+            tracker.LogEvent(e);
+          }
+        }
+      }
+
+      // Stuff to only run if we're on a chart (so check if the info div exists?)
+      if (document.getElementById('info')) {
+      }
+    });
+  }
+});
+
+function InitMaidr(thisMaidr) {
+  // just in case
+  if (typeof constants != 'undefined') {
+    // init vars and html
+    window.singleMaidr = thisMaidr;
+    constants.chartId = singleMaidr.id;
+    if (Array.isArray(singleMaidr.type)) {
+      constants.chartType = singleMaidr.type[0];
+    } else {
+      constants.chartType = singleMaidr.type;
+    }
+    CreateChartComponents(singleMaidr);
+    window.control = new Control(); // this inits the plot
+    window.review = new Review();
+    window.display = new Display();
+    window.audio = new Audio();
+
+    // blur destruction events
+    let controlElements = [
+      constants.chart,
+      constants.brailleInput,
+      constants.review,
+    ];
+    for (let i = 0; i < controlElements.length; i++) {
+      constants.events.push([controlElements[i], 'blur', ShouldWeDestroyMaidr]);
+    }
+
+    // kill autoplay event
+    constants.events.push([document, 'keydown', KillAutoplayEvent]);
+
+    this.SetEvents();
+
+    // once everything is set up, announce the chart name (or title as a backup) to the user
+    if ('name' in singleMaidr) {
+      display.announceText(singleMaidr.name);
+    } else if ('title' in singleMaidr) {
+      display.announceText(singleMaidr.title);
+    }
+  }
+}
+
+function ShouldWeInitMaidr(thisMaidr) {
+  // conditions:
+  // - maidr isn't enabled (check if singleMaidr is undefined or false)
+  // - the chart we're moving to isn't the same as the one we're on
+  // note: if we move from one to another, destroy the current first
+
+  if (typeof singleMaidr == 'undefined') {
+    // not enabled
+    InitMaidr(thisMaidr);
+  } else if (!singleMaidr) {
+    // not enabled
+    InitMaidr(thisMaidr);
+  } else if (thisMaidr.id !== singleMaidr.id) {
+    // different chart, destroy first
+    DestroyMaidr();
+    InitMaidr(thisMaidr);
+  }
+}
+
+function ShouldWeDestroyMaidr(e) {
+  // conditions: we've tabbed away from the chart or any component
+
+  // timeout to delay blur event. I forget why this is necessary, but it is
+  setTimeout(() => {
+    if (constants.tabMovement == 0) {
+      // do nothing, this is an allowed move
+      // but also reset so we can leave later
+      constants.tabMovement = null;
+    } else {
+      if (constants.tabMovement == 1 || constants.tabMovement == -1) {
+        // move to before / after, and then destroy
+        FocusBeforeOrAfter();
+      }
+      DestroyMaidr();
+    }
+  }, 0);
+}
+
+function FocusBeforeOrAfter() {
+  // Tab / forward
+  if (constants.tabMovement == 1) {
+    let focusTemp = document.createElement('div');
+    focusTemp.setAttribute('tabindex', '0');
+    constants.main_container.after(focusTemp);
+    focusTemp.focus();
+    focusTemp.remove();
+  }
+  // Shift + Tab / backward
+  else if (constants.tabMovement == -1) {
+    // create an element to focus on, add it before currentFocus, focus it, then remove it
+    let focusTemp = document.createElement('div');
+    focusTemp.setAttribute('tabindex', '0');
+    constants.main_container.before(focusTemp);
+    focusTemp.focus();
+    focusTemp.remove();
+  }
+}
+
+function DestroyMaidr() {
+  // chart cleanup
+  if (constants.chartType == 'bar' || constants.chartType == 'hist') {
+    // deselect, if possible
+    if (typeof plot.DeselectAll === 'function') {
+      plot.DeselectAll();
+    }
+    if (typeof plot.UnSelectPrevious === 'function') {
+      plot.UnSelectPrevious();
+    }
+  }
+
+  // remove events
+  for (let i = 0; i < constants.events.length; i++) {
+    if (Array.isArray(constants.events[i][0])) {
+      for (let j = 0; j < constants.events[i][0].length; j++) {
+        constants.events[i][0][j].removeEventListener(
+          constants.events[i][1],
+          constants.events[i][2]
+        );
+      }
+    } else {
+      constants.events[i][0].removeEventListener(
+        constants.events[i][1],
+        constants.events[i][2]
+      );
+    }
+  }
+  for (let i = 0; i < constants.postLoadEvents.length; i++) {
+    if (Array.isArray(constants.postLoadEvents[i][0])) {
+      for (let j = 0; j < constants.postLoadEvents[i][0].length; j++) {
+        constants.postLoadEvents[i][0][j].removeEventListener(
+          constants.postLoadEvents[i][1],
+          constants.postLoadEvents[i][2]
+        );
+      }
+    } else {
+      constants.postLoadEvents[i][0].removeEventListener(
+        constants.postLoadEvents[i][1],
+        constants.postLoadEvents[i][2]
+      );
+    }
+  }
+  constants.events = [];
+  constants.postLoadEvents = [];
+
+  // remove global vars
+  constants.chartId = null;
+  constants.chartType = null;
+  constants.tabMovement = null;
+  DestroyChartComponents();
+
+  window.review = null;
+  window.display = null;
+  window.control = null;
+  window.plot = null;
+  window.audio = null;
+  window.singleMaidr = null;
+}
+function KillAutoplayEvent(e) {
+  // Kill autoplay
+  if (
+    constants.isMac
+      ? e.key == 'Meta' || e.key == 'ContextMenu'
+      : e.key == 'Control'
+  ) {
+    // ctrl (either one)
+    constants.KillAutoplay();
+  }
+}
+
+function SetEvents() {
+  // add all events
+  for (let i = 0; i < constants.events.length; i++) {
+    if (Array.isArray(constants.events[i][0])) {
+      for (let j = 0; j < constants.events[i][0].length; j++) {
+        constants.events[i][0][j].addEventListener(
+          constants.events[i][1],
+          constants.events[i][2]
+        );
+      }
+    } else {
+      constants.events[i][0].addEventListener(
+        constants.events[i][1],
+        constants.events[i][2]
+      );
+    }
+  }
+  // add all post load events
+  // we delay adding post load events just a tick so the chart loads
+  setTimeout(function () {
+    for (let i = 0; i < constants.postLoadEvents.length; i++) {
+      if (Array.isArray(constants.postLoadEvents[i][0])) {
+        for (let j = 0; j < constants.postLoadEvents[i][0].length; j++) {
+          constants.postLoadEvents[i][0][j].addEventListener(
+            constants.postLoadEvents[i][1],
+            constants.postLoadEvents[i][2]
+          );
+        }
+      } else {
+        constants.postLoadEvents[i][0].addEventListener(
+          constants.postLoadEvents[i][1],
+          constants.postLoadEvents[i][2]
+        );
+      }
+    }
+  }, 100);
+}
+
+function CreateChartComponents() {
+  // init html stuff. aria live regions, braille input, etc
+
+  // core chart
+  let chart = document.getElementById(singleMaidr.id);
+
+  // we create a structure with a main container, and a chart container
+  let main_container = document.createElement('div');
+  main_container.id = constants.main_container_id;
+  let chart_container = document.createElement('div');
+  chart_container.id = constants.chart_container_id;
+  // update parents from just chart, to main container > chart container > chart
+  chart.parentNode.replaceChild(main_container, chart);
+  main_container.appendChild(chart);
+  chart.parentNode.replaceChild(chart_container, chart);
+  chart_container.appendChild(chart);
+  chart.focus(); // focus used to be on chart and just got lost as we rearranged, so redo focus
+
+  constants.chart = chart;
+  constants.chart_container = chart_container;
+  constants.main_container = main_container;
+
+  // braille input, pre sibling of chart container
+  constants.chart_container.insertAdjacentHTML(
+    'beforebegin',
+    '<div class="hidden" id="' +
+      constants.braille_container_id +
+      '">\n<input id="' +
+      constants.braille_input_id +
+      '" class="braille-input" type="text" size="' +
+      constants.brailleDisplayLength +
+      '" ' +
+      'aria-brailleroledescription="" ' + // this kills the 2 char 'edit' that screen readers add
+      '/>\n</div>\n'
+  );
+
+  // info aria live, next sibling of chart container
+  constants.chart_container.insertAdjacentHTML(
+    'afterend',
+    '<br>\n<div id="' +
+      constants.info_id +
+      '" aria-live="assertive" aria-atomic="true">\n<p id="x"></p>\n<p id="y"></p>\n</div>\n'
+  );
+
+  // announcements, next sibling of info
+  document
+    .getElementById(constants.info_id)
+    .insertAdjacentHTML(
+      'afterend',
+      '<div id="announcements" aria-live="assertive" aria-atomic="true" class="mb-3"></div>\n'
+    );
+
+  // end chime audio element
+  document
+    .getElementById(constants.info_id)
+    .insertAdjacentHTML(
+      'afterend',
+      '<div class="hidden"> <audio src="../src/terminalBell.mp3" id="end_chime"></audio> </div>'
+    );
+
+  // review mode form field
+  document
+    .getElementById(constants.info_id)
+    .insertAdjacentHTML(
+      'beforebegin',
+      '<div id="' +
+        constants.review_id_container +
+        '" class="hidden sr-only sr-only-focusable"><input id="' +
+        constants.review_id +
+        '" type="text" readonly size="50" /></div>'
+    );
+
+  // some tweaks
+  constants.chart_container.setAttribute('role', 'application');
+
+  // set page elements
+  constants.brailleContainer = document.getElementById(
+    constants.braille_container_id
+  );
+  constants.brailleInput = document.getElementById(constants.braille_input_id);
+  constants.infoDiv = document.getElementById(constants.info_id);
+  constants.announceContainer = document.getElementById(
+    constants.announcement_container_id
+  );
+  constants.nonMenuFocus = constants.chart;
+  constants.endChime = document.getElementById(constants.end_chime_id);
+  constants.review_container = document.querySelector(
+    '#' + constants.review_id_container
+  );
+  constants.review = document.querySelector('#' + constants.review_id);
+
+  // help menu
+  window.menu = new Menu();
+
+  // Description modal
+  window.description = new Description(); // developement on hold
+}
+
+function DestroyChartComponents() {
+  // remove html stuff
+  if (constants.chart_container != null) {
+    if (constants.chart != null) {
+      if (constants.chart_container.parentNode != null) {
+        constants.chart_container.parentNode.replaceChild(
+          constants.chart,
+          constants.chart_container
+        );
+      }
+    }
+    constants.chart_container.remove();
+  }
+  if (constants.brailleContainer != null) {
+    constants.brailleContainer.remove();
+  }
+  if (constants.infoDiv != null) {
+    constants.infoDiv.remove();
+  }
+  if (constants.announceContainer != null) {
+    constants.announceContainer.remove();
+  }
+  if (constants.endChime != null) {
+    constants.endChime.remove();
+  }
+  if (constants.review_container != null) {
+    constants.review_container.remove();
+  }
+
+  if (typeof menu != 'undefined') {
+    menu.Destroy();
+  }
+  if (typeof description != 'undefined') {
+    description.Destroy();
+  }
+
+  constants.chart = null;
+  constants.chart_container = null;
+  constants.brailleContainer = null;
+  constants.brailleInput = null;
+  constants.infoDiv = null;
+  constants.announceContainer = null;
+  constants.endChime = null;
+  constants.review_container = null;
+  menu = null;
+  description = null;
+}

package/src/js/lineplot.js

@@ -0,0 +1,219 @@
+class LinePlot {
+  constructor() {
+    this.SetLineLayer();
+    this.SetAxes();
+
+    let legendX = '';
+    let legendY = '';
+    if ('axes' in singleMaidr) {
+      // legend labels
+      if (singleMaidr.axes.x) {
+        if (singleMaidr.axes.x.label) {
+          if (legendX == '') {
+            legendX = singleMaidr.axes.x.label;
+          }
+        }
+      }
+      if (singleMaidr.axes.y) {
+        if (singleMaidr.axes.y.label) {
+          if (legendY == '') {
+            legendY = singleMaidr.axes.y.label;
+          }
+        }
+      }
+    }
+
+    this.plotLegend = {
+      x: legendX,
+      y: legendY,
+    };
+
+    // title
+    this.title = '';
+    if ('labels' in singleMaidr) {
+      if ('title' in singleMaidr.labels) {
+        this.title = singleMaidr.labels.title;
+      }
+    }
+    if (this.title == '') {
+      if ('title' in singleMaidr) {
+        this.title = singleMaidr.title;
+      }
+    }
+
+    // subtitle
+    if ('labels' in singleMaidr) {
+      if ('subtitle' in singleMaidr.labels) {
+        this.subtitle = singleMaidr.labels.subtitle;
+      }
+    }
+    // caption
+    if ('labels' in singleMaidr) {
+      if ('caption' in singleMaidr.labels) {
+        this.caption = singleMaidr.labels.caption;
+      }
+    }
+  }
+
+  SetLineLayer() {
+    let len = maidr.elements.length;
+    this.plotLine = maidr.elements[len - 1];
+    if (typeof this.plotLine !== 'undefined') {
+      let pointCoords = this.GetPointCoords();
+      let pointValues = this.GetPoints();
+
+      this.chartLineX = pointCoords[0]; // x coordinates of curve
+      this.chartLineY = pointCoords[1]; // y coordinates of curve
+
+      this.pointValuesX = pointValues[0]; // actual values of x
+      this.pointValuesY = pointValues[1]; // actual values of y
+
+      this.curveMinY = Math.min(...this.pointValuesY);
+      this.curveMaxY = Math.max(...this.pointValuesY);
+      constants.minX = 0;
+      constants.maxX = this.pointValuesX.length - 1;
+      constants.minY = this.curveMinY;
+      constants.maxY = this.curveMaxY;
+
+      constants.autoPlayRate = Math.min(
+        Math.ceil(constants.AUTOPLAY_DURATION / (constants.maxX + 1)),
+        constants.MAX_SPEED
+      );
+      constants.DEFAULT_SPEED = constants.autoPlayRate;
+      if (constants.autoPlayRate < constants.MIN_SPEED) {
+        constants.MIN_SPEED = constants.autoPlayRate;
+      }
+
+      // this.gradient = this.GetGradient();
+    }
+  }
+
+  SetMinMax() {
+    constants.minX = 0;
+    constants.maxX = this.pointValuesX.length - 1;
+    constants.minY = this.curveMinY;
+    constants.maxY = this.curveMaxY;
+    constants.autoPlayRate = Math.ceil(
+      constants.AUTOPLAY_DURATION / (constants.maxX + 1)
+    );
+  }
+
+  GetPointCoords() {
+    let svgLineCoords = [[], []];
+    let points = this.plotLine.getAttribute('points').split(' ');
+    for (let i = 0; i < points.length; i++) {
+      if (points[i] !== '') {
+        let point = points[i].split(',');
+        svgLineCoords[0].push(point[0]);
+        svgLineCoords[1].push(point[1]);
+      }
+    }
+    return svgLineCoords;
+  }
+
+  GetPoints() {
+    let x_points = [];
+    let y_points = [];
+
+    let data;
+    if ('data' in singleMaidr) {
+      data = singleMaidr.data;
+    }
+    if (typeof data !== 'undefined') {
+      for (let i = 0; i < data.length; i++) {
+        x_points.push(data[i].x);
+        y_points.push(data[i].y);
+      }
+      return [x_points, y_points];
+    } else {
+      return;
+    }
+  }
+
+  // GetGradient() {
+  //   let gradients = [];
+
+  //   for (let i = 0; i < this.pointValuesY.length - 1; i++) {
+  //     let abs_grad = Math.abs(
+  //       (this.pointValuesY[i + 1] - this.pointValuesY[i]) /
+  //         (this.pointValuesX[i + 1] - this.pointValuesX[i])
+  //     ).toFixed(3);
+  //     gradients.push(abs_grad);
+  //   }
+
+  //   gradients.push('end');
+
+  //   return gradients;
+  // }
+
+  SetAxes() {
+    this.x_group_label = '';
+    this.y_group_label = '';
+    this.title = '';
+    if ('axes' in singleMaidr) {
+      if ('x' in singleMaidr.axes) {
+        if (this.x_group_label == '') {
+          this.x_group_label = singleMaidr.axes.x.label;
+        }
+      }
+      if ('y' in singleMaidr.axes) {
+        if (this.y_group_label == '') {
+          this.y_group_label = singleMaidr.axes.y.label;
+        }
+      }
+    }
+    if ('title' in singleMaidr) {
+      if (this.title == '') {
+        this.title = singleMaidr.title;
+      }
+    }
+  }
+
+  PlayTones() {
+    audio.playTone();
+  }
+}
+
+class Point {
+  constructor() {
+    this.x = plot.chartLineX[0];
+    this.y = plot.chartLineY[0];
+  }
+
+  async UpdatePoints() {
+    await this.ClearPoints();
+    this.x = plot.chartLineX[position.x];
+    this.y = plot.chartLineY[position.x];
+  }
+
+  async PrintPoints() {
+    await this.ClearPoints();
+    await this.UpdatePoints();
+    const svgns = 'http://www.w3.org/2000/svg';
+    var point = document.createElementNS(svgns, 'circle');
+    point.setAttribute('id', 'highlight_point');
+    point.setAttribute('cx', this.x);
+    point.setAttribute('cy', this.y);
+    point.setAttribute('r', 1.75);
+    point.setAttribute(
+      'style',
+      'fill:' + constants.colorSelected + ';stroke:' + constants.colorSelected
+    );
+    constants.chart.appendChild(point);
+  }
+
+  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();
+  }
+
+  UpdatePointDisplay() {
+    this.ClearPoints();
+    this.UpdatePoints();
+    this.PrintPoints();
+  }
+}