Difference between revisions of "MediaWiki:Common.js"

Revision as of 21:50, 20 February 2018

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

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

  mw.loader.load( 'oojs' );

  myElement.innerHTML = ''
+ '<div class="tutorials">'
+ '<form action="#">'
+ '<div style="display:inline-block;">'
+ '  <fieldset style="float:left; ">'
+ '    <label for="ostype">Select a 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 platform</label>'
+ '    <div id="platformWrapper"></div>'
+ '  </fieldset>'
+ '  <div style="margin:auto;text-align:center; " id="buttonWrapper" />'
+ '</div>'
+ '</form>'
+ '</div>';

// GODLIKE

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

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

    var racingWheelOptions = 
	{
        "PS2": "ps2/USB",
        "PS3": "ps3/USB",
        "PS4": "ps4/USB",
        "Xbox 360": "xbox360/USB",
        "Xbox One": "xboxone/USB",
        "PC": "pc/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().findSelectedItem().data

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

    function updateBoxes()
    {
        var $el = dropDownPlatform;
        var data = dropDownControlScheme.getMenu().findSelectedItem().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().findSelectedItem().data;
        var splittedPlatform = platformValue.split("/");
        var ostype = dropDownOsType.getMenu().findSelectedItem().data;
        var controlscheme = dropDownControlScheme.getMenu().findSelectedItem().data;

        var link = "https://gimx.fr/wiki/index.php?title=XONE_Tutorial/sandbox_final&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: "Linux"
                })

            ]
        }
    });

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

            ]
        }
    });

    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()
    {
        alert(generateLinkFromInput());
    };

    // Set first item as selected
    selectFirstItem(dropDownOsType);
    selectFirstItem(dropDownControlScheme);
    loadOptions(mouseKeyboardOptions, 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);

});