MDL-18617 Stubs for drag and drop of categories and items

diff --git a/grade/edit/tree/functions.js b/grade/edit/tree/functions.js
index 9ef91b3616799872ec575952372b22e8d7f1d6c0..4d9ad8c5eb55f596de72d7d50371ec0656720de9 100755 (executable)
--- a/grade/edit/tree/functions.js
+++ b/grade/edit/tree/functions.js
@@ -26,3 +26,177 @@ function toggle_advanced_columns() {
         YAHOO.util.Dom.replaceClass(shownAdvEls[i], "advancedshown", "advanced");
     }
 }
+
+YAHOO.namespace('grade_edit_tree');
+
+(function() {
+    var Dom = YAHOO.util.Dom;
+    var DDM = YAHOO.util.DragDropMgr;
+    var Event = YAHOO.util.Event;
+    var gretree = YAHOO.grade_edit_tree;
+
+    gretree.DDApp = {
+
+        init: function() {
+
+            var edit_tree_table = Dom.get('grade_edit_tree_table');
+            var i;
+            var item_rows = edit_tree_table.getElementsByClassName('item', 'tr');
+            var category_rows = edit_tree_table.getElementsByClassName('category', 'tr');
+
+            new YAHOO.util.DDTarget('grade_edit_tree_table');
+            
+            for (i = 0; i < item_rows.length; i++) {
+                if (!Dom.hasClass(item_rows[i],'categoryitem')) {
+                    new gretree.DDList(item_rows[i]);
+                }
+            }
+            
+            for (i = 0; i < category_rows.length; i++) {
+                if (!Dom.hasClass(category_rows[i],'coursecategory')) {
+                    // Find the cell that spans rows for this category
+                    var rowspancell = category_rows[i].getElementsByClassName('name', 'td');
+                    var rowspan = parseInt(rowspancell[0].previousSibling.rowSpan) + 1;
+                    var rows = Array(rowspan);
+                    var lastRow = category_rows[i];
+
+                    for (var j = 0; j < rowspan; j++) {
+                        rows[j] = lastRow;
+                        lastRow = lastRow.nextSibling;
+                    }
+                    
+                    new gretree.DDList(rows);
+                }
+            }
+
+            YAHOO.util.Event.on("showButton", "click", this.showOrder);
+            YAHOO.util.Event.on("switchButton", "click", this.switchStyles);
+        },
+
+        showOrder: function() {
+            var parseTable = function(table, title) {
+                var items = table.getElementsByTagName('tr');
+                var out = title + ": ";
+
+                for (i = 0; i < items.length; i++) {
+                    out += items[i].id + ' ';
+                }
+                return out;
+            };
+
+            var table = Dom.get('grade_edit_tree_table');
+            alert(parseTable(table, "Grade edit tree table"));
+        },
+
+        switchStyles: function() {
+            Dom.get('grade_edit_tree_table').className = 'draglist_alt';
+        }
+    };
+
+    gretree.DDList = function(id, sGroup, config) {
+        
+        gretree.DDList.superclass.constructor.call(this, id, sGroup, config);
+        this.logger =  this.logger || YAHOO;
+        var el = this.getDragEl();
+        Dom.setStyle(el, 'opacity', 0.67);
+
+        this.goingUp = false;
+        this.lastY = 0;
+    };
+
+    YAHOO.extend(gretree.DDList, YAHOO.util.DDProxy, {
+
+        startDrag: function(x, y) {
+            this.logger.log(this.id + ' startDrag');
+
+            // Make the proxy look like the source element
+            var dragEl = this.getDragEl();
+            var clickEl = this.getEl();
+
+            Dom.setStyle(clickEl, 'visibility', 'hidden');
+
+            dragEl.innerHTML = clickEl.innerHTML;
+
+            Dom.setStyle(dragEl, 'color', Dom.getStyle(clickEl, 'color'));
+            Dom.setStyle(dragEl, 'backgroundColor', Dom.getStyle(clickEl, 'backgroundColor'));
+            Dom.setStyle(dragEl, 'border', '2px solid gray');
+        },
+
+        endDrag: function(e) {
+            this.logger.log(this.id + ' endDrag');
+            var srcEl = this.getEl();
+            var proxy = this.getDragEl();
+
+            // Show the proxy element and adnimate it to the src element's location
+            Dom.setStyle(proxy, 'visibility', '');
+            var a = new YAHOO.util.Motion(proxy, { points: { to: Dom.getXY(srcEl) } }, 0.2, YAHOO.util.Easing.easeOut);
+            var proxyid = proxy.id;
+            var thisid = this.id;
+
+            // Hide the proxy and show the source element when finished with the animation
+            a.onComplete.subscribe(function() {
+                Dom.setStyle(proxyid, 'visibility', 'hidden');
+                Dom.setStyle(thisid, 'visibility', '');
+            });
+
+            a.animate();
+        },
+
+        onDragDrop: function(e, id) {
+            this.logger.log(this.id + ' dragDrop');
+
+            // If there is one drop interaction, the tr was dropped either on the table, or it was dropped on the current location of the source element
+
+            if (DDM.interactionInfo.drop.length === 1) {
+                // The position of the cursor at the time of the drop (YAHOO.util.Point)
+                var pt = DDM.interactionInfo.point;
+
+                // The region occupied by the source element at the time of the drop
+                var region = DDM.interactionInfo.sourceRegion; 
+
+                // Check to see if we are over the source element's location. We will append to the bottom of the list once we are sure it was a drop in the negative space
+                if (!region.intersect(pt)) {
+                    var destEl = Dom.get(id);
+                    var destDD = DDM.getDDById(id);
+                    destEl.appendChild(this.getEl());
+                    destDD.isEmpty = false;
+                    DDM.refreshCache();
+                }
+            }
+        },
+
+        onDrag: function(e) {
+
+            // Keep track of the direction of the drag for use during onDragOver
+            var y = Event.getPageY(e);
+
+            if (y < this.lastY) {
+                this.goingUp = true;
+            } else if (y > this.lastY) {
+                this.goingUp = false;
+            }
+
+            this.lastY = y;
+        },
+
+        onDragOver: function(e, id) {
+            var srcEl = this.getEl();
+            var destEl = Dom.get(id);
+
+            // We are only concerned with tr items, we ignore the dragover notifications for the table
+            if (destEl.nodeName.toLowerCase() == 'tr') {
+                var orig_p = srcEl.parentNode;
+                var p = destEl.parentNode;
+
+                if (this.goingup) {
+                    p.insertBefore(srcEl, destEl); // insert above
+                } else {
+                    p.insertBefore(srcEl, destEl.nextSibling); // insert below
+                }
+
+                DDM.refreshCache();
+            }
+        }
+    });
+    // YAHOO.util.Event.onDOMReady(gretree.DDApp.init, gretree.DDApp, true); // Uncomment this line when dragdrop is fully implemented
+})();

diff --git a/grade/edit/tree/index.php b/grade/edit/tree/index.php
index 11a38d22fd04cf1d6592415c31f57362ae012a89..423d11a243a8b12be77c23c990cfa11a8bcd8fe2 100644 (file)
--- a/grade/edit/tree/index.php
+++ b/grade/edit/tree/index.php
@@ -28,7 +28,7 @@ require_once $CFG->dirroot.'/grade/lib.php';
 require_once $CFG->dirroot.'/grade/report/lib.php'; // for preferences
 require_once $CFG->dirroot.'/grade/edit/tree/lib.php';
 
-require_js(array('yui_yahoo', 'yui_dom', 'yui_event', 'yui_json', 'yui_connection', 'yui_dragdrop', 'yui_treeview', 'yui_element',
+require_js(array('yui_yahoo', 'yui_dom', 'yui_event', 'yui_json', 'yui_connection', 'yui_dragdrop', 'yui_treeview', 'yui_element', 'yui_container','yui_animation',
             $CFG->wwwroot.'/grade/edit/tree/functions.js'));
 
 $courseid        = required_param('id', PARAM_INT);

diff --git a/grade/edit/tree/lib.php b/grade/edit/tree/lib.php
index d800ee6d544090160a1c51d65502ca0ca788e665..dbbf4e5c90b22074cfe6ed2f67d0aca8cbf027f1 100755 (executable)
--- a/grade/edit/tree/lib.php
+++ b/grade/edit/tree/lib.php
@@ -239,7 +239,7 @@ class grade_edit_tree {
                     $width_style = ' style="width:auto;" ';
                 }
 
-                $html .= '<table cellpadding="5" class="generaltable" '.$width_style.'>
+                $html .= '<table id="grade_edit_tree_table" cellpadding="5" class="generaltable" '.$width_style.'>
                             <tr>';
 
                 foreach ($this->columns as $column) {
@@ -259,9 +259,14 @@ class grade_edit_tree {
             }
 
             $levelclass = " level$level ";
+            
+            $courseclass = '';
+            if ($level == 1) {
+                $courseclass = 'coursecategory';
+            }
 
             $html .= '
-                    <tr class="category '.$dimmed.$rowclasses.'">
+                    <tr class="'.$courseclass.' category '.$dimmed.$rowclasses.'">
                       <th scope="row" title="'.$object->stripped_name.'" class="cell rowspan '.$levelclass.'" rowspan="'.($row_count+1+$row_count_offset).'"></th>';
 
             foreach ($this->columns as $column) {
@@ -282,11 +287,14 @@ class grade_edit_tree {
             $item = grade_item::fetch(array('id' => $object->id));
             $element['type'] = 'item';
             $element['object'] = $item;
-
-            // Determine aggregation coef element
+            
+            $categoryitemclass = '';
+            if ($item->itemtype == 'category') {
+                $categoryitemclass = 'categoryitem';
+            }
 
             $dimmed = ($item->hidden) ? " dimmed_text " : "";
-            $html .= '<tr class="item'.$dimmed.$rowclasses.'">';
+            $html .= '<tr class="'.$categoryitemclass.' item'.$dimmed.$rowclasses.'">';
 
             foreach ($this->columns as $column) {
                 if (!($this->moving && $column->hide_when_moving) && !$column->is_hidden($mode)) {