#623: Add drag and drop priority sorting to legacy Administration Interface

design/admin/javascript/admin2pp_dragndrop_children.js

@@ -0,0 +1,92 @@
+/**
+ * $Id: admin2pp_dragndrop_children.js 79 2010-03-14 11:19:58Z dpobel $
+ * $HeadURL: http://svn.projects.ez.no/admin2pp/trunk/extension/admin2pp/design/admin2/javascript/admin2pp_dragndrop_children.js $
+ *
+ */
+
+function admin2ppDragNDropChildren() {
+    this.sortOrder = 1;
+}
+
+admin2ppDragNDropChildren.PRIORITY_OFFSET = 2;
+admin2ppDragNDropChildren.TABLE_ID = 'content-sub-items-list > table';
+
+admin2ppDragNDropChildren.prototype = {
+    init:function() {
+        var instance = this;
+        this.sortOrder = subItemsTable.get('sortedBy').dir === 'yui-dt-asc' ? 1 : -1;
+        jQuery('#' + admin2ppDragNDropChildren.TABLE_ID + ' .yui-dt-data').sortable( {
+                placeholder: {
+                    /**
+                     * Function to create the placeholder
+                     */
+                    element: function(currentItem) {
+                        var tr = $('<tr class="yui-dt-even"><td colspan="' + currentItem.find('> :visible').length + '"><div class="yui-dt-liner">&nbsp;</div></td></tr>');
+
+                        return tr;
+                    },
+                    update: function(container, p) {
+                        return;
+                    }
+                },
+                axis:'y',
+                opacity:0.8,
+                items:'> tr',
+                cursor:'move',
+                stop:function( evt, ui ) {
+                    instance.fixBackgrounds(); 
+                    instance.setPriorities();
+                }
+            } )
+            .css( 'cursor', 'move' );
+        jQuery('#' + admin2ppDragNDropChildren.TABLE_ID + ' .yui-dt-data').disableSelection();
+     },
+
+    setPriorities:function() {
+        var inputs = jQuery( '#' + admin2ppDragNDropChildren.TABLE_ID + ' .yui-dt0-col-priority > .yui-dt-liner' );
+        // Fetch the starting point
+        var start = +inputs.first().text();
+        var increments = admin2ppDragNDropChildren.PRIORITY_OFFSET * this.sortOrder;
+        var instance = this;
+        inputs.each(function() {
+            jQuery( this ).text( start ); 
+            var recordId = jQuery( this ).closest('tr').attr('id');
+            var record = subItemsTable.getRecordSet().getRecord(recordId);
+            instance.updatePriority(record, start);
+            start = start + increments;
+        });
+    },
+
+    updatePriority: function(record, priority) {
+        var sortedBy = subItemsTable.get('sortedBy'),
+            paginator = subItemsTable.get('paginator')
+        ;
+        record.setData('priority', priority);
+
+        jQuery.ez('ezjscnode::updatepriority', {
+            ContentNodeID: record.getData('parent_node_id'),
+            ContentObjectID: record.getData('contentobject_id'),
+            PriorityID: [record.getData('node_id')],
+            Priority: [priority]
+        }, onSuccess);
+
+        var onSuccess = function(data) {
+            record.setData('priority', priority);
+        }
+    },
+
+    fixBackgrounds:function() {
+        var cssClass = 'yui-dt-odd';
+        jQuery('#' + admin2ppDragNDropChildren.TABLE_ID + ' tbody tr').each(function() {
+            var $this = jQuery( this );
+            $this.removeClass('yui-dt-odd yui-dt-even');
+            $this.addClass( cssClass );
+            if ( cssClass == 'yui-dt-odd' ) {
+                cssClass = 'yui-dt-even';
+            } else {
+                cssClass = 'yui-dt-odd';
+            }
+        });
+    }
+
+};

design/admin/javascript/ezajaxsubitems_datatable.js

@@ -258,6 +258,12 @@ var sortableSubitems = function () {
 
         // Table options
 
+        // Triggering jQuery event, when the table is rendered
+        subItemsTable.subscribe("renderEvent", function (oArgs) {
+            window.subItemsTable = subItemsTable;
+            jQuery('#content-sub-items-list').trigger('datatable:rendered');
+        });
+
         // Shows dialog, creating one when necessary
         var colLayoutHasChanged = true;
         var showTblOptsDialog = function(e) {

design/admin/stylesheets/core.css

@@ -759,3 +759,8 @@ div.attribute-multioption li
     padding: 0;
     list-style-type: none;
 }
+
+/* This is necessary to prevent the dragged row elements collapse while is being dragged */
+.ui-sortable-helper {
+    display: table!important;
+}

design/admin/templates/children.tpl

@@ -1,3 +1,6 @@
+{* Load yui code for subitems display even if current node has no children (since cache blocks does not vary by this) *}
+{ezscript_load( array( 'ezjsc::yui2', 'ezajaxsubitems_datatable.js') )}
+
 <div class="content-view-children">
 
 {* Generic children list for admin interface. *}
@@ -13,8 +16,9 @@
      $children_count = fetch( content, list_count, hash( 'parent_node_id', $node.node_id,
                                                          'objectname_filter', $view_parameters.namefilter ) )
      $children    = array()
-     $priority    = and( eq( $node.sort_array[0][0], 'priority' ), $node.can_edit, $children_count ) }
-
+     $priority    = and( eq( $node.sort_array[0][0], 'priority' ), $node.can_edit, $children_count )
+     $priority_dd = and( $priority, $admin_children_viewmode|ne( 'thumbnail' ), $view_parameters.offset|eq( 0 ) )
+}
 
 <!-- Children START -->
 
@@ -93,10 +97,21 @@
 
 </div>
 
-{* Load yui code for subitems display even if current node has no children (since cache blocks does not vary by this) *}
-{ezscript_require( array('ezjsc::yui2', 'ezajaxsubitems_datatable.js') )}
-
 <!-- Children END -->
 
+{if $priority_dd}
+    <script type="text/javascript">
+    {literal}
+    jQuery(document).ready(function($)
+    {
+        $('#content-sub-items-list').on('datatable:rendered', function() {
+            var dnd = new admin2ppDragNDropChildren();
+            dnd.init();
+        });
+    }
+    {/literal});
+    </script>
+{/if}
+
 {undef $item_type $number_of_items $can_remove $can_move $can_edit $can_create $can_copy $current_path $admin_children_viewmode $children_count $children}
 </div>

settings/design.ini

@@ -57,5 +57,5 @@ BackendJavaScriptList[]=fixed_toolbar.js
 BackendJavaScriptList[]=ezmodalwindow.js
 BackendJavaScriptList[]=ezajaxuploader.js
 BackendJavaScriptList[]=ezcollapsiblemenu.js
-
-
+BackendJavaScriptList[]=ezjsc::jqueryUI
+BackendJavaScriptList[]=admin2pp_dragndrop_children.js