From 9d810a6331a025c28052eadcbfe7e6e77b8a7334 Mon Sep 17 00:00:00 2001 From: cash Date: Fri, 19 Nov 2010 21:23:20 +0000 Subject: updating widget contents when settings are changed git-svn-id: http://code.elgg.org/elgg/trunk@7351 36083f99-b078-4883-b0ff-0f9b5a30f544 --- js/lib/ui.widgets.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 57 insertions(+), 4 deletions(-) (limited to 'js/lib') diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js index f20ac19c2..bee4b2126 100644 --- a/js/lib/ui.widgets.js +++ b/js/lib/ui.widgets.js @@ -1,5 +1,10 @@ elgg.provide('elgg.ui.widgets'); +/** + * Widgets initialization + * + * @return void + */ elgg.ui.widgets.init = function() { $(".widget_column").sortable({ items: 'div.widget', @@ -45,14 +50,28 @@ elgg.ui.widgets.init = function() { elgg.ui.widgets.equalHeight(".widget_column"); }; -// insert a widget into the layout +/** + * Insert a new widget into the layout + * + * This always inserts the widget at the top of the first column. + * + * @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); } -// remove a widget from the layout +/** + * 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) { $(this).parent().parent().parent().parent().remove(); elgg.action('widgets/delete', { @@ -64,19 +83,49 @@ elgg.ui.widgets.remove = function(event) { event.preventDefault(); } +/** + * Toggle the edit panel of a widget + * + * Yes, I'm quite bad at selectors. + * + * @param {Object} event + * @return void + */ elgg.ui.widgets.editToggle = function(event) { $(this).parent().parent().parent().parent().find('.widget_edit').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('.widget_content'); + $widgetContent.html('loading'); elgg.action('widgets/save', { - data: $(this).serialize() + data: $(this).serialize(), + success: function(json) { + $widgetContent.html(json.output); + } }); event.preventDefault(); } +/** + * Make all elements have the same min-height + * + * This addresses the issue of trying to drag a widget into a column that does + * not have any widgets. + * + * @param {String} selector + * @return void + */ elgg.ui.widgets.equalHeight = function(selector) { var maxHeight = 0; $(selector).each(function() { @@ -87,6 +136,11 @@ elgg.ui.widgets.equalHeight = function(selector) { $(selector).css('min-height', maxHeight); } +elgg.register_event_handler('init', 'system', elgg.ui.widgets.init); + + +// @todo look into removing the below functions - maybe a compatibility plugin + //List active widgets for each page column elgg.ui.widgets.outputList = function(forElement) { return $("input[name='handler'], input[name='guid']", forElement).makeDelimitedList("value"); @@ -162,4 +216,3 @@ var toggleContent = elgg.ui.widgets.toggleContent, 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 -- cgit v1.2.3