MDL-18963 Applying Matt's patch to fix the YUI tooltips in the grader…

… report. Merged from MOODLE_19_STABLE
moodle · Apr 25, 2009 · 5f44fd3 · 5f44fd3
1 parent 99c5055
commit 5f44fd3
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 9 deletions.
diff --git a/grade/report/grader/index.php b/grade/report/grader/index.php
@@ -139,7 +139,8 @@
 
 /// Print header
 $reportname = get_string('modulename', 'gradereport_grader');
-print_grade_page_head($COURSE->id, 'report', 'grader', $reportname, false, null, $buttons, array($CFG->wwwroot . '/lib/yui/container/assets/skins/sam/container.css'));
+// Matt - removed stylesheet
+print_grade_page_head($COURSE->id, 'report', 'grader', $reportname, false, null, $buttons);
 
 echo $report->group_selector;
 echo '<div class="clearer"></div>';
@@ -191,6 +192,7 @@
     print_paging_bar($numusers, $report->page, $studentsperpage, $report->pbarurl);
 }
 
+echo '<div id="hiddentooltiproot">tooltip panel</div>';
 // Print AJAX code
 if ($report->get_pref('enableajax')) {
     require_once 'ajax.php';
@@ -202,16 +204,124 @@
 
 YAHOO.namespace("graderreport");
 
-YAHOO.graderreport.init = function() {
-    // Get all <td> with class grade
-    var cells = YAHOO.util.Dom.getElementsByClassName('grade', 'td');
-    YAHOO.graderreport.tooltips = new Array(cells.length);
+function init() {
+    // attach event listener to the table for mouseover and mouseout
+    var table = document.getElementById('user-grades');
+    YAHOO.util.Event.on(table, 'mouseover', YAHOO.graderreport.mouseoverHandler);
+    YAHOO.util.Event.on(table, 'mouseout', YAHOO.graderreport.mouseoutHandler);
 
-    for (var i = 0; i < cells.length; i++) {
-        YAHOO.graderreport.tooltips[i] = new YAHOO.widget.Tooltip("tt"+i, { context: cells[i], autodismissdelay: 10000000 });
+    // Make single panel that can be dynamically re-rendered wit the right data.
+    YAHOO.graderreport.panelEl = new YAHOO.widget.Panel("tooltipPanel", {
+
+        draggable: false,
+        visible: false,
+        close: false,
+        preventcontextoverlap: true
+
+    });
+
+    YAHOO.graderreport.panelEl.render(table);
+
+    document.body.className += ' yui-skin-sam';
+
+}
+
+YAHOO.graderreport.mouseoverHandler = function (e) {
+
+    var tempNode = '';
+    var searchString = '';
+    var tooltipNode = '';
+
+    // get the element that we just moved the mouse over
+    var elTarget = YAHOO.util.Event.getTarget(e);
+
+
+    // if it was part of the yui panel, we don't want to redraw yet
+    searchString = /fullname|itemname|feedback/;
+    if (elTarget.className.search(searchString) > -1) {
+        return false;
+    }
+
+    // move up until we are in the actual cell, not any other child div or span
+    while (elTarget.id != 'user-grades') {
+        if(elTarget.nodeName.toUpperCase() == "TD") {
+            break;
+        } else {
+            elTarget = elTarget.parentNode;
+        }
     }
-};
-YAHOO.util.Event.onDOMReady(YAHOO.graderreport.init);
+
+    // only make a tooltip for cells with grades
+    if (elTarget.className.search('grade cell') > -1) {
+
+        // each time we go over a new cell, we need to put it's tooltip into a div to stop it from
+        // popping up on top of the panel. Still looking for a way to set the header differently
+        if (elTarget.childNodes.length == 1) {
+
+            tempNode = document.createElement("div");
+            tempNode.className = "tooltipDiv";
+            tempNode.innerHTML = elTarget.title;
+            elTarget.appendChild(tempNode);
+            elTarget.title = null;
+        }
+
+        tooltipNode = elTarget.childNodes[1];
+
+        YAHOO.graderreport.panelEl.setBody(tooltipNode.innerHTML);
+        YAHOO.graderreport.panelEl.render(elTarget);
+        YAHOO.graderreport.panelEl.show()
+    }
+}
+
+// only hide the overlay if the mouse has not moved over it
+YAHOO.graderreport.mouseoutHandler = function (e) {
+
+    var classVar = '';
+    var newTargetClass = '';
+    var elTarget = YAHOO.util.Event.getTarget(e);
+    var newTarget = YAHOO.util.Event.getRelatedTarget(e);
+
+    // deals with an error if the mouseout event is over the lower scrollbar
+    try {
+        classVar = newTarget.className;
+    } catch (err) {
+        YAHOO.graderreport.panelEl.hide()
+        return false;
+    }
+
+    // if we are over any part of the panel, do not hide
+    // do this by walking up the DOM till we reach table level, looking for panel tag
+    while ((typeof(newTarget.id)) == 'undefined' || (newTarget.id != 'user-grades')) {
+
+        try {
+            newTargetClass = newTarget.className;
+        } catch (err) {
+            // we've gone over the scrollbar
+            YAHOO.graderreport.panelEl.hide()
+            return false;
+        }
+
+        if (newTargetClass.search('yui-panel') > -1) {
+            // we're in the panel so don't hide it
+            return false;
+        }
+
+        if (newTarget.nodeName.toUpperCase() == "HTML") {
+            // we missed the user-grades table altogether by moving down off screen to read a long one
+            YAHOO.graderreport.panelEl.hide()
+            break;
+        }
+
+        newTarget = newTarget.parentNode;
+    }
+
+    // no panel so far and we went up to the
+    YAHOO.graderreport.panelEl.hide()
+
+}
+
+
+YAHOO.util.Event.onDOMReady(init);
 
 </script>
 <?php

diff --git a/grade/report/grader/styles.php b/grade/report/grader/styles.php
@@ -526,6 +526,7 @@
 vertical-align:middle;
 }
 
+/*
 .grade-report-grader .yui-overlay {
     background-color: #FFEE69;
     border-color: #D4C237 #A6982B #A6982B;
@@ -535,6 +536,7 @@
     padding: 2px 5px;
     font-size: 0.7em;
 }
+*/
 
 .grade-report-grader .yui-overlay .fullname {
     color: #5F3E00;
@@ -547,3 +549,24 @@
 .grade-report-grader .yui-overlay .feedback {
     color: #5F595E;
 }
+/* .grade-report-grader table#user-grades td */
+/* .grader-report-grader table#user-grades td .yui-panel div.hd { */
+#tooltipPanel {
+  text-align: left;
+}
+
+
+<?php include($CFG->dirroot.'/lib/yui/container/assets/skins/sam/container.css') ?>
+.yui-skin-sam .yui-panel .hd{padding:0 10px;font-size:93%;line-height:2;*line-height:1.9;font-weight:bold;color:#000;background:url(<?php echo $CFG->wwwroot."/lib/yui" ?>/assets/skins/sam/sprite.png) repeat-x 0 -200px;}
+.yui-skin-sam .container-close{border-color: #45c;position:absolute;top:5px;right:6px;width:25px;height:15px;background:url(<?php echo $CFG->wwwroot."/lib/yui" ?>/assets/skins/sam/sprite.png) no-repeat 0 -300px;cursor:pointer;}
+.yui-skin-sam .yui-simple-dialog .bd .yui-icon{background:url(<?php echo $CFG->wwwroot."/lib/yui" ?>/assets/skins/sam/sprite.png) no-repeat 0 0;width:16px;height:16px;margin-right:10px;float:left;}
+
+.grade-report-grader .yui-overlay a.container-close {
+  margin-top: -3px;
+}
+
+#hiddentooltiproot, .tooltipDiv {
+  display: none;
+}
+
+