Merge pull request #114 from vzhang03/pipe-wait-message

Ability to display wait message above loading graphics during upload
jspsych · Jun 27, 2024 · 5a7ef98 · 5a7ef98
2 parents 2f856de + 631644f
commit 5a7ef98
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/.changeset/sixty-dots-ring.md b/.changeset/sixty-dots-ring.md
@@ -0,0 +1,5 @@
+---
+"@jspsych-contrib/plugin-pipe": minor
+---
+
+Added ability to display wait message above loading graphics during upload.
diff --git a/packages/plugin-pipe/docs/jspsych-pipe.md b/packages/plugin-pipe/docs/jspsych-pipe.md
@@ -14,6 +14,7 @@ In addition to the [parameters available in all plugins](https://www.jspsych.org
 | action | string | undefined | The action to perform. Possible values are `save`, `saveBase64`, and `condition`. |
 | filename | null | undefined | The filename to use when saving data. It should be unique. If the file already exists, no data will be saved. |
 | data_string | string | null | The string of data to save. If action is `save` then this can be text data in any format (e.g., CSV, JSON, TXT, etc.). If `action` is `saveBase64`, then this should be a base64 encoded string and the `filename` should have the appropriate extension. | 
+| wait_message | HTML_string | `<p>Saving data. Please do not close this page.</p>` | An HTML message to be displayed above the loading graphics in the experiment during data upload. | 
 
 
 ## Data Generated

diff --git a/packages/plugin-pipe/src/index.ts b/packages/plugin-pipe/src/index.ts
@@ -41,6 +41,13 @@ const info = <const>{
       type: ParameterType.STRING,
       default: null,
     },
+    /**
+     * An HTML message to be displayed above the loading graphics in the experiment during data upload.
+     */
+    wait_message: {
+      type: ParameterType.HTML_STRING,
+      default: `<p>Saving data. Please do not close this page.</p>`,
+    },
   },
 };
 
@@ -70,11 +77,6 @@ class PipePlugin implements JsPsychPlugin<Info> {
     const progressCSS = `
       .spinner {
         animation: rotate 2s linear infinite;
-        z-index: 2;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin: -25px 0 0 -25px;
         width: 50px;
         height: 50px;
       }
@@ -108,7 +110,8 @@ class PipePlugin implements JsPsychPlugin<Info> {
     `;
 
     const progressHTML = `
-      <style>${progressCSS}</style>
+    <style>${progressCSS}</style>
+      ${trial.wait_message}
       <svg class="spinner" viewBox="0 0 50 50">
         <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
       </svg>`;