Difference between revisions of "MediaWiki:Common.js"

Revision as of 15:04, 14 January 2018

/* Any JavaScript here will be loaded for all users on every page load. */

$( function() 
{
  // Data arrays
  var mouseKeyboardOptions = 
  {
    "PS4/USB": "ps4/USB",
    "PS4/BT": "ps4/BT",
    "PS3/USB": "ps3/USB",
    "PS3/BT": "ps3/BT",
    "Xbox One": "xboxone/USB",
    "Xbox 360": "xbox360/USB"
  };
  
  var gamepadOptions = 
  {
    "PS4/USB": "ps4/USB",
    "PS4/BT": "ps4/BT",
    "PS3/USB": "ps3/USB",
    "PS3/BT": "ps3/BT",
    "Xbox One": "xboxone/USB",
    "Xbox 360": "xbox360/USB"
  };
  
  var racingWheelOptions = 
  {
    "PS4": "ps4/USB",
    "PC": "pc/USB",
    "PS3": "ps3/USB",
    "PS2": "ps2/USB",
    "Xbox 360": "xbox360/USB",
    "Xbox One": "xboxone/USB"
  };
  
  // Loads data from arrays to select widget
  function loadOptions(optionsArray, element) 
  {
      element.empty(); // remove old options
    
      $.each(optionsArray, function(key,value) 
          {
                  // If value contains Bluetooth check if it's windows
                if(isBluetoothApplicable() == false && ~value.indexOf("BT"))
              return true; // true == continue; Skip if not bluetooth applicable
            
            element.append($("<option></option>")
               .attr("value", value).text(key));
          });
    }
  
  // Checks if system is linux so BT connection is applicable
  function isBluetoothApplicable()
  {
      var ostype = $("#ostype").val();
    
    if(ostype == "windows")
        return false; //skip value for $.each
    else
        return true;
  }
  
  // Checks values from selectboxes and loads valid options to the last one
  function updateBoxes()
  {
      var $el = $("#platform");
    var data = $("#controlscheme").val();
    
     if(data == "Mouse")
      {
         loadOptions(mouseKeyboardOptions, $el);
      }
      if(data == "Pad")
      {
         loadOptions(gamepadOptions,$el);
      }
      if(data == "SteeringWheel")
      {
         loadOptions(racingWheelOptions,$el);
      }
  }
  
  // Makes link from selectBoxes
  function generateLinkFromInput()
  {
      var platformValue = $("#platform").val();
      var splittedPlatform = platformValue.split("/");
    
    var link = "https://gimx.fr/wiki/index.php?title=XONE_Tutorial/sandbox_final&platform=" + splittedPlatform[0] + "&connectiontype=" + splittedPlatform[1] + "&ostype=" + $("#ostype").val() + "&device=" + $("#controlscheme").val();
    return link;
  }
  
  // Load first one once on start
  loadOptions(racingWheelOptions, $("#platform"));
  $('#platform').val('ps4/USB'); // Preselect ps4
  
  $( "#ostype" ).selectmenu(
  {
  	width: 'auto',
  	change: function( event, ui ) 
    {
        var $el = $("#platform");
    
     updateBoxes();
    
     // Force control refresh
     $el.selectmenu( "refresh" );
    }
  });
    
  $( "#controlscheme" ).selectmenu(
  {
    change: function( event, ui ) 
    {
      var $el = $("#platform");

      updateBoxes();
      
      // Force control refresh
      $el.selectmenu( "refresh" );
    }
    
  });
    
  $( "#platform" ).selectmenu({
  width: 'auto'
  });
  
  $( "#go" ).button().click(function()
  { 
		alert("Link: " + generateLinkFromInput());
  });
  
  var myElement = document.getElementById('Tutorials');
  myElement.innerHTML = '<div class="tutorials">

<form action="#">
<div style="display:inline-block;">
 <fieldset style="float:left; ">
 
    <label for="ostype">Select a OS</label>
    <select name="ostype" id="ostype" >
        <option value="windows" selected="selected">Windows</option>
        <option value="raspbian">Raspbian</option>
        <option value="linux">Ubuntu</option>
    </select>
 
    
  </fieldset>
  <fieldset style="float:left;margin-left: 30px;">
  <label for="controlscheme"><strong>Select a control scheme</strong></label>
    <select name="controlscheme" id="controlscheme">
      <option value="Mouse">Mouse and keyboard</option>
      <option value="Pad">Gamepad</option>
      <option value="SteeringWheel" selected="selected">Racing Wheel</option>
    </select>
 
 </fieldset>
 <fieldset style="float:left; margin-left: 30px;">
 
    <label for="platform">Select a platform</label>
    <select name="platform" id="platform" >
        <option>Loading...</option>
    </select>
 
    
  </fieldset>
  <div style="margin:auto;text-align:center; ">
  <button type="button" id="go" style="margin:auto; display:inline-block; margin-top:15px;">
  Go!
  </button>
  </div>
 </div>
 
</form>

</div>'
});