User:Indic-TechCom/Tools/FloatableEditingButton.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/*
    This scipt add some large icon at right side for Editing.
    @example Edit, Save, Preview, Go Top Button

    @Author [[User:Jayprakash12345]]
    @ImproveBy [[User:Krinkle]
    @OwnBy [[meta:Indic-TechCom]]
*/

// i18n for FloatableEditingButton
if( i18nForFloatableButton === undefined ) {
    var i18nForFloatableButton = {
        editi18n: 'Edit Button',
        savei18n: 'Save Button',
        previewi18n: 'Preview Button',
        goTopi18n: 'Goto the Top'
    }
}

$(function () {

    // Get current pagename
    var pageName = mw.config.get('wgPageName');
    var isEditable = mw.config.get('wgIsProbablyEditable');

    // Create Main Div
    var div = document.createElement('div');
        div.style ='position: fixed; right:30px; top:100px; display:block;';
        div.style.zIndex = "2147483647"; // A hack to show div allmost top
        div.id = 'iconForEditor';

    function createIcon(imageSrc, imgTooltip) {
        var element = document.createElement('img');
        element.className = 'image';
        element.width = '56';
        element.height = '56';
        element.src = imageSrc;
        element.title = imgTooltip;
        var divForIcon = document.createElement('div');
        divForIcon.appendChild(element);
        return divForIcon;
    }

    // Object for icons (div with img encapsulated inside)
    var elements = {
        editIcon: createIcon(
            'https://upload.wikimedia.org/wikipedia/commons/b/b2/Writing_Circle_Yellow.svg',
            i18nForFloatableButton.editi18n
        ),
        saveIcon: createIcon(
            'https://upload.wikimedia.org/wikipedia/commons/b/b0/Icon_Transparent_Green.png',
            i18nForFloatableButton.savei18n
        ),
        previewIcon: createIcon(
            'https://upload.wikimedia.org/wikipedia/commons/e/e2/Icon_Transparent_Yellow.png',
            i18nForFloatableButton.previewi18n
        ),
        goTopIcon: createIcon(
            'https://upload.wikimedia.org/wikipedia/commons/4/4c/Go-up.svg',
            i18nForFloatableButton.goTopi18n
        )
    };

    // Append icons into main div
    if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) === -1 ) {
        if ( isEditable ) {
            // View mode
            $(div).append(elements.editIcon );
        }
    } else {
        if ( isEditable ) {
            // Edit mode
            $(div).append(elements.saveIcon, elements.previewIcon );
        }
    }

    $(div).append( elements.goTopIcon);

    // Append the main div
    $('#mw-content-text').after( div );

    // Trigger for Edit Button
    $(elements.editIcon).on('click', function () {
        var params = {
            title: pageName,
            action: 'edit'
        };
        location.replace( mw.config.get( 'wgScript' ) + '?' + $.param( params ) );
    } );

    // Trigger for Save Button
    $(elements.saveIcon).on('click', function () {
        $('#editform').submit();
    } );

    // Trigger for Preview Button
    $(elements.previewIcon).on('click', function () {
        $('#wpPreview').click();
    } );

    // Trigger for Goto Top Button
    $(elements.goTopIcon).on('click', function () {
        location.hash = '#top';
    } );

});