Difference between revisions of "MediaWiki:Common.js"

Revision as of 20:48, 14 January 2018

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

$( function() 
{
  mw.loader.load('jquery.ui');
  
  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>';

  // 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());
  });
  

});