Difference between revisions of "MediaWiki:Common.js"
Line 45: | Line 45: | ||
"Xbox 360 / USB": "xbox360/USB", | "Xbox 360 / USB": "xbox360/USB", | ||
"PS4 / BT": "ps4/BT", | "PS4 / BT": "ps4/BT", | ||
− | "PS3 / BT": "ps3/BT" | + | "PS3 / BT": "ps3/BT", |
+ | "Original Xbox / USB": "originalxbox/USB" | ||
}; | }; | ||
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); });