add 'showCursor' parameter (default true) to exp-lookit-images-audio

lookit · May 5, 2021 · 620002e · 620002e
1 parent 0d4e089
commit 620002e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/app/components/exp-lookit-images-audio/component.js b/app/components/exp-lookit-images-audio/component.js
@@ -91,6 +91,11 @@ export default ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, ExpandAss
             default: true,
             description: 'Whether to show a replay button (used only if showing Next button)'
         },
+        showCursor: {
+            type: 'boolean',
+            default: true,
+            description: 'Whether to show the mouse cursor'
+        },
         maximizeDisplay: {
             type: 'boolean',
             default: false,

diff --git a/app/components/exp-lookit-images-audio/doc.rst b/app/components/exp-lookit-images-audio/doc.rst
@@ -131,6 +131,7 @@ The examples below show a variety of usages.
             "doRecording": true,
             "durationSeconds": 8,
             "maximizeDisplay": true,
+            "showCursor": false,
 
             "pageColor": "black",
             "backgroundColor": "black"
@@ -186,7 +187,8 @@ The examples below show a variety of usages.
                 "text": "Some explanatory text for parents",
                 "title": "For parents"
             },
-            "showProgressBar": true
+            "showProgressBar": true,
+            "showCursor": false
         }
 
 4. Image plus audio, with 'next' button to move on
@@ -511,6 +513,10 @@ pageColor [String | ``'white'``]
     for acceptable syntax: can use color names ('blue', 'red', 'green', etc.), or
     rgb hex values (e.g. '#800080' - include the '#')
 
+showCursor [Boolean | ``true``]
+    Whether to show the mouse cursor during this frame. By default it is shown to allow clicking on buttons or images,
+    but it can be hidden for looking studies where it might be a distraction.
+
 choiceAllowed [Boolean | ``false``]
     Whether the user may click on images to select them.
 

diff --git a/app/components/exp-lookit-images-audio/template.hbs b/app/components/exp-lookit-images-audio/template.hbs
@@ -1,6 +1,6 @@
 {{! template-lint-disable no-invalid-interactive}}
 
-<div class="exp-lookit-image-audio">
+<div class="exp-lookit-image-audio {{if showCursor "cursor-display"}}">
 
     <div class="row recorder-container video-recorder-hidden">
         <div id="recorder" class="col-xs-12">

diff --git a/app/styles/components/exp-lookit-image.scss b/app/styles/components/exp-lookit-image.scss
@@ -10,12 +10,17 @@ $exp-lookit-preferential-looking-AR: 2;
 $exp-lookit-preferential-looking-picwidth: 30;
 $exp-lookit-preferential-looking-picmargin: 2;
 
-// Display cursor even though we're in FS mode, to allow clicking on buttons and images
+
 .exp-lookit-image-audio, .exp-lookit-image-audio *
 {
     margin:0;
     padding:0;
-    cursor: auto !important;
+}
+
+// Display cursor even though we're in FS mode, to allow clicking on buttons and images
+.exp-lookit-image-audio.cursor-display, .exp-lookit-image-audio.cursor-display *
+{
+  cursor: auto !important;
 }
 
 // Pieces not used yet, for the preferential looking sections