webthink/textControl.js

// Modes: 
// 	- display
// 	- singleLine Entry
// 	- MultiLine Entry

function textControl(initialText,isMultiLineDisabled,isDisabled) {
	var m_text=initialText;
	var m_isMultiline=false;

	var m_mode=isDisabled?"display":"slEntry"; // Initial Mode

	var m_slEntryControl;
	var m_mlEntryControl;
	var m_displayControl;

	var m_displayDom=document.createElement("span");

	// call the constructor only if the argument is given.
	if (arguments.length>=1) {
		return(construct());
	} else {
		// if no argument is given then we can only loadXML
		this.fromXML=fromXML;
		return(this);
	}

	function construct() {
		m_slEntryControl=createSingleLineEntryControl();
		m_displayControl=createDisplayControl();
		m_mlEntryControl=createMultiLineEntryControl();

		m_displayDom.appendChild(m_slEntryControl);
		m_displayDom.appendChild(m_mlEntryControl);
		m_displayDom.appendChild(m_displayControl);
		
		m_displayDom.focus=focus;
		m_displayDom.setDisplayMode=setDisplayMode;
		m_displayDom.setText=setText;
		m_displayDom.getText=getText;

		m_displayDom.toXML=toXML;
		m_displayDom.fromXML=fromXML;

		m_displayDom.extends(new Publisher());
		
		changeMode(m_mode);

		return (m_displayDom);
	}

	function focus(){
		changeMode(m_mode);
	}
	
	function getText() { return(m_text); }
	function setText(text) {
		// stop user form entering empty text.
		if (text.length>0) { 
			m_text=text; 
			changeMode(m_mode);
			return(true);
		} else {
			return(false);
		}
	}

	function setDisplayMode() { changeMode("display"); }

	function setSlEntryMode() { 
		if ((m_isMultiline) && (!isMultiLineDisabled)) { 
			changeMode("mlEntry"); 
		} else { 
			changeMode("slEntry");
		} 
	}
	function setMlEntryMode() { changeMode("mlEntry"); }

	function changeMode(newMode){
		m_mode=newMode;
		// hide all 
		m_slEntryControl.hide();
		m_displayControl.hide();
		m_mlEntryControl.hide();

		// and show the selected one
		switch(newMode) {
			case "slEntry":
				m_slEntryControl.update();
				m_slEntryControl.show();
				m_slEntryControl.focus();
				break;
			case "mlEntry":
				m_mlEntryControl.update();
				m_mlEntryControl.show();
				m_mlEntryControl.focus();
				break;
			case "display":
				m_displayControl.update();
				m_displayControl.show();
				m_displayControl.focus();
				break;
		}
		m_displayDom.notifySubscribers(m_displayDom,"changeMode");
	}

	function createMultiLineEntryControl() {
		var txtara=document.createElement("textarea");
		txtara.appendChild(document.createTextNode(m_text));
		txtara.onclick=onClickTextArea;
		txtara.onkeyup=updateText;
		
		var submit=document.createElement("input");
		submit.type="submit";
		submit.value="OK";
		submit.onclick=onClickOk;
		
		var container=document.createElement("span");
		container.appendChild(txtara);
		container.appendChild(submit);

		container.update=update;
		container.focus=focus;
		container.show=show;
		container.hide=hide;

		return(container);

		function onClickTextArea(event) {
			txtara.focus();
			event.stopPropagation();
		}
		function onClickOk(event) {
			endEdit();
			event.stopPropagation();
		}
		function update(){
			txtara.value=m_text;
		}
		function show(){
			container.style.display="inline";
			txtara.focus();
		}
		function hide(){
			container.style.display="none";
		}
		function focus(){
		}
		function updateText() {
			m_text = txtara.value;
		}
		function endEdit(){
			if (txtara.value.indexOf("\n")!=-1) {
				m_isMultiline=true;
			} else {
				m_isMultiline=false;
			}
			if (setText(txtara.value)) {
				setDisplayMode();
			}
		}
	}

	function createSingleLineEntryControl() {
		var container=document.createElement("span");
		container.style.whiteSpace="nowrap";

		var entry=document.createElement("input");
		entry.value=m_text;
		entry.onkeyup=updateText;
		entry.onkeydown=fireOnEnter;
		entry.onchange=endEdit;
		entry.onclick=onClickSingleLineEntry;

		var btnML=document.createElement("input");
		btnML.type="button";
		btnML.value="ML";
		btnML.onclick=onClickSwitchMultiline;
		
		container.appendChild(entry);
		if (!isMultiLineDisabled) {
			container.appendChild(btnML);
		}
		container.entry=entry;
		
		container.update=update;
		container.focus=focus;
		container.show=show;
		container.hide=hide;
		
		return(container);
		function onClickSingleLineEntry(event){
			entry.focus();
			event.stopPropagation();
		}
                function onClickSwitchMultiline(event){
			switchMultiLine();
			event.stopPropagation();
		}
		function hide() {
			container.style.display="none";
		}

		function show() {
			container.style.display="inline";
		}

		function update() {
			entry.value=m_text;
		}

		function focus() {
			entry.focus();
			entry.select();
		}
		function updateText() {
			m_text = entry.value;
		}
		function fireOnEnter(evt, frm ) {
			var keyCode = null;

			if( evt.which ) {
				keyCode = evt.which;
			} else if( evt.keyCode ) {
				keyCode = evt.keyCode;
			}
			if( 13 == keyCode ) {
				endEdit();
				return(false);
			}
			return(true);
		}

		function endEdit(){
			if (setText(entry.value)) {
				setDisplayMode();
			}
		}

		function switchMultiLine(){
			endEdit();
			changeMode("mlEntry");
		}
	}

	function createDisplayControl() {
		var container=document.createElement("span");
		container.setAttribute("class","boxText");
		container.onclick=onClickDisplayControl;
		container.appendChild(document.createTextNode(m_text));

		container.update=update;
		container.show=show;
		container.hide=hide;
		container.focus=focus;
		return(container);
		function onClickDisplayControl(event){
			if (!isDisabled) {	
				setSlEntryMode();
			}
			event.stopPropagation();
		}
		function hide() {
			container.style.display="none";
		}
		function show() {
			container.style.display="block";
		}
		function update(){
			container.firstChild.data=m_text;
		}
		function focus(){
			return(true);
		}
	}
	function toXML(){
		var xmlEle=document.createElement('TEXTCONTROL');
                xmlEle.setAttribute("ismultiline",(m_isMultiline)?"true":"false");
                xmlEle.setAttribute("mode",m_mode);
                xmlEle.appendChild(document.createTextNode(m_text));
		return(xmlEle);
	}
	function fromXML(inXML){
		m_isMultiline=("true"==inXML.getAttribute("ismultiline"));
		m_text=inXML.firstChild.nodeValue;
		m_mode=inXML.getAttribute("mode");
		return(construct());
	}
}