|
|
(5 intermediate revisions by the same user not shown)
|
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" |
| }; | | }; |
| | | |
Line 55: |
Line 56: |
| "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", |
| + | "PC / USB": "pc/USB", |
| + | "Original Xbox / USB": "originalxbox/USB" |
| }; | | }; |
| | | |
Line 124: |
Line 127: |
| var controlscheme = dropDownControlScheme.getMenu().getSelectedItem().data; | | var controlscheme = dropDownControlScheme.getMenu().getSelectedItem().data; |
| | | |
− | var link = "/index.php?title=Guide&platform=" + splittedPlatform[0] + "&connectiontype=" + splittedPlatform[1] + "&ostype=" + ostype + "&device=" + controlscheme; | + | var link = "/wiki/index.php?title=Guide&platform=" + splittedPlatform[0] + "&connectiontype=" + splittedPlatform[1] + "&ostype=" + ostype + "&device=" + controlscheme; |
| return link; | | return link; |
| } | | } |
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);
});