Merge pull request #11 from conterra/nextOnSpace

Add property arrowKeysNavigation
conterra · Jun 30, 2023 · c9b9381 · c9b9381
2 parents 5539ee0 + 39236eb
commit c9b9381
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/src/main/js/apps/sample/app.json b/src/main/js/apps/sample/app.json
@@ -62,6 +62,7 @@
                 "arrowWidth": 20,
                 "skipIfNoElement": true,
                 "nextOnTargetClick": false,
+                "arrowKeysNavigation": false,
                 "i18n": {
                     "nextBtn": "${intro.next}",
                     "prevBtn": "${intro.back}",

diff --git a/src/main/js/bundles/dn_intro/README.md b/src/main/js/bundles/dn_intro/README.md
@@ -37,6 +37,8 @@ framework. https://github.com/linkedin/hopscotch
         "skipIfNoElement": true,
         // Should we advance to the next step when the user clicks on the target? Default: false.
         "nextOnTargetClick": false,
+        // Should we advance to the next or previous step by using the arrow key. If false, we will go to the next step by pressing the space bar. Please inform the users about this behavior during the introduction.
+        "arrowKeysNavigation": false,
         // For i18n purposes. Allows you to change the text of button labels and step numbers.
         "i18n": {
             // Label for next button

diff --git a/src/main/js/bundles/dn_intro/UserIntro.js b/src/main/js/bundles/dn_intro/UserIntro.js
@@ -47,6 +47,7 @@ export default class UserIntro {
             arrowWidth: properties.arrowWidth,
             skipIfNoElement: properties.skipIfNoElement,
             nextOnTargetClick: properties.nextOnTargetClick,
+            arrowKeysNavigation: properties.arrowKeysNavigation,
             i18n: {
                 nextBtn: properties.i18n.nextBtn,
                 prevBtn: properties.i18n.prevBtn,
@@ -102,16 +103,28 @@ export default class UserIntro {
 
     onKeyDown(event) {
         const key = event.which || event.keyCode;
+        const tour = this.getCurrTour();
+
+
         switch (key) {
             case 32:
                 // space key pressed
-                this.nextStep();
+                if(!tour.arrowKeysNavigation){
+                    this.nextStep();
+                }
+
                 break;
             case 37:
                 // left key pressed
+                if(tour.arrowKeysNavigation){
+                    this.prevStep();
+                }
                 break;
             case 39:
                 // right key pressed
+                if(tour.arrowKeysNavigation){
+                    this.nextStep();
+                }
                 break;
         }
     }

diff --git a/src/main/js/bundles/dn_intro/manifest.json b/src/main/js/bundles/dn_intro/manifest.json
@@ -159,6 +159,7 @@
                 "arrowWidth": 20,
                 "skipIfNoElement": true,
                 "nextOnTargetClick": false,
+                "arrowKeysNavigation": false,
                 "i18n": {
                     "nextBtn": "${next}",
                     "prevBtn": "${back}",