postit.js

ajax source code .

App.Modules.PostIt = function(obj){
	var data = obj.dataObj.data;
	var localData = new Object();
	var el = obj.elm_moduleContent;
	
	this.edit = function() {
		var editContent = obj.elm_editContent;
		var content = '<div style="font-weight: bold;margin-bottom:5px"><table>'+App.Loc.PostIt_edit_chooseColor+' : </table></div>'+
					'<div class="postItcolorSelection">'+
						'<div style="background-color:#FFF;" myColor="#FFF"></div>'+
						'<div style="background-color:lightyellow;" myColor="lightyellow"></div>'+
						'<div style="background-color:#EEFFE0;" myColor="#EEFFE0"></div>'+
						'<div style="background-color:#FFE0E1;" myColor="#FFE0E1"></div>'+
						'<div style="background-color:#E0E0FF;" myColor="#E0E0FF"></div>'+
						'<div style="background-color:#FEE8BD;" myColor="#FEE8BD"></div>'+
					'</div>'+
					'<div style="clear:both"></div>';
		editContent.innerHTML = content;
		var colorsDiv = editContent.childNodes[1];
		for (var z=0; z<colorsDiv.childNodes.length; z++) {
			colorsDiv.childNodes[z].onclick = function() {
				var coul = this.getAttribute("myColor");
				node = el.firstChild;
				while (node) {
					node.style.backgroundColor = coul;
					node.style.border = "1px solid "+coul;
					node = node.nextSlibling;
				}
				data.color = coul;
				obj.save();
			}
		}
	}
	
	function convertTextToHTML(s) {
		s = s.replace(/\&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");		
		return s;
	}
	function convertHTMLToText(s) {
		s = s.replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/<br>/g,"\n");		
		return s;
	}
		
	if (data.text == null || data.text == "") data.text = App.Loc.PostIt_typeText;
	if (data.color == null) data.color = "lightyellow";
	
	el.style.padding = "2px";
	
	var postItText = data.text;
	var lastText = postItText;
	
	if (Browser.isMozilla) {
		el.innerHTML = '<div class="postItFrame" style="cursor:text;border:1px solid '+data.color+';background-color:'+data.color+'"></div><div class="postItFrame" style="display:none;background-color:'+data.color+';border:1px solid '+data.color+'"><textarea cols="" class="postItArea"></textarea></div>';
		var frame = el.firstChild;
		frame.innerHTML = convertTextToHTML(postItText);
		var textarea = el.lastChild.firstChild;
		
		function editText() {
			frame.onclick = null;
			var h = frame.offsetHeight;
			var t = convertHTMLToText(frame.innerHTML);
			frame.style.display = "none";
			textarea.innerHTML = t;
			textarea.style.height = (h+5)+"px";
			textarea.parentNode.style.display = "block";
			textarea.parentNode.style.border = "1px solid #F00";
			textarea.focus(0);
			textarea.onkeyup = function() {
				frame.innerHTML = convertTextToHTML(this.value);
				frame.style.display = "block";
				this.style.height = (frame.offsetHeight+5) + "px";
				frame.style.display = "none";
			}
			textarea.onblur = function() {
				this.parentNode.style.border = "1px solid "+data.color;
				data.text = this.value.replace(/\\/g, "");
				this.onblur = null;
				this.parentNode.style.display = "none";
				frame.innerHTML = convertTextToHTML(data.text);
				frame.style.display = "block";
				frame.onclick = editText;
				if (data.text != lastText && data.text.length<15000) obj.save();
				lastText = data.text;
			}
		}
		
		frame.onclick = editText;
		
	} else {
		el.innerHTML = '<div class="postItFrame" style="background-color:'+data.color+';border:1px solid '+data.color+'" contenteditable></div>';
		el.firstChild.innerHTML = convertTextToHTML(postItText);
		el.firstChild.onclick = function() {
			this.style.border = "1px solid #F00";
		}
		el.firstChild.onblur = function() {
			this.style.border = "1px solid "+data.color;
			data.text = this.innerText.replace(/\\/g, "");
			if (data.text != lastText && data.text.length<15000) obj.save();
			lastText = data.text;
		}
	}
	
	obj.onLoadModule();

}