diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/lib/ui.widgets.js | 61 |
1 files changed, 57 insertions, 4 deletions
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 |