User:Indic-TechCom/Script/shortUrlLink.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 is userscirpt to genreate shortURL from metawiki
    and provide link in front of title on local wiki.

    @Author [[User:Jayprakash12345]]
    @OwnBy [[meta:Indic-TechCom]]

*/
$( function(){
	if( mw.config.get("wgArticleId") === 0 || 
		mw.config.get("wgAction") !== "view" ){
		return;
	}
	$.when( mw.loader.using( [ 'mediawiki.util', 'mediawiki.ForeignApi'] ), $.ready ).then( function () {
		( new mw.ForeignApi( 'https://meta.wikimedia.org/w/api.php' ) ).post( {
			action: 'shortenurl',
			url: location.href
		} ).done( function ( data ) {
			var urlContainter = $("<span>").css({
				"position": "absolute",
				"display": "inline-block",
				"z-index": "11111",
				"min-width": "max-content",
				"background-color": "black",
				"color": "#fff",
				"text-align": "center",
				"padding": "5px",
				"border-radius": "6px",
				"top": "-40%",
				"font-size": "small",
				"left": "90%"
			}).text( "Short URL: " + data.shortenurl.shorturl ),
			icon = $("<span>").addClass( "shareIcon" ).append( urlContainter.hide() );

			mw.util.addCSS( '.shareIcon { display: inline-block; width: 25px; height: 18px; background-repeat: no-repeat; background-size: 18px;position: relative;background-position: left; margin: 0 0 0 6px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfhCAkVKSrZpFFqAAABu0lEQVRYw+2XTS8DURSGnxIzTSTWBEsWYqtd4AdgbcvOd4sEa3/BVpoOvwG/ANXSxEfSRG0kEqykaNMIaceCNHOndxJxT4PEmd3N5Hkn57zn7S3819+vMMtkKVMmyxJhaXw3F7ie55wu2a9X8S4uZ9hyAot1eBeXmJzAsVYgLSdQ0goUva80GQm8aU+rUgJRFVWrnERzOtiiqm2Qy5wp3GKN5wC4SxbLDD/GVQ1WIelzUpYOE3gvex7YEQNAC9Mc8EiBfWZo+T68lXVeavA7pgwdqFSICe5r8Fc2aPs+zCZOmhIljpjHAqJkPI3ZocfkWzs5U4Z2otjxkhGzVtg+vPd5YsXUgBAPgFdI0i4xzIwW/0BEyi1FrUDBBCno5a8I5ALiV6xFsUYP2ea0sTaFTp+Eumh500X7SPsFUhQpkWIWC4go9t01i4qgsBvnRirsfiSu9T846U/7DpMgRYoEwxIio+QV+zqKKRyJi6PFKk+BdnZkmtWOE3htGZKaSIRrrcCmVNgdc6s975dL02btqSsnkGvc3ZTPDdDNYFBy9Zw6fFJ2t22fRNK/aCEBkSEm6QNybHP4/7/+99U7rhtw2QbeFFoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDgtMDlUMjE6NDE6NDIrMDA6MDC7TGiTAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA4LTA5VDIxOjQxOjQyKzAwOjAwyhHQLwAAAABJRU5ErkJggg==);' );

			// Append the element in DOM
			currentSkin = mw.config.get("skin");
			if ( currentSkin === "vector"){
				$( '#firstHeading' ).append( icon );
			} else if( currentSkin === "minerva" ){
				$( '#section_0' ).append( icon );
			}

			icon.mouseover( function() { urlContainter.show(); } );
			icon.mouseleave( function() {
				urlContainter.fadeOut( 3000 );
			} );
		} );
	} );
});