Difference between revisions of "MediaWiki:Common.js"
(Add javascript for tutorial generation - thanks Godlike!) |
|||
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() | + | $(document).ready(function() |
{ | { | ||
− | + | // 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([ | |
− | element. | + | new OO.ui.OptionWidget( |
− | + | { | |
− | + | data: value, | |
+ | label: key | ||
+ | }) | ||
+ | ]); | ||
+ | }); | ||
} | } | ||
− | + | ||
− | + | function isBluetoothApplicable() | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{ | { | ||
− | var | + | 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); | ||
}); | }); |
Revision as of 23:37, 19 February 2018
/* Any JavaScript here will be loaded for all users on every page load. */ $(document).ready(function() { // 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); });