TalkPHP - View Single Post - Edit-in-place

Tanax · 04-15-2009, 09:10 PM

Yah, I solved it. The problem that occur is called Event Bubbling.
http://www.quirksmode.org/js/events_order.html

Code:

var config = {
	rows: '5',
	cols: '25',
	okButtonText: 'Redigera',
	cancelButtonText: 'Avbryt'
};

window.onload = function  () {
	var pElements = document.getElementsByTagName('*');
	for (var i=0; i < pElements.length; i++) {
		if(pElements[i].className == 'editable')
			inPlaceEditor(pElements[i]);
	};
};

function inPlaceEditor (editableElement) {

	editableElement.onclick = function(e) {
	
		if(this.childNodes[1] == undefined)
		{

			var text = getTextArea(this);
			var buttons = getButtons(text.div);

			this.className = 'not_editable';

		}

		if(buttons)
		{

			var container = this;
			buttons.cancel.onclick = function(e) {

				container.firstChild.nodeValue = text.origText;
				container.removeChild(container.childNodes[1]);
				container.className = 'editable';

				if (!e) var e = window.event;
                       	e.cancelBubble = true; // IE
                       	if (e.stopPropagation) e.stopPropagation(); // W3C
                       	return false;

			}

			buttons.edit.onclick = function() {

				container.className = 'editable';
				alert('You clicked edit!');

			}


		}

	}

}

function getTextArea(obj)
{

	var origText = obj.firstChild.nodeValue;
	obj.firstChild.nodeValue = '';

	var div = document.createElement("div");
	obj.appendChild(div);

	var textarea = document.createElement("textarea");

	textarea.setAttribute("cols", config.cols);
	textarea.setAttribute("rows", config.rows);
	textarea.value = origText;

	div.appendChild(textarea);

	var text = {
		'origText': origText,
		'textarea': textarea,
		'div': div
	}

	return text;

}

function getButtons(obj)
{

	var br = document.createElement("br");
	var edit = document.createElement("input");
	
	edit.setAttribute("type", "button");
	edit.setAttribute("value", config.okButtonText);

	obj.appendChild(br);
	obj.appendChild(edit);

	var cancel = document.createElement("input");
		
	cancel.setAttribute("type", "button");
	cancel.setAttribute("value", config.cancelButtonText);
		
	obj.appendChild(cancel);

	var buttons = {
		'edit': edit,
		'cancel': cancel
	}

	return buttons;

}

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" title="no title" charset="utf-8" />

	<title>index</title>
	<script src="scripts/inplaceEditor.js" type="text/javascript" charset="utf-8"></script>
	
</head>

<body>
<div id="content">
	<h1>Redigeringsbara stycken</h1>
	<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<h2>Nedanstående &auml;r ej redigeringsbart</h2>

	<p class="not_editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>