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)
- Edge: Hold Ctrl while clicking Refresh, or 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';
} );
});