advanced code snippet search

Posted By

ianmonge on 09/30/08


Tagged

javascript mootools


Versions (?)

Two Lists

 / Published in: JavaScript
 

Clase en Mootools para hacer interactivas dos listas. Con dos elementos html SELECT y dos INPUT, permite pasar los items (OPTION) de una lista a otra, de la forma asignar o liberar. Ejemplo: lista con jugadores y lista con jugadores asignados al equipo; poder asignar los jugadores al equipo o liberarlos del equipo.

Clase mejorable, es bastante básica y fácil de entender. Requiere la modificación de la función nativa REMOVE en Arrays de Javascript.

Expand | Embed | Plain Text 
  1. //******************************************************************************
  2. // Función nativa de Javascript que se ha modificado por otra.
  3. // Elimina un (o mas) elemento(s) de un array:
  4. Array.prototype.remove = function(from, to) {
  5. 	var rest = this.slice((to || from) + 1 || this.length);
  6. 	this.length = from < 0 ? this.length + from : from;
  7. 	return this.push.apply(this, rest);
  8. };
  9. //******************************************************************************
  10.  
  11. /*
  12.  * 		Clase Two_lists
  13.  * 
  14.  * 		Permite que interactuen 2 elementos SELECT y 2 elementos INPUT del TYPE=BUTTON, para que
  15.  * 		que los elementos OPTION de dentro de los SELECT, puedan moverse de un SELECT a otro.
  16.  * 		Para hacer el movimiento, se selecciona el OPTION y se pulsa el botón correspondiente.
  17.  * 		También se puede hacer seleccionando múltiples OPTIONs con las teclas Ctrl o Shift, siempre
  18.  * 		que el SELECT tenga MULTIPLE=MULTIPLE. Para mover uno de manera más práctica, haciendo doble
  19.  * 		click también se moverá de SELECT.
  20.  * 
  21.  * 		Para instanciar la clase, hay que pasar cuatro parámetros :
  22.  * 		* El primer SELECT
  23.  * 		* El segundo SELECT
  24.  * 		* El INPUT que mueve del primer SELECT al segundo
  25.  * 		* El INPUT que mueve del segundo SELECT al primero
  26.  * 
  27.  * 		La clase posee cuatro funciones a parte de la constructora:
  28.  * 		* moveOptionToSelect2 (option)
  29.  * 			Mueve el option a nivel interno, es decir, en las 2 arrays internas con los datos de todos
  30.  * 			los OPTIONS, mueve el item referenciado al option de un array al otro, y después elimina el
  31.  * 			option del HTML.
  32.  * 		* moveOptionToSelect1 (option)
  33.  * 			Idem anterior, pero en el otro sentido.
  34.  * 		* updateSelect1 ()
  35.  * 			Actualiza los OPTIONs del primer SELECT, según el array interno referenciado a ese SELECT.
  36.  * 			Vacía el SELECT, y lo rellena creando los OPTIONS con sus datos.
  37.  * 		* updateSelect2 ()
  38.  * 			Idem anteior, pero en el segundo SELECT.
  39.  * 
  40.  */
  41.  
  42. var Two_lists = new Class({
  43. 	Implements: [Options],
  44.  
  45. 	select1 : 	null,
  46. 	select2 : 	null,
  47. 	asignar :	null,
  48. 	liberar :	null,
  49. 	options1 : 	new Array(),		// Array interno con los datos de los OPTIONs del primer SELECT
  50. 	options2 : 	new Array(),		// Array interno con los datos de los OPTIONs del segundo SELECT
  51.  
  52. 	options: {},
  53.  
  54. 	//***********************************
  55. 	// INITIALIZE
  56. 	//	Función constructora. Requiere por parámetros los dos elementos SELECTs del HTML, y los
  57. 	//	dos INPUTs que interactuarán en la clase.
  58. 	//***********************************
  59. 	initialize: function(select1, select2, asignar, liberar){
  60.  
  61. 		// guarda el objeto implícito para dentro de las funciones
  62. 		var self = this;
  63.  
  64. 		this.select1 = select1;
  65. 		this.select2 = select2;
  66. 		this.asignar = asignar;
  67. 		this.liberar = liberar;
  68.  
  69. 		//generar el array con todos los options del select1
  70. 		this.select1.getElements('option').each( function(option) {
  71. 			self.options1.push({
  72. 				'id' : option.get('value'),
  73. 				'name' : option.get('html'),
  74. 				'state' : true
  75. 			});
  76. 		});
  77.  
  78. 		//generar el array con todos los options del select2
  79. 		this.select2.getElements('option').each( function(option) {
  80. 			self.options2.push({
  81. 				'id' : option.get('value'),
  82. 				'name' : option.get('html'),
  83. 				'state' : true
  84. 			});
  85. 		});
  86.  
  87. 		//crea el evento de asignar para el botón
  88. 		this.asignar.addEvent ('click', function () {
  89. 			var options_selected = self.select1.getElements('option').filter( function(option){
  90. 				return option.get('selected');
  91. 			});
  92.  
  93. 			options_selected.each ( function (option) {
  94. 				self.moveOptionToSelect2(option);
  95. 			});
  96. 			self.updateSelect2();
  97. 		});
  98.  
  99. 		//crea el evento de liberar para el botón
  100. 		this.liberar.addEvent ('click', function () {
  101. 			var options_selected = self.select2.getElements('option').filter( function(option){
  102. 				return option.get('selected');
  103. 			});
  104.  
  105. 			options_selected.each ( function (option) {
  106. 				self.moveOptionToSelect1(option);
  107. 			});
  108. 			self.updateSelect1();
  109. 		});
  110.  
  111. 		//crea el evento de asignar para el doble click en el option
  112. 		this.select1.addEvent ('dblclick', function () {
  113. 			self.asignar.fireEvent('click');
  114. 		});
  115.  
  116. 		//crea el evento de asignar para el doble click en el option
  117. 		this.select2.addEvent ('dblclick', function () {
  118. 			self.liberar.fireEvent('click');
  119. 		});
  120.  
  121. 	},   
  122.  
  123. 	//***********************************
  124. 	// MOVE OPTION TO SELECT2
  125. 	//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
  126. 	//***********************************
  127. 	moveOptionToSelect2 : function( option ) {
  128.  
  129. 		// guarda el objeto implícito para dentro de las funciones
  130. 		var self = this;
  131.  
  132. 		// calcula la posición donde se encuentra el option en el array de options del select original
  133. 		var position;
  134. 		this.options1.each( function(item, index) {
  135. 			if (item.id == option.get('value')) {
  136. 				position = index;
  137. 			}
  138. 		});
  139.  
  140. 		// hace el intercambio en los arrays
  141. 		this.options2.push(this.options1[position]);
  142. 		this.options1.remove(position);
  143.  
  144. 		// borra el option del select original
  145. 		option.destroy();
  146.  
  147. 	},
  148.  
  149. 	//***********************************
  150. 	// MOVE OPTION TO SELECT1
  151. 	//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
  152. 	//***********************************
  153. 	moveOptionToSelect1 : function( option ) {
  154.  
  155. 		// guarda el objeto implícito para dentro de las funciones
  156. 		var self = this;
  157.  
  158. 		// calcula la posición donde se encuentra el option en el array de options del select original
  159. 		var position;
  160. 		this.options2.each ( function(item, index) {
  161. 			if (item.id == option.get('value')) {
  162. 				position = index;
  163. 			}
  164. 		});
  165.  
  166. 		// hace el intercambio en los arrays
  167. 		this.options1.push(this.options2[position]);
  168. 		this.options2.remove(position);
  169.  
  170. 		// borra el option del select original
  171. 		option.destroy();
  172.  
  173. 	},		
  174.  
  175. 	//***********************************
  176. 	// UPDATE SELECT1
  177. 	//	Vacía el primer SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
  178. 	//***********************************
  179. 	updateSelect1 : function() {
  180.  
  181. 		// guarda el objeto implícito para dentro de las funciones
  182. 		var self = this;
  183.  
  184. 		// borra los options del select de destino, y lo regera según el array
  185. 		this.select1.empty();
  186.  
  187. 		this.options1.each ( function(item) {
  188. 			if (item.state) {
  189. 				op = new Element('option', {
  190. 					'id': 'dominio-' + item.id,
  191. 					'value': item.id,
  192. 					'html': item.name
  193. 				});
  194. 				op.inject(self.select1);
  195. 			}
  196. 		});
  197.  
  198. 	},
  199.  
  200. 	//***********************************
  201. 	// UPDATE TO SELECT2
  202. 	//	Vacía el segundo SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
  203. 	//***********************************
  204. 	updateSelect2 : function() {
  205.  
  206. 		// guarda el objeto implícito para dentro de las funciones
  207. 		var self = this;
  208.  
  209. 		// borra los options del select de destino, y lo regera según el array
  210. 		this.select2.empty();
  211.  
  212. 		this.options2.each ( function(item) {
  213. 			op = new Element('option', {
  214. 			    'id': 'dominio-'+item.id,
  215. 			    'value': item.id,
  216. 			    'html': item.name
  217. 			});
  218. 			op.inject(self.select2);
  219. 		});
  220.  
  221. 	}
  222. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: MMDeveloper on September 30, 2008

object oriented programming is such a beautiful thing

You need to login to post a comment.