Search code examples
javascriptphpwordpresswordpress-plugin-creation

Activating script via keypress using JS


I am trying to modify a WordPress plugin which activates a game script when a button is pressed. I would like to be able to activate it with a combination of key presses instead (Shift + Control + F).

I have attempted wrapping the entire script in a keypress function, however, this did not work. I have confirmed that script is loaded via console log but pressing the key combination does not do anything.

Original code:

PHP


<?php

...

/* Insert the button*/
  switch ($asteroids_buttonopt) {
  case "push-1":
    echo  '<div><p style="text-align: center;">
           <a href="#" onclick="'.$asteroids_start.'"><button>Click to Play Asteroids!!!</button>
           </a></p></div>';
  break;

...

  }

?>

JS

  function getInternetExplorerVersion()
  // Returns the version of Internet Explorer or a -1
  // (indicating the use of another browser).
  {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer')
    {
      var ua = navigator.userAgent;
      var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
      if (re.exec(ua) != null)
        rv = parseFloat( RegExp.$1 );
    }
    return rv;
  }


  function startAsteroids(color,address) { 
    var ver = getInternetExplorerVersion();
    if(ver>=0){
      color = typeof(color) != 'undefined' ? color : 'black';
      document.onkeydown = function(ev) {   
      var key;
      ev = ev || event;
      key = ev.keyCode;
          if(key == 37 || key == 38 || key == 39 || key == 40) {
          //e.cancelBubble is supported by IE - this will kill the bubbling process.
          ev.cancelBubble = true;
          ev.returnValue = false;
          }      
      }
      var s =document.createElement('script');
      s.type='text/javascript'
      document.body.appendChild(s);
      s.src = address;
      void(0);
      return false; 
    }
    else{
      color = typeof(color) != 'undefined' ? color : 'black';
      var s =document.createElement('script');
      s.type='text/javascript'
      document.body.appendChild(s);
      s.src = address;
      void(0);
      return false; 
    }
  }

Any help would be greatly appreciated. The original plugin 'Asteroid Widget' was abandoned 8 years ago so I cannot seek help from the developers.


Solution

  • Instead of wrapping the entire page content, you should add the following onkeypress function to the end of the JS file.

    Required Function

        window.onkeypress=function(e){
        if(e.ctrlKey && e.shiftKey && e.code==='KeyF' ){
          startAsteroids('','/wp-content/plugins/asteroids-widget/gears/play-asteroids-yellow.min.js');
        }
      }
    

    Complete resulting file

      function getInternetExplorerVersion()
      // Returns the version of Internet Explorer or a -1
      // (indicating the use of another browser).
      {
        var rv = -1; // Return value assumes failure.
        if (navigator.appName == 'Microsoft Internet Explorer')
        {
          var ua = navigator.userAgent;
          var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
          if (re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
        }
        return rv;
      }
    
    
      function startAsteroids(color,address) { 
        var ver = getInternetExplorerVersion();
        if(ver>=0){
          color = typeof(color) != 'undefined' ? color : 'black';
          document.onkeydown = function(ev) {   
          var key;
          ev = ev || event;
          key = ev.keyCode;
              if(key == 37 || key == 38 || key == 39 || key == 40) {
              //e.cancelBubble is supported by IE - this will kill the bubbling process.
              ev.cancelBubble = true;
              ev.returnValue = false;
              }      
          }
          var s =document.createElement('script');
          s.type='text/javascript'
          document.body.appendChild(s);
          s.src = address;
          void(0);
          return false; 
        }
        else{
          color = typeof(color) != 'undefined' ? color : 'black';
          var s =document.createElement('script');
          s.type='text/javascript'
          document.body.appendChild(s);
          s.src = address;
          void(0);
          return false; 
        }
      }
        window.onkeypress=function(e){
        if(e.ctrlKey && e.shiftKey && e.code==='KeyF' ){
          startAsteroids('','/wp-content/plugins/asteroids-widget/gears/play-asteroids-yellow.min.js');
        }
      }