User:SHEIKH/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.
//©Indic Tech-Com
if( i18nForFloatableButton === undefined ) {
var i18nForFloatableButton = {
editi18n: 'Edit Button',
savei18n: 'Save Button',
previewi18n: 'Preview Button',
}
}
$(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:18px; bottom:105px; 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 = '33';
element.height = '33';
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
),
};
// 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 );
}
}
// 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();
} );
});