Merge pull request #3368 from Max-Lovell/main

Replace uses of Array.from() for Qualtrics compatibility

.changeset/poor-singers-destroy.md

@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-sketchpad": patch
+---
+
+Fixed broken event handlers in the sketchpad plugin.

.changeset/sixty-bobcats-provide.md

@@ -0,0 +1,7 @@
+---
+"jspsych": patch
+"@jspsych/plugin-free-sort": patch
+"@jspsych/plugin-maxdiff": patch
+---
+
+Remove uses of Array.from() to improve Qualtrics compatibility

contributors.md

@@ -34,6 +34,7 @@ The following people have contributed to the development of jsPsych by writing c
 * kupiqu - https://github.com/kupiqu
 * Daiichiro Kuroki - https://github.com/kurokida
 * Jonas Lambers
+* Max Lovell - https://github.com/max-lovell
 * madebyafox - https://github.com/madebyafox
 * Shane Martin - https://github.com/shamrt
 * Vijay Marupudi - https://github.com/vijaymarupudi

packages/jspsych/src/modules/plugin-api/KeyboardListenerAPI.ts

@@ -48,7 +48,7 @@ export class KeyboardListenerAPI {
   private rootKeydownListener(e: KeyboardEvent) {
     // Iterate over a static copy of the listeners set because listeners might add other listeners
     // that we do not want to be included in the loop
-    for (const listener of Array.from(this.listeners)) {
+    for (const listener of [...this.listeners]) {
       listener(e);
     }
     this.heldKeys.add(this.toLowerCaseIfInsensitive(e.key));

packages/plugin-free-sort/src/index.ts

@@ -348,7 +348,7 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
     let cur_in = false;
 
     // draggable items
-    const draggables = Array.from(
+    const draggables = Array.prototype.slice.call(
       display_element.querySelectorAll<HTMLImageElement>(".jspsych-free-sort-draggable")
     );
 

packages/plugin-maxdiff/src/index.ts

@@ -185,12 +185,12 @@ class MaxdiffPlugin implements JsPsychPlugin<Info> {
           // check response
           if (trial.required) {
             // Now check if one of both left and right have been enabled to allow submission
-            var left_checked = Array.from(document.getElementsByName("left")).some(
+            var left_checked = Array.prototype.slice
-              (c: HTMLInputElement) => c.checked
+              .call(document.getElementsByName("left"))
-            );
+              .some((c: HTMLInputElement) => c.checked);
-            var right_checked = Array.from(document.getElementsByName("right")).some(
+            var right_checked = Array.prototype.slice
-              (c: HTMLInputElement) => c.checked
+              .call(document.getElementsByName("right"))
-            );
+              .some((c: HTMLInputElement) => c.checked);
             if (left_checked && right_checked) {
               (document.getElementById("jspsych-maxdiff-next") as HTMLInputElement).disabled =
                 false;

packages/plugin-sketchpad/src/index.ts

@@ -409,11 +409,11 @@ class SketchpadPlugin implements JsPsychPlugin<Info> {
       });
     }
 
-    this.sketchpad.addEventListener("pointerdown", this.start_draw);
+    this.sketchpad.addEventListener("pointerdown", this.start_draw.bind(this));
-    this.sketchpad.addEventListener("pointermove", this.move_draw);
+    this.sketchpad.addEventListener("pointermove", this.move_draw.bind(this));
-    this.sketchpad.addEventListener("pointerup", this.end_draw);
+    this.sketchpad.addEventListener("pointerup", this.end_draw.bind(this));
-    this.sketchpad.addEventListener("pointerleave", this.end_draw);
+    this.sketchpad.addEventListener("pointerleave", this.end_draw.bind(this));
-    this.sketchpad.addEventListener("pointercancel", this.end_draw);
+    this.sketchpad.addEventListener("pointercancel", this.end_draw.bind(this));
 
     if (this.params.key_to_draw !== null) {
       document.addEventListener("keydown", (e) => {
@@ -452,16 +452,22 @@ class SketchpadPlugin implements JsPsychPlugin<Info> {
     }
 
     if (this.params.show_undo_button) {
-      this.display.querySelector("#sketchpad-undo").addEventListener("click", this.undo);
+      this.display.querySelector("#sketchpad-undo").addEventListener("click", this.undo.bind(this));
       if (this.params.show_redo_button) {
-        this.display.querySelector("#sketchpad-redo").addEventListener("click", this.redo);
+        this.display
+          .querySelector("#sketchpad-redo")
+          .addEventListener("click", this.redo.bind(this));
       }
     }
     if (this.params.show_clear_button) {
-      this.display.querySelector("#sketchpad-clear").addEventListener("click", this.clear);
+      this.display
+        .querySelector("#sketchpad-clear")
+        .addEventListener("click", this.clear.bind(this));
     }
 
-    const color_btns = Array.from(this.display.querySelectorAll(".sketchpad-color-select"));
+    const color_btns = Array.prototype.slice.call(
+      this.display.querySelectorAll(".sketchpad-color-select")
+    );
     for (const btn of color_btns) {
       btn.addEventListener("click", (e) => {
         const target = e.target as HTMLButtonElement;