report/progress/textrotate.js

   1 var SVGNS='http://www.w3.org/2000/svg',XLINKNS='http://www.w3.org/1999/xlink';
   2
   3 function textrotate_make_svg(el)
   4 {
   5   var string=el.firstChild.nodeValue;
   6
   7   // Add absolute-positioned string (to measure length)
   8   var abs=document.createElement('div');
   9   abs.appendChild(document.createTextNode(string));
  10   abs.style.position='absolute';
  11   document.body.appendChild(abs);
  12   var textWidth=abs.offsetWidth * 1.2,textHeight=abs.offsetHeight;
  13   document.body.removeChild(abs);
  14
  15   // Create SVG
  16   var svg=document.createElementNS(SVGNS,'svg');
  17   svg.setAttribute('version','1.1');
  18   var width=(textHeight*9)/8;
  19   svg.setAttribute('width',width);
  20   svg.setAttribute('height',textWidth+20);
  21
  22   // Add text
  23   var text=document.createElementNS(SVGNS,'text');
  24   svg.appendChild(text);
  25   text.setAttribute('x',textWidth);
  26   text.setAttribute('y',-textHeight/4);
  27   text.setAttribute('text-anchor','end');
  28   text.setAttribute('transform','rotate(90)');
  29   text.appendChild(document.createTextNode(string));
  30
  31   // Is there an icon near the text?
  32   var icon=el.parentNode.firstChild;
  33   if(icon.nodeName.toLowerCase()=='img') {
  34     el.parentNode.removeChild(icon);
  35     var image=document.createElementNS(SVGNS,'image');
  36     var iconx=el.offsetHeight/4;
  37     if(iconx>width-16) iconx=width-16;
  38     image.setAttribute('x',iconx);
  39     image.setAttribute('y',textWidth+4);
  40     image.setAttribute('width',16);
  41     image.setAttribute('height',16);
  42     image.setAttributeNS(XLINKNS,'href',icon.src);
  43     svg.appendChild(image);
  44   }
  45
  46   // Replace original content with this new SVG
  47   el.parentNode.insertBefore(svg,el);
  48   el.parentNode.removeChild(el);
  49 }
  50
  51 function browser_supports_svg() {
  52     return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
  53 }
  54
  55 function textrotate_init() {
  56     if (!browser_supports_svg()) {
  57         // Feature detect, else bail.
  58         return;
  59     }
  60
  61 YUI().use('yui2-dom', function(Y) {
  62   var elements= Y.YUI2.util.Dom.getElementsByClassName('completion-activityname', 'span');
  63   for(var i=0;i<elements.length;i++)
  64   {
  65     var el=elements[i];
  66     el.parentNode.parentNode.parentNode.style.verticalAlign='bottom';
  67     textrotate_make_svg(el);
  68   }
  69
  70   elements= Y.YUI2.util.Dom.getElementsByClassName('completion-expected', 'div');
  71   for(var i=0;i<elements.length;i++)
  72   {
  73     var el=elements[i];
  74     el.style.display='inline';
  75     var parent=el.parentNode;
  76     parent.removeChild(el);
  77     parent.insertBefore(el,parent.firstChild);
  78     textrotate_make_svg(el.firstChild);
  79   }
  80
  81   elements= Y.YUI2.util.Dom.getElementsByClassName('rotateheaders', 'table');
  82   for(var i=0;i<elements.length;i++)
  83   {
  84     var table=elements[i];
  85     var headercells = Y.YUI2.util.Dom.getElementsByClassName('header', 'th', table);
  86     for(var j=0;j<headercells.length;j++)
  87     {
  88       var el=headercells[j];
  89       textrotate_make_svg(el.firstChild);
  90     }
  91   }
  92 });
  93 }
  94