modules/carbon/carbon_view.js

/** $Id: carbon_view.js,v 1.4 2009/05/04 11:02:47 johnackers Exp $ 
 *  
 * javascript functions that support ajax loading and editing.
 * 
 * carbon_debug.js also required.
 */

var formInUse = false; 
var formOptions = null ;
var formLoad = 0 ;

Drupal.behaviors.carbon_view = function () 
{	
  // initialize elements on page that can be expanded 

  var numLoadable = 0 ;
  $('A.loadOnDemand').each(function () {	   		         	    	      
    $(this).click(function() { carbonRequestData(this); return false }); // must return to suppress link click  
    numLoadable++ ; 
  })  // A tag 	

  // override onclick() event handlers on edit,clone,add 
  // buttons but only on the forms that we created
    
  var numEditable = 0 ;
  $('form.ajaj a.edit, form.ajaj a.clone, form.ajaj a.delete,form.ajaj a.new').each(function () { 		
    $(this).click(function() { carbonRequestForm(this); return false }); // must return to suppress link click  
    numEditable++ ; 
  })  // A tag 	 
  log("The page has " + numLoadable + " loadable elements and " + numEditable + " editable elements");    
}
 
/**
 * Need to merge this function with above function
 * but could wait for jQuery 1.3 
 * 
 * @param element
 * @return
 */

function carbonAddHandler(element)
{
  var numEditable = 0 ;
  $(element).find("a.edit, a.clone, a.delete, a.add").each(function () { 
    this.href += "&datatype=json" ;
    $(this).click(function() { carbonRequestForm(this); return false }); // must return to suppress link click  
    numEditable++ ; 
  })  // A tag     
  log("The page has " + numEditable + " new editable elements");   
}


/** 
 * HTML block manipulation functions
 */

/**
 * Respond to a link clicked on by a user
 * @param id  unique id for each panel on the page
 * @param url
 * @return
 */

function carbonRequestData(link)
{
  url = link.href + "&datatype=json" ;
  
  // look around for the loadingZone close to the link in the DOM 
  target = $(link).parent().find('.loadingZone');
  
  // then look further afield
  if (target.length < 1)   
    target = $(link).parent().parent().find('.loadingZone');    
    
  if (target.length < 1) 
  {
    alert("Unable to locate 'loadingZone' on page");
    return ; 
  }

  fieldset = $(link).parent().parent().filter('fieldset');

  // Fieldsets. The fieldset is loaded once when it is first opened. 
  // When the fieldset is closed and opened the original unrefreshed 
  // data is put back on the screen. 
  
  if (fieldset.length > 0)
  {
    if ($(link).hasClass('collapsed'))  // fieldset is closed, do nothing
      return ;
    if ($(link).hasClass('loaded'))     // data already loaded, do nothing
      return ;
    $(target).html("<a class='loading' href='"+ link.href + "'>loading...</a>").removeAttr("style");
    log("requesting element:" + link.href);   
    jQuery.getJSON(url, { datatype: "json"} , function(fragment) { carbonAcceptData(link, target, fragment); }) ;
    return ;
  }
  
  if ($(link).hasClass('loaded') == false)
  {
    $(target).html("<a class='loading' href='"+ link.href + "'>loading...</a>").removeAttr("style");
    log("requesting element:" + link.href); 	
  	jQuery.getJSON(url, { datatype: "json"} , function(fragment) { carbonAcceptData(link, target, fragment); }) ;	
  }
  else
  {	 
    log("closing") 
    $(link).removeClass('loaded')
    $(target).hide("slow");
  }
  return false ; 
}

/**
 * Respond to a callback from the browser to receive data from the host
 * 
 * @param id    unique id for each panel on the page
 * @param url
 * @param body  
 * @param msg   replaace HTML
 * @return
 */


function carbonAcceptData(link, target, fragment)
{  
  $(link).addClass("loaded");
  $(target).html(fragment) ; 
  log("accepted element:" + link.href);
}


/**
 * replace the readonly row in the table with a loading 
 * message and fetch the form.
 */


function carbonRequestForm(elem)
{    
  elem.href += "&datatype=json" ;  
  rowClicked = $(elem).parents('tr.editable, tr.addable');
 
  if (rowClicked.length != 1) { alert("Error: Found " + rowClicked.length + " editable rows in table"); return ; }
  
  form = rowClicked.parents('form');  

  if (formInUse == true)
  {
    alert("Please refresh page before editing or adding more items");
    return false ;
  }
  
  if ($(elem).hasClass("delete"))
  { 
    // title assumed to be first column 
    title = $(rowClicked).children(":first").text();
  	response = confirm("Delete " + title + "?");
	  if (response == false)  // ignore delete click
	    return true ; 
  }
  
  log(elem.id + ":requesting form:" + elem.href); 	  
  
  loadingMessage = "<tr><td class='loading' colspan=10>loading...</td></tr>" ;

  $(rowClicked).after(loadingMessage);
  
  rowLoading = $(rowClicked).next();  
 
  if (rowLoading.length != 1) { alert("Error: Found " + rowLoading.length + " loading rows in table"); return ; }
  
  // if we request a clone, leave the existing row 
  // in the table. For add and edit, remove this row,
  // we will overwrite it when we save the node.
  
  if (elem.className != "clone")
  {
    $(rowClicked).remove();
  }
  
  jQuery.getJSON(elem.href, 
    { datatype: "json" } , 
    function(fragment) 
    { 
      log (elem.id + ":accepting form:" + elem.href);	
      carbonAcceptForm(elem.id, elem.href, rowLoading, fragment, form); 
    }) ;	

}

/**
 * We have got the form as HTML code. Slot it back into 
 * table where the loading message is on display. 
 */


function carbonAcceptForm(id, url, rowLoading, fragment, form)
{
  formInUse = true ; 
  
  // insert new row and remove old 'loading' row   
  
  $(rowLoading).after(fragment);  

  rowInserted = $(rowLoading).next();  $(rowLoading).remove();

  if (rowInserted.length != 1) { alert("Error: Found " + rowInserted.length + " inserted rows in table"); return ; }
  
  if ($(rowInserted).filter('.deletion').length == 1) 
  {
    formInUse = false ; 
    return ; 
  }
  carbonEnableSubmit(id, url, rowInserted, form);
}


function carbonEnableSubmit(id, url, element, form)
{  
  if (formLoad == 0)
  {
    form.submit(function()    // attach handler to form's submit event 
    {     
      $(this).ajaxSubmit(formOptions); 
      return false;          // prevents normal browser submission.
    });
  }
//  alert(formOptions.url);

  formOptions = {          // information http://malsup.com/jquery/form/#options-object
    url : url,				     // use the edit url, not the table url
    complete: function(response, status) {
      if (status == 'error' || status == 'parsererror') {
    	  alert(status)
      }
      else
      { 
    	  fragment = eval(response.responseText);
    	  carbonRestoreRow(id, url, element, fragment, form);
      }    	  
    }, 
    
    type:      'post',       // override for form's default 'method' attribute 	
    dataType:  'json',       // 'xml', 'script', or 'json' (expected server response type)   
    
//	target:    arRow,        // target element(s) to be updated with server response       
//	beforeSubmit:  showRequest,  // pre-submit callback 
//  success:       showResponse, // post-submit callback 

    clearForm: false,       // clear all form fields after successful submit 
    numLoad : ++formLoad 
  };
}

/**
 * Update the row in the table. The difficult bit is deciding whether 
 * this is an update or an insertion. 
 * 
 *  edit         clone        add (failed)     add (success)
 *  
 *  replace      replace      replace          insert row          
 *  
 * @param id
 * @param url
 * @param rowWithForm
 * @param fragment
 * @param form
 * @return
 */


function carbonRestoreRow(id, url, rowWithForm, fragment, form)
{    
  log (id + ":restoring row4:" + url);
  
//  logJQueryObject("rWF", rowWithForm);
  
  log()
  
  try {
    // insert the new row above the form
  	rowUpdated = $(rowWithForm).before(fragment).prev();
	
    rowUpdated.addClass("highlight");
  	// has server provided an insertion or replacement?
  	// could use hasClass but want to make sure only 1 row
 	
  	numInsertion = $(rowUpdated).filter(".insertion").length;
    numReplacement = $(rowUpdated).filter(".replacement").length;
    
    logMsg = "Got " + numInsertion + " insertion and " + numReplacement + " replacement, expected total of one." ;
  	if (numInsertion + numReplacement != 1)
  	  throw(logMsg);
  }
  catch (error) {
    alert("Unable to add row : " + error);
    return ; 
  }  
  
  try 
  {
  	if (numInsertion == 0) 
  	{
  	  $(rowUpdated).removeClass('replacement').addClass('editable');
  	  $(rowWithForm).remove();
      
  	  carbonEnableSubmit(id, url, rowUpdated, form);   
      // enable edit, clone buttons
      carbonAddHandler(rowUpdated);  
      
      // find out if input fields are on new row
      numInput = $(rowUpdated).find("input").length ; 
  	  if (numInput == 0)   // if not, ok to start editing elesewhere.
  	    formInUse = false ; 
  	}
  	else 
    {
      $(rowUpdated).removeClass('insertion').addClass('editable');

      carbonEnableSubmit(id, url, rowWithForm, form);
      carbonAddHandler(rowWithForm); 
    }  	
  	

  }
  catch (error) {
	  alert("Unable to remove row or alter class : " + error)
  }
}
1	/** $Id: carbon_view.js,v 1.4 2009/05/04 11:02:47 johnackers Exp $
2	*
3	* javascript functions that support ajax loading and editing.
4	*
5	* carbon_debug.js also required.
6	*/
7
8	var formInUse = false;
9	var formOptions = null ;
10	var formLoad = 0 ;
11
12	Drupal.behaviors.carbon_view = function ()
13	{
14	// initialize elements on page that can be expanded
15
16	var numLoadable = 0 ;
17	$('A.loadOnDemand').each(function () {
18	$(this).click(function() { carbonRequestData(this); return false }); // must return to suppress link click
19	numLoadable++ ;
20	}) // A tag
21
22	// override onclick() event handlers on edit,clone,add
23	// buttons but only on the forms that we created
24
25	var numEditable = 0 ;
26	$('form.ajaj a.edit, form.ajaj a.clone, form.ajaj a.delete,form.ajaj a.new').each(function () {
27	$(this).click(function() { carbonRequestForm(this); return false }); // must return to suppress link click
28	numEditable++ ;
29	}) // A tag
30	log("The page has " + numLoadable + " loadable elements and " + numEditable + " editable elements");
31	}
32
33	/**
34	* Need to merge this function with above function
35	* but could wait for jQuery 1.3
36	*
37	* @param element
38	* @return
39	*/
40
41	function carbonAddHandler(element)
42	{
43	var numEditable = 0 ;
44	$(element).find("a.edit, a.clone, a.delete, a.add").each(function () {
45	this.href += "&datatype=json" ;
46	$(this).click(function() { carbonRequestForm(this); return false }); // must return to suppress link click
47	numEditable++ ;
48	}) // A tag
49	log("The page has " + numEditable + " new editable elements");
50	}
51
52
53	/**
54	* HTML block manipulation functions
55	*/
56
57	/**
58	* Respond to a link clicked on by a user
59	* @param id unique id for each panel on the page
60	* @param url
61	* @return
62	*/
63
64	function carbonRequestData(link)
65	{
66	url = link.href + "&datatype=json" ;
67
68	// look around for the loadingZone close to the link in the DOM
69	target = $(link).parent().find('.loadingZone');
70
71	// then look further afield
72	if (target.length < 1)
73	target = $(link).parent().parent().find('.loadingZone');
74
75	if (target.length < 1)
76	{
77	alert("Unable to locate 'loadingZone' on page");
78	return ;
79	}
80
81	fieldset = $(link).parent().parent().filter('fieldset');
82
83	// Fieldsets. The fieldset is loaded once when it is first opened.
84	// When the fieldset is closed and opened the original unrefreshed
85	// data is put back on the screen.
86
87	if (fieldset.length > 0)
88	{
89	if ($(link).hasClass('collapsed')) // fieldset is closed, do nothing
90	return ;
91	if ($(link).hasClass('loaded')) // data already loaded, do nothing
92	return ;
93	$(target).html("<a class='loading' href='"+ link.href + "'>loading...</a>").removeAttr("style");
94	log("requesting element:" + link.href);
95	jQuery.getJSON(url, { datatype: "json"} , function(fragment) { carbonAcceptData(link, target, fragment); }) ;
96	return ;
97	}
98
99	if ($(link).hasClass('loaded') == false)
100	{
101	$(target).html("<a class='loading' href='"+ link.href + "'>loading...</a>").removeAttr("style");
102	log("requesting element:" + link.href);
103	jQuery.getJSON(url, { datatype: "json"} , function(fragment) { carbonAcceptData(link, target, fragment); }) ;
104	}
105	else
106	{
107	log("closing")
108	$(link).removeClass('loaded')
109	$(target).hide("slow");
110	}
111	return false ;
112	}
113
114	/**
115	* Respond to a callback from the browser to receive data from the host
116	*
117	* @param id unique id for each panel on the page
118	* @param url
119	* @param body
120	* @param msg replaace HTML
121	* @return
122	*/
123
124
125	function carbonAcceptData(link, target, fragment)
126	{
127	$(link).addClass("loaded");
128	$(target).html(fragment) ;
129	log("accepted element:" + link.href);
130	}
131
132
133	/**
134	* replace the readonly row in the table with a loading
135	* message and fetch the form.
136	*/
137
138
139	function carbonRequestForm(elem)
140	{
141	elem.href += "&datatype=json" ;
142	rowClicked = $(elem).parents('tr.editable, tr.addable');
143
144	if (rowClicked.length != 1) { alert("Error: Found " + rowClicked.length + " editable rows in table"); return ; }
145
146	form = rowClicked.parents('form');
147
148	if (formInUse == true)
149	{
150	alert("Please refresh page before editing or adding more items");
151	return false ;
152	}
153
154	if ($(elem).hasClass("delete"))
155	{
156	// title assumed to be first column
157	title = $(rowClicked).children(":first").text();
158	response = confirm("Delete " + title + "?");
159	if (response == false) // ignore delete click
160	return true ;
161	}
162
163	log(elem.id + ":requesting form:" + elem.href);
164
165	loadingMessage = "<tr><td class='loading' colspan=10>loading...</td></tr>" ;
166
167	$(rowClicked).after(loadingMessage);
168
169	rowLoading = $(rowClicked).next();
170
171	if (rowLoading.length != 1) { alert("Error: Found " + rowLoading.length + " loading rows in table"); return ; }
172
173	// if we request a clone, leave the existing row
174	// in the table. For add and edit, remove this row,
175	// we will overwrite it when we save the node.
176
177	if (elem.className != "clone")
178	{
179	$(rowClicked).remove();
180	}
181
182	jQuery.getJSON(elem.href,
183	{ datatype: "json" } ,
184	function(fragment)
185	{
186	log (elem.id + ":accepting form:" + elem.href);
187	carbonAcceptForm(elem.id, elem.href, rowLoading, fragment, form);
188	}) ;
189
190	}
191
192	/**
193	* We have got the form as HTML code. Slot it back into
194	* table where the loading message is on display.
195	*/
196
197
198	function carbonAcceptForm(id, url, rowLoading, fragment, form)
199	{
200	formInUse = true ;
201
202	// insert new row and remove old 'loading' row
203
204	$(rowLoading).after(fragment);
205
206	rowInserted = $(rowLoading).next(); $(rowLoading).remove();
207
208	if (rowInserted.length != 1) { alert("Error: Found " + rowInserted.length + " inserted rows in table"); return ; }
209
210	if ($(rowInserted).filter('.deletion').length == 1)
211	{
212	formInUse = false ;
213	return ;
214	}
215	carbonEnableSubmit(id, url, rowInserted, form);
216	}
217
218
219	function carbonEnableSubmit(id, url, element, form)
220	{
221	if (formLoad == 0)
222	{
223	form.submit(function() // attach handler to form's submit event
224	{
225	$(this).ajaxSubmit(formOptions);
226	return false; // prevents normal browser submission.
227	});
228	}
229	// alert(formOptions.url);
230
231	formOptions = { // information http://malsup.com/jquery/form/#options-object
232	url : url, // use the edit url, not the table url
233	complete: function(response, status) {
234	if (status == 'error' \|\| status == 'parsererror') {
235	alert(status)
236	}
237	else
238	{
239	fragment = eval(response.responseText);
240	carbonRestoreRow(id, url, element, fragment, form);
241	}
242	},
243
244	type: 'post', // override for form's default 'method' attribute
245	dataType: 'json', // 'xml', 'script', or 'json' (expected server response type)
246
247	// target: arRow, // target element(s) to be updated with server response
248	// beforeSubmit: showRequest, // pre-submit callback
249	// success: showResponse, // post-submit callback
250
251	clearForm: false, // clear all form fields after successful submit
252	numLoad : ++formLoad
253	};
254	}
255
256	/**
257	* Update the row in the table. The difficult bit is deciding whether
258	* this is an update or an insertion.
259	*
260	* edit clone add (failed) add (success)
261	*
262	* replace replace replace insert row
263	*
264	* @param id
265	* @param url
266	* @param rowWithForm
267	* @param fragment
268	* @param form
269	* @return
270	*/
271
272
273	function carbonRestoreRow(id, url, rowWithForm, fragment, form)
274	{
275	log (id + ":restoring row4:" + url);
276
277	// logJQueryObject("rWF", rowWithForm);
278
279	log()
280
281	try {
282	// insert the new row above the form
283	rowUpdated = $(rowWithForm).before(fragment).prev();
284
285	rowUpdated.addClass("highlight");
286	// has server provided an insertion or replacement?
287	// could use hasClass but want to make sure only 1 row
288
289	numInsertion = $(rowUpdated).filter(".insertion").length;
290	numReplacement = $(rowUpdated).filter(".replacement").length;
291
292	logMsg = "Got " + numInsertion + " insertion and " + numReplacement + " replacement, expected total of one." ;
293	if (numInsertion + numReplacement != 1)
294	throw(logMsg);
295	}
296	catch (error) {
297	alert("Unable to add row : " + error);
298	return ;
299	}
300
301	try
302	{
303	if (numInsertion == 0)
304	{
305	$(rowUpdated).removeClass('replacement').addClass('editable');
306	$(rowWithForm).remove();
307
308	carbonEnableSubmit(id, url, rowUpdated, form);
309	// enable edit, clone buttons
310	carbonAddHandler(rowUpdated);
311
312	// find out if input fields are on new row
313	numInput = $(rowUpdated).find("input").length ;
314	if (numInput == 0) // if not, ok to start editing elesewhere.
315	formInUse = false ;
316	}
317	else
318	{
319	$(rowUpdated).removeClass('insertion').addClass('editable');
320
321	carbonEnableSubmit(id, url, rowWithForm, form);
322	carbonAddHandler(rowWithForm);
323	}
324
325
326
327	}
328	catch (error) {
329	alert("Unable to remove row or alter class : " + error)
330	}
331	}