widget drag n drop

git-svn-id: https://code.elgg.org/elgg/trunk@962 36083f99-b078-4883-b0ff-0f9b5a30f544

2 files changed, 65 insertions, 29 deletions

diff --git a/javascript/initialise_elgg.js b/javascript/initialise_elgg.js
index 15aa40396..a8905a162 100644
--- a/javascript/initialise_elgg.js
+++ b/javascript/initialise_elgg.js
@@ -27,13 +27,15 @@ $(document).ready(function () {
     
 	// click function for customise panel - remove widget
 	$('img.remove_me').click(function () {
-		//$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium");
 		$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
 			$(this).remove();
-			var widgetNameMain = ($('#main_widgets').text()).replace(/[\n]/g, ',');
-			var widgetNameRight = ($('#rightsidebar_widgets').text()).replace(/[\n]/g, ',');	
+			
+			var widgetNameMain = outputWidgetList('#main_widgets');
 			document.getElementById('debugField1').value = widgetNameMain;
+			
+			var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
 			document.getElementById('debugField2').value = widgetNameRight;
+
 		  });
 
 		return false;
@@ -61,9 +63,8 @@ $(document).ready(function () {
 		stop: function(e,ui) {			
 			$(this).sortable( "refresh" );
 			
-			var widgetNameMain = ($('#main_widgets').text()).replace(/[\n]/g, ',');
-			var widgetNameRight = ($('#rightsidebar_widgets').text()).replace(/[\n]/g, ',');	
-			//alert('widgetName = ' +widgetName);
+			var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
+			var widgetNameMain = outputWidgetList('#main_widgets');
 			document.getElementById('debugField1').value = widgetNameMain;
 			document.getElementById('debugField2').value = widgetNameRight;
 		}
@@ -89,13 +90,15 @@ $(document).ready(function () {
 			$('img.remove_me').click(function () {
 					$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
 					$(this).remove();
-					var widgetNameMain = ($('#rightsidebar_widgets').text()).replace(/[\n]/g, ',');
-					document.getElementById('debugField2').value = widgetNameMain;
+					
+					var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
+					document.getElementById('debugField2').value = widgetNameRight;
 				});
 			return false;
 			});
 			$els.sortable( "refresh" );
-			var widgetNameRight = ($('#rightsidebar_widgets').text()).replace(/[\n]/g, ',');	
+			
+			var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
 			document.getElementById('debugField2').value = widgetNameRight;
 		 }
 	});
@@ -108,14 +111,16 @@ $(document).ready(function () {
 			$('img.remove_me').click(function () {
 					$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
 					$(this).remove();
-					var widgetNameMain = ($('#main_widgets').text()).replace(/[\n]/g, ',');
+					
+					var widgetNameMain = outputWidgetList('#main_widgets');
 					document.getElementById('debugField1').value = widgetNameMain;
 				});
 			return false;
 				
 			});
 			$els.sortable( "refresh" );
-			var widgetNameMain = ($('#main_widgets').text()).replace(/[\n]/g, ',');
+			
+			var widgetNameMain = outputWidgetList('#main_widgets');
 			document.getElementById('debugField1').value = widgetNameMain;
 		 }
 	});
@@ -123,6 +128,34 @@ $(document).ready(function () {
     
 });
 
+
+jQuery.fn.makeDelimitedList = function(elementAttribute) {
+	
+	var delimitedListArray = new Array();
+
+	var listDelimiter = "::";
+
+	// Loop over each element in the stack and add the elementAttribute to the array
+	this.each(function(e) {
+			var listElement = $(this);
+	
+			// Add the attribute value to our values array
+			delimitedListArray[delimitedListArray.length] = listElement.attr(elementAttribute);
+		}
+	);
+
+	// Return value list by joining the array
+	return(delimitedListArray.join(listDelimiter));
+}
+
+
+function outputWidgetList(forElement) {
+	//return( $("input[@name='handler']", forElement ).makeDelimitedList("value") );	
+	return( $("input[@name='handler'], input[@name='guid']", forElement ).makeDelimitedList("value") );
+	
+}
+
+
 // toggle box content
 var toggleContent = function(e) {
 	var targetContent = $('div.collapsable_box_content', this.parentNode.parentNode);
@@ -140,3 +173,6 @@ var toggleContent = function(e) {
 		}
 	return false;
 };
+
+
+
diff --git a/views/default/canvas/layouts/widgets.php b/views/default/canvas/layouts/widgets.php
index 547d35088..a5133697d 100644
--- a/views/default/canvas/layouts/widgets.php
+++ b/views/default/canvas/layouts/widgets.php
@@ -59,32 +59,32 @@
 
 <div id="main_widgets">
 <h2>Main content area widgets</h2>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 1 Title<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="0" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 1 Title<input type="hidden" name="handler" value="placeholder1" />
+		<input type="hidden" name="guid" value="01" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
 </tr></table>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 2 Title megacalculatorextrodinaire<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="0" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 2 Title megacalculatorextrodinaire<input type="hidden" name="handler" value="placeholder2" />
+		<input type="hidden" name="guid" value="02" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
 </tr></table>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 3 Title<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="0" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 3 Title<input type="hidden" name="handler" value="placeholder3" />
+		<input type="hidden" name="guid" value="03" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
 </tr></table>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 4 Title<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="0" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 4 Title<input type="hidden" name="handler" value="placeholder4" />
+		<input type="hidden" name="guid" value="04" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
 </tr></table>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 5 Title<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="8" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 5 Title<input type="hidden" name="handler" value="placeholder5" />
+		<input type="hidden" name="guid" value="05" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
@@ -95,20 +95,20 @@
 <td width="240px">
 <div id="rightsidebar_widgets">
 <h2>Right sidebar widgets</h2>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 6 Title<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="30" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 6 Title<input type="hidden" name="handler" value="placeholder6" />
+		<input type="hidden" name="guid" value="06" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
 </tr></table>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 7 Title<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="7" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 7 Title<input type="hidden" name="handler" value="placeholder7" />
+		<input type="hidden" name="guid" value="07" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
 </tr></table>
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 8 Title<input type="hidden" name="handler" value="placeholder" />
-		<input type="hidden" name="guid" value="9" /></h3></td>
+<table class="draggable_widget" cellspacing="0"><tr><td width="149px"><h3>Widget 8 Title<input type="hidden" name="handler" value="placeholder8" />
+		<input type="hidden" name="guid" value="08" /></h3></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
@@ -121,8 +121,8 @@
 
 </div><!-- /#customise_page_view -->
 
-<textarea type="textarea" value="Main widgets" style="width:400px;height:60px;" id="debugField1" /></textarea>
-<textarea type="textarea" value="Right widgets" style="width:400px;height:40px;" id="debugField2" /></textarea>
+<textarea type="textarea" value="Main widgets" style="width:400px;height:70px;" id="debugField1" /></textarea>
+<textarea type="textarea" value="Right widgets" style="width:400px;height:70px;" id="debugField2" /></textarea>
 
 <input type="submit" value="Save changes" class="submit_button" />