Fixes #472 handling interactive adding/deleting of widgets with single/multiple insta...

git-svn-id: http://code.elgg.org/elgg/trunk@7385 36083f99-b078-4883-b0ff-0f9b5a30f544

diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js
index 73b7f46cc2704c3c678eeb968f10d11b4aec120e..a26be4154c8942ac16faa15ce8a8cf58a5a72d12 100644 (file)
--- a/js/lib/ui.widgets.js
+++ b/js/lib/ui.widgets.js
@@ -6,26 +6,21 @@ elgg.provide('elgg.ui.widgets');
  * @return void\r
  */\r
 elgg.ui.widgets.init = function() {\r
+\r
+       // widget layout?\r
+       if ($(".widget_column").length == 0) {\r
+               return;\r
+       }\r
+\r
        $(".widget_column").sortable({\r
                items:                'div.widget',\r
                connectWith:          '.widget_column',\r
                handle:               'div.drag_handle',\r
                forcePlaceholderSize: true,\r
                placeholder:          'widget_placeholder',\r
-               //containment:          '.widget_layout',\r
                opacity:              0.8,\r
                revert:               500,\r
-               stop:                 function(event, ui) {\r
-                       elgg.action('widgets/move', {\r
-                               data: {\r
-                                       // widget_<guid>\r
-                                       guid: ui.item.attr('id').substring(7),\r
-                                       // widget_col_<column>\r
-                                       column: ui.item.parent().attr('id').substring(11),\r
-                                       position: ui.item.index()\r
-                               }\r
-                       });\r
-               }\r
+               stop:                 elgg.ui.widgets.move\r
        });\r
 \r
        $('#widget_add_button a').bind('click', function(event) {\r
@@ -33,38 +28,75 @@ elgg.ui.widgets.init = function() {
                event.preventDefault();\r
        });\r
 \r
-       $('.widgets_add_panel li.widget_available').bind('click', function(event) {\r
-               elgg.action('widgets/add', {\r
-                       data: {\r
-                               handler: $(this).attr('id'),\r
-                               user_guid: elgg.get_loggedin_userid(),\r
-                               context: $("input[name='widget_context']").val()\r
-                       },\r
-                       success: function(json) {\r
-                               elgg.ui.widgets.insert(json.output);\r
-                       }\r
-               });\r
-               event.preventDefault();\r
-       });\r
+       $('.widgets_add_panel li.widget_available').click(elgg.ui.widgets.add);\r
+       $('a.widget_delete_button').click(elgg.ui.widgets.remove);\r
+       $('a.widget_edit_button').click(elgg.ui.widgets.editToggle);\r
+       $('.widget_edit > form ').submit(elgg.ui.widgets.saveSettings);\r
 \r
-       $('a.widget_delete_button').bind('click', elgg.ui.widgets.remove);\r
-       $('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle);\r
-       $('.widget_edit > form ').bind('submit', elgg.ui.widgets.saveSettings);\r
        elgg.ui.widgets.equalHeight(".widget_column");\r
 };\r
 \r
 /**\r
- * Insert a new widget into the layout\r
+ * Adds a new widget\r
+ *\r
+ * Makes Ajax call to persist new widget and inserts the widget html\r
+ *\r
+ * @param {Object} event\r
+ * @return void\r
+ */\r
+elgg.ui.widgets.add = function(event) {\r
+       // widget_type_<type>\r
+       var type = $(this).attr('id');\r
+       type = type.substr(type.indexOf('widget_type_') + "widget_type_".length);\r
+\r
+       // if multiple instances not allow, disable this widget type add button\r
+       var multiple = $(this).attr('class').indexOf('widget_multiple') != -1;\r
+       if (multiple == false) {\r
+               $(this).addClass('widget_unavailable');\r
+               $(this).removeClass('widget_available');\r
+               $(this).unbind('click', elgg.ui.widgets.add);\r
+       }\r
+\r
+       elgg.action('widgets/add', {\r
+               data: {\r
+                       handler: type,\r
+                       user_guid: elgg.get_loggedin_userid(),\r
+                       context: $("input[name='widget_context']").val()\r
+               },\r
+               success: function(json) {\r
+                       $('#widget_col_1').prepend(json.output);\r
+                       $('#widget_col_1').children(":first").find('a.widget_delete_button').bind('click', elgg.ui.widgets.remove);\r
+                       $('#widget_col_1').children(":first").find('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle);\r
+               }\r
+       });\r
+       event.preventDefault();\r
+}\r
+\r
+/**\r
+ * Persist the widget's new position\r
  *\r
- * This always inserts the widget at the top of the first column.\r
+ * @param {Object} event\r
+ * @param {Object} ui\r
  *\r
- * @param {String} html The HTML of the widget\r
  * @return void\r
  */\r
-elgg.ui.widgets.insert = function(html) {\r
-       $('#widget_col_1').prepend(html);\r
-       $('#widget_col_1').children(":first").find('a.widget_delete_button').bind('click', elgg.ui.widgets.remove);\r
-       $('#widget_col_1').children(":first").find('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle);\r
+elgg.ui.widgets.move = function(event, ui) {\r
+\r
+       // widget_<guid>\r
+       var guidString = ui.item.attr('id');\r
+       guidString = guidString.substr(guidString.indexOf('widget_') + "widget_".length);\r
+\r
+       // widget_col_<column>\r
+       var col = ui.item.parent().attr('id');\r
+       col = col.substr(col.indexOf('widget_col_') + "widget_col_".length);\r
+\r
+       elgg.action('widgets/move', {\r
+               data: {\r
+                       guid: guidString,\r
+                       column: col,\r
+                       position: ui.item.index()\r
+               }\r
+       });\r
 }\r
 \r
 /**\r
@@ -76,11 +108,30 @@ elgg.ui.widgets.insert = function(html) {
  * @return void\r
  */\r
 elgg.ui.widgets.remove = function(event) {\r
-       $(this).parent().parent().parent().parent().remove();\r
+       var $widget = $(this).parent().parent().parent().parent();\r
+\r
+       // if widget type is single instance type, enable the add buton\r
+       var type = $widget.attr('class');\r
+       // widget_instance_<type>\r
+       type = type.substr(type.indexOf('widget_instance_') + "widget_instance_".length);\r
+       $button = $('#widget_type_' + type);\r
+       var multiple = $button.attr('class').indexOf('widget_multiple') != -1;\r
+       if (multiple == false) {\r
+               $button.addClass('widget_available');\r
+               $button.removeClass('widget_unavailable');\r
+               $button.unbind('click', elgg.ui.widgets.add); // make sure we don't bind twice\r
+               $button.click(elgg.ui.widgets.add);\r
+       }\r
+\r
+       $widget.remove();\r
+\r
+       // widget_delete_button_<guid>\r
+       var id = $(this).attr('id');\r
+       id = id.substr(id.indexOf('widget_delete_button_') + "widget_delete_button_".length);\r
+\r
        elgg.action('widgets/delete', {\r
                data: {\r
-                       // widget_delete_button_<guid>\r
-                       guid: $(this).attr('id').substring(21)\r
+                       guid: id\r
                }\r
        });\r
        event.preventDefault();\r
@@ -110,6 +161,7 @@ elgg.ui.widgets.editToggle = function(event) {
 elgg.ui.widgets.saveSettings = function(event) {\r
        $(this).parent().slideToggle('medium');\r
        var $widgetContent = $(this).parent().parent().children('.widget_content');\r
+       // @todo - change to ajax loader\r
        $widgetContent.html('loading');\r
        elgg.action('widgets/save', {\r
                data: $(this).serialize(),\r

diff --git a/mod/friends/start.php b/mod/friends/start.php
index 0da095b969211f73031f29328f6d86ab52ab435c..fe6a40c756511f7c4723bf12f7bc7b093c6d9a34 100644 (file)
--- 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 09511487c1906f70f8d7de78e8dd1f4f82fc7a29..a010d1e9e510ff12ca5b157ddc8756dc05e6baeb 100644 (file)
--- 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 6963989f96721ccb7254dc41d4fd14fe31139984..a8651e6667580c28954ada9f8f5cc8bf8b8a25f5 100644 (file)
--- 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