பயனர்:Info-farmer/CustomizedEditTools.js

//Button 1
var i1 = localStorage.getItem("i1");
var i2 = localStorage.getItem("i2");

//Button 2
var ii1 = localStorage.getItem("ii1");
var ii2 = localStorage.getItem("ii2");

//Button 3
var iii1 = localStorage.getItem("iii1");
var iii2 = localStorage.getItem("iii2");

//Button 4
var iv1 = localStorage.getItem("iv1");
var iv2 = localStorage.getItem("iv2");

//Button 5
var v1 = localStorage.getItem("v1");
var v2 = localStorage.getItem("v2");

//Icons
var icon1 = "//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Delhi_Metro_Line_1.svg/21px-Delhi_Metro_Line_1.svg.png";
var icon2 = "//upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/21px-Paris_m_2_jms.svg.png";
var icon3 = "//upload.wikimedia.org/wikipedia/commons/thumb/d/db/Icon_3_red.svg/21px-Icon_3_red.svg.png";
var icon4 = "//upload.wikimedia.org/wikipedia/commons/thumb/8/87/BKV_m_4_jms.svg/21px-BKV_m_4_jms.svg.png";
var icon5 = "//upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/21px-Channel_5_logo_2011.svg.png";

var customizeToolbar = function () {
    $('#wpTextbox1').wikiEditor('addToToolbar', {
        'section': 'main',
        'group': 'insert',
        'tools': {
            'button1': {
                label: i1 + 'உரை' + i2 + ' உள்ளிடுக',
                filters: ['body:not(.ns-3)'],
                type: 'button',
                icon: icon1,
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: i1,
                        peri: '',
                        post: i2
                    }
                }
            },
            'button2': {
                label: ii1 + 'உரை' + ii2 + ' உள்ளிடுக',
                filters: ['body:not(.ns-3)'],
                type: 'button',
                icon: icon2,
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: ii1,
                        peri: '',
                        post: ii2
                    }
                }
            },
            'button3': {
                label: iii1 + 'உரை' + iii2 + ' உள்ளிடுக',
                filters: ['body:not(.ns-3)'],
                type: 'button',
                icon: icon3,
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: iii1,
                        peri: '',
                        post: iii2
                    }
                }
            },
            'button4': {
                label: iv1 + 'உரை' + iv2 + ' உள்ளிடுக',
                filters: ['body:not(.ns-3)'],
                type: 'button',
                icon: icon4,
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: iv1,
                        peri: '',
                        post: iv2
                    }
                }
            },
            'button5': {
                label: v1 + 'உரை' + v2 + ' உள்ளிடுக',
                filters: ['body:not(.ns-3)'],
                type: 'button',
                icon: icon5,
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: v1,
                        peri: '',
                        post: v2
                    }
                }
            },
        }
    });
};

/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if (['edit', 'submit'].indexOf(mw.config.get('wgAction')) !== -1) {
    mw.loader.using('user.options').then(function () {
        $.when(
            mw.loader.using('ext.wikiEditor'), $.ready
        ).then(customizeToolbar);
    });
}
// Make a subclass of ProcessDialog 
function MyDialog(config) {
    MyDialog.super.call(this, config);
}
OO.inheritClass(MyDialog, OO.ui.ProcessDialog);

// Specify a name for .addWindows()
MyDialog.static.name = 'myDialog';

MyDialog.static.title = 'பொத்தான்களை தனிப்பயனாக்கு';
// Specify the static configurations: title and action set
MyDialog.static.actions = [
    {
        flags: ['primary', 'progressive'],
        label: 'சேமி',
        action: 'save'
    },
    {
        flags: 'safe',
        label: 'மூடுக'
    }
];

// Customize the initialize() function to add content and layouts: 
MyDialog.prototype.initialize = function () {
    MyDialog.super.prototype.initialize.call(this);
    this.panel = new OO.ui.PanelLayout({
        padded: true,
        expanded: false
    });
    this.content = new OO.ui.FieldsetLayout();

    //button1
    this.i1 = new OO.ui.TextInputWidget();
    this.i2 = new OO.ui.TextInputWidget();

    //button2
    this.ii1 = new OO.ui.TextInputWidget();
    this.ii2 = new OO.ui.TextInputWidget();

    //button3
    this.iii1 = new OO.ui.TextInputWidget();
    this.iii2 = new OO.ui.TextInputWidget();

    //button4
    this.iv1 = new OO.ui.TextInputWidget();
    this.iv2 = new OO.ui.TextInputWidget();

    //button5
    this.v1 = new OO.ui.TextInputWidget();
    this.v2 = new OO.ui.TextInputWidget();

    this.content.addItems([
        //Button1
        new OO.ui.FieldLayout(this.i1, {
            label: 'பொத்தான் 1',
            align: 'left'
        }),
        new OO.ui.FieldLayout(this.i2, {
            label: ' ',
            align: 'left'
        }),

        //Button2
        new OO.ui.FieldLayout(this.ii1, {
            label: 'பொத்தான் 2',
            align: 'left'
        }),
        new OO.ui.FieldLayout(this.ii2, {
            label: ' ',
            align: 'left'
        }),

        //Button3
        new OO.ui.FieldLayout(this.iii1, {
            label: 'பொத்தான் 3',
            align: 'left'
        }),
        new OO.ui.FieldLayout(this.iii2, {
            label: ' ',
            align: 'left'
        }),

        //Button4
        new OO.ui.FieldLayout(this.iv1, {
            label: 'பொத்தான் 4',
            align: 'left'
        }),
        new OO.ui.FieldLayout(this.iv2, {
            label: ' ',
            align: 'left'
        }),

        //Button5
        new OO.ui.FieldLayout(this.v1, {
            label: 'பொத்தான் 5',
            align: 'left'
        }),
        new OO.ui.FieldLayout(this.v2, {
            label: ' ',
            align: 'left'
        })
    ]);

    this.panel.$element.append(this.content.$element);
    this.$body.append(this.panel.$element);

    this.i1.connect(this, { 'change': 'onUrlInputChange' });
};

// Specify any additional functionality required by the window (disable opening an empty URL, in this case)
MyDialog.prototype.onUrlInputChange = function (value) {
    this.actions.setAbilities({
        open: !!value.length
    });
};

// Specify the dialog height (or don't to use the automatically generated height).
MyDialog.prototype.getBodyHeight = function () {
    // Note that "expanded: false" must be set in the panel's configuration for this to work.
    // When working with a stack layout, you can use:
    //   return this.panels.getCurrentItem().$element.outerHeight( true );
    return this.panel.$element.outerHeight(true);
};

// Use getSetupProcess() to set up the window with data passed to it at the time 
// of opening (e.g., url: 'http://www.mediawiki.org', in this example). 
MyDialog.prototype.getSetupProcess = function (data) {
    data = data || {};
    return MyDialog.super.prototype.getSetupProcess.call(this, data)
        .next(function () {
            // Set up contents based on data
            //button1
            this.i1.setValue(localStorage.getItem("i1"));
            this.i2.setValue(localStorage.getItem("i2"));
            //button2
            this.ii1.setValue(localStorage.getItem("ii1"));
            this.ii2.setValue(localStorage.getItem("ii2"));
            //button3
            this.iii1.setValue(localStorage.getItem("iii1"));
            this.iii2.setValue(localStorage.getItem("iii2"));
            //button4
            this.iv1.setValue(localStorage.getItem("iv1"));
            this.iv2.setValue(localStorage.getItem("iv2"));
            //button5
            this.v1.setValue(localStorage.getItem("v1"));
            this.v2.setValue(localStorage.getItem("v2"));

        }, this);
};

// Specify processes to handle the actions.
MyDialog.prototype.getActionProcess = function (action) {
    if (action === 'save') {
        //button1
        localStorage.setItem("i1", this.i1.getValue());
        localStorage.setItem("i2", this.i2.getValue());

        //button2
        localStorage.setItem("ii1", this.ii1.getValue());
        localStorage.setItem("ii2", this.ii2.getValue());

        //button3
        localStorage.setItem("iii1", this.iii1.getValue());
        localStorage.setItem("iii2", this.iii2.getValue());

        //button4
        localStorage.setItem("iv1", this.iv1.getValue());
        localStorage.setItem("iv2", this.iv2.getValue());

        //button5
        localStorage.setItem("v1", this.v1.getValue());
        localStorage.setItem("v2", this.v2.getValue());

        var dialog = this;
        return new OO.ui.Process(function () {
            // Do something about the edit.
            dialog.close();

            location.reload();
        });
    }
    // Fallback to parent handler
    return MyDialog.super.prototype.getActionProcess.call(this, action);
};

// Use the getTeardownProcess() method to perform actions whenever the dialog is closed. 
// This method provides access to data passed into the window's close() method 
// or the window manager's closeWindow() method.
MyDialog.prototype.getTeardownProcess = function (data) {
    return MyDialog.super.prototype.getTeardownProcess.call(this, data)
        .first(function () {
            // Perform any cleanup as needed
        }, this);
};

// Create and append a window manager.
var windowManager = new OO.ui.WindowManager();
$(document.body).append(windowManager.$element);

// Create a new process dialog window.
var myDialog = new MyDialog();

// Add the window to window manager using the addWindows() method.
windowManager.addWindows([myDialog]);

// Insert Dialog Button!
$(".group-insert:first").append('<a href="#" onclick="windowManager.openWindow( myDialog );" title="Customize The Edit Buttons!" rel="button001" role="button" class="tool tool-button" style="background-image: url(&quot;//upload.wikimedia.org/wikipedia/commons/thumb/6/61/Crystal128-configure.svg/21px-Crystal128-configure.svg.png&quot;);">H</a>');