/* * valuebasedstyling.js * scans the tables in your document and assigns classes to the td's based on their numeric values * you should define css-rules for the minimum and maximum positive and negative values; the script will calculate and create rules for the intermediate classes * include this file at the end of your * (if you include it earlier in the document, call the vbs.init function when the dom is ready) * * http://jaron.nl/blog/2009/value-based-styling/ */ var vbs = { //configuration vars scales: 5,//number of value-scales (on either side of 0) cssSelectorPrefix: "",//prefix to be used for selector in all dynamically created styles for intermediate scales (for example for creating high enough specificity) //other vars - you'll probabaly won't want to change these posValMin: null, posValMax: null, negValMin: null, negValMax: null,//will be reused for every table fTables: null, posValMinColor: null, posValMaxColor: null, posValMinBgColor: null, posValMaxBgColor: null, posValMinFontSize: null, posValMaxFontSize: null, posValMinFontUnit: null, posValMaxFontUnit: null, negValMinColor: null, negValMaxColor: null, negValMinBgColor: null, negValMaxBgColor: null, negValMinFontSize: null, negValMaxFontSize: null, negValMinFontUnit: null, negValMaxFontUnit: null, init: function() { vbs.fTables = vbs.getElementsByClassName("vbs", "table"); if (vbs.fTables.length > 0) { for (var i=0; i -1) { //then check which rule this is exactly (we don't want to do this for every rule) //don't use if ... else because selectors may be grouped if (st.indexOf(".vbs-posVal-1") > -1) { vbs.setScaleStyleVars(rules[j], "posValMin"); } if (st.indexOf(".vbs-posVal-Max") > -1) { vbs.setScaleStyleVars(rules[j], "posValMax"); } if (st.indexOf(".vbs-negVal-1") > -1) { vbs.setScaleStyleVars(rules[j], "negValMin"); } if (st.indexOf(".vbs-negVal-Max") > -1) { vbs.setScaleStyleVars(rules[j], "negValMax"); } } } } }, setScaleStyleVars: function(rule, prefix) { //gets all styles for a specific scale and sets corresponding variables //get bgColor var bgc = rule.style.backgroundColor;//also works when backgroundColor is set with just "background" vbs[prefix+"BgColor"] = vbs.getRgb(bgc); //get color var c = rule.style.color; vbs[prefix+"Color"] = vbs.getRgb(c); //get fontsize var f = rule.style.fontSize; var fontSize = parseFloat(f);//fontsize as float var fontUnit = f.substring(fontSize.toString().length);//px, em, % vbs[prefix+"FontSize"] = fontSize; vbs[prefix+"FontUnit"] = fontUnit; }, createScaleStyles: function(prefix) { //creates all intermediate styles for pos or neg values and returns css rules //check if at least one of the styles color, background-color and font-size has been set for both min and max values var css = ""; if (vbs.applyColor(prefix) || vbs.applyBgColor(prefix) || vbs.applyFontSize(prefix)) { for (var i=2; i= 0) { vbs.posValMin = (vbs.posValMin === null) ? val : Math.min(val, vbs.posValMin); vbs.posValMax = (vbs.posValMax === null) ? val : Math.max(val, vbs.posValMax); } else if (val <= 0) { vbs.negValMin = (vbs.negValMin === null) ? val : Math.max(val, vbs.negValMin);//smallest negative value, i.e. closest to 0 vbs.negValMax = (vbs.negValMax === null) ? val : Math.min(val, vbs.negValMax);//biggest negative value, i.e. farthest from 0 } } } if (vbs.posValMax !== null && vbs.negValMax !== null) { //then set values to the highest absolute value vbs.posValMin = vbs.negValMin = 0; vbs.posValMax = Math.max(vbs.posValMax, Math.abs(vbs.negValMax)); vbs.negValMax = -vbs.posValMax; } }, addTdClasses: function(tbl) { //adds classes to every td of table tbl var tds = tbl.getElementsByTagName("td"); for (var i=0; i 0) ? "vbs-posVal-" : "vbs-negVal-"; if (scale == vbs.scales) scale = "Max"; className = prefix+scale; } return(className); }, //-- Start helper functions getValue: function(el) { while (el.nodeType != 3 && el.firstChild != null) {//3 is text node el = el.firstChild; } return(el.nodeValue); }, addClassName: function(el, className) { //adds className to el if (el.className == "") { el.className = className; } else { el.className += " "+className; } }, hexToRgb: function(hex) { //returns array[r,g,b] for hex value //param hex: color value in format #ffcc00 if (hex.indexOf("#") != 0 || hex.length != 7) return null; var r = parseInt ( hex.substring (1,3),16); var g = parseInt ( hex.substring (3,5),16); var b = parseInt ( hex.substring (5,7),16); return (new Array(r,g,b)); }, getRgb: function(c) { //transforms color-property c to Array [r,g,b] //browsers return background-color in different ways, for example when set in css as #fc0: //firefox, safari, chrome: rgb(255, 204, 0) //ie: #fc0 //opera: #ffcc00 //any other format (none, transparent) returns null if (c.indexOf("#") == 0) { if(c.length == 4) { //format is #fc0; convert to #ffcc00 rhex = c.substr(1,1); ghex = c.substr(2,1); bhex = c.substr(3,1); c = "#"+rhex+rhex+ghex+ghex+bhex+bhex; }; return(vbs.hexToRgb(c)); } else if (c.indexOf("rgb(") == 0) { c = c.split("rgb(")[1].split(")")[0].split(","); return(c); } else { return null; } }, addCss: function(cssCode) { //adds css to head //thanks to http://yuiblog.com/blog/2007/06/07/style/ var styleElement = document.createElement("style"); styleElement.type = "text/css"; if (styleElement.styleSheet) { styleElement.styleSheet.cssText = cssCode; } else { styleElement.appendChild(document.createTextNode(cssCode)); } document.getElementsByTagName("head")[0].appendChild(styleElement); }, getElementsByClassName: function (className, tag, elm) { /* Developed by Robert Nyman, http://www.robertnyman.com Code/licensing: http://code.google.com/p/getelementsbyclassname/ */ if (document.getElementsByClassName) { getElementsByClassName = function (className, tag, elm) { elm = elm || document; var elements = elm.getElementsByClassName(className), nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null, returnElements = [], current; for(var i=0, il=elements.length; i