15 Replies Latest reply on Jun 17, 2014 7:50 AM by Sreekanth_S

    Is it possible to create/ assign shortcut keys for TOC navigation?

    Sreekanth_S Most Valuable Participant

      Hi

       

      I am using RH10 as part of TCS4.

       

      Is it possible to assign PgUp and PgDn keys as shortcuts to navigate between topics in the TOC? I have created the browse sequence.

       

      Sreekanth

        • 1. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
          Captiv8r Adobe Community Professional & MVP

          Hi there

           

          Hmmm, I'm thinking it might be possible to achieve with some scripting modification. Hopefully Willam will pop in here to advise.

           

          Earth to Willam... Earth to Willam... are we reaching you Willam?

           

          Cheers... Rick

          • 2. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
            Willam van Weelden Adobe Community Professional & MVP

            Apart from the precise key bindings, this can be done. (Page up and Page down are not registered by the browser as key press events.) This is actually simple in WebHelp, but less so in HTML5 outputs. This post includes instruction for both Multiscreen and Responsive HTML5.

             

            What you need to do (Multiscreen HTML5 only):

            1. Get jQuery. (The 1.x version.)  (jQuery is already available in the Responsive layout from RH11.) -- I was too lazy to make it in pure JS ;-)
            2. Add the jQuery file in your layout as a baggage file.
            3. On the topic page, include a link to the jQuery file. (<script type="text/javascript" src="jquery.min.js"></script> or something similar.
            4. Save the file.

             

            Then do the following:

            1. Copy the following code into a JS file:

            //-- Start of script, do not copy

            /* Enable PgUp/PgDwn shortcut for browse sequences */
            $(function(){
                 var nextBRS = 54;/* Key code of next page key */
                 var prevBRS = 52;/* Key code of prev page key */
                 
                 $backElem = $("#browseSeqBack");
                 $forwElem = $("#browseSeqNext");
                 
                 var custCanGo = function(forward) {
                      var canGo = false;
                      if(forward) {
                           if($forwElem.length != 0) {
                                canGo = true;
                           }
                      } else {
                           if($backElem.length != 0) {
                                canGo = true;
                           }
                      }
                      return canGo;
                 };
                 var custGoAvenue = function (forward) {
                      if(forward) {
                           if(custCanGo(true)) {
                                $forwElem[0].click();
                           }
                      } else {
                           if(custCanGo(false)) {
                                $backElem[0].click();
                           }
                      }
                 }
                 
                 $(window).keypress(function(event){
                      if(event.which == nextBRS) {
                           custGoAvenue(true);
                      } else if(event.which == prevBRS) {
                           custGoAvenue(false);
                      }
                 });
                 
            });
            

            //--End of script, do not copy

             

            1. Add the JavaScript file in your layout as a baggage file.
            2. On the topic page, include a link to the JavaScript file. (<script type="text/javascript" src="myscriptfile.js"></script> or something similar.
            3. Save the file.

            Alternatively, you can paste it in the file Layout.js if you are using Responsive HTML5.

             

            Last, you need to map the keys you want to use. You can find the codes for the keyboard keys on; http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

            In the script, replace the following keys with the keys you want to use:

               var nextBRS = 54;/* Key code of next page key */

               var prevBRS = 52;/* Key code of prev page key */

             

            By default, this is mapped to the numpad 4 and 6 keys. Note that keys like page up/down, home and the arrow keys don't work.

             

            I have tested this in RH11 Responsive HTML5 output and it will work with Multiscreen HTML5 as well. I haven't tested this with topics that occur in multiple browse sequences, so you may want to test that first is you use that.

             

            Greet,

             

            Willam

            • 3. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
              Willam van Weelden Adobe Community Professional & MVP

              Ah, it was for WebHelp. Didn't see that...

               

              For WebHelp, it is easy. Paste the code below in whutils.js. Note that it will not work on local Chrome. This script will work for RH8+ WebHelp

               

              var nextBRS = 102;/* Key code of next page key */

              var prevBRS = 100;/* Key code of prev page key */

               

              var nextBRS = 102;/* Key code of next page key */
              var prevBRS = 100;/* Key code of prev page key */
              
              if(window.addEventListener){
                   window.addEventListener("keyup", brsListener, false);
              } else if(window.attachEvent) {
                   window.attachEvent("onkeyup", brsListener);
              }
              
              function brsListener(event) {
                   var GetTopicPaneBRS = function () {//Get the topic pane
                        var topicPane;
                        if (top.frames[0].name == "ContentFrame")
                             topicPane = top.frames[0].frames[1].frames[1];
                        else
                             topicPane = top.frames[1].frames[1];
                        topicPane.focus();
                        return topicPane;
                   }
                   var topic = GetTopicPaneBRS();
                   if(event.which == nextBRS) {
                        if(topic.canGo(true)) {
                             topic.goAvenue(true);
                        }
                   } else if(event.which == prevBRS) {
                        if(topic.canGo(false)) {
                             topic.goAvenue(false);
                        }
                   }
              }
              

               

              Kind regards,

               

              Willam

              • 5. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                Sreekanth_S Most Valuable Participant

                Hi Willam

                 

                Thanks for working out the script for me.

                 

                I just tested this now by just changing the codes to 34 for next page and 33 for previous page (based on the info on the site you gave). But it is not working. I feel that the problem is that the cursor/ action doesn't shift to the Topics pane, and stays on the Content pane.

                 

                Sreekanth

                • 6. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                  Willam van Weelden Adobe Community Professional & MVP

                  The problem is the browser. In Chrome, pageUp and pageDown don't register as keystrokes as all and in Firefox both pageUp and pageDown are registered as key event 0. To make it even worse, in Firefox, the numpad keys are correctly handled, but in Chrome they are handled as if a regular number key has been struck. :-(

                   

                  The sweet spot is to find one keymapping that will work for you. To make it work correctly, choose a keymapping that you know works everywhere (numbers, letters, punctuation marks).

                   

                  Kind regards,

                   

                  Willam

                  • 7. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                    Sreekanth_S Most Valuable Participant

                    I tried with A and B as keycodes, tested it over the webserver (XAMPP), on Chrome and FireFox. But it did not help.

                     

                    Not sure if I have to add something before the JS code you shared. Here is my whutils.js. I have added the code at the end.

                    https://www.dropbox.com/sm/create/whutils.js

                     

                    Here is the modified code I added:

                    var nextBRS = 66;/* Key code of next page key */

                    var prevBRS = 65;/* Key code of prev page key */

                     

                    var nextBRS = 66;/* Key code of next page key */

                    var prevBRS = 65;/* Key code of prev page key */

                     

                     

                    if(window.addEventListener){

                         window.addEventListener("keyup", brsListener, false);

                    } else if(window.attachEvent) {

                         window.attachEvent("onkeyup", brsListener);

                    }

                     

                     

                    function brsListener(event) {

                         var GetTopicPaneBRS = function () {//Get the topic pane

                              var topicPane;

                              if (top.frames[0].name == "ContentFrame")

                                   topicPane = top.frames[0].frames[1].frames[1];

                              else

                                   topicPane = top.frames[1].frames[1];

                              topicPane.focus();

                              return topicPane;

                         }

                         var topic = GetTopicPaneBRS();

                         if(event.which == nextBRS) {

                              if(topic.canGo(true)) {

                                   topic.goAvenue(true);

                              }

                         } else if(event.which == prevBRS) {

                              if(topic.canGo(false)) {

                                   topic.goAvenue(false);

                              }

                         }

                    }

                     

                    Sreekanth

                    • 8. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                      Willam van Weelden Adobe Community Professional & MVP

                      Hi Sreekanth,

                       

                      I can't download the JS you shared. Dropbox gives a 404 error.

                       

                      Kind regards,

                       

                      Willam

                      • 9. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                        Sreekanth_S Most Valuable Participant

                        Hi Willam

                         

                        Thanks for getting back to this thread. Sorry for that issue with the link. Here is the correct one.

                        https://www.dropbox.com/s/k4rb59c8ar1nico/whutils.js

                         

                        Sreekanth

                        • 10. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                          Willam van Weelden Adobe Community Professional & MVP

                          I don't have RH10 with me at the moment, but I tried it in RH11 WebHelp and it worked fine, simply press A and B to move through the browse sequences.

                           

                          The interesting question is: which browser did you try? And was the help local or on a web server. The script won't work locally on Chrome, but it works locally on Internet Explorer.

                           

                          Also, try adding the following code to the function brsListener:

                          alert(event.which);

                           

                          Add it just after the opening bracket ({). If you press any button, you should get a popup with the pressed key number. Do you see that behaviour?

                           

                          Kind regards,

                           

                          Willam

                          • 11. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                            Sreekanth_S Most Valuable Participant

                            When I use the alert(event.which); script, I get the code of the key I am pressing. But I am not able to navigate.

                             

                            I have tested it both locally and from the web server on the following browsers:

                            • FireFox 24.6
                            • IE 10
                            • Chrome 35

                             

                            Sreekanth

                            • 12. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                              Willam van Weelden Adobe Community Professional & MVP

                              Curiouser and curiouser. Does the development console (F12) show any script errors on pressing these buttons?

                              • 13. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                                Sreekanth_S Most Valuable Participant

                                No, I don't see any error in the developer console (known as Web Console in FireFox) on pressing the buttons. There is a CSS related error which appears when I click topic names on the TOC.

                                 

                                Here is the screenshot:

                                Shortcut Keys Issue.png

                                • 14. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                                  Willam van Weelden Adobe Community Professional & MVP

                                  I don't see the browse sequence buttons in the minibar above the TOC. Are you sure the browse sequences are enabled for the output? (Check the SSL settings.)

                                   

                                  Try adding the following code behind var topic = GetTopicPaneBRS();:

                                  pre

                                  alert(topic.canGo(true));

                                  alert(topic.canGo(false));

                                   

                                  The system will now alert you. The first alert should show 'true' if there is a next topic in the browse sequence. The second alert should show 'true' if there is a previous topic in the browse sequence. If you always get false, there are not browse sequences at all.

                                   

                                  Kind regards,

                                   

                                  Willam

                                  • 15. Re: Is it possible to create/ assign shortcut keys for TOC navigation?
                                    Sreekanth_S Most Valuable Participant

                                    Awesome! That was the issue then. I enabled the browse sequence and things work perfectly now. Tested it locally and on the web server.

                                     

                                    Thanks a lot for your patience and helping me with the solution.

                                     

                                    Sreekanth