MediaWiki:Gadget-pulsanti-Ct.js

if ( typeof $ != 'undefined' && typeof $.fn.wikiEditor != 'undefined' ) {
	var api = new mw.Api();
	optionList = [
		//param  label							default	unit	increment
		[ "f",	"Dimensione",					"100",	"%",	"10" ],
		[ "L",	"Spaziatura tra le lettere",	"0",	"em",	"0.1" ],
		[ "w",	"Spaziatura tra le parole",		"0",	"em",	"0.1" ],
		[ "t",	"Spazio sopra la riga",			"0",	"",		"0.1" ],
		[ "v",	"Spazio sotto la riga",			"0",	"",		"0.1" ],
		[ "lh",	"Altezza della linea",			"1",	"em",	"0.1" ],
		[ "l",	"Larghezza del campo",			"100",	"%",	"10" ]
	];
	
	setNewValue = function(obj, add) {
		var parent = $(obj).parent();
		var oldValue = parseFloat(parent.find('.ct-value').val());
		var incr = parseFloat(parent.data('increment'));
		var unit = parent.find('.ct-unit').val();
		if (unit == 'px')
			incr = 1;
		var newValue = (add ? oldValue + incr : oldValue - incr).toFixed(1).replace(/\.0$/, ''); // per evitare errori di arrotondamento
		parent.find('.ct-value').val(newValue);
		preview();
	};
	
	generateTemplate = function(usePlaceholder) {
		options = '';
		$('.ct-options').each(function() {
			value = $(this).find('.ct-value').val();
			if (value != $(this).data('default-value')) {
				options += $(this).data('param') + '=' + value + $(this).find('.ct-unit').val() + '|';
			}
		});
		testo = $('#ct-testo').val();
		if (testo == '' && usePlaceholder)
			testo = 'TESTO DI ESEMPIO';
		return '{'+'{Ct|' + options + testo + '}}';
	};
	
	preview = function() {
		var wikitext = '<div style="color: gray;">{'+'{Ct|TESTO SOPRA}}</div>' 
				+ generateTemplate(true) + '<div style="color: gray;">{'+'{Ct|TESTO SOTTO}}</div>';
		api.get({
			action: 'parse',
			format: 'json',
			contentmodel: 'wikitext',
			text: wikitext
		}).done(function (data, textStatus, jqXHR) {
			$('#aggiungi-ct-preview').html(data.parse.text["*"]);
		});
	};
	
	createBoxCt = function() {
		
		var box = '<div class="box aggiungi-ct-box">'
			+ '<div class="box-title"><span class="icon-close"></span></div>'
			+ '<div class="box-main aggiungi-ct-box-main"></div></div>';
		$("body").append(box);
		$('.aggiungi-ct-box').draggable();
		$('.aggiungi-ct-box').draggable('option', 'cancel', '.box-main');
		
		$('.aggiungi-ct-box-main').append('<div class="width-50 aggiungi-ct-left"></div>');
		$('.aggiungi-ct-box-main').append('<div class="width-50 aggiungi-ct-right"></div>');
		$('.aggiungi-ct-left').append('<div>Testo: <input type="text" id="ct-testo" size="31"></div>');
		$('.aggiungi-ct-right').append('<p>Anteprima:</p>');
		$('.aggiungi-ct-right').append('<div id="aggiungi-ct-preview"></div>');
		
		for (var i = 0; i < optionList.length; i++) {
			var param = 		optionList[i][0];
			var label = 		optionList[i][1];
			var defaultValue =	optionList[i][2];
			var unit =			optionList[i][3];
			var increment = 	optionList[i][4];
			
			var div = $('<div class="ct-options"></div>');
			div.append('<div class="ct-label">' + label + '</div><a class="ct-meno"></a>' +
				'<input type="text" class="ct-value" value="' + defaultValue + '"><input type="text" class="ct-unit" value="' + unit + '"><a class="ct-piu"></a></div>');
			div.attr('data-param', param);
			div.attr('data-default-value', defaultValue);
			div.attr('data-unit', unit);
			div.attr('data-increment', increment);
			$('.aggiungi-ct-left').append(div);
		}
		
		$('.ct-meno').click(function() {
			setNewValue(this, false);
		});
		
		$('.ct-piu').click(function() {
			setNewValue(this, true);
		});
		
		$('.aggiungi-ct-box-main').append('<div class="text-right"><input type="button" id="aggiungi-ct-cancel" class="btn blue" value="Annulla">' +
			' <input id="aggiungi-ct-ok" type="button" class="btn blue" value="Applica"></div>');
			
		$('.aggiungi-ct-box .icon-close, #aggiungi-ct-cancel').click(function() {
			$('.aggiungi-ct-box').remove();
		});
		$('#ct-testo').focus();
	};
	
	apriBoxCt = function() {
		var textArea = document.getElementById('wpTextbox1');
		var indexStart = textArea.selectionStart;
		var indexEnd = textArea.selectionEnd;
		var selectedText = textArea.value.substring(indexStart, indexEnd);
		var textBefore = textArea.value.substring(0, indexStart);
		var textAfter = textArea.value.substring(indexEnd);
		
		var countCt = selectedText.toLowerCase().split('{'+'{ct').length - 1;
		if (countCt > 1) {
			alert("La selezione contiene più di 1 template Ct. Selezionane uno solo e riprova.");
			return;
		} else {
			createBoxCt();
			
			var ctTextBefore = textBefore + selectedText.replace(/\}\}\s*$/m, '');
			var previousCt = ctTextBefore.toLowerCase().lastIndexOf('{'+'{ct|');
			var ctText;
			console.log('ctTextBefore: ' + ctTextBefore);
			console.log('previousCt: ' + previousCt);
			if (previousCt != -1) {
				ctTextBefore = ctTextBefore.substring(previousCt);
				console.log('ctTextBefore: ' + ctTextBefore);
				parChiuse = ctTextBefore.split('}}').length - 1;
				parAperte = ctTextBefore.split('{{').length - 1;
				if (parChiuse < parAperte) {
					var allText = textBefore + selectedText + textAfter;
					console.log('allText: ' + allText);
					var index = previousCt;
					var j = 0;
					while (j < parAperte) {
						index = allText.indexOf('}}', index + 2);
						console.log('index: ' + index);
						j++;
					}
					ctText = allText.substring(previousCt, index + 2);
					console.log('ctText: ' + ctText);
					textBefore = allText.substring(0, previousCt);
					console.log('textBefore: ' + textBefore);
					textAfter = allText.substring(index + 2);
					console.log('textAfter: ' + textAfter);
					
					var parts = ctText.split('|');
					var subTemplates = 0;
					var content = '';
					for (k = 1; k < parts.length; k++) {
						if (parts[k].indexOf('{{') != -1) {
							subTemplates++;
						}
						console.log("k: " + k + ", part: " + parts[k] + ", subTemplates: " + subTemplates);
						
						if (parts[k].indexOf('=') != -1 && subTemplates == 0) {
							var opts = parts[k].split('=');
							var par = opts[0];
							var value = opts[1].replace(/[^\d.-]/g, '');
							var uni = opts[1].replace(/[\d.-]/g, '');
							var parent = $(".ct-options[data-param='" + par + "']");
							parent.find('.ct-value').val(value);
							parent.find('.ct-unit').val(uni);
						} else {
							if (content != '')
								content += '|';
							content += parts[k];
						}
						console.log('content: ' + content);
						
						if (parts[k].indexOf('}}') != -1) {
							subTemplates--;
						}
					}
					$('#ct-testo').val(content.slice(0, -2));
				}
			}
			
			if (!ctText) {
				$('#ct-testo').val(selectedText);
				$('.aggiungi-ct-box .box-title').prepend('Aggiungi template Ct');
			} else {
				$('.aggiungi-ct-box .box-title').prepend('Modifica template Ct');
			}
				
			preview();
			$('#ct-testo, .ct-value, .ct-unit').keyup(function() {
				preview();
			});
			
			$('#aggiungi-ct-ok').click(function() {
				$('#wpTextbox1').val(textBefore + generateTemplate(false) + textAfter);
				$('.aggiungi-ct-box').remove();
			});
		}
	};
	
	$( function() {
		$('#wpTextbox1').wikiEditor( 'addToToolbar', {
			'section': 'advanced',
			'group': 'format',
			'tools': {
				'Ct': {
					label: 'Inserisci un template Ct o modificane uno già presente',
					type: 'button',
					icon: '//upload.wikimedia.org/wikipedia/commons/f/f3/Button_Ct.png',
					action: {
						type: 'callback',
						execute: function(context) {
							apriBoxCt();
						}
					}
				}
			}
		});
	});
}