User:Kaldari/bottomalert.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

( function( $, mw ) {
$alert = '<div id="mw-echo-sliding-alert">';
$alert += '<div id="mw-echo-close-box" style="float: right; height: 17px; width: 17px; margin: 10px 13px 0 2px; cursor: pointer;"><img style="display: block;" src="//upload.wikimedia.org/wikipedia/commons/b/b6/Chrome_close_button.png"/></div>';
$alert += '<div id="mw-echo-alert-text">You have <a href="#" id="mw-echo-talk-link">new messages</a>. (<a href="#" id="mw-echo-talk-diff-link">view changes</a>)</div>';
$alert += '</div>';
$(document).ready(function() {
	$( '.usermessage' ).hide(); // just in case
	var newMsgRevisionId = mw.config.get( 'wgUserNewMsgRevisionId' );
	if ( newMsgRevisionId ) {
		var userName = mw.config.get( 'wgUserName' );
		var talkLink = '/wiki/User_talk:' + userName + '?redirect=no';
		var diffLink = '/w/index.php?title=User_talk:' + userName + '&oldid=' + newMsgRevisionId + '&diff=cur';
		$( 'body' ).append( $alert );
		$( '#mw-echo-close-box' ).click( function( e ) {
			$( '#mw-echo-sliding-alert' ).hide();
			e.preventDefault();
		} );
		$( 'a#mw-echo-talk-link' ).attr( 'href', talkLink );
		$( 'a#mw-echo-talk-diff-link' ).attr( 'href', diffLink );
		$( '#mw-echo-sliding-alert' ).css( {
			'position': 'fixed',
			'bottom': '-39px',
			'z-index': 99,
			'height': '38px',
			'margin': '0 auto',
			'right': '1em',
			'padding': 0,
			'background-color': '#FFD86E',
			'border': '1px solid #FFA500',
			'border-bottom': 'none'
		} );
		$( '#mw-echo-alert-text' ).css( {
			'margin': '0px 60px 0px 20px',
			'font-size': '14px',
			'font-weight': 'bold',
			'font-family': 'sans-serif',
			'line-height': '38px',
			'white-space': 'nowrap'
		} );
		// Add more padding at the bottom of the page
		$( 'div#footer' ).css( 'padding-bottom', '40px' );
		$( '#mw-panel' ).css( 'padding-bottom', '40px' );
		// Show the alert
		$( '#mw-echo-sliding-alert' ).delay( 1000 ).animate( {'bottom': '+=39px' }, 'fast' );
	}
} );
} )( jQuery, mediaWiki );