From 388afecdf479f758298ee67a533b7f76b46c25cf Mon Sep 17 00:00:00 2001 From: sam_marshall Date: Tue, 29 Jul 2008 12:27:04 +0000 Subject: [PATCH] MDL-15498: Completion: fixed bugs with long titles in the fancy text-rotation SVG code --- course/report/progress/textrotate.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/course/report/progress/textrotate.js b/course/report/progress/textrotate.js index de79152e9d..0a93a4833c 100644 --- a/course/report/progress/textrotate.js +++ b/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