1 /*
  2     Written by Jonathan Snook, http://www.snook.ca/jonathan
  3     Add-ons by Robert Nyman, http://www.robertnyman.com
  4 */
  5 
  6 
  7 require(DATAFACE_URL+'/js/ajax.js');
  8 function initDocument(){
  9 	df_add_editable_awareness(document);
 10 }
 11 
 12 function df_add_editable_awareness(el){
 13 	var els = getElementsByClassName(el, '*', 'df__editable_wrapper');
 14 	
 15 	for (var i=0, max=els.length; i<max; i++){
 16 		
 17 		els[i].onclick = makeEditable;
 18 		els[i].onmouseover = showEditIcon;
 19 		els[i].onmouseout = hideEditIcon;
 20 	
 21 	}
 22 	
 23 	
 24 
 25 }
 26 
 27 
 28 var editIconEl;
 29 var count=0;
 30 function refreshEditIcon(oEvent){
 31 	if ( !oEvent ) oEvent = window.event;
 32 
 33 	if ( !editIconEl ){
 34 		editIconEl = document.createElement('img');
 35 
 36 
 37 		editIconEl.setAttribute('src', DATAFACE_URL+'/images/edit.gif');
 38 		editIconEl.setAttribute('alt', 'Edit this content');
 39 		editIconEl.style.position = 'absolute';
 40 		editIconEl.style['z-index'] = 99;
 41 		document.body.appendChild(editIconEl);
 42 	}
 43 	editIconEl.style.top = (oEvent.clientY)+'px';
 44 	editIconEl.style.left = (oEvent.clientX+12)+'px';
 45 }
 46 
 47 
 48 function showEditIcon(){
 49 	if ( !this.dataface__icon_visible ){
 50 		this.dataface__icon_visible = true;
 51 		
 52 		this.onmousemove = refreshEditIcon;
 53 		this.style.cursor = 'pointer';
 54 		
 55 	}
 56 	
 57 	
 58 }
 59 
 60 function hideEditIcon(){
 61 	if ( this.dataface__icon_visible ){
 62 		this.dataface__icon_visible = false;
 63 		//var editIcons = getElementsByClassName(this, 'img', 'dataface__edit_icon');
 64 		//if ( !editIcons || editIcons.length == 0 ) return;
 65 		//this.removeChild(editIcons[0]);
 66 		this.style.cursor = '';
 67 		if ( editIconEl ){
 68 			document.body.removeChild(editIconEl);
 69 			editIconEl = null;
 70 		}
 71 	}
 72 }
 73 
 74 var dataface_editable_src = null;
 75 var dataface_editable_target = null;
 76 
 77 function editElement(src,target){
 78 	// First let's find all of the specific elements that will
 79 	// be edited here.
 80 	var editableElements = getElementsByClassName(src, 'span', 'df__editable');
 81 	var fields = [];
 82 	for ( var i=0; i<editableElements.length; i++){
 83 		var dfid = editableElements[i].getAttribute('df:id');
 84 		if ( !dfid ) continue;
 85 		fields.push(dfid);
 86 	}
 87 	if ( fields.length == 0 ){
 88 		// There were no editable fields in this block, so we'll try to edit 
 89 		// this one
 90 		var dfid = src.getAttribute('df:id');
 91 		if ( dfid ) fields = dfid;
 92 		else return;
 93 	} else {
 94 		fields = fields.join(',');
 95 	}
 96 	
 97 	var targetid = src.getAttribute('id');
 98 		// this may be confusing but the src is the element that is being edited
 99 		// the ajax form treats this as the target. Hence why targetid is actually
100 		// the id of src.
101 		
102 	src.http = getHTTPObject();
103 	src.http.onreadystatechange = editElement_handle;
104 	
105 	src.http.open('GET','?-action=ajax_form&-form-type=composite&-target-id='+escape(targetid)+'&-fields='+escape(fields));
106 	src.http.send(null);
107 	src.handleResponse = handleEditableResponse;
108 	
109 	dataface_editable_src = src;
110 	dataface_editable_target = target;
111 	
112 }
113 
114 function editElement_handle(){
115 	var src = dataface_editable_src;
116 	if ( !src ) return;
117 	var target = dataface_editable_target;
118 	var http = src.http;
119 	if ( http.readyState == 4 ){
120 		target.innerHTML = http.responseText;
121 		var scripts = target.getElementsByTagName('script');
122 		var len = scripts.length;
123 		for (var i=0; i<len; i++){
124 			var script = scripts[i].innerHTML;
125 			script = script.replace(/^<!--/, '');
126 			script = script.replace(/-->$/, '');
127 			eval(script);
128 		}
129 		var forms = target.getElementsByTagName('form');
130 		var form = forms[0];
131 		var elements = form.elements;
132 		for ( var i=0; i<form.elements.length; i++){
133 			if ( elements[i].type == 'text' || elements[i].type == 'textarea' ){
134 				elements[i].focus();
135 				break;
136 			}
137 		}
138 		
139 		
140 		
141 	}
142 }
143 /*
144  * Let's sort this out.
145  * for table cells, we want the cell to be editable... however only a portion
146  * inside of the link is to be edited.
147  */
148 
149 function makeEditable(){
150 	this.old_onclick = this.onclick;
151 	this.old_onmouseover = this.onmouseover;
152 	this.onclick=null;
153 	this.onmouseover=null;
154 	if ( editIconEl ){
155 		// If we had an edit icon displayed beside the cursor, we remove it
156 		// now.
157 		document.body.removeChild(editIconEl);
158 		editIconEl=null;
159 	}
160 	
161 	// Create a div to store the form to edit this element.
162 	var formdiv = document.createElement('div');
163 	formdiv.innerHTML = '<span><img src="'+DATAFACE_URL+'/images/progress.gif"/>Please wait ...</span>';
164 	if ( !this.getAttribute('df:id') ){
165 		this.appendChild(formdiv);
166 		formdiv.setAttribute('onclick', 'cancelBubble(event)');
167 		var subels = getElementsByClassName(this, 'span','df__editable');
168 		for ( var i=0; i<subels.length; i++){
169 			subels[i].style.display = 'none';
170 		}
171 		//this.old_onclick = this.onclick;
172 		//this.onclick = null;
173 	} else if ( this.nextSibling ){
174 		this.parentNode.insertBefore(formdiv,this.nextSibling);
175 	} else {
176 		this.parentNode.appendChild(formdiv);
177 	}
178 	//this.df__editform = formdiv;
179 	if ( this.getAttribute('df:id') ){
180 		this.style.display = 'none';
181 	} else {
182 		
183 	}
184 	this.edit_form = formdiv;
185 	editElement(this, formdiv);
186 	
187 }
188 
189 function cancelBubble(event){
190 	var e = event || window.event;
191 	e.cancelBubble = true;
192 	if ( e.stopPropagation ) e.stopPropagation();
193 }
194 
195 function handleEditableResponse(targetid, changed_values){
196 	var targetel = document.getElementById(targetid);
197 	if ( targetel.style.display == 'none' ) targetel.style.display = '';
198 	if ( !targetel ){
199 		alert("Could not find target element");
200 	} else {
201 		
202 		// we found the target element
203 		var els = getElementsByClassName(targetel, 'span', 'df__editable');
204 		if ( els.length == 0 ){
205 			els.push(targetel);
206 			
207 		}
208 		// els is an array of all of the spans that are editable - and thus
209 		// may need to be changed
210 		for ( var i=0; i<els.length; i++){
211 			var el = els[i];
212 			if ( el.style.display == 'none' ) el.style.display = '';
213 			var dfid = el.getAttribute('df:id');
214 			
215 			if ( !dfid ) continue;	// no dataface ID was specified for this element
216 			
217 			if ( changed_values[dfid] ){
218 			
219 				// Now we just change the HMTL value of this bad boy
220 				el.innerHTML = changed_values[dfid];
221 				var innerSpan = el.getElementsByTagName('span');
222 				if ( innerSpan.length > 0 ){
223 					el.innerHTML = innerSpan[0].innerHTML;
224 				}
225 				
226 			}
227 		}
228 	
229 	}
230 	
231 	// now we should hide the form
232 	
233 	//var wrapper = parent.document.getElementById('{$formid}-wrapper');
234 	
235 	
236 	//wrapper.parentNode.parentNode.removeChild(wrapper.parentNode);
237 
238 
239 	
240 	if ( targetel.old_onclick) {
241 		targetel.onclick = targetel.old_onclick;
242 		
243 		targetel.old_onclick = null;
244 		
245 	} else {
246 
247 	}
248 	
249 	//targetel.edit_form.parentNode.removeChild(targetel.edit_form);
250 	
251 	
252 }
253 
254 function submitThisForm(form){
255 	var div = document.createElement('div');
256 	div.innerHTML = '<img src="'+DATAFACE_URL+'/images/progress.gif" alt="Processing ..." />';
257 	form.parentNode.appendChild(div);
258 	form.style.display='none';
259 	form.submit();
260 	
261 }
262 
263 registerOnloadHandler(initDocument);