User:Menner/svg-button-dev.js

/**
 * SVG Button (sb)
 * 
 * SVG is a troublesome file format. To improve usability some assistance is
 * helpful. The SVG Button appears on every file page presenting a SVG file.
 * It gives linkes to support tools, SVG help page and Commons Village pump.
 * 
 * Author: Menner @ Wikimedia Commons
 * 
 */
( function ( $, mw ) { // Making my own namespace!?
"use strict";
/**
 * GLOBALS
 */
var onlyLoggedinUsers = true; // SVG Button only visible to loggedin users

/**
 * Creates a DOM element of type <p> containing a named link
 */
function makepLink( name, url )
{
	var text = document.createTextNode(name);
	var a = document.createElement('a');
	var p = document.createElement('p');
	a.setAttribute('href', url);
	a.appendChild(text);
	p.appendChild(a);
	return p;
}

/**
 * Helper that extracts the fully qualified url of the original file 
 * represented by a file description page
 */
function fullFilePath()
{
	var fullImageLink = $( '#file.fullImageLink' ).get( 0 );
	return fullImageLink.firstChild.getAttribute( 'href' );
}

/**
 * Helper that checks if current user is listed as uploader of a file
 */
function matchUploader( )
{
	var user = mw.config.get( 'wgUserName' );
	var ret = false;
	// Does it improve performance to filter of 
	// id="mw-imagepage-section-filehistory" before?
	var objUploaders = $( '.mw-userlink' ); // Filter uploader DOM
	for ( var i = 0; i < objUploaders.length; i++ )	{
		var objUploader = objUploaders[i];
		var uploader = objUploader.getAttribute( 'title' );
		uploader = uploader.split( ":", 2 ).pop(); // remove "User:"
		if ( uploader === user  ) {
			ret = true;
			break;
		}
	}
	
	return ret;
}

/**
 * Internationalize label of SVG Button
 */
function labelSvgHelp()
{
	var i18n = {
		en: 'SVG help',
		de: 'SVG Hilfe',
		es: 'SVG ayuda',
		fr: 'SVG aide',
  	};
	return i18n[mw.config.get( 'wgUserLanguage' )] || i18n.en;
}
/**
 * Internationalize link title for SVG help page
 */
function titleSvgHelpPage()
{
	var i18n = {
		en: 'SVG help page',
		de: 'SVG Hilfeseite',
		es: 'SVG página de ayuda',
		fr: 'SVG page d\'aide',
  	};
	return i18n[mw.config.get( 'wgUserLanguage' )] || i18n.en;
}

/**
 * Internationalized wiki links
 */
function linkSvgHelp()
{
	var i18n = {
		en: 'Help:SVG',
		de: 'Help:SVG/de',
		es: 'Help:SVG/es',
		fr: 'Help:SVG/fr',
  	};
	return i18n[mw.config.get( 'wgUserLanguage' )] || i18n.en;
}

/**
 * Add SVG help button to file descrition page
 */
function svgButtonLoader()
{
//https://www.mediawiki.org/wiki/Using_OOjs_UI_in_MediaWiki#JavaScript
	var links;
	var clear;
	var svgHelp;
	if ( matchUploader() === false ) {
		return; // Skip button if we arn't one of the uploaders
	}
	try {
		clear = document.createElement( 'div' );
		clear.setAttribute( 'style', 'clear: both;' );
		
		try {
  			links = new Array(
				makepLink( titleSvgHelpPage(), '/wiki/' + linkSvgHelp() ),
				makepLink( 'W3C validator', '//validator.w3.org/check?uri=' + fullFilePath()),
				makepLink( 'Wikimedia SVG check', '//tools.wmflabs.org/svgcheck/'),
				makepLink( 'Graphics village pump', '/wiki/' + 'Commons:Graphics village pump')
			);  // might fail if MediaWiki can't render the SVG
		} catch (err) {
			console.log( 'Error in svg-button.js - creating links failed: ' + err.message);
			links = null;
		}
			
		svgHelp = new OO.ui.PopupButtonWidget( {
			label: labelSvgHelp(),
			icon: 'menu',
			popup: {
				$content: $(links),
				padded: true,
				align: 'left'
			}
		} );
		svgHelp.getPopup( ).width = 220;
		$( '.fullMedia' ).append( clear );
		$( '.fullMedia' ).append( svgHelp.$element );		
	} catch( err ) {
		console.log( 'Error in svg-button.js: ' + err.message );
	}
}

/**
 * str ends with suffix?
 */
function endsWith( str, suffix ) {
	return str.indexOf( suffix, str.length - suffix.length ) !== -1;
}

/**
 * M..A..I..N
 */
if (onlyLoggedinUsers === false || mw.user.isAnon() === false ) {
	if (endsWith( mw.config.get( "wgTitle" ).toLowerCase(), ".svg" )
			=== true ) {
		// First wait for oojs-ui then for jQuery
		mw.loader.using( 'oojs-ui' ).done(
			function() { $( svgButtonLoader() ) }
		);
	}
}

}( jQuery, mediaWiki ));