moodle/report/completion/textrotate.js
Aaron Barnes d2cd4acab1 MDL-42476 report_progress: don't browser sniff for SVG support
Use feature detection, its more robust and better practice.
2013-10-23 00:12:18 +13:00

73 lines
2.1 KiB
JavaScript

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');
svg.setAttribute('width',20);
svg.setAttribute('height',textWidth);
// 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);
}
// Replace original content with this new SVG
el.parentNode.insertBefore(svg,el);
el.parentNode.removeChild(el);
}
function browser_supports_svg() {
return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
}
function textrotate_init() {
if (!browser_supports_svg()) {
// Feature detect, else bail.
return;
}
YUI().use('yui2-dom', function(Y) {
var elements= Y.YUI2.util.Dom.getElementsByClassName('completion-criterianame', 'span');
for(var i=0;i<elements.length;i++)
{
var el=elements[i];
el.parentNode.style.verticalAlign='bottom';
el.parentNode.style.width='20px';
textrotate_make_svg(el);
}
});
}