MediaWiki:CompositeListField.js

mw.loader.using('jquery.ui.sortable', function()
{
$.widget( "custom.wiki_CompositeListField", {

	// the constructor
	_create: function() {

		this.textarea = $("textarea", this.element).hide();

		this.select = $("<ul>")
			.sortable({placeholder: "ui-state-highlight", axis: "y", handle: ".handle"});
		this.element.append(this.select);

		this.formsDatas = $.parseJSON($(".ListFieldForms", this.element).text());

		var $forms = {};
		var $addButtons = $("<div>");
		var $floatingForms = $('<div>');
		for(var template in this.formsDatas)
		{
			$forms[template] = this._createForm(this.formsDatas[template]);
			$floatingForms.append($forms[template]);
			this.currentForm = $forms[template];
			
			var $addButton = $('<input type="button" template="'+template+'" value="Ajouter un(e) '+this.formsDatas[template]['nom']+'">');
			$addButtons.append($addButton);
		}

		var $validateButton = $('<input type="button" value="Valider">');
		var $cancelButton = $('<input type="button" value="Annuler">');
		var $removeButton = $('<input type="button" value="Supprimer">');
		var $formButtons = $("<div>").append([$validateButton, $cancelButton, $removeButton]).hide();
		$floatingForms.append($formButtons);

		this.element.append([$floatingForms, $addButtons]);

		this.data = {}
		this.count = 0;
		var self = this;

		// lit les données du textarea au chargement de la page
		if(this.textarea.val())
		{
			var mainRegex = /{{(.*?)\|(.*)}}/g;
			var subRegex = /(.*?)=(.*?)(\||$)/g;	
			var item, itemParam;
			while(item = mainRegex.exec(this.textarea.val()))
			{
				var itemData = {};
				itemData['template'] = item[1];
				var values = item[2];
				while(itemParam = subRegex.exec(values))
				{
					itemData[itemParam[1]] = itemParam[2];
				}
				var itemId = this.count;
				this._newLine(itemData['template']);
				this._setValue(itemId, itemData);
			}
		}

		// Ajouter un objet
		$("input", $addButtons).on('click', function()
		{
			self._newLine($(this).attr('template'));
		});

		// Valider un ajout ou une modification
		$validateButton.on('click', function()
		{
			var data = {};
			$("input, select", self.currentForm).each(function()
			{
				$this = $(this);
				data[$this.attr('name')] = $this.val();
			});
			self._setValue($("li.selected").attr('item'), data);

			// toggle form
			$addButtons.show();
			self.currentForm.hide();
			$formButtons.hide();

			self._refreshText();
		});

		// Annuler une modification
		$cancelButton.on('click', function()
		{
			$("li.selected").removeClass("selected");

			// toggle form
			$addButtons.show();
			self.currentForm.hide();
			$formButtons.hide();
		});

		// Supprimer une ligne
		$removeButton.on('click', function()
		{
			self._removeValue($("li.selected").attr('item'));

			// toggle form
			$addButtons.show();
			self.currentForm.hide();
			$formButtons.hide();

			self._refreshText();
		});

		// Selectionner une ligne
		this.select.on('click', 'li', function()
		{
			self.currentForm.hide();
			var $this = $(this);
			$this.addClass("selected").siblings().removeClass("selected");

			// récupération des infos
			var itemId = $this.attr("item");
			if(self.data[itemId])
			{
				self.currentForm = $forms[self.data[itemId]['template']];
				$("input:not([type=button]), select", self.currentForm).each(function()
				{
					$this = $(this);
					$this.val(self.data[itemId][$this.attr("name")]);
				});
			}
			else
			{
				$("input:not([type=button])", self.currentForm).val("");
			}

			// toggle form
			$addButtons.hide();
			self.currentForm.show();
			$formButtons.show();
		});

		// rafraichis le textarea lorsque l'ordre des objets est modifié
		this.select.on("sortstop", function() {
			self._refreshText();
		});

	},

	_newLine: function(template) {
		var $li = $('<li item="'+this.count+'">').append(['<span class="handle">[+] </span>', '<span class="value">'+this.formsDatas[template]['nom']+' : </span>']);
		this.select.append($li);
		this.data[this.count] = {};
		this.data[this.count]['template'] = template;
		this.count++;
		return $li;
	},

	_setValue: function(itemId, data) {
		var template = this.data[itemId]['template'];
		this.data[itemId] = data;
		this.data[itemId]['template'] = template;
		$("li[item="+itemId+"] span.value", this.select).text(this.formsDatas[template]['nom'] + " : " + data[this.formsDatas[template]['main']]);
	},

	_removeValue: function(itemId) {
		delete this.data[itemId];
		$("li[item="+itemId+"]").remove();
	},

	_refreshText: function() {
		var text = "";
		var data = this.data;

		$("li", this.select).each(function()
		{
			var item = data[$(this).attr('item')];
			text += "{{"+item['template'];
			for(var i in item)
			{
				if(i != 'template')
				{
					text += "|"+i+"="+item[i];
				}
			}
			text += "}}\n";
		});
		this.textarea.val(text);
	},

	_createForm: function(data) {
		var template = data['template'];
		var $form =  $("<form>").hide();
		for(var param in data['fields'])
		{
			var field = data['fields'][param];
			var $field;
			if(field['type'] == 'select')
			{
				$field = $('<select>');
				var values = field['values']; //JSON.parse(field['values']);
				for(var v in values)
				{
					$field.append('<option value="'+values[v]+'">'+values[v]+'</option>');
				}
			}
			else
			{
				$field = $('<input>').attr('size', '60');
				if(field['autocomplete'] !== "")
				{
					$field.attr('autocompletedatatype', 'category');
					$field.attr('autocompletesettings', field['autocomplete']);
					// hack
					(function($f) {
						setTimeout(function() { $f.attachAutocomplete(); }, 500);
					})($field);
				}
			}
			$field.attr('name', param);
			
			$form.append($("<div>").append([field['nom'] + " : ", $field]));
		}

		return $form;
	}
		

});

$(".ListField").wiki_CompositeListField();

});