aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-06-18 13:03:08 +0000
committerpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-06-18 13:03:08 +0000
commit64876aa88b223a8f368a7669b7e129847248fab7 (patch)
tree22ad3c34ed5b8b0e4977778ab41a07703bc3725b
parent09fba458f79b8b1b1940405911915feade1989bf (diff)
downloadelgg-64876aa88b223a8f368a7669b7e129847248fab7.tar.gz
elgg-64876aa88b223a8f368a7669b7e129847248fab7.tar.bz2
widget drag n drop
git-svn-id: https://code.elgg.org/elgg/trunk@962 36083f99-b078-4883-b0ff-0f9b5a30f544
-rw-r--r--javascript/initialise_elgg.js58
-rw-r--r--views/default/canvas/layouts/widgets.php36
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" />