Difference between revisions of "MediaWiki:Common.js"

Latest revision as of 10: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);

});