Difference between revisions of "MediaWiki:Common.js"

From GIMX
Jump to: navigation, search
 

(131 intermediate revisions by the same user not shown)

Line 1: Line 1:
 
/* Any JavaScript here will be loaded for all users on every page load. */
 
/* Any JavaScript here will be loaded for all users on every page load. */
  
$(function () {
+
$.when( mw.loader.using( 'oojs-ui-core', 'oojs-ui-apex' ), $.ready ).then(function() {
  
   var myElement = document.getElementById('Tutorials');
+
   var myElement = document.getElementById('Tutorials__');
   myElement.innerHTML = '<div class="tutorials">
+
  if (myElement == null)
 +
  {
 +
    return;
 +
  }
 +
 
 +
  mw.loader.load( '/wiki/resources/lib/oojs-ui/oojs-ui-core-apex.css', 'text/css' );
 +
  mw.loader.load( '/wiki/resources/lib/oojs-ui/oojs-ui-widgets-apex.css', 'text/css' );
 +
 
 +
   myElement.innerHTML = ''
 +
+ '<div class="tutorials">'
 +
+ '<form action="#">'
 +
+ '<div style="display:inline-block;">'
 +
+ '  <fieldset style="float:left; ">'
 +
+ '    <label for="ostype">Select an OS</label>'
 +
+ '    <div id="ostypeWrapper"></div>'
 +
+ '  </fieldset>'
 +
+ '  <fieldset style="float:left;margin-left: 30px;">'
 +
+ '    <label for="controlscheme"><strong>Select a control scheme</strong></label>'
 +
+ '    <div id="controlschemeWrapper"></div>'
 +
+ '  </fieldset>'
 +
+ '  <fieldset style="float:left; margin-left: 30px;">'
 +
+ '    <label for="platform">Select a target platform</label>'
 +
+ '    <div id="platformWrapper"></div>'
 +
+ '  </fieldset>'
 +
+ '  <fieldset style="float:left; margin-left: 30px;">'
 +
+ '    <label for="buttonWrapper">Click</label>'
 +
+ '    <div style="margin:auto;text-align:center; " id="buttonWrapper" />'
 +
+ '  </fieldset>'
 +
+ '</div>'
 +
+ '</form>'
 +
+ '</div>';
 +
 
 +
// GODLIKE
 +
 
 +
    var mouseKeyboardOptions =
 +
{
 +
        "PS4 / USB": "ps4/USB",
 +
        "Xbox One / USB": "xboxone/USB",
 +
        "PS3 / USB": "ps3/USB",
 +
        "Xbox 360 / USB": "xbox360/USB",
 +
        "PS4 / BT": "ps4/BT",
 +
        "PS3 / BT": "ps3/BT",
 +
        "Original Xbox / USB": "originalxbox/USB"
 +
    };
 +
 
 +
    var gamepadOptions =
 +
{
 +
        "PS4 / USB": "ps4/USB",
 +
        "Xbox One / USB": "xboxone/USB",
 +
        "PS3 / USB": "ps3/USB",
 +
        "Xbox 360 / USB": "xbox360/USB",
 +
        "PS4 / BT": "ps4/BT",
 +
        "PS3 / BT": "ps3/BT",
 +
        "PC / USB": "pc/USB",
 +
        "Original Xbox / USB": "originalxbox/USB"
 +
    };
 +
 
 +
    var racingWheelOptions =
 +
{
 +
        "PS4 / USB": "ps4/USB",
 +
        "PC / USB": "pc/USB",
 +
        "PS3 / USB": "ps3/USB",
 +
        "PS2 / USB": "ps2/USB"
 +
    };
 +
 
 +
    function loadOptions(optionsArray, element)
 +
    {
 +
        element.getMenu().clearItems(); // remove old options
  
<form action="#">
+
         $.each(optionsArray, function(key, value)
<div style="display:inline-block;">
+
         {
<fieldset style="float:left; ">
+
            // If value contains Bluetooth check if it's windows
+
            if (isBluetoothApplicable() == false && ~value.indexOf("BT"))
    <label for="ostype">Select a OS</label>
+
                return true; // true == continue; Skip if not bluetooth applicable
    <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>'
 
  
}());
+
            element.getMenu().addItems([
 +
                new OO.ui.OptionWidget(
 +
                {
 +
                    data: value,
 +
                    label: key
 +
                })
 +
            ]);
 +
        });
 +
    }
 +
 
 +
    function isBluetoothApplicable()
 +
    {
 +
        var ostype = dropDownOsType.getMenu().getSelectedItem().getData();
  
$( function()
+
        if (ostype == "windows")
{
+
            return false; //skip value for $.each
  // Data arrays
+
        else
  var mouseKeyboardOptions =
+
            return true;
  {
 
    "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 updateBoxes()
  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");
+
         var $el = dropDownPlatform;
   
+
        var data = dropDownControlScheme.getMenu().getSelectedItem().data;
    updateBoxes();
+
 
   
+
        if (data == "Mouse")
    // Force control refresh
+
        {
    $el.selectmenu( "refresh" );
+
            loadOptions(mouseKeyboardOptions, $el);
 +
        }
 +
        if (data == "Pad")
 +
        {
 +
            loadOptions(gamepadOptions, $el);
 +
        }
 +
        if (data == "SteeringWheel")
 +
        {
 +
            loadOptions(racingWheelOptions, $el);
 +
        }
 
     }
 
     }
  });
+
 
      
+
     // Makes link from selectBoxes
  $( "#controlscheme" ).selectmenu(
+
     function generateLinkFromInput()
  {
 
     change: function( event, ui )  
 
 
     {
 
     {
      var $el = $("#platform");
+
        var platformValue = dropDownPlatform.getMenu().getSelectedItem().data;
 +
        var splittedPlatform = platformValue.split("/");
 +
        var ostype = dropDownOsType.getMenu().getSelectedItem().data;
 +
        var controlscheme = dropDownControlScheme.getMenu().getSelectedItem().data;
 +
 
 +
        var link = "/wiki/index.php?title=Guide&platform=" + splittedPlatform[0] + "&connectiontype=" + splittedPlatform[1] + "&ostype=" + ostype + "&device=" + controlscheme;
 +
        return link;
 +
    }
  
      updateBoxes();
+
    function selectFirstItem(element)
     
+
    {
      // Force control refresh
+
        element.getMenu().selectItem(element.getMenu().items[0]);
      $el.selectmenu( "refresh" );
 
 
     }
 
     }
      
+
 
  });
+
    var dropDownOsType = new OO.ui.DropdownWidget(
      
+
     {
  $( "#platform" ).selectmenu({
+
        label: 'OS',
  width: 'auto'
+
        menu:
  });
+
        {
 
+
            items: [
  $( "#go" ).button().click(function()
+
                new OO.ui.OptionWidget(
  {  
+
                {
alert("Link: " + generateLinkFromInput());
+
                    data: "windows",
  });
+
                    label: "Windows"
 
+
                }),
 +
                new OO.ui.OptionWidget(
 +
                {
 +
                    data: "linux",
 +
                    label: "GNU/Linux"
 +
                })
 +
 
 +
            ]
 +
        }
 +
    });
 +
 
 +
     var dropDownControlScheme = new OO.ui.DropdownWidget(
 +
    {
 +
        label: 'Controls',
 +
        menu:
 +
        {
 +
            items: [
 +
                new OO.ui.OptionWidget(
 +
                {
 +
                    data: "SteeringWheel",
 +
                    label: "Racing Wheel"
 +
                }),
 +
                new OO.ui.OptionWidget(
 +
                {
 +
                    data: "Mouse",
 +
                    label: "Mouse and Keyboard"
 +
                }),
 +
                new OO.ui.OptionWidget(
 +
                {
 +
                    data: "Pad",
 +
                    label: "Gamepad"
 +
                }),
 +
 
 +
            ]
 +
        }
 +
    });
 +
 
 +
    var dropDownPlatform = new OO.ui.DropdownWidget(
 +
    {});
 +
 
 +
    var buttonGo = new OO.ui.ButtonWidget(
 +
    {
 +
        label: 'Go!',
 +
    });
 +
 
 +
    // Create the widgets
 +
    $('#ostypeWrapper').append(dropDownOsType.$element);
 +
    $('#controlschemeWrapper').append(dropDownControlScheme.$element);
 +
    $('#platformWrapper').append(dropDownPlatform.$element);
 +
    $('#buttonWrapper').append(buttonGo.$element);
 +
 
 +
    // Trigger an event when an item in the menu is selected
 +
    var selectionChanged = function()
 +
    {
 +
        updateBoxes();
 +
        selectFirstItem(dropDownPlatform); // Revert to first selected item
 +
    };
 +
 
 +
    // When Go button is clicked
 +
    var clickedGo = function()
 +
    {
 +
        window.open(generateLinkFromInput(),"_self");
 +
    };
 +
 
 +
    // Set first item as selected
 +
    selectFirstItem(dropDownOsType);
 +
    selectFirstItem(dropDownControlScheme);
 +
    loadOptions(racingWheelOptions, dropDownPlatform); // it depends on ostype and controlscheme, it's also empty by default so do it here
 +
    selectFirstItem(dropDownPlatform);
 +
 
 +
    // Assign events programatically selecting first one to prevent firing select event too early
 +
    dropDownOsType.getMenu().on('select', selectionChanged);
 +
    dropDownControlScheme.getMenu().on('select', selectionChanged);
 +
    buttonGo.on('click', clickedGo);
  
 
});
 
});

Latest revision as of 11:19, 6 May 2020

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

$.when( mw.loader.using( 'oojs-ui-core', 'oojs-ui-apex' ), $.ready ).then(function() {

  var myElement = document.getElementById('Tutorials__');
  if (myElement == null)
  {
    return;
  }

  mw.loader.load( '/wiki/resources/lib/oojs-ui/oojs-ui-core-apex.css', 'text/css' );
  mw.loader.load( '/wiki/resources/lib/oojs-ui/oojs-ui-widgets-apex.css', 'text/css' );

  myElement.innerHTML = ''
+ '<div class="tutorials">'
+ '<form action="#">'
+ '<div style="display:inline-block;">'
+ '  <fieldset style="float:left; ">'
+ '    <label for="ostype">Select an OS</label>'
+ '    <div id="ostypeWrapper"></div>'
+ '  </fieldset>'
+ '  <fieldset style="float:left;margin-left: 30px;">'
+ '    <label for="controlscheme"><strong>Select a control scheme</strong></label>'
+ '    <div id="controlschemeWrapper"></div>'
+ '  </fieldset>'
+ '  <fieldset style="float:left; margin-left: 30px;">'
+ '    <label for="platform">Select a target platform</label>'
+ '    <div id="platformWrapper"></div>'
+ '  </fieldset>'
+ '  <fieldset style="float:left; margin-left: 30px;">'
+ '    <label for="buttonWrapper">Click</label>'
+ '    <div style="margin:auto;text-align:center; " id="buttonWrapper" />'
+ '  </fieldset>'
+ '</div>'
+ '</form>'
+ '</div>';

// GODLIKE

    var mouseKeyboardOptions = 
	{
        "PS4 / USB": "ps4/USB",
        "Xbox One / USB": "xboxone/USB",
        "PS3 / USB": "ps3/USB",
        "Xbox 360 / USB": "xbox360/USB",
        "PS4 / BT": "ps4/BT",
        "PS3 / BT": "ps3/BT",
        "Original Xbox / USB": "originalxbox/USB"
    };

    var gamepadOptions = 
	{
        "PS4 / USB": "ps4/USB",
        "Xbox One / USB": "xboxone/USB",
        "PS3 / USB": "ps3/USB",
        "Xbox 360 / USB": "xbox360/USB",
        "PS4 / BT": "ps4/BT",
        "PS3 / BT": "ps3/BT",
        "PC / USB": "pc/USB",
        "Original Xbox / USB": "originalxbox/USB"
    };

    var racingWheelOptions = 
	{
        "PS4 / USB": "ps4/USB",
        "PC / USB": "pc/USB",
        "PS3 / USB": "ps3/USB",
        "PS2 / USB": "ps2/USB"
    };

    function loadOptions(optionsArray, element)
    {
        element.getMenu().clearItems(); // 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.getMenu().addItems([
                new OO.ui.OptionWidget(
                {
                    data: value,
                    label: key
                })
            ]);
        });
    }

    function isBluetoothApplicable()
    {
        var ostype = dropDownOsType.getMenu().getSelectedItem().getData();

        if (ostype == "windows")
            return false; //skip value for $.each
        else
            return true;
    }

    function updateBoxes()
    {
        var $el = dropDownPlatform;
        var data = dropDownControlScheme.getMenu().getSelectedItem().data;

        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 = dropDownPlatform.getMenu().getSelectedItem().data;
        var splittedPlatform = platformValue.split("/");
        var ostype = dropDownOsType.getMenu().getSelectedItem().data;
        var controlscheme = dropDownControlScheme.getMenu().getSelectedItem().data;

        var link = "/wiki/index.php?title=Guide&platform=" + splittedPlatform[0] + "&connectiontype=" + splittedPlatform[1] + "&ostype=" + ostype + "&device=" + controlscheme;
        return link;
    }

    function selectFirstItem(element)
    {
        element.getMenu().selectItem(element.getMenu().items[0]);
    }

    var dropDownOsType = new OO.ui.DropdownWidget(
    {
        label: 'OS',
        menu:
        {
            items: [
                new OO.ui.OptionWidget(
                {
                    data: "windows",
                    label: "Windows"
                }),
                new OO.ui.OptionWidget(
                {
                    data: "linux",
                    label: "GNU/Linux"
                })

            ]
        }
    });

    var dropDownControlScheme = new OO.ui.DropdownWidget(
    {
        label: 'Controls',
        menu:
        {
            items: [
                new OO.ui.OptionWidget(
                {
                    data: "SteeringWheel",
                    label: "Racing Wheel"
                }),
                new OO.ui.OptionWidget(
                {
                    data: "Mouse",
                    label: "Mouse and Keyboard"
                }),
                new OO.ui.OptionWidget(
                {
                    data: "Pad",
                    label: "Gamepad"
                }),

            ]
        }
    });

    var dropDownPlatform = new OO.ui.DropdownWidget(
    {});

    var buttonGo = new OO.ui.ButtonWidget(
    {
        label: 'Go!',
    });

    // Create the widgets
    $('#ostypeWrapper').append(dropDownOsType.$element);
    $('#controlschemeWrapper').append(dropDownControlScheme.$element);
    $('#platformWrapper').append(dropDownPlatform.$element);
    $('#buttonWrapper').append(buttonGo.$element);

    // Trigger an event when an item in the menu is selected
    var selectionChanged = function()
    {
        updateBoxes();
        selectFirstItem(dropDownPlatform); // Revert to first selected item
    };

    // When Go button is clicked
    var clickedGo = function()
    {
        window.open(generateLinkFromInput(),"_self");
    };

    // Set first item as selected
    selectFirstItem(dropDownOsType);
    selectFirstItem(dropDownControlScheme);
    loadOptions(racingWheelOptions, dropDownPlatform); // it depends on ostype and controlscheme, it's also empty by default so do it here
    selectFirstItem(dropDownPlatform);

    // Assign events programatically selecting first one to prevent firing select event too early
    dropDownOsType.getMenu().on('select', selectionChanged);
    dropDownControlScheme.getMenu().on('select', selectionChanged);
    buttonGo.on('click', clickedGo);

});