From 3d3ff7dc165d7ab683bf1f1462f23af6c2c67ab4 Mon Sep 17 00:00:00 2001
From: Chris Stones <cstones@moodlerooms.com>
Date: Tue, 13 May 2014 14:19:32 -0700
Subject: [PATCH] CC-3226: report progress speedup core patch

---
 report/progress/index.php     |  20 +++++--
 report/progress/styles.css    |   4 ++
 report/progress/textrotate.js | 133 ++++++++++++++++++++++++++++++++++++++----
 3 files changed, 142 insertions(+), 15 deletions(-)

diff --git a/report/progress/index.php b/report/progress/index.php
index 3df14ed..75e289d 100644
--- a/report/progress/index.php
+++ b/report/progress/index.php
@@ -147,6 +147,9 @@ function csv_quote($value) {
     }
 } else {
 
+    // Use SVG to draw sideways text if supported
+    $svgcleverness = can_use_rotated_text();
+
     // Navigation and header
     $strreports = get_string("reports");
     $strcompletion = get_string('activitycompletion', 'completion');
@@ -154,9 +157,15 @@ function csv_quote($value) {
     $PAGE->set_title($strcompletion);
     $PAGE->set_heading($course->fullname);
     echo $OUTPUT->header();
-    $PAGE->requires->js('/report/progress/textrotate.js');
-    $PAGE->requires->js_function_call('textrotate_init', null, true);
 
+    if ($svgcleverness) { 
+        $module = array(
+                'name'      => 'report_progress',
+                'fullpath'  => '/report/progress/textrotate.js',
+                'requires'  => array('yui2-event','yui2-utilities'),
+        );
+        $PAGE->requires->js_init_call('textrotate_init',null,true,$module);
+    }
     // Handle groups (if enabled)
     groups_print_course_menu($course,$CFG->wwwroot.'/report/progress/?course='.$course->id);
 }
@@ -275,10 +284,11 @@ function csv_quote($value) {
     }
 
     print '<div id="completion-progress-wrapper" class="no-overflow">';
-    print '<table id="completion-progress" class="generaltable flexible boxaligncenter" style="text-align:left"><thead><tr style="vertical-align:top">';
+
+    print '<table id="completion-progress" class="generaltable flexible boxaligncenter" style="text-align:left"><thead><tr class="report_progress_toprow" style="vertical-align:top">';
 
     // User heading / sort option
-    print '<th scope="col" class="completion-sortchoice">';
+    print '<th class="ignoreverticals" scope="col" class="completion-sortchoice">';
 
     $sistring = "&amp;silast={$silast}&amp;sifirst={$sifirst}";
 
@@ -295,7 +305,7 @@ function csv_quote($value) {
 
     // Print user identity columns
     foreach ($extrafields as $field) {
-        echo '<th scope="col" class="completion-identifyfield">' .
+        echo '<th class="ignoreverticals" scope="col" class="completion-identifyfield">' .
                 get_user_field_name($field) . '</th>';
     }
 } else {
diff --git a/report/progress/styles.css b/report/progress/styles.css
index 2c0350c..0d4b640 100644
--- a/report/progress/styles.css
+++ b/report/progress/styles.css
@@ -5,3 +5,7 @@
 #page-report-progress-index .completion_prev {display:inline;margin-right:2em;}
 #page-report-progress-index .completion_pagingbar p {display:inline;margin:0;}
 #page-report-progress-index .completion_next {display:inline;margin-left:2em;}
+
+#completion-progress th.ignoreverticals {
+     vertical-align:bottom; 
+}
diff --git a/report/progress/textrotate.js b/report/progress/textrotate.js
index 56ee2d7..6e2bb76 100644
--- a/report/progress/textrotate.js
+++ b/report/progress/textrotate.js
@@ -48,26 +48,139 @@ function textrotate_make_svg(el)
   el.parentNode.removeChild(el);
 }
 
+
+// Optimized for the DocFrag Code 
+// H height of the string to rotate
+// W width of the string to rotate
+function opt_textrotate_make_svg(el,H,W)
+{
+  var string = el.firstChild.nodeValue; 
+  
+  var textWidth = W;
+  var textHeight = H;
+
+  // Create SVG
+  var svg=document.createElementNS(SVGNS,'svg');
+  svg.setAttribute('version','1.1');
+  var width=(textHeight*9)/8;
+  svg.setAttribute('width',width);
+  svg.setAttribute('height',textWidth+20);
+
+  // Add text
+  var text=document.createElementNS(SVGNS,'text');
+  svg.appendChild(text);
+  text.setAttribute('x',textWidth);
+  text.setAttribute('y',-textHeight/4);
+  text.setAttribute('text-anchor','end');
+  text.setAttribute('transform','rotate(90)');
+  text.appendChild(document.createTextNode(string));
+
+  // Is there an icon near the text?
+  var icon=el.parentNode.firstChild;
+  if(icon.nodeName.toLowerCase()=='img') {
+    el.parentNode.removeChild(icon);
+    var image=document.createElementNS(SVGNS,'image');
+    var iconx=el.offsetHeight/4;
+    if(iconx>width-16) iconx=width-16;
+    image.setAttribute('x',iconx);
+    image.setAttribute('y',textWidth+4);
+    image.setAttribute('width',16);
+    image.setAttribute('height',16);
+    image.setAttributeNS(XLINKNS,'href',icon.src);
+    svg.appendChild(image);
+  }
+
+    
+  el.innerHTML = '';  
+  el.appendChild(svg);
+  return el;
+}
+
+
 function browser_supports_svg() {
     return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
 }
 
-function textrotate_init() {
+function textrotate_init(Y) {
     if (!browser_supports_svg()) {
         // Feature detect, else bail.
         return;
     }
 
-YUI().use('yui2-dom', function(Y) {
-  var elements= Y.YUI2.util.Dom.getElementsByClassName('completion-activityname', 'span');
-  for(var i=0;i<elements.length;i++)
-  {
-    var el=elements[i];
-    el.parentNode.parentNode.parentNode.style.verticalAlign='bottom';
-    textrotate_make_svg(el);
-  }
+    // 1 Obtaining the longest header element is harder than you think.
+    var longeststr = 0;
+    var longestel;
+    var lstrs = [];
+    var elements = Y.YUI2.util.Dom.getElementsByClassName('completion-activityname', 'span');
+    for(var i=0;i<elements.length;i++) {
+        var el = elements[i];
+        try {
+            var s = el.firstChild.nodeValue;
+            var slen = s.length;
+            if ( longeststr < slen ) {
+                longeststr = slen;
+                longestel = el;
+            }
+        } catch (e) {} // forgive 
+    }
+
+    // Due to the fact we may not have a 'fixed width font' we have to literally
+    // check how long each of the longest strings comes out to be...
+    // So we collect them now that we have the max chars
+    for(var i=0;i<elements.length;i++) {
+        var el = elements[i];
+        try {
+            var s = el.firstChild.nodeValue;
+                var slen = s.length;
+                if ( longeststr == slen ) {
+                    lstrs.push(el);
+                }
+        } catch (e) {} // forgive 
+    }
+    
+    // Now ask the browser how long each string "really" is
+    // Since there are fewer of these we minimize the number 
+    // of costly reflows
+    var maxH = 0;
+    var maxW = 0;
+    for(var i=0;i<lstrs.length;i++) {
+        var el = lstrs[i];
+        var w = el.offsetWidth; 
+        if ( maxW < w ) {
+            maxW = w;
+            longestel = el;
+        }  
+    }
+
+    // We swap maxW with maxH since we rotate these 90 degs 
+    var maxH = maxW; 
+    var maxW = longestel.offsetHeight; // this line costs one reflow
+
+
+    // 2 Fill our docFrag with the header elements
+    var toprow = Y.one('tr.report_progress_toprow');
+    var docfrag = document.createDocumentFragment();
+    toprow.get('children').each(function(e){
+        docfrag.appendChild(e.getDOMNode());
+    });
+
+    // 3 processing elements in our fragment prevents costly browser reflows
+    var all = docfrag.childNodes;
+    for(var i=0; i < all.length;i++) {
+        var el = all[i];
+
+        // Attempt to Rotate the element
+        try { 
+            var spanel = el.getElementsByTagName('span')[0];
+            var newspanel = opt_textrotate_make_svg(spanel,maxW,maxH); 
+        } catch (e) {} // Shorter, cleaner and safer to wrap this. 
+
+        all[i] = newspanel; 
+    }
+    toprow.insert(docfrag);
 
   elements= Y.YUI2.util.Dom.getElementsByClassName('completion-expected', 'div');
+  console.log(elements);
   for(var i=0;i<elements.length;i++)
   {
     var el=elements[i];
@@ -89,6 +202,6 @@ YUI().use('yui2-dom', function(Y) {
       textrotate_make_svg(el.firstChild);
     }
   }
-});
+
 }
 
-- 
1.9.3