1 files changed, 209 insertions, 132 deletions
diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js
index bce5aea0f..26020bb4b 100644
--- a/js/lib/ui.widgets.js
+++ b/js/lib/ui.widgets.js
@@ -1,132 +1,209 @@
-elgg.provide('elgg.ui.widgets');
-
-elgg.ui.widgets.init = function() {
-	// COLLAPSABLE WIDGETS (on Dashboard & Profile pages)
-	$('a.toggle_box_contents').live('click', elgg.ui.widgets.toggleContent);
-	$('a.toggle_box_edit_panel').live('click', elgg.ui.widgets.toggleEditPanel);
-	$('a.toggle_customise_edit_panel').live('click', elgg.ui.widgets.toggleCustomizeEditPanel);
-	
-	// WIDGET GALLERY EDIT PANEL
-	// Sortable widgets
-	var els = [
-		'#leftcolumn_widgets',
-		'#middlecolumn_widgets',
-		'#rightcolumn_widgets',
-		'#widget_picker_gallery'
-	].join(',');
-	
-	$(els).sortable({
-		items: '.draggable_widget',
-		handle: '.drag_handle',
-		forcePlaceholderSize: true,
-		placeholder: 'ui-state-highlight',
-		cursor: 'move',
-		opacity: 0.9,
-		appendTo: 'body',
-		connectWith: els,
-		stop: function(e, ui) {
-			// refresh list before updating hidden fields with new widget order
-			$(this).sortable("refresh");
-
-			var widgetNamesLeft = elgg.ui.widgets.outputList('#leftcolumn_widgets'),
-				widgetNamesMiddle = elgg.ui.widgets.outputList('#middlecolumn_widgets'),
-				widgetNamesRight = elgg.ui.widgets.outputList('#rightcolumn_widgets');
-
-			$('#debugField1').val(widgetNamesLeft);
-			$('#debugField2').val(widgetNamesMiddle);
-			$('#debugField3').val(widgetNamesRight);
-		}
-	});
-
-	// bind more info buttons - called when new widgets are created
-	elgg.ui.widgets.moreinfo();
-};
-
-//List active widgets for each page column
-elgg.ui.widgets.outputList = function(forElement) {
-	return $("input[name='handler'], input[name='guid']", forElement).makeDelimitedList("value");
-};
-
-//Read each widgets collapsed/expanded state from cookie and apply
-elgg.ui.widgets.state = function(forWidget) {
-	var thisWidgetState = elgg.session.cookie(forWidget);
-
-	if (thisWidgetState === 'collapsed') {
-		forWidget = "#" + forWidget;
-		$(forWidget).find("div.collapsable_box_content").hide();
-		$(forWidget).find("a.toggle_box_contents").html('+');
-		$(forWidget).find("a.toggle_box_edit_panel").fadeOut('medium');
-	}
-};
-
-//More info tooltip in widget gallery edit panel
-elgg.ui.widgets.moreinfo = function() {
-	$("img.more_info").hover(function(e) {
-		var widgetdescription = $("input[name='description']", this.parentNode.parentNode.parentNode).val();
-		$("body").append("<p id='widget_moreinfo'><b>" + widgetdescription + " </b></p>");
-
-		if (e.pageX < 900) {
-			$("#widget_moreinfo")
-				.css("top", (e.pageY + 10) + "px")
-				.css("left", (e.pageX + 10) + "px")
-				.fadeIn("medium");
-		} else {
-			$("#widget_moreinfo")
-				.css("top", (e.pageY + 10) + "px")
-				.css("left", (e.pageX - 210) + "px")
-				.fadeIn("medium");
-		}
-	}, function() {
-		$("#widget_moreinfo").remove();
-	});
-};
-
-//Toggle widgets contents and save to a cookie
-elgg.ui.widgets.toggleContent = function(e) {
-	var thisWidgetName,
-		targetContent = $('div.collapsable_box_content', this.parentNode.parentNode);
-	
-	if (targetContent.css('display') === 'none') {
-		targetContent.slideDown(400);
-		$(this).html('-');
-		$(this.parentNode).children(".toggle_box_edit_panel").fadeIn('medium');
-
-		// set cookie for widget panel open-state
-		thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id');
-		elgg.session.cookie(thisWidgetName, 'expanded', {expires: 365 });
-
-	} else {
-		targetContent.slideUp(400);
-		$(this).html('+');
-		$(this.parentNode).children(".toggle_box_edit_panel").fadeOut('medium');
-		// make sure edit pane is closed
-		$(this.parentNode.parentNode).children(".collapsable_box_editpanel").hide();
-
-		// set cookie for widget panel closed-state
-		thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id');
-		elgg.session.cookie(thisWidgetName, 'collapsed', { expires: 365 });
-	}
-	return false;
-};
-
-// toggle widget box edit panel
-elgg.ui.widgets.toggleEditPanel = function () {
-	$(this.parentNode.parentNode).children(".collapsable_box_editpanel").slideToggle("fast");
-	return false;
-};
-
-// toggle customise edit panel
-elgg.ui.widgets.toggleCustomizeEditPanel = function () {
-	$('#customise_editpanel').slideToggle("fast");
-	return false;
-};
-
-/**
- * @deprecated Use elgg.ui.widgets.*
- */
-var toggleContent =    elgg.ui.widgets.toggleContent,
-    widget_moreinfo =  elgg.ui.widgets.moreinfo,
-    widget_state =     elgg.ui.widgets.state,
-    outputWidgetList = elgg.ui.widgets.outputList;
-
-elgg.register_event_handler('init', 'system', elgg.ui.widgets.init);
-\ No newline at end of file
+elgg.provide('elgg.ui.widgets');
+
+/**
+ * Widgets initialization
+ *
+ * @return void
+ */
+elgg.ui.widgets.init = function() {
+
+	// widget layout?
+	if ($(".elgg-widgets").length == 0) {
+		return;
+	}
+
+	$(".elgg-widgets").sortable({
+		items:                'div.elgg-module-widget.elgg-state-draggable',
+		connectWith:          '.elgg-widgets',
+		handle:               '.elgg-widget-handle',
+		forcePlaceholderSize: true,
+		placeholder:          'elgg-widget-placeholder',
+		opacity:              0.8,
+		revert:               500,
+		stop:                 elgg.ui.widgets.move
+	});
+
+	$('.elgg-widgets-add-panel li.elgg-state-available').click(elgg.ui.widgets.add);
+
+	$('a.elgg-widget-delete-button').live('click', elgg.ui.widgets.remove);
+	$('.elgg-widget-edit > form ').live('submit', elgg.ui.widgets.saveSettings);
+	$('a.elgg-widget-collapse-button').live('click', elgg.ui.widgets.collapseToggle);
+
+	elgg.ui.widgets.setMinHeight(".elgg-widgets");
+};
+
+/**
+ * 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) {
+	// elgg-widget-type-<type>
+	var type = $(this).attr('id');
+	type = type.substr(type.indexOf('elgg-widget-type-') + "elgg-widget-type-".length);
+
+	// if multiple instances not allow, disable this widget type add button
+	var multiple = $(this).attr('class').indexOf('elgg-widget-multiple') != -1;
+	if (multiple == false) {
+		$(this).addClass('elgg-state-unavailable');
+		$(this).removeClass('elgg-state-available');
+		$(this).unbind('click', elgg.ui.widgets.add);
+	}
+
+	elgg.action('widgets/add', {
+		data: {
+			handler: type,
+			owner_guid: elgg.get_page_owner_guid(),
+			context: $("input[name='widget_context']").val(),
+			show_access: $("input[name='show_access']").val(),
+			default_widgets: $("input[name='default_widgets']").val() || 0
+		},
+		success: function(json) {
+			$('#elgg-widget-col-1').prepend(json.output);
+		}
+	});
+	event.preventDefault();
+};
+
+/**
+ * Persist the widget's new position
+ *
+ * @param {Object} event
+ * @param {Object} ui
+ *
+ * @return void
+ */
+elgg.ui.widgets.move = function(event, ui) {
+
+	// elgg-widget-<guid>
+	var guidString = ui.item.attr('id');
+	guidString = guidString.substr(guidString.indexOf('elgg-widget-') + "elgg-widget-".length);
+
+	// elgg-widget-col-<column>
+	var col = ui.item.parent().attr('id');
+	col = col.substr(col.indexOf('elgg-widget-col-') + "elgg-widget-col-".length);
+
+	elgg.action('widgets/move', {
+		data: {
+			widget_guid: guidString,
+			column: col,
+			position: ui.item.index()
+		}
+	});
+
+	// @hack fixes jquery-ui/opera bug where draggable elements jump
+	ui.item.css('top', 0);
+	ui.item.css('left', 0);
+};
+
+/**
+ * Removes a widget from the layout
+ *
+ * Event callback the uses Ajax to delete the widget and removes its HTML
+ *
+ * @param {Object} event
+ * @return void
+ */
+elgg.ui.widgets.remove = function(event) {
+	if (confirm(elgg.echo('deleteconfirm')) == false) {
+		event.preventDefault();
+		return;
+	}
+	
+	var $widget = $(this).closest('.elgg-module-widget');
+
+	// if widget type is single instance type, enable the add buton
+	var type = $widget.attr('class');
+	// elgg-widget-instance-<type>
+	type = type.substr(type.indexOf('elgg-widget-instance-') + "elgg-widget-instance-".length);
+	$button = $('#elgg-widget-type-' + type);
+	var multiple = $button.attr('class').indexOf('elgg-widget-multiple') != -1;
+	if (multiple == false) {
+		$button.addClass('elgg-state-available');
+		$button.removeClass('elgg-state-unavailable');
+		$button.unbind('click', elgg.ui.widgets.add); // make sure we don't bind twice
+		$button.click(elgg.ui.widgets.add);
+	}
+
+	$widget.remove();
+
+	// delete the widget through ajax
+	elgg.action($(this).attr('href'));
+
+	event.preventDefault();
+};
+
+/**
+ * Toggle the collapse state of the widget
+ *
+ * @param {Object} event
+ * @return void
+ */
+elgg.ui.widgets.collapseToggle = function(event) {
+	$(this).toggleClass('elgg-widget-collapsed');
+	$(this).parent().parent().find('.elgg-body').slideToggle('medium');
+	event.preventDefault();
+};
+
+/**
+ * Save a widget's settings
+ *
+ * Uses Ajax to save the settings and updates the HTML.
+ *
+ * @param {Object} event
+ * @return void
+ */
+elgg.ui.widgets.saveSettings = function(event) {
+	$(this).parent().slideToggle('medium');
+	var $widgetContent = $(this).parent().parent().children('.elgg-widget-content');
+
+	// stick the ajax loader in there
+	var $loader = $('#elgg-widget-loader').clone();
+	$loader.attr('id', '#elgg-widget-active-loader');
+	$loader.removeClass('hidden');
+	$widgetContent.html($loader);
+
+	var default_widgets = $("input[name='default_widgets']").val() || 0;
+	if (default_widgets) {
+		$(this).append('<input type="hidden" name="default_widgets" value="1">');
+	}
+
+	elgg.action('widgets/save', {
+		data: $(this).serialize(),
+		success: function(json) {
+			$widgetContent.html(json.output);
+		}
+	});
+	event.preventDefault();
+};
+
+/**
+ * Set the min-height so that all widget column bottoms are the same
+ *
+ * This addresses the issue of trying to drag a widget into a column that does
+ * not have any widgets or many fewer widgets than other columns.
+ *
+ * @param {String} selector
+ * @return void
+ */
+elgg.ui.widgets.setMinHeight = function(selector) {
+	var maxBottom = 0;
+	$(selector).each(function() {
+		var bottom = parseInt($(this).offset().top + $(this).height());
+		if (bottom > maxBottom) {
+			maxBottom = bottom;
+		}
+	})
+	$(selector).each(function() {
+		var bottom = parseInt($(this).offset().top + $(this).height());
+		if (bottom < maxBottom) {
+			var newMinHeight = parseInt($(this).height() + (maxBottom - bottom));
+			$(this).css('min-height', newMinHeight + 'px');
+		}
+	})
+};
+
+elgg.register_hook_handler('init', 'system', elgg.ui.widgets.init);