This tutorial is a solution of a basic problem which you may face when you want to go with MobileFrontend Extension for the first time. Mobile Frontend Extension is a good option to give your MediaWiki users a deal of data saving by providing lightweight interface on Mobile and tablets. This tutorial tells you how you can extend your extensions to work with the Mobile Frontend.
This tutorial is more or less like a solution of a problem, which you may face when the Mobile Frontend Extension is active. The MobileFrontend presents its whole new skin for mobile devices. So the Resource Loader module in its original form doesn’t work on the mobile skin. To overcome this problem Mobile frontend provides an addition to the original resource loader module. To know about Resource Loader please take a look at this tutorial.
The original way to create a resource loader module is shown in the following code snippet and is taken from the tutorial series on How to Develop Extension for Mediawiki
$wgResourceModules['ext.DemoExtension'] = array(
"scripts"=>"resources/js/demo.js",
"styles"=>"resources/css/demo.css",
"dependencies"=>array("jquery"),
'localBasePath'=> __DIR__,
'remoteExtpath'=>'DemoExtension'
);
Now we need to enable this Module to work with the Mobile Frontend extension, so we need to clone this for mobile, that doesn’t take much of doing,you only need to tell MediaWiki that this module is targeted for Mobile as in following code snippet.
$wgResourceModules['ext.DemoExtension.mobile'] = $wgResourceModules['ext.DemoExtension'] + array( 'targets' => 'mobile', );
Now we have definition of module ready for mobile frontend so we need to set up a hook that will output this module on mobile frontend skin, for this there is a hook defined in MobileFrontend known as EnableMobileModules. we create a function which outputs the module and hook it using the mentioned hook.
function efEnableMobileModules( $out, $mode ) {
$name = 'ext.DemoExtension.mobile';
$out->addModules( $name );
return true;
}
This function is to be defined in the body of your MediaWiki extension. and finally you hook this function to the EnableMobileModules.
$wgHooks['EnableMobileModules'][] = 'efEnableMobileModules';
Okay the Hook is set and you are good to go, now your extensions resource module is ready to work with the MobileFrontEnd extension. Hope you find this article helpful for any queries you can comment below or contact us using our contact page.
