Module layout

This page describes one or more aspects related to the development of the Railgun script. Developers may find this content helpful, but it may not be very interesting to the average end-user of the script.

Category: Railgun development Template: {{devnotice}}

When coding a module, there are 3 basic things you have to do:

• Build the HTML base and insert the module into the siderail
• Attach event handlers to certain parts of the module
• Place the code that does all of that inside an init() method and register it with the framework to be called later once all modules have loaded

There are 2 other things you might want to do:

• Stylize the module with CSS
• Save data/settings between pageloads

Sample Module

This sample module demonstrates a basic layout you might want to use to accomplish these tasks. Note: for CSS, you can make a small stylesheet which can be added to your personal modulesCSS file or the Railgun project's MediaWiki:RailgunModules.css file.

This module has a single button that, when you click it, multiplies a number by 2. The number is saved between page loads, so if you reload the page the most recent result will be displayed.

(function () {
    // storage key to save data between pageloads
    var datum = 1;

    // event handler for a button
    function clickHandler () {
        // multiply by 2
        datum *= 2;
        
        // save data to storage
        Railgun.setItem("datum", datum);

        // update DOM
        $('#b-button').html(datum);
    }

    function init () {
        // get data from localStorage when first initialized
        datum = Railgun.getItem("datum") || 1;

        // build HTML base of the module
        var content = '<button id="b-button">' + datum + '</button>';

        // insert module into the siderail
        Railgun.insert('b-example', content, 'Example B');

        // attach event handler to the button
        $('#b-button').click(clickHandler);
    }

    // register the module with the framework
    Railgun.register('b-example', 'Example B', init);
}());