MDL-15498: Completion: fixed bugs with long titles in the fancy text-…

…rotation SVG code

course/report/progress/textrotate.js

@@ -3,22 +3,31 @@ var SVGNS='http://www.w3.org/2000/svg',XLINKNS='http://www.w3.org/1999/xlink';
 function textrotate_make_svg(el)
 {
   var string=el.firstChild.nodeValue;
+
+  // Add absolute-positioned string (to measure length)
+  var abs=document.createElement('div');
+  abs.appendChild(document.createTextNode(string));
+  abs.style.position='absolute';
+  el.parentNode.insertBefore(abs,el);
+  var textWidth=abs.offsetWidth,textHeight=abs.offsetHeight;
+  el.parentNode.removeChild(abs);
 
   // Create SVG
   var svg=document.createElementNS(SVGNS,'svg');
   svg.setAttribute('version','1.1');
-  var width=(el.offsetHeight*9)/8;
+  var width=(textHeight*9)/8;
   svg.setAttribute('width',width);
-  svg.setAttribute('height',el.offsetWidth+20);
-
+  svg.setAttribute('height',textWidth+20);
+
+  // Add text
   var text=document.createElementNS(SVGNS,'text');
   svg.appendChild(text);
-  text.setAttribute('x',el.offsetWidth);
-  text.setAttribute('y',-el.offsetHeight/4);
+  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') {
@@ -27,7 +36,7 @@ function textrotate_make_svg(el)
     var iconx=el.offsetHeight/4;
     if(iconx>width-16) iconx=width-16;
     image.setAttribute('x',iconx);
-    image.setAttribute('y',el.offsetWidth+4);
+    image.setAttribute('y',textWidth+4);
     image.setAttribute('width',16);
     image.setAttribute('height',16);
     image.setAttributeNS(XLINKNS,'href',icon.src);
@@ -50,15 +59,15 @@ function textrotate_init() {
 
   elements=YAHOO.util.Dom.getElementsByClassName('completion-expected', 'div');
   for(var i=0;i<elements.length;i++)
-  {
+  {    
     var el=elements[i];
     el.style.display='inline';
-    //el.style.fontSize='0.6em';
     var parent=el.parentNode;
     parent.removeChild(el);
     parent.insertBefore(el,parent.firstChild);
     textrotate_make_svg(el.firstChild);
   }
+
 }
 
 YAHOO.util.Event.onDOMReady(textrotate_init);