From 26ca356ea7bb4521d763204fb68d0cba8086684b Mon Sep 17 00:00:00 2001
From: cash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Sat, 20 Nov 2010 17:07:20 +0000
Subject: Fixes #472 handling interactive adding/deleting of widgets with
 single/multiple instance constraints

git-svn-id: http://code.elgg.org/elgg/trunk@7385 36083f99-b078-4883-b0ff-0f9b5a30f544
---
 js/lib/ui.widgets.js                | 128 +++++++++++++++++++++++++-----------
 mod/friends/start.php               |   2 +-
 views/default/widgets/add_panel.php |  11 +++-
 views/default/widgets/wrapper.php   |   5 +-
 4 files changed, 104 insertions(+), 42 deletions(-)

diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js
index 73b7f46cc..a26be4154 100644
--- a/js/lib/ui.widgets.js
+++ b/js/lib/ui.widgets.js
@@ -6,26 +6,21 @@ elgg.provide('elgg.ui.widgets');
  * @return void
  */
 elgg.ui.widgets.init = function() {
+
+	// widget layout?
+	if ($(".widget_column").length == 0) {
+		return;
+	}
+
 	$(".widget_column").sortable({
 		items:                'div.widget',
 		connectWith:          '.widget_column',
 		handle:               'div.drag_handle',
 		forcePlaceholderSize: true,
 		placeholder:          'widget_placeholder',
-		//containment:          '.widget_layout',
 		opacity:              0.8,
 		revert:               500,
-		stop:                 function(event, ui) {
-			elgg.action('widgets/move', {
-				data: {
-					// widget_<guid>
-					guid: ui.item.attr('id').substring(7),
-					// widget_col_<column>
-					column: ui.item.parent().attr('id').substring(11),
-					position: ui.item.index()
-				}
-			});
-		}
+		stop:                 elgg.ui.widgets.move
 	});
 
 	$('#widget_add_button a').bind('click', function(event) {
@@ -33,38 +28,75 @@ elgg.ui.widgets.init = function() {
 		event.preventDefault();
 	});
 
-	$('.widgets_add_panel li.widget_available').bind('click', function(event) {
-		elgg.action('widgets/add', {
-			data: {
-				handler: $(this).attr('id'),
-				user_guid: elgg.get_loggedin_userid(),
-				context: $("input[name='widget_context']").val()
-			},
-			success: function(json) {
-				elgg.ui.widgets.insert(json.output);
-			}
-		});
-		event.preventDefault();
-	});
+	$('.widgets_add_panel li.widget_available').click(elgg.ui.widgets.add);
+	$('a.widget_delete_button').click(elgg.ui.widgets.remove);
+	$('a.widget_edit_button').click(elgg.ui.widgets.editToggle);
+	$('.widget_edit > form ').submit(elgg.ui.widgets.saveSettings);
 
-	$('a.widget_delete_button').bind('click', elgg.ui.widgets.remove);
-	$('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle);
-	$('.widget_edit > form ').bind('submit', elgg.ui.widgets.saveSettings);
 	elgg.ui.widgets.equalHeight(".widget_column");
 };
 
 /**
- * Insert a new widget into the layout
+ * Adds a new widget
+ *
+ * Makes Ajax call to persist new widget and inserts the widget html
+ *
+ * @param {Object} event
+ * @return void
+ */
+elgg.ui.widgets.add = function(event) {
+	// widget_type_<type>
+	var type = $(this).attr('id');
+	type = type.substr(type.indexOf('widget_type_') + "widget_type_".length);
+
+	// if multiple instances not allow, disable this widget type add button
+	var multiple = $(this).attr('class').indexOf('widget_multiple') != -1;
+	if (multiple == false) {
+		$(this).addClass('widget_unavailable');
+		$(this).removeClass('widget_available');
+		$(this).unbind('click', elgg.ui.widgets.add);
+	}
+
+	elgg.action('widgets/add', {
+		data: {
+			handler: type,
+			user_guid: elgg.get_loggedin_userid(),
+			context: $("input[name='widget_context']").val()
+		},
+		success: function(json) {
+			$('#widget_col_1').prepend(json.output);
+			$('#widget_col_1').children(":first").find('a.widget_delete_button').bind('click', elgg.ui.widgets.remove);
+			$('#widget_col_1').children(":first").find('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle);
+		}
+	});
+	event.preventDefault();
+}
+
+/**
+ * Persist the widget's new position
  *
- * This always inserts the widget at the top of the first column.
+ * @param {Object} event
+ * @param {Object} ui
  *
- * @param {String} html The HTML of the widget
  * @return void
  */
-elgg.ui.widgets.insert = function(html) {
-	$('#widget_col_1').prepend(html);
-	$('#widget_col_1').children(":first").find('a.widget_delete_button').bind('click', elgg.ui.widgets.remove);
-	$('#widget_col_1').children(":first").find('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle);
+elgg.ui.widgets.move = function(event, ui) {
+
+	// widget_<guid>
+	var guidString = ui.item.attr('id');
+	guidString = guidString.substr(guidString.indexOf('widget_') + "widget_".length);
+
+	// widget_col_<column>
+	var col = ui.item.parent().attr('id');
+	col = col.substr(col.indexOf('widget_col_') + "widget_col_".length);
+
+	elgg.action('widgets/move', {
+		data: {
+			guid: guidString,
+			column: col,
+			position: ui.item.index()
+		}
+	});
 }
 
 /**
@@ -76,11 +108,30 @@ elgg.ui.widgets.insert = function(html) {
  * @return void
  */
 elgg.ui.widgets.remove = function(event) {
-	$(this).parent().parent().parent().parent().remove();
+	var $widget = $(this).parent().parent().parent().parent();
+
+	// if widget type is single instance type, enable the add buton
+	var type = $widget.attr('class');
+	// widget_instance_<type>
+	type = type.substr(type.indexOf('widget_instance_') + "widget_instance_".length);
+	$button = $('#widget_type_' + type);
+	var multiple = $button.attr('class').indexOf('widget_multiple') != -1;
+	if (multiple == false) {
+		$button.addClass('widget_available');
+		$button.removeClass('widget_unavailable');
+		$button.unbind('click', elgg.ui.widgets.add); // make sure we don't bind twice
+		$button.click(elgg.ui.widgets.add);
+	}
+
+	$widget.remove();
+
+	// widget_delete_button_<guid>
+	var id = $(this).attr('id');
+	id = id.substr(id.indexOf('widget_delete_button_') + "widget_delete_button_".length);
+
 	elgg.action('widgets/delete', {
 		data: {
-			// widget_delete_button_<guid>
-			guid: $(this).attr('id').substring(21)
+			guid: id
 		}
 	});
 	event.preventDefault();
@@ -110,6 +161,7 @@ elgg.ui.widgets.editToggle = function(event) {
 elgg.ui.widgets.saveSettings = function(event) {
 	$(this).parent().slideToggle('medium');
 	var $widgetContent = $(this).parent().parent().children('.widget_content');
+	// @todo - change to ajax loader
 	$widgetContent.html('loading');
 	elgg.action('widgets/save', {
 		data: $(this).serialize(),
diff --git a/mod/friends/start.php b/mod/friends/start.php
index 0da095b96..fe6a40c75 100644
--- a/mod/friends/start.php
+++ b/mod/friends/start.php
@@ -8,7 +8,7 @@
  */
 
 function friends_init() {
-	add_widget_type('friends', elgg_echo("friends"), elgg_echo('friends:widget:description'), 'profile');
+	add_widget_type('friends', elgg_echo("friends"), elgg_echo('friends:widget:description'));
 }
 
 elgg_register_event_handler('init', 'system', 'friends_init');
diff --git a/views/default/widgets/add_panel.php b/views/default/widgets/add_panel.php
index 09511487c..a010d1e9e 100644
--- a/views/default/widgets/add_panel.php
+++ b/views/default/widgets/add_panel.php
@@ -19,7 +19,8 @@ foreach ($widgets as $column_widgets) {
 	</p>
 	<ul>
 <?php
-		foreach ($widget_types as $handler => $widget_type) {			
+		foreach ($widget_types as $handler => $widget_type) {
+			$id = "widget_type_$handler";
 			// check if widget added and only one instance allowed
 			if ($widget_type->multiple == false && in_array($handler, $current_handlers)) {
 				$class = 'widget_unavailable';
@@ -29,7 +30,13 @@ foreach ($widgets as $column_widgets) {
 				$tooltip = $widget_type->description;
 			}
 
-			echo "<li title=\"$tooltip\" id=\"$handler\" class=\"$class\">$widget_type->name</li>";
+			if ($widget_type->multiple) {
+				$class .= ' widget_multiple';
+			} else {
+				$class .= ' widget_single';
+			}
+
+			echo "<li title=\"$tooltip\" id=\"$id\" class=\"$class\">$widget_type->name</li>";
 		}
 ?>
 	</ul>
diff --git a/views/default/widgets/wrapper.php b/views/default/widgets/wrapper.php
index 6963989f9..a8651e666 100644
--- a/views/default/widgets/wrapper.php
+++ b/views/default/widgets/wrapper.php
@@ -23,8 +23,11 @@ if (!$title) {
 
 $can_edit = $widget->canEdit();
 
+$widget_id = "widget_$widget->guid";
+$widget_instance = "widget_instance_$handler";
+
 ?>
-<div class="widget draggable" id="widget_<?php echo $widget->guid; ?>">
+<div class="widget draggable <?php echo $widget_instance?>" id="<?php echo $widget_id; ?>">
 	<div class="widget_title drag_handle">
 		<h3><?php echo $title; ?></h3>
 		<?php
-- 
cgit v1.2.3