// round_colors.js -- vim:ts=2:sw=2 // Copyright (c) 2007 Thomas Fee // Permission is hereby granted, free of charge, to any person to use this software // under the terms of the "MIT License" -- ref: http://www.opensource.org/licenses/mit-license.php // THE COPYRIGHT HOLDER ASSERTS THAT THIS SOFTWARE IS NOT FIT FOR ANY PURPOSE, EXCEPT BY ACCIDENT, // EVEN THOUGH THIS SOFTWARE IS DESIGNED FOR A PURPOSE. // THE USER ACCEPTS ALL LOSSES AND DAMAGES, DIRECT OR CONSEQUENTIAL, ARISING FROM THE USE OF THIS SOFTWARE. // THERE IS ABSOLUTELY NO WARRANTY, EXPRESSED OR IMPLIED. // Based on Nifty Corners By Alessandro Fulciniti -- http://www.html.it/articoli/nifty/index.html // Example usage: //

Heading One

// The above means that the h1 render will have a rounded box bounding it. // The background color is "rose" and the line color is "purple". // The box will be offset by 56 "pixels" from the left. // The line style will always be solid 1px. // Instead of

, you can have any HTML, including multiple tags in sequence. // Typically, in the part of the HTML document: // -- User must include round_colors.css -- See the comments in that file for more information. // -- User must set window.onload to MakeRound() or have MakeRound() be included in whatever // window.onload does. // -- User must define SetColors(), whose purpose is to call SetColor() multiple times. // For example: // function SetColors() { // SetColor('rose' ,'#FF99CC') // SetColor('purple' ,'#CC99FF') // } // ------------------------------------------------------------------------------------ // Save the color name to value definitions provided by the user. // Note that the user does not always have to specify a color by name: // He can specify a color by hex, e.g. //
Heading One
var colorMap = {} var colorKeys = [] function SetColor(name,value) { colorMap[name] = value colorKeys.push(name) } // Turn all the specified box-able units in the HTML into boxed units. // The inputs are all the tags, usually
tags, with class "round". // In addition to "round", the class attribute can have color values, // which can be named colors or hex values. The one preceded with an underscore // is the line color. Both color values are optional. // Whatever is not supplied gets the default value. // The left offset can be specified with an addition spec in the class attribute. // The format is mlNNxx where NN is a number and xx can be either "px" or "em". function MakeRound() { // Define the defaults var DEFAULT_COLOR = '#F00000' var OUTLINE_COLOR = '#666666' var LEFT_OFFSET = '0px' // Get the user-defined values SetColors() // Round and colorize each box var bcolor, lcolor, m_left $$('.round').each(function(r){ // Parse the styles for a rounded box bcolor = lcolor = m_left = null r.className.split(/\s/).each(function(cn){ // Pick up the background color if (colorKeys.indexOf(cn) != -1) bcolor = colorMap[cn] else if (cn.length > 0 && cn.charAt(0) == '#') bcolor = cn // Pick up the line (border) color if (cn.length > 1 && cn.charAt(0) == '_') { var cn1 = cn.slice(1) if (colorKeys.indexOf(cn1) != -1) lcolor = colorMap[cn1] else if (cn1.length > 0 && cn1.charAt(0) == '#') lcolor = cn1 } // Pick up the margin-left amount if (cn.match(/^ml[0-9]+(px|em)$/) != null) m_left = cn.slice(2) }) // Use defaults when specs aren't supplied bcolor = bcolor || DEFAULT_COLOR lcolor = lcolor || OUTLINE_COLOR m_left = m_left || LEFT_OFFSET // Create the DOM artifacts for a rounded box var solidcolor = ' solid ' + lcolor + ';' var bleft = ' border-left:2px' + solidcolor var borderlr2 = (bleft + bleft).replace(/left/,'right') var borderlr1 = borderlr2.replace(/2px/g,'1px') var bordrmain = ' border:0' + solidcolor + ' border-width:0 1px;' var s = ' style="background:' + bcolor + ';' var a = '' var b = '' var i = '' var u = '' // The box spec, normally a
element, (and children) are replaced with new stuff r.innerHTML = '
'+ '
'+a+b+i+u+'
'+ '
'+ r.innerHTML + '
'+ '
'+u+i+b+a+'
'+ '
' }) } /* The purpose of the above code is to generate HTML of this structure (taking the h1 example from the top of the file):

...top-most line of the box ...next line of the box ...etc

...provides the background color, etc
Heading One
...user-supplied stuff

...top-most line in the bottom "fat edge" of the box ...next line ...bottom-most line of the box

Here, "line" means a pixel-high line on the screen. */