Difference between revisions of "MediaWiki:Common.js"
(Add javascript for tutorial generation - thanks Godlike!) |
|||
Line 131: | Line 131: | ||
alert("Link: " + generateLinkFromInput()); | alert("Link: " + generateLinkFromInput()); | ||
}); | }); | ||
+ | |||
+ | var myElement = document.getElementById('Tutorials'); | ||
+ | myElement.innerHTML = '<div class="tutorials"> | ||
+ | |||
+ | <form action="#"> | ||
+ | <div style="display:inline-block;"> | ||
+ | <fieldset style="float:left; "> | ||
+ | |||
+ | <label for="ostype">Select a OS</label> | ||
+ | <select name="ostype" id="ostype" > | ||
+ | <option value="windows" selected="selected">Windows</option> | ||
+ | <option value="raspbian">Raspbian</option> | ||
+ | <option value="linux">Ubuntu</option> | ||
+ | </select> | ||
+ | |||
− | + | </fieldset> | |
+ | <fieldset style="float:left;margin-left: 30px;"> | ||
+ | <label for="controlscheme"><strong>Select a control scheme</strong></label> | ||
+ | <select name="controlscheme" id="controlscheme"> | ||
+ | <option value="Mouse">Mouse and keyboard</option> | ||
+ | <option value="Pad">Gamepad</option> | ||
+ | <option value="SteeringWheel" selected="selected">Racing Wheel</option> | ||
+ | </select> | ||
+ | |||
+ | </fieldset> | ||
+ | <fieldset style="float:left; margin-left: 30px;"> | ||
+ | |||
+ | <label for="platform">Select a platform</label> | ||
+ | <select name="platform" id="platform" > | ||
+ | <option>Loading...</option> | ||
+ | </select> | ||
+ | |||
+ | |||
+ | </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> | ||
+ | |||
+ | </form> | ||
+ | |||
+ | </div>' | ||
}); | }); |
Revision as of 16:04, 14 January 2018
/* Any JavaScript here will be loaded for all users on every page load. */ $( function() { // Data arrays var mouseKeyboardOptions = { "PS4/USB": "ps4/USB", "PS4/BT": "ps4/BT", "PS3/USB": "ps3/USB", "PS3/BT": "ps3/BT", "Xbox One": "xboxone/USB", "Xbox 360": "xbox360/USB" }; var gamepadOptions = { "PS4/USB": "ps4/USB", "PS4/BT": "ps4/BT", "PS3/USB": "ps3/USB", "PS3/BT": "ps3/BT", "Xbox One": "xboxone/USB", "Xbox 360": "xbox360/USB" }; var racingWheelOptions = { "PS4": "ps4/USB", "PC": "pc/USB", "PS3": "ps3/USB", "PS2": "ps2/USB", "Xbox 360": "xbox360/USB", "Xbox One": "xboxone/USB" }; // Loads data from arrays to select widget function loadOptions(optionsArray, element) { element.empty(); // 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.append($("<option></option>") .attr("value", value).text(key)); }); } // Checks if system is linux so BT connection is applicable 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"); updateBoxes(); // Force control refresh $el.selectmenu( "refresh" ); } }); $( "#controlscheme" ).selectmenu( { change: function( event, ui ) { var $el = $("#platform"); updateBoxes(); // Force control refresh $el.selectmenu( "refresh" ); } }); $( "#platform" ).selectmenu({ width: 'auto' }); $( "#go" ).button().click(function() { alert("Link: " + generateLinkFromInput()); }); var myElement = document.getElementById('Tutorials'); myElement.innerHTML = '<div class="tutorials"> <form action="#"> <div style="display:inline-block;"> <fieldset style="float:left; "> <label for="ostype">Select a OS</label> <select name="ostype" id="ostype" > <option value="windows" selected="selected">Windows</option> <option value="raspbian">Raspbian</option> <option value="linux">Ubuntu</option> </select> </fieldset> <fieldset style="float:left;margin-left: 30px;"> <label for="controlscheme"><strong>Select a control scheme</strong></label> <select name="controlscheme" id="controlscheme"> <option value="Mouse">Mouse and keyboard</option> <option value="Pad">Gamepad</option> <option value="SteeringWheel" selected="selected">Racing Wheel</option> </select> </fieldset> <fieldset style="float:left; margin-left: 30px;"> <label for="platform">Select a platform</label> <select name="platform" id="platform" > <option>Loading...</option> </select> </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> </form> </div>' });