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 
 79 	// First let's find all of the specific elements that will
 80 	// be edited here.
 81 	var editableElements = getElementsByClassName(src, 'span', 'df__editable');
 82 	var fields = [];
 83 	for ( var i=0; i<editableElements.length; i++){
 84 		var dfid = editableElements[i].getAttribute('df:id');
 85 		if ( !dfid ) continue;
 86 		fields.push(dfid);
 87 	}
 88 		alert('here');
 89 	if ( fields.length == 0 ){
 90 		// There were no editable fields in this block, so we'll try to edit 
 91 		// this one
 92 		var dfid = src.getAttribute('df:id');
 93 		if ( dfid ) fields = dfid;
 94 		else return;
 95 	} else {
 96 		fields = fields.join(',');
 97 	}
 98 	
 99 	var targetid = src.getAttribute('id');
100 		// this may be confusing but the src is the element that is being edited
101 		// the ajax form treats this as the target. Hence why targetid is actually
102 		// the id of src.
103 		
104 	src.http = getHTTPObject();
105 	
106 	src.http.onreadystatechange = editElement_handle;
107 	
108 	src.http.open('GET','?-action=ajax_form&-form-type=composite&-target-id='+encodeURIComponent(targetid)+'&-fields='+encodeURIComponent(fields));
109 	
110 	src.http.send(null);
111 	
112 	src.handleResponse = handleEditableResponse;
113 	
114 	dataface_editable_src = src;
115 	dataface_editable_target = target;
116 	
117 }
118 
119 function editElement_handle(){
120 	var src = dataface_editable_src;
121 	if ( !src ) return;
122 	var target = dataface_editable_target;
123 	var http = src.http;
124 	if ( http.readyState == 4 ){
125 		target.innerHTML = http.responseText;
126 		var scripts = target.getElementsByTagName('script');
127 		var len = scripts.length;
128 		for (var i=0; i<len; i++){
129 			var script = scripts[i].innerHTML;
130 			script = script.replace(/^<!--/, '');
131 			script = script.replace(/-->$/, '');
132 			eval(script);
133 		}
134 		var forms = target.getElementsByTagName('form');
135 		var form = forms[0];
136 		var elements = form.elements;
137 		for ( var i=0; i<form.elements.length; i++){
138 			if ( elements[i].type == 'text' || elements[i].type == 'textarea' ){
139 				elements[i].focus();
140 				break;
141 			}
142 		}
143 		
144 		
145 		
146 	}
147 }
148 /*
149  * Let's sort this out.
150  * for table cells, we want the cell to be editable... however only a portion
151  * inside of the link is to be edited.
152  */
153 
154 function makeEditable(){
155 	this.old_onclick = this.onclick;
156 	this.old_onmouseover = this.onmouseover;
157 	this.onclick=null;
158 	this.onmouseover=null;
159 	if ( editIconEl ){
160 		// If we had an edit icon displayed beside the cursor, we remove it
161 		// now.
162 		document.body.removeChild(editIconEl);
163 		editIconEl=null;
164 	}
165 	
166 	// Create a div to store the form to edit this element.
167 	var formdiv = document.createElement('div');
168 	formdiv.innerHTML = '<span><img src="'+DATAFACE_URL+'/images/progress.gif"/>Please wait ...</span>';
169 	if ( !this.getAttribute('df:id') ){
170 		this.appendChild(formdiv);
171 		formdiv.setAttribute('onclick', 'cancelBubble(event)');
172 		var subels = getElementsByClassName(this, 'span','df__editable');
173 		for ( var i=0; i<subels.length; i++){
174 			subels[i].style.display = 'none';
175 		}
176 		//this.old_onclick = this.onclick;
177 		//this.onclick = null;
178 	} else if ( this.nextSibling ){
179 		this.parentNode.insertBefore(formdiv,this.nextSibling);
180 	} else {
181 		this.parentNode.appendChild(formdiv);
182 	}
183 	//this.df__editform = formdiv;
184 	if ( this.getAttribute('df:id') ){
185 		this.style.display = 'none';
186 	} else {
187 		
188 	}
189 	this.edit_form = formdiv;
190 	editElement(this, formdiv);
191 	
192 }
193 
194 function cancelBubble(event){
195 	var e = event || window.event;
196 	e.cancelBubble = true;
197 	if ( e.stopPropagation ) e.stopPropagation();
198 }
199 
200 function handleEditableResponse(targetid, changed_values){
201 	var targetel = document.getElementById(targetid);
202 	if ( targetel.style.display == 'none' ) targetel.style.display = '';
203 	if ( !targetel ){
204 		alert("Could not find target element");
205 	} else {
206 		
207 		// we found the target element
208 		var els = getElementsByClassName(targetel, 'span', 'df__editable');
209 		if ( els.length == 0 ){
210 			els.push(targetel);
211 			
212 		}
213 		// els is an array of all of the spans that are editable - and thus
214 		// may need to be changed
215 		for ( var i=0; i<els.length; i++){
216 			var el = els[i];
217 			if ( el.style.display == 'none' ) el.style.display = '';
218 			var dfid = el.getAttribute('df:id');
219 			
220 			if ( !dfid ) continue;	// no dataface ID was specified for this element
221 			
222 			if ( changed_values[dfid] ){
223 			
224 				// Now we just change the HMTL value of this bad boy
225 				el.innerHTML = changed_values[dfid];
226 				var innerSpan = el.getElementsByTagName('span');
227 				if ( innerSpan.length > 0 ){
228 					el.innerHTML = innerSpan[0].innerHTML;
229 				}
230 				
231 			}
232 		}
233 	
234 	}
235 	
236 	// now we should hide the form
237 	
238 	//var wrapper = parent.document.getElementById('{$formid}-wrapper');
239 	
240 	
241 	//wrapper.parentNode.parentNode.removeChild(wrapper.parentNode);
242 
243 
244 	
245 	if ( targetel.old_onclick) {
246 		targetel.onclick = targetel.old_onclick;
247 		
248 		targetel.old_onclick = null;
249 		
250 	} else {
251 
252 	}
253 	
254 	//targetel.edit_form.parentNode.removeChild(targetel.edit_form);
255 	
256 	
257 }
258 
259 function submitThisForm(form){
260 	var div = document.createElement('div');
261 	div.innerHTML = '<img src="'+DATAFACE_URL+'/images/progress.gif" alt="Processing ..." />';
262 	form.parentNode.appendChild(div);
263 	form.style.display='none';
264 	form.submit();
265 	
266 }
267 
268 registerOnloadHandler(initDocument);