Custom loading MediaWiki skinScripts - mediawiki

Question

I'm about to set up some custom JS and CSS using something like this in LocalSettings.php, from here: https://www.mediawiki.org/wiki/Snippets/Load_an_additional_JavaScript_or_stylesheet_file_on_all_pages#Code
$wgResourceModules['zzz.customizations'] = array(
'styles' => "skin.css", // Stylesheet to be loaded in all skins
// Custom styles to apply only to Vector skin. Remove if you don't use it
'skinStyles' => array(
'vector' => 'skin-vector.css',
),
// End custom styles for vector
'scripts' => "skin.js", // Script file to be loaded in all skins
'localBasePath' => "$IP/customizations/",
'remoteBasePath' => "$wgScriptPath/customizations/"
);
function efCustomBeforePageDisplay( &$out, &$skin ) {
$out->addModules( array( 'zzz.customizations' ) );
}
This code shows a custom CSS that's loaded only for the vector skin, and another that's always loaded. I want to do the same with with the JavaScript, that is, load a JS file that's only for the vector skin as well as one that is always loaded.
I see from that documentation (https://www.mediawiki.org/wiki/Manual:$wgResourceModules) that skinScripts is supported, but I don't know how it would fit into the above code. Could anyone show me how to modify the above code to make that happen? Thanks.

Answer 1

The documentation you linked says:
skinScripts
Scripts to include in specific skin contexts.
Array keyed by skin name containing file path string or array of file path strings.
That isn't much different from the skinStyles entry, so I'd assume that something like this would work:
$wgResourceModules['zzz.customizations'] = array(
'styles' => "skin.css", // Stylesheet to be loaded in all skins
// Custom styles to apply only to Vector skin. Remove if you don't use it
'skinStyles' => array(
'vector' => 'skin-vector.css',
),
// End custom styles for vector
'scripts' => "skin.js", // Script file to be loaded in all skins
'skinScripts' => array(
'vector' => 'skin-vector.js',
),
'localBasePath' => "$IP/customizations/",
'remoteBasePath' => "$wgScriptPath/customizations/"
);
function efCustomBeforePageDisplay( &$out, &$skin ) {
$out->addModules( array( 'zzz.customizations' ) );
}
Where vector is the name of the skin, and skin-vector.js is the JavaScript file that only goes with that skin.