Summary

No overview generated for 'net/sf/jsm/widgets/jsmDoubleSelectField.js'

/**
 * Creates a new JsmDoubleSelectField
 * @extends JsmSelectField
 * @class Lets the user move values from one select list into another
 * @param {Array} options Array of options (value-label pairs), eg. [{'value':0, 'label':"All"},{'value':1, 'label':"UK"},{'value':2, 'label':"Ireland"}]
 * @param {Array} selectedValueOrLabel Array of selected values or labels
 * @param {int} size Amount of visible options 
 * @constructor
 */   
  function JsmDoubleSelectField(options, selectedValueOrLabel, size) {
  	/** @ignore */
  	this.id=new Date().getTime() + "" + Math.random(); 
  	logger.info("Created JsmDoubleSelectField with id: " + this.id);
  	/** @ignore */
  	this._multi=true;   	  
  	this.selected = selectedValueOrLabel;
  	/** The options of this select box
  	* @private 
  	* @type Array
  	*/
  	this._options=jsm.noud(options)?new Array():options;
  	/** How many options will be shown */
  	this._size=jsm.noud(size)?1:size;     
//TODO other delimiter  	
  	this._delimiter=","; 
		  	
  }

  JsmDoubleSelectField.extendClass(JsmSelectField);

  /** @ignore */
  JsmDoubleSelectField.prototype.className="JsmDoubleSelectField";
  
  /** @ignore */
  JsmDoubleSelectField.prototype.toString = function() {
  	return "[JsmDoubleSelectField object]\n"; 	
  } 
  
  /** Update the tabel model if all validators are passed. Will set the value and the meta data {@see JsmObject.META_DATA_NAME_VALUE} on the hosting {@JsmTd} object
   * @param {JsmTable} table The table this widget is attached to
   * @param {int} rowIdx The index of the row
   * @param {int} columnIdx The index of the column
   * @param theViewComponent   
   */  
  JsmDoubleSelectField.prototype.updateModel = function(table, rowIdx, columnIdx, theViewComponent) {
  	if (jsm.noud(theViewComponent)) {return;}  
	if (!this.validate(table, rowIdx, columnIdx, theViewComponent)) {
		return;
	}	
	var currentLabel=theViewComponent.innerHTML; //delimiter separated list of labels
	var currentValue=theViewComponent.selectFieldValue; //JSON-Array-String of current values, eg. ['1', '2']	
	logger.debug("JsmDoubleSelectField: updateModel:  currentLabel: " + currentLabel);
	logger.debug("JsmDoubleSelectField: updateModel:  currentValue: " + currentValue);
	if (currentLabel == jsmTextClickToEdit) {
		logger.debug("JsmDoubleSelectField: updateModel:  Nothing is selectd - the anchor holds the default text");
		var currentSelectedLabels = "".split(this._delimiter);
	} else {
		var currentSelectedLabels=theViewComponent.innerHTML.split(this._delimiter);
	}
	
  	td = table.getTd(rowIdx, columnIdx);
  	//set the dirty flag if an options is selected and the model value is different from the selected options label
  	if (!jsm.arrayOfSameValues(this.selected, currentSelectedLabels)) {
		logger.debug("JsmDoubleSelectField: Set the td to dirty");  		
  		td.setDirty(true);
 	}

  	//set the label as the cells value
	td.setValue(currentLabel == jsmTextClickToEdit?'':currentLabel);
	//set the value as a meta data
	td.setMetaData(this.META_DATA_NAME_VALUE, currentValue);	
  }    
  
  
  /** Returns the node of the view component; in this case this is a link which will open a div with the select-boxes; 
  * the model (this) will be attached to the node as property 'model'
  * @return theViewComponent The node of the view component (for example to append to a table cell)
  */
  JsmDoubleSelectField.prototype.getNode = function() {
  	var anchor = document.createElement("a"); 
  	anchor.model = this;  	
  	this.setAttribute('onclick', "if (!e) e=window.event; this.model.showDiv(e.clientX, e.clientY);");
  	anchor.setAttribute("id", this.id);
  	anchor.setAttribute("name", this.id);  
  	anchor.className='jsmHand';
  	var linkText = "";
  	for (var i=0;i<this.selected.length;i++) {
  		linkText+=this.selected[i];
  		if (i<this.selected.length-1) linkText+=this._delimiter + " ";  		
  	}
  	if (linkText.length == 0){linkText = jsmTextClickToEdit;}
  	var anchorText = document.createTextNode(linkText);
  	anchor.appendChild(anchorText);	
  	this.addAttributesToViewComponent(anchor);   	
  	return anchor;
  } 
  
  JsmDoubleSelectField.prototype.showDiv = function(x, y) {
  	//get the currently selected labels or values from the anchor
	this.selected = $(this.getId()).innerHTML.split(this._delimiter);  
	//remove the div if already exists 
  	var theDiv = $('JsmDoubleSelectFieldDiv');
  	if (!jsm.noud(theDiv)) {
	  	theDiv.parentNode.removeChild(theDiv);
  	}  
  	
  	var availableOptions = [];
  	var assignedOptions = [];
  	for (var idx in this.getOptions()) {
  		var option = this.getOptions()[idx];
  		if (jsm.arrayContains(this.selected, option.label) || jsm.arrayContains(this.selected, option.value)) {
  			assignedOptions.push(option);
  		} else {
  			availableOptions.push(option);
  		}
  	}
  	
  	//create the table within the div	
	var divTable = new JsmTable("JsmDoubleSelectFieldDiv");
	var tr2 = new JsmTr();
	tr2.addCell(new JsmTd("<img src='" + jsmHideImage + "' border='0'></img>").setTitle('Close').setAttribute('colspan', '3').setAttribute('align', 'right').setAttribute('onclick', "var theAnchor = $('" + this.getId() + "'); var linkText = jsmGetLabels($('assignedOptions@" + this.getId() + "'), '" + this._delimiter + "'); theAnchor.innerHTML = linkText.length>0?linkText:jsmTextClickToEdit; theAnchor.selectFieldValue = jsmGetValues($('assignedOptions@" + this.getId() + "')); var theDiv = $('JsmDoubleSelectFieldDiv');theDiv.parentNode.removeChild(theDiv);"));	
  	divTable.addRow(tr2);	
	var tr = new JsmTr();
	tr.addCell(new JsmTd(new JsmSelectField(availableOptions, null, true, this.getSize()).setId('availableOptions@' + this.getId())).setAttribute("align", "center"));
	tr.addCell(new JsmTd("<span onclick=\"jsmCopySelectedOptions($('availableOptions@" + this.getId() + "'), $('assignedOptions@" + this.getId() + "'));\">&gt;</span><br><span onclick=\"jsmCopySelectedOptions($('assignedOptions@" + this.getId() + "'), $('availableOptions@" + this.getId() + "'));\">&lt;</span>").setTitle(' '));
	tr.addCell(new JsmTd(new JsmSelectField(assignedOptions, null, true, this.getSize()).setId('assignedOptions@' + this.getId())).setAttribute("align", "center"));
  	divTable.addRow(tr);
  
  	//create the div
  	var div = document.createElement("div");
  	div.setAttribute("id", 'JsmDoubleSelectFieldDiv');
  	div.appendChild(divTable.getNode());
  	div.style.zIndex="500";
  	div.style.backgroundColor="black";
  	div.style.padding = "2px"  	
  	div.style.position='absolute';
  	div.style.top= y + 'px';
  	div.style.left= x + 'px';  
  	//attach it to the body
  	document.getElementsByTagName("body")[0].appendChild(div);
  }
  
  /** Clones this JsmDoubleSelectField
  * @return {JsmDoubleSelectField}
  */
  JsmDoubleSelectField.prototype.clone = function() {
	var clonedWidget = new JsmDoubleSelectField();
   	//TODO is it sufficient to copy the Array or do we have to iterate and copy each entry
   	clonedWidget._attributes = this._attributes;
   	clonedWidget._metaData = this._metaData;   
   	clonedWidget._options = this._options;   
  	clonedWidget._multi = this._multi;
  	clonedWidget._size = this._size;  	
  	clonedWidget._delimiter = this._delimiter;      	    		
   	return clonedWidget;	
  }