Keyboard shortcuts (SOLVED)

[Shocoben]

Hi, I really like your comic, but what really bothered my was that I was forced to use my mouse.

Here is javascript script , especially made for you to put at the end of "comic.php", which will allow users to use their keyboard (Numeric arrow, A and Q (QWERTY and QWERTZ) or Q and D (AZERTY, french).

<script type="text/javascript">
//Special piece of code for sssscomic, because its needing keyboard shortcuts :p.
//Made by Shocoben

document.addEventListener("DOMContentLoaded", function(event)
{
   var next_keycodes = [39, 68] //Right numpad and D
   var prev_keycodes = [37, 65, 81] //Left numpad, A (QWERTY), Q (AZERTY Keyboard, french)
   var next_id = "navnext2b";
   var prev_id = "navprev2b";

   function AddKeyboardShortcuts(nextShortcuts, prevShortcuts, nextid, previd)
   {
      function FakeClick(event, anchorObj)
      {
        if (anchorObj.click) { //jQuery
          anchorObj.click()
        } else if(document.createEvent) {
          if(event.target !== anchorObj) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click", true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
            var allowDefault = anchorObj.dispatchEvent(evt);
            // you can check allowDefault for false to see if
            // any handler called evt.preventDefault().
            // Firefox will *not* redirect to anchorObj.href
            // for you. However every other browser will.
          }
        }
      }

      addEventListener ("keydown", function(event)
      {
         var elemToClick = null;
         console.log(event.keyCode);
         console.log(next_keycodes.indexOf(event.keyCode));
         if (nextShortcuts.indexOf(event.keyCode) >= 0)
         {
            elemToClick = document.getElementById(nextid);
         }
         else if (prevShortcuts.indexOf(event.keyCode >= 0))
         {
            elemToClick = document.getElementById(previd);
         }

         if (elemToClick != null)
            FakeClick(event, elemToClick);
      }, false);
   }

   AddKeyboardShortcuts(next_keycodes, prev_keycodes, next_id, prev_id);
});
</script>

[Richard Weir]

Neat!

Query: should there not be final closing ")" right at the ends of document.addEventListener and addEventListener? The parentheses don't seem to add up!

[Shocoben]

Neat!

Query: should there not be final closing ")" right at the ends of document.addEventListener and addEventListener? The parentheses don't seem to add up!

I re-checked and the is any syntax error, but thank your for your attention !
May you prefer this syntax?

<script type="text/javascript">
//Special piece of code for sssscomic, because its needing keyboard shortcuts :p.
//Won't work on browser < IE9, must add an attachEvent for that.

document.addEventListener
(
   "DOMContentLoaded",
   function(event)
   {
      var next_keycodes = [39, 68] //Right numpad and D
      var prev_keycodes = [37, 65, 81] //Left numpad, A (QWERTY), Q (AZERTY Keyboard, french)
      var next_id = "navnext2b";
      var prev_id = "navprev2b";

      function AddKeyboardShortcuts(nextShortcuts, prevShortcuts, nextid, previd)
      {
         function FakeClick(event, anchorObj)
         {
           if (anchorObj.click) { //jQuery
             anchorObj.click()
           } else if(document.createEvent) {
             if(event.target !== anchorObj) {
               var evt = document.createEvent("MouseEvents");
               evt.initMouseEvent("click", true, true, window,
                   0, 0, 0, 0, 0, false, false, false, false, 0, null);
               var allowDefault = anchorObj.dispatchEvent(evt);
               // you can check allowDefault for false to see if
               // any handler called evt.preventDefault().
               // Firefox will *not* redirect to anchorObj.href
               // for you. However every other browser will.
             }
           }
         }
         
         document.addEventListener
         (
            "keydown",
            function(event)
            {
               var elemToClick = null;
               console.log(event.keyCode);
               if (nextShortcuts.indexOf(event.keyCode) >= 0)
               {
                  elemToClick = document.getElementById(nextid);
               }
               else if (prevShortcuts.indexOf(event.keyCode >= 0))
               {
                  elemToClick = document.getElementById(previd);
               }

               if (elemToClick != null)
                  FakeClick(event, elemToClick);
            },
            false
         ); //End of keydown
      }

      AddKeyboardShortcuts(next_keycodes, prev_keycodes, next_id, prev_id);
   }
);//End of OnLoad

</script>

[Richard Weir]

OK, I was going blind and missed the ")" first time round, even though I looked very carefully at the time. *shrugs*

Doesn't detract from the possible usefulness of the script however!

[Shocoben]

Thank your good sir ! 

[kjeks]

Could you explain to total noobs where this scipt would end? For sure it would go somewhere into the board's setup script, would it?

[JoB]

Could you explain to total noobs where this scipt would end? For sure it would go somewhere into the board's setup script, would it?

navprev2b and navnext2b are <DIV>s with previous/next page buttons on Minnas website.

[Shocoben]

Could you explain to total noobs where this scipt would end? For sure it would go somewhere into the board's setup script, would it?

I'm talking about http://sssscomic.com/, and I couldn't detect the CMS (Wordpress, Drupal, Joomla, ...) you're using (surely a home-made?), it will be easy. You need to go on the FTP of the website and you have two choices :

1) Put it in the header

There should be something like "head.php" or "header.php", open it and look for the end of the balise head which means
"</head>" and insert the script  just before "</head>.

For : Is easy
Cons : Will be loaded on ALL the pages.

2) Put it directly into comic.php

Go into comic.php, and look if there isn't any "</body>". If there is, insert the script just before "</body>"
If the isn't just insert the script at the end of comic.php.

For : Will only be loaded on comic.php.
Cons : A little bit more add to insert.

Extra: If you know a little about html, it's cleanest to put the script into a file like "shortcuts_comics.js" and insert "<script src="shortcuts_comics.js"></script>" (src is the path to the file, it can be relative, here the file is at the same place as comic.php) instead of all the script block I gave you. It will make the website look cleaner and load faster. More infos here

[FrogEater]

@kex : I think you, kex, have nothing to do. The decision is up to Minna. If and when she installs (or gets installed) this script on the SSSS site, abracamagic shortcuts will work!

@shocoben: nice piece of JS, indeed !

[Shocoben]

@kex : I'm sorry to trouble you hek, I didn't know who was in charge of the comic website, so I put it here. I didn't know Minna herself was in charge :p.

@FrogEater : Thank you !

[FrogEater]

This forum is a pure fandom initiative, I don't even know whether Minna has a forum account or not.
It might be useful to leave a comment on the comic site once the new chapter starts, ie we're sure Minna is back.

JS nitpicking (just for fun): you might consider making a few instructions more compact:

       if (nextShortcuts.indexOf(event.keyCode) >= 0)
               {
                  elemToClick = document.getElementById(nextid);
               }
               else if (prevShortcuts.indexOf(event.keyCode) >= 0)
               {
                  elemToClick = document.getElementById(previd);
               }

                  elemToClick = document.getElementById(
                      nextShortcuts.indexOf(event.keyCode) >= 0 ? nextid
                      : prevShortcuts.indexOf(event.keyCode) >= 0 ? previd
                      : null
                   );
               }

How I like the ? operator
Edit : fixed a typo in the 'prevShortcuts' branch, in both codes

[Nimphy]

This forum is a pure fandom initiative, I don't even know whether Minna has a forum account or not.
It might be useful to leave a comment on the comic site once the new chapter starts, ie we're sure Minna is back.

JS nitpicking (just for fun): you might consider making a few instructions more compact:How I like the ? operator

I'm pretty sure Minna does not have a forum account. She did say that she wouldn't be officially controlling this, after all.

(Oh, you are nitpicking that code-stuff, and me, I was just feeling proud of being able to do stuff in IT as much as a girl who's taken it for two months can. You know... Elementary operations (is that even the right term in English?) and stuff like that. And you people just start nitpicking on code. Now I feel ignorant )

[Eich]

Minna doesn't even check the forum, as far as I know.
She's easiest to contact through the comic's comments, twitter, or... Tumblr?  She has a tumblr, right?

[Shocoben]

@FrogEater Nicely done ! Are you training for the js13kGames?  I'll integrate this modification on my submission to Mina on the next chapter.

@Nimphy Take it like a challenge to improve your IT Skills xD, you can now write javascript code which will make a brief popup appear for notify about those shortcuts :p ! No seriously, don't worry about that, people do what they do.

@Eich Thank you for you advice.

[FrogEater]

Extra nitpick (!) :

if (elemToClick != null)
                  FakeClick(event, elemToClick);

could become

if (elemToClick)
                  FakeClick(event, elemToClick);