From 2a32590f2c6e43205c7e18888f710bac34a95fde Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Tue, 24 Oct 2023 11:13:20 -0400 Subject: [PATCH 1/6] remove `max-width` on `.jspsych-content` --- packages/jspsych/src/index.scss | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/jspsych/src/index.scss b/packages/jspsych/src/index.scss index 4b6ab3ba4d..6e55f8d23d 100644 --- a/packages/jspsych/src/index.scss +++ b/packages/jspsych/src/index.scss @@ -30,7 +30,6 @@ } .jspsych-content { - max-width: 95%; /* this is mainly an IE 10-11 fix */ text-align: center; margin: auto; /* this is for overflowing content */ } @@ -73,7 +72,6 @@ margin-left: auto; } -/* borrowing Bootstrap style for btn elements, but combining styles a bit */ .jspsych-btn { display: inline-block; padding: 8px 12px; @@ -123,10 +121,11 @@ width: 100%; background: transparent; } + .jspsych-slider:focus { outline: none; } -/* track */ + .jspsych-slider::-webkit-slider-runnable-track { appearance: none; -webkit-appearance: none; @@ -138,6 +137,7 @@ border-radius: 2px; border: 1px solid #aaa; } + .jspsych-slider::-moz-range-track { appearance: none; width: 100%; @@ -148,6 +148,7 @@ border-radius: 2px; border: 1px solid #aaa; } + .jspsych-slider::-ms-track { appearance: none; width: 99%; @@ -158,7 +159,7 @@ border-radius: 2px; border: 1px solid #aaa; } -/* thumb */ + .jspsych-slider::-webkit-slider-thumb { border: 1px solid #666; height: 24px; @@ -169,6 +170,7 @@ -webkit-appearance: none; margin-top: -9px; } + .jspsych-slider::-moz-range-thumb { border: 1px solid #666; height: 24px; @@ -177,6 +179,7 @@ background: #ffffff; cursor: pointer; } + .jspsych-slider::-ms-thumb { border: 1px solid #666; height: 20px; @@ -187,7 +190,7 @@ margin-top: -2px; } -/* jsPsych progress bar */ +/* progress bar */ #jspsych-progressbar-container { color: #555; @@ -199,10 +202,12 @@ width: 100%; line-height: 1em; } + #jspsych-progressbar-container span { font-size: 14px; padding-right: 14px; } + #jspsych-progressbar-outer { background-color: #eee; width: 50%; @@ -212,13 +217,14 @@ vertical-align: middle; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } + #jspsych-progressbar-inner { background-color: #aaa; width: 0%; height: 100%; } -/* Control appearance of jsPsych.data.displayData() */ +/* Appearance of jsPsych.data.displayData() */ #jspsych-data-display { text-align: left; } From 3f359e554baccd2d9e7f80d4fc5c174928611c7d Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Tue, 24 Oct 2023 11:26:22 -0400 Subject: [PATCH 2/6] changeset --- .changeset/proud-stingrays-wonder.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/proud-stingrays-wonder.md diff --git a/.changeset/proud-stingrays-wonder.md b/.changeset/proud-stingrays-wonder.md new file mode 100644 index 0000000000..8c4173342b --- /dev/null +++ b/.changeset/proud-stingrays-wonder.md @@ -0,0 +1,5 @@ +--- +"jspsych": major +--- + +Removed `max-width: 95%` CSS rule on the `.jspsych-content` `
`. This rule existed to address an old IE bug with flex layouts. From 84dca432d2088b3f656ba4130ee29e2d93aadc09 Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Mon, 3 Jun 2024 11:48:21 -0400 Subject: [PATCH 3/6] update to canvas v2.11.2 --- package-lock.json | 8 ++++---- packages/config/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 722a233010..bd1ba81d08 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4764,9 +4764,9 @@ ] }, "node_modules/canvas": { - "version": "2.10.2", - "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.10.2.tgz", - "integrity": "sha512-FSmlsip0nZ0U4Zcfht0qBJqDhlfGuevTZKE8h+dBOYrJjGvY3iqMGSzzbvkaFhvMXiVxfcMaPHS/kge++T5SKg==", + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz", + "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==", "hasInstallScript": true, "dependencies": { "@mapbox/node-pre-gyp": "^1.0.0", @@ -17343,7 +17343,7 @@ "@types/gulp": "4.0.10", "@types/jest": "29.2.3", "alias-hq": "github:bjoluc/alias-hq#fix-jest-plugin", - "canvas": "2.10.2", + "canvas": "2.11.2", "esbuild": "0.15.14", "gulp": "4.0.2", "gulp-cli": "2.3.0", diff --git a/packages/config/package.json b/packages/config/package.json index a003a6fba9..502e08c1a4 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -42,7 +42,7 @@ "@types/gulp": "4.0.10", "@types/jest": "29.2.3", "alias-hq": "github:bjoluc/alias-hq#fix-jest-plugin", - "canvas": "2.10.2", + "canvas": "2.11.2", "esbuild": "0.15.14", "gulp": "4.0.2", "gulp-cli": "2.3.0", From dc83096722802815191a524713498d5760aa33e2 Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Mon, 3 Jun 2024 11:48:56 -0400 Subject: [PATCH 4/6] add block display to fix #3056 --- packages/plugin-canvas-button-response/src/index.ts | 1 + packages/plugin-canvas-keyboard-response/src/index.ts | 1 + packages/plugin-canvas-slider-response/src/index.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/plugin-canvas-button-response/src/index.ts b/packages/plugin-canvas-button-response/src/index.ts index d64171cb17..461fcf8fb2 100644 --- a/packages/plugin-canvas-button-response/src/index.ts +++ b/packages/plugin-canvas-button-response/src/index.ts @@ -108,6 +108,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin { canvasElement.id = "jspsych-canvas-stimulus"; canvasElement.height = trial.canvas_size[0]; canvasElement.width = trial.canvas_size[1]; + canvasElement.style.display = "block"; stimulusElement.appendChild(canvasElement); display_element.appendChild(stimulusElement); diff --git a/packages/plugin-canvas-keyboard-response/src/index.ts b/packages/plugin-canvas-keyboard-response/src/index.ts index fa11c123bb..7b9d4f82fe 100644 --- a/packages/plugin-canvas-keyboard-response/src/index.ts +++ b/packages/plugin-canvas-keyboard-response/src/index.ts @@ -81,6 +81,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin { // draw display_element.innerHTML = new_html; let c = document.getElementById("jspsych-canvas-stimulus"); + c.style.display = "block"; trial.stimulus(c); // store response var response = { diff --git a/packages/plugin-canvas-slider-response/src/index.ts b/packages/plugin-canvas-slider-response/src/index.ts index 88633fe1f3..db6202e6f0 100644 --- a/packages/plugin-canvas-slider-response/src/index.ts +++ b/packages/plugin-canvas-slider-response/src/index.ts @@ -169,6 +169,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin { // draw let c = document.getElementById("jspsych-canvas-stimulus"); + c.style.display = "block"; trial.stimulus(c); var response = { From dc6de01a9576d581f4d036fee4842122d7ea8b55 Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Mon, 3 Jun 2024 11:50:22 -0400 Subject: [PATCH 5/6] add changeset for canvas block fixes --- .changeset/rich-cups-roll.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/rich-cups-roll.md diff --git a/.changeset/rich-cups-roll.md b/.changeset/rich-cups-roll.md new file mode 100644 index 0000000000..ec6cb3ff27 --- /dev/null +++ b/.changeset/rich-cups-roll.md @@ -0,0 +1,7 @@ +--- +"@jspsych/plugin-canvas-button-response": patch +"@jspsych/plugin-canvas-keyboard-response": patch +"@jspsych/plugin-canvas-slider-response": patch +--- + +Change canvas display to `block` to fix issues when canvas is full screen. From 1be77009621793f8c1afa84b97ddc68e691db0a7 Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Thu, 11 Jul 2024 21:44:04 -0400 Subject: [PATCH 6/6] fix package-lock --- package-lock.json | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 167378d6bd..288e9744d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,7 +4,6 @@ "requires": true, "packages": { "": { - "name": "jsPsych", "workspaces": [ "packages/*" ], @@ -5167,9 +5166,6 @@ ] }, "node_modules/canvas": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz", - "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==", "version": "2.11.2", "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz", "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==", @@ -18046,10 +18042,10 @@ "@rollup/plugin-commonjs": "25.0.7", "@rollup/plugin-node-resolve": "15.2.3", "@sucrase/jest-plugin": "3.0.0", - "@types/gulp": "4.0.10", - "@types/jest": "29.2.3", - "alias-hq": "github:bjoluc/alias-hq#fix-jest-plugin", - "canvas": "2.10.2", + "@types/gulp": "4.0.17", + "@types/jest": "29.5.8", + "alias-hq": "6.2.3", + "canvas": "^2.11.2", "esbuild": "0.15.14", "gulp": "4.0.2", "gulp-cli": "2.3.0",