User:Rillke/WhatCanUTranslate.js

/**
 * @name [[MediaWiki:WhatCanUTranslate.js]]
 * @description
 * Lists MediaWiki texts (so called messages) 
 * that need translation to a chosen language
 * and lets you easily accomplish this job
 * regardless whether you are administrator
 *
 * You can use it from at [[Commons:Translate]]
 *
 * Supposed to work on all multilingual wikis.
 * Commons edit api is required.
 * wpAvailableLanguages is required.
 *
 * @rev 1 (2012-07-06)
 * @author [[User:Rillke]], 2012
 *
 * WhatCanUTranslate is quadruple licensed GFDL, GPL, LGPL and Creative Commons Attribution 3.0 (CC-BY-3.0). You may choose the license you like best.
 * @license GPL v.3
 * <nowiki>
 */
 
 
// List the global variables for jsHint-Validation. Please make sure that it passes http://jshint.com/
// Scheme: globalVariable:allowOverwriting[, globalVariable:allowOverwriting][, globalVariable:allowOverwriting]
/*global jQuery:false, mediaWiki:false*/

// Set jsHint-options. You should not set forin or undef to false if your script does not validate.
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, curly:false, browser:true*/


( function ( $, mw ) {
"use strict";

mw.messages.set({
	
});

var wcut;

wcut = {
	userlanguage: mw.config.get('wgUserLanguage'),
	init: function() {
		var $content = $('#mw-content-text');
		// Remove page content
		$content.text('');
		// Revome site notice (just takes unnecessarily space)
		$('#siteNotice').remove();
		
		wcut.$ = $('<div>', { id: 'wcut-content' }).appendTo($content);
	},
	buildInterface: function() {
		var $targetLang, $tls,
			$sourceLang, $sls, $slsAdd, $slsRm, $slSelected;
		
		// Start with the interface
		// Target language
		this.$targetLang = $targetLang = $('<div>', { id: 'wcut-targetLang' }).appendTo(this.$);
		
		this.$tls = $tls = $('<select>', { size: 1, id: 'wcut-tls' });
		$.each(wpAvailableLanguages, function(s, l) {
			$tls.append($('<option>', { 'value': s, text: l }));
		});
		$tls.appendTo($targetLang).val(this.userlanguage);
		$('<label>', { 'for': 'wcut-tls' }).append($('<abbr>', { title: "The language you would like translate to", text: "Target language" }), " ").prependTo($targetLang);
		
		// Source languages
		this.$sls = $sls = $tls.clone();
		this.$sourceLang = $sourceLang = $('<div>', { id: 'wcut-sourceLang', style: 'height:350px; overflow:auto; margin:auto;' }).append($('<abbr>', { text: "Source language", title: "Translations that will be displayed when available." }), "<br/>").appendTo(this.$);
		
		$sls.attr('size', 10).attr('id', 'wcut-sls').height(300).css('min-width', '250px');
		$('<div>', { id: 'wcut-sl-first', style: 'display:inline-block; margin:5px; vertical-align:top;' }).append($sls).appendTo($sourceLang);
		
		$slsAdd = $('<button>', { text: "Add", id: 'wcut-slsAdd', style: 'display:inline-block' }).button({ icons: { primary: 'ui-icon-circle-plus' }});
		$slsRm = $('<button>', { text: "Remove", id: 'wcut-slsAdd', style: 'display:inline-block' }).button({ icons: { primary: 'ui-icon-circle-minus' }});
		$('<div>', { id: 'wcut-sl-middle', style: 'display:inline-block; margin:5px; vertical-align:middle; max-width:125px; position:relative; top:110px' }).append($slsAdd, " ", $slsRm).appendTo($sourceLang);
		
		$slSelected = $('<select>', { size: 10, id: 'wcut-slSelected' }).height(300).css('min-width', '250px');
		$('<option>', { disabled: true, text: "English", value: 'en' }).appendTo($slSelected);
		$('<div>', { id: 'wcut-sl-last', style: 'display:inline-block; margin:5px; vertical-align:top;' }).append($slSelected).appendTo($sourceLang);
		
		// Then, bind events and process UI events
		var transferSelected = function($elFrom, $elTo) {
			$.each($elFrom[0].options, function(i, opt) {
				if (opt.selected) {
					$elTo.append(opt);
					return false;
				}
			});
		};
		var _addToList = function() {
			transferSelected($sls, $slSelected);
		};
		var _rmFromList = function() {
			transferSelected($slSelected, $sls);
		};
		$slsAdd.click(_addToList);
		$slsRm.click(_rmFromList);
		$sls.dblclick(_addToList);
		$slSelected.dblclick(_rmFromList);
	},
};

// Expose globally
window.whatCanUTranslate = wcut;


mw.loader.using([
	'jquery.ui'
], function() {
	wcut.init();
	wcut.buildInterface();
});

}( jQuery, mediaWiki ));