Changeset 16518

Timestamp:

06/01/08 11:09:28 (4 months ago)

Author:

adrenalin

Message:

Chooser widget results are now sortable (widget_config key 'sortable'
=> true). This doesn't yet save anything and saving the results needs to be
implemented in storage.

Files:

• trunk/midcom/midcom.helper.datamanager2/static/chooser/jquery.chooser_widget.css (modified) (2 diffs)
• trunk/midcom/midcom.helper.datamanager2/static/chooser/jquery.chooser_widget.js (modified) (20 diffs)
• trunk/midcom/midcom.helper.datamanager2/widget/chooser.php (modified) (4 diffs)

trunk/midcom/midcom.helper.datamanager2/static/chooser/jquery.chooser_widget.css

@@ -137 +137 @@
-}
-
+ul.chooser_widget_results.ui-sortable .chooser_widget_item_part_status
+{
+    margin-right: 23px;
+    margin-left: -30px;
+}
+
-.chooser_widget_result_item_active
-{
@@ -178 +184 @@
-    background : url('../../stock-icons/16x16/approved_fade_50.png') center center no-repeat;
-}
+
+ul.chooser_widget_results.ui-sortable .chooser_widget_results_item_dragger
+{
+    width: 20px;
+    height: 22px;
+    margin-left: -20px;
+    float: left;
+    cursor: move;
+}
+
+ul.chooser_widget_headers.ui-sortable
+{
+    background : url('../../stock-icons/16x16/topic-score.png') left center no-repeat;
+}
+
+ul.chooser_widget_headers.ui-sortable li,
+ul.chooser_widget_results.ui-sortable li
+{
+    padding-left: 20px;
+}

trunk/midcom/midcom.helper.datamanager2/static/chooser/jquery.chooser_widget.js

@@ -224 +224 @@
-    function request(term, success, failure)
-    {
-        console.log(success);
-        last_term = term;
-        
@@ -265 +264 @@
-    function stopLoading(type, expobj)
-    {
-        console.log(expobj);
-        input_element.removeClass(CLASSES.IDLE);
-        input_element.removeClass(CLASSES.FAILED);
@@ -434 +432 @@
-            if (last_term != 'undefined')
-            {
-=
+ = 
-            }
-            
@@ -468 +466 @@
-    creation_handler: null,
-    creation_default_key: null,
+    sortable: false,
-    format_items: null
-};
@@ -490 +489 @@
-    var headers = jQuery('<ul class="chooser_widget_headers"></ul>').appendTo(element);
-    var list = jQuery('<ul class="chooser_widget_results"></ul>').appendTo(element);
-
+
-    var has_content = false,
-        list_items = [],
@@ -544 +543 @@
-    function dataToDom()
-    {
-=
+ = 
-        {
-            if (!data[i])
@@ -591 +590 @@
-        //console.log('data.guid: ' + data.guid);
-        
-=
+ = 
-        
-        var item_id = data[options.id_field];
@@ -623 +622 @@
-        
-        var li_elem = jQuery('<li>')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-                {
-
-
+
-                    {
-
+
+
+
+
+
+
+
+
+
-                    }
-                    else
-                    {
-
+
+
+
+
+
+
+
+
-                    }
+    
+                    return false;
-                }
-                else
-                {
-
-
-
-
-
-
-
-
+
-                }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-        
-        if (data['pre_selected'])
@@ -710 +709 @@
-            .prependTo(li_elem);
-        
+        jQuery('<input type="hidden" />')
+            .attr('name', 'sortable[' + options.widget_id + '][]')
+            .attr('value', item_id);
+        
-        li_elem.appendTo(list);
-        
-        list_items.push(item_id);
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-    function moveSelect(step)
-    {
@@ -728 +741 @@
-    };
-    
+    /**
+     * 
+     */
-    function wrapSelection()
-    {
@@ -740 +756 @@
-    }
-    
+    /**
+     *
+     *
+     * @param String id     ID of the chooser widget
+     */
-    function remove(id)
-    {
-        jQuery('#' + options.widget_id + '_result_item_' + id + '_input', list).attr({ value: 0 });
-
-
-
-
-
+
+
+
+
+
+
+
+
-        {
-            return n != id;
@@ -753 +777 @@
-    }
-    
+    /**
+     * 
+     * 
+     * @param String id     ID of the chooser widget
+     */
-    function restore(id)
-    {
-        jQuery('#' + options.widget_id + '_result_item_' + id + '_input', list).attr({ value: id });
-
-
-
-
+
+
+
+
+
+
+
-        selected_items.push(id);
-    }
-
+    /**
+     * Activate an item
+     * 
+     * @param String id     ID of the chooser widget
+     */
-    function activate(id)
-    {
@@ -772 +809 @@
-        
-        jQuery('#' + options.widget_id + '_result_item_' + id + '_input', list).attr({ value: id });
-
-
-
-
-
+
+
+
+
+
+
+
-        selected_items.push(id);
-    }
-    
+    /**
+     * Inactivate an item
+     *
+     * @param String id     ID of the chooser widget
+     */
-    function inactivate(id)
-    {
-        jQuery('#' + options.widget_id + '_result_item_' + id + '_input', list).attr({ value: 0 });
-
-
-
-
-
+
+
+
+
+
+
+
+
-        //selected_items.push(id);
-        selected_items = jQuery.grep( selected_items, function(n,i)
@@ -795 +842 @@
-    }
-    
+    /**
+     * Delete unselected items from the list
+     */
-    function delete_unseleted_from_list()
-    {
@@ -816 +866 @@
-        jQuery('#' + options.widget_id + '_results li.' + CLASSES.HOVER).removeClass(CLASSES.HOVER);
-        active = -1;
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    function unset(array, valueToUnset, valueOrIndex, isHash)
-    {
@@ -829 +893 @@
-                    continue;
-                };
- 
+
-                {
-=
+ = 
-                }
-                else
-                {
-=
+ = 
-                }
-            }
@@ -846 +910 @@
-                if (! isHash)
-                {
-=
+ = 
-                }
-                else
-                {
-=
+ = 
-                }
-            }
@@ -948 +1012 @@
-{
-    var formatted = '';
-
+
-    var item_parts = jQuery('<div>')
-
-
+
+
+
+
+
+
+
-
-    var item_content = jQuery('<div>')
@@ -986 +1055 @@
-
-    item_content = jQuery('<div>')
-
-
-
+    
+    
+    
-    
-    return item_parts;
@@ -1030 +1099 @@
-    return formatted;
-}
+
+
+jQuery.fn.create_sortable = function()
+{
+    // Create the sortable list, if there are more than one item in the list
+    if (jQuery(this).find('li').size() <= 1)
+    {
+        if (jQuery(this).attr('sortable'))
+        {
+            jQuery(this).sortable('destroy');
+            jQuery(this).parent().find('ul.chooser_widget_headers').removeClass('ui-sortable');
+        }
+        return;
+    }
+    
+    jQuery(this).sortable('destroy');
+    jQuery(this).sortable(
+    {
+        handle: 'div.chooser_widget_results_item_dragger',
+        containment: jQuery(this)
+    });
+    
+    if (!jQuery(this).attr('sortable'))
+    {
+        jQuery(this).attr('sortable');
+    }
+    
+    // Add the sortable class also to the result headers to maintain consistency
+    jQuery(this).parent().find('ul.chooser_widget_headers').addClass('ui-sortable');
+}

trunk/midcom/midcom.helper.datamanager2/widget/chooser.php

@@ -302 +302 @@
-
-    var $js_format_items = array();
+    
+    /**
+     * Should the sorting be enabled
+     * 
+     * @var boolean    True if the sorting should be enabled
+     */
+    var $sortable = false;
-
-    /**
@@ -380 +387 @@
-            )
-        );
-
+
+
+
+
+
+
+
+
+
+
-        $_MIDCOM->add_jsfile(MIDCOM_STATIC_URL . '/midcom.helper.datamanager2/chooser/jquery.chooser_widget.js');
-
@@ -939 +955 @@
-        $this->_js_widget_options['id_field'] = "'$this->id_field'";
-        $this->_js_widget_options['format_items'] = 'null';
+        
+        if ($this->sortable)
+        {
+            $this->_js_widget_options['sortable'] = 'true';
+        }
-
-        if ($this->creation_mode_enabled)
@@ -1572 +1593 @@
-        // debug_pop();
-    }
-
-}
-
-?>