The Stand Still, Stay Silent Fan-Forum

About the Site => Website Help and Rules => Troubleshooting Archive => Topic started by: Shocoben on December 01, 2014, 06:49:02 PM

Title: Keyboard shortcuts (SOLVED)
Post by: Shocoben on December 01, 2014, 06:49:02 PM
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).

Quote
<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>
Title: Re: Keyboard shortcuts
Post by: Richard Weir on December 01, 2014, 07:32:42 PM
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!
Title: Re: Keyboard shortcuts
Post by: Shocoben on December 01, 2014, 07:48:28 PM
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?

Quote
<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>
Title: Re: Keyboard shortcuts
Post by: Richard Weir on December 01, 2014, 09:39:11 PM
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!
Title: Re: Keyboard shortcuts
Post by: Shocoben on December 02, 2014, 01:45:48 PM
Thank your good sir !  ;D
Title: Re: Keyboard shortcuts
Post by: kjeks on December 02, 2014, 01:51:24 PM
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?
Title: Re: Keyboard shortcuts
Post by: JoB on December 02, 2014, 02:02:45 PM
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.
Title: Re: Keyboard shortcuts
Post by: Shocoben on December 02, 2014, 02:43:08 PM
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  (http://www.w3schools.com/js/js_whereto.asp)
Title: Re: Keyboard shortcuts
Post by: FrogEater on December 02, 2014, 02:51:32 PM
@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 !
Title: Re: Keyboard shortcuts
Post by: Shocoben on December 02, 2014, 04:24:37 PM
@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 ! ;D
Title: Re: Keyboard shortcuts
Post by: FrogEater on December 02, 2014, 04:45:13 PM
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:
Quote
       if (nextShortcuts.indexOf(event.keyCode) >= 0)
               {
                  elemToClick = document.getElementById(nextid);
               }
               else if (prevShortcuts.indexOf(event.keyCode) >= 0)
               {
                  elemToClick = document.getElementById(previd);
               }
Quote
                  elemToClick = document.getElementById(
                      nextShortcuts.indexOf(event.keyCode) >= 0 ? nextid
                      : prevShortcuts.indexOf(event.keyCode) >= 0 ? previd
                      : null
                   );
               }
How I like the ? operator ;D
Edit : fixed a typo in the 'prevShortcuts' branch, in both codes
Title: Re: Keyboard shortcuts
Post by: Nimphy on December 02, 2014, 04:58:20 PM
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 ;D

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 :P)
Title: Re: Keyboard shortcuts
Post by: Eich on December 02, 2014, 05:05:11 PM
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?
Title: Re: Keyboard shortcuts
Post by: Shocoben on December 02, 2014, 05:11:24 PM
@FrogEater Nicely done ! Are you training for the js13kGames?  :D 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.
Title: Re: Keyboard shortcuts
Post by: FrogEater on December 04, 2014, 11:20:19 AM
Extra nitpick (!) :
Quote
if (elemToClick != null)
                  FakeClick(event, elemToClick);
could become
Quote
if (elemToClick)
                  FakeClick(event, elemToClick);

:)