|
|
(107 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. */ |
| | | |
− | mw.loader.load(['oojs-ui', 'oojs-ui-wikimediaui']);
| + | $.when( mw.loader.using( 'oojs-ui-core', 'oojs-ui-apex' ), $.ready ).then(function() { |
| | | |
− | var dropDown = new OO.ui.DropdownInputWidget( { | + | var myElement = document.getElementById('Tutorials__'); |
− | label: 'Dropdown menu: Select a menu option',
| + | if (myElement == null) |
− | options: [
| + | { |
− | { data: 'a', label: 'First' } ,
| + | return; |
− | { data: 'b', label: 'Second'} ,
| + | } |
− | { data: 'c', label: 'Third' }
| |
− | ] | |
− | } ); | |
− | | |
− | $( 'Tutorials' ).append( dropDown.$element );
| |
| | | |
− | $( function()
| + | 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' ); |
| | | |
− | var myElement = document.getElementById('Tutorials');
| |
| myElement.innerHTML = '' | | myElement.innerHTML = '' |
| + '<div class="tutorials">' | | + '<div class="tutorials">' |
Line 23: |
Line 17: |
| + '<div style="display:inline-block;">' | | + '<div style="display:inline-block;">' |
| + ' <fieldset style="float:left; ">' | | + ' <fieldset style="float:left; ">' |
− | + ' <label for="ostype">Select a OS</label>' | + | + ' <label for="ostype">Select an OS</label>' |
− | + ' <select name="ostype" id="ostype" >' | + | + ' <div id="ostypeWrapper"></div>' |
− | + ' <option value="windows" selected="selected">Windows</option>'
| |
− | + ' <option value="raspbian">Raspbian</option>'
| |
− | + ' <option value="linux">Ubuntu</option>'
| |
− | + ' </select>'
| |
| + ' </fieldset>' | | + ' </fieldset>' |
| + ' <fieldset style="float:left;margin-left: 30px;">' | | + ' <fieldset style="float:left;margin-left: 30px;">' |
| + ' <label for="controlscheme"><strong>Select a control scheme</strong></label>' | | + ' <label for="controlscheme"><strong>Select a control scheme</strong></label>' |
− | + ' <select name="controlscheme" id="controlscheme">' | + | + ' <div id="controlschemeWrapper"></div>' |
− | + ' <option value="Mouse">Mouse and keyboard</option>' | + | + ' </fieldset>' |
− | + ' <option value="Pad">Gamepad</option>' | + | + ' <fieldset style="float:left; margin-left: 30px;">' |
− | + ' <option value="SteeringWheel" selected="selected">Racing Wheel</option>' | + | + ' <label for="platform">Select a target platform</label>' |
− | + ' </select>' | + | + ' <div id="platformWrapper"></div>' |
− | + ' </fieldset>' | + | + ' </fieldset>' |
− | + ' <fieldset style="float:left; margin-left: 30px;">' | + | + ' <fieldset style="float:left; margin-left: 30px;">' |
− | + ' <label for="platform">Select a platform</label>' | + | + ' <label for="buttonWrapper">Click</label>' |
− | + ' <select name="platform" id="platform" >' | + | + ' <div style="margin:auto;text-align:center; " id="buttonWrapper" />' |
− | + ' <option>Loading...</option>'
| |
− | + ' </select>'
| |
| + ' </fieldset>' | | + ' </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>' | | + '</div>' |
| + '</form>' | | + '</form>' |
| + '</div>'; | | + '</div>'; |
| | | |
− | // Data arrays
| + | // GODLIKE |
− | var mouseKeyboardOptions =
| + | |
− | {
| + | var mouseKeyboardOptions = |
− | "PS4/USB": "ps4/USB",
| + | { |
− | "PS4/BT": "ps4/BT",
| + | "PS4 / USB": "ps4/USB", |
− | "PS3/USB": "ps3/USB",
| + | "Xbox One / USB": "xboxone/USB", |
− | "PS3/BT": "ps3/BT",
| + | "PS3 / USB": "ps3/USB", |
− | "Xbox One": "xboxone/USB",
| + | "Xbox 360 / USB": "xbox360/USB", |
− | "Xbox 360": "xbox360/USB"
| + | "PS4 / BT": "ps4/BT", |
− | };
| + | "PS3 / BT": "ps3/BT", |
− |
| + | "Original Xbox / USB": "originalxbox/USB" |
− | var gamepadOptions =
| + | }; |
− | {
| + | |
− | "PS4/USB": "ps4/USB",
| + | var gamepadOptions = |
− | "PS4/BT": "ps4/BT",
| + | { |
− | "PS3/USB": "ps3/USB",
| + | "PS4 / USB": "ps4/USB", |
− | "PS3/BT": "ps3/BT",
| + | "Xbox One / USB": "xboxone/USB", |
− | "Xbox One": "xboxone/USB",
| + | "PS3 / USB": "ps3/USB", |
− | "Xbox 360": "xbox360/USB"
| + | "Xbox 360 / USB": "xbox360/USB", |
− | };
| + | "PS4 / BT": "ps4/BT", |
− |
| + | "PS3 / BT": "ps3/BT", |
− | var racingWheelOptions =
| + | "PC / USB": "pc/USB", |
− | {
| + | "Original Xbox / USB": "originalxbox/USB" |
− | "PS4": "ps4/USB",
| + | }; |
− | "PC": "pc/USB",
| + | |
− | "PS3": "ps3/USB",
| + | var racingWheelOptions = |
− | "PS2": "ps2/USB",
| + | { |
− | "Xbox 360": "xbox360/USB",
| + | "PS4 / USB": "ps4/USB", |
− | "Xbox One": "xboxone/USB" | + | "PC / USB": "pc/USB", |
− | };
| + | "PS3 / USB": "ps3/USB", |
− |
| + | "PS2 / USB": "ps2/USB" |
− | // Loads data from arrays to select widget
| + | }; |
− | function loadOptions(optionsArray, element)
| + | |
− | {
| + | function loadOptions(optionsArray, element) |
− | element.empty(); // remove old options
| + | { |
− |
| + | element.getMenu().clearItems(); // remove old options |
− | $.each(optionsArray, function(key,value)
| + | |
− | {
| + | $.each(optionsArray, function(key, value) |
− | // If value contains Bluetooth check if it's windows
| + | { |
− | if(isBluetoothApplicable() == false && ~value.indexOf("BT"))
| + | // If value contains Bluetooth check if it's windows |
− | return true; // true == continue; Skip if not bluetooth applicable
| + | if (isBluetoothApplicable() == false && ~value.indexOf("BT")) |
− |
| + | return true; // true == continue; Skip if not bluetooth applicable |
− | element.append($("<option></option>") | + | |
− | .attr("value", value).text(key));
| + | |
− | });
| + | 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; |
| } | | } |
− |
| + | |
− | // 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; |
| | | |
− | updateBoxes();
| + | var link = "/wiki/index.php?title=Guide&platform=" + splittedPlatform[0] + "&connectiontype=" + splittedPlatform[1] + "&ostype=" + ostype + "&device=" + controlscheme; |
− |
| + | return link; |
− | // Force control refresh
| |
− | $el.selectmenu( "refresh" );
| |
| } | | } |
− | | + | |
− | });
| + | function selectFirstItem(element) |
− | | + | { |
− | $( "#platform" ).selectmenu({
| + | element.getMenu().selectItem(element.getMenu().items[0]); |
− | width: 'auto'
| + | } |
− | });
| + | |
− |
| + | var dropDownOsType = new OO.ui.DropdownWidget( |
− | $( "#go" ).button().click(function()
| + | { |
− | {
| + | label: 'OS', |
− | alert("Link: " + generateLinkFromInput());
| + | 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); |
| | | |
| }); | | }); |