[{TableOfContents}]
!!! Brushed Template Rounded Corners

This javascript routines allows you to show boxes with rounded corners in your wiki pages.

Inspired by [Nifty Corners|http://pro.html.it/esempio/nifty] by Alessandro Fulciniti;
but completely refactored. It is now tailored to usage from within JSPWiki. I also made
it completely JS driven, so no need for sophisticated css definitions.

Included in [BrushedTemplate]  >Nov 2005  --[DF|DirkFrederickx]

TODO: support rendering of base DIVs from the template.

! Usage

{{{
%%roundedCorners-<corners>-<color>-<bordercolor>
Here is your text
%%
}}}
Where:
* __corners__ : defines which corners should be rounded
* __color__ : background color of the box 
  (use hexadecimal html [color|http://html-color-codes.com/] )
* __bordercolor__ : (optional) border color 
  (use hexadecimal html [color|http://html-color-codes.com/] )

Example
{{{
%%roundedCorners-yyyy-99ccff
Here is your text
%%
}}}

The __corners__ parameters allows you to define how each of the 4 corners should be rendered.
It consists of 4 corner markers: 1st is top-left corner; 2nd is top-right corner; 3rd is bottom-left
corner and 4th is bottom-right corner. The corner marker can be a __y__ (default round corner), 
__s__ (small round corner), __n__ (normal square corner).

For example: the string __yyns__ defines a box where the top corners are rounded, the 
bottom-left corner is a normal square corner and the bottom-right corner is a small rounded corner.
Both rounded corners of either top or bottom will be rendered in the same shape (default or small) Thus, __yyss__ will still render 2 default rounded corners at the top and 2 default small corners at the bottom.

! Examples (only work when feature is activated of course)

[BrushedTemplateRoundedCorners/rounded-corners.jpg]


Blue example, with normal borders

%%roundedCorners-yyyy-99ccff
Here is your text\\
And some more stuff.
%%

Green example with borders

%%roundedCorners-yyyy-CDFFAA-88D84F
aii iuiua uui u uee ueo ei iua eouo ioua eaeuoi ao ae uii uoo euoiu iea aeo aooea uo iia ua uaoio o ei eioe oa a u ue. Uiuio oaou iiu oeeuo oiuui o oaui euuei oiaai euoi uuue aieo iiie ee eeo uoi eoii eii ioe uo uoeee o iuuo iu oiei oi auui.
Ae eau ooia oou eiu iuuui oiiu uoea e aiii ueiau uueee iiou ei eooi uuo uoiao eoeo ie euuo eoiaao oe ee a uii uueiai. Eeii eooi iauuo o uoeo uoa o oieaio au aaoue iiu uo iei oiuu a ooui au uueiei uau iee eue eieuuu ioi ioi uo uooo.
%%

Several pink blocks with small corners at the top

%%(width:100px; margin-left: 0.5em; color:red; float:left;)
%%roundedCorners-ssnn-FFC5FF-c0c0c0
TAB1
%%
%%
%%(width:100px; margin-left: 0.5em; color:red; float:left;)
%%roundedCorners-ssnn-FFC5FF-c0c0c0
TAB2
%%
%%
%%(width:100px; margin-left: 0.5em; color:red; float:left;)
%%roundedCorners-ssnn-FFC5FF-c0c0c0
TAB3
%%
%%
%%(clear:both;)
%%
----

Mix of corners and size
%%roundedCorners-ynyn-F0F0E7-C0C0C0
Here is your text
%%

Combination of two rounded boxes on top of each other.

%%roundedCorners-yynn-99ccff
Here is the title of this box
%%
%%roundedCorners-nnyy-f0f0e7-c0c0c0
This is the bottom text. In contains bold stuff etc.
Try to make some continuations.
* item1
* item2
* item3
%%

! Implementation

As usual, drop the javascript somewhere in your jspwiki.js and make sure
the ''~RoundedCorners.onPageLoad()'' is called after the pages is loaded.

{{{

/**
 ** 220 RoundedCorners
 ** based on Nifty corners by Allesandro Fulciniti
 ** www.pro.html.it
 ** Refactored for JSPWiki
 **
 ** JSPWiki syntax:
 **
 **  %%roundedCorners-<corners>-<color>-<borderColor>
 **  %%
 **
 **  roundedCorners-YYYY-ffc5ff-c0c0c0
 **
 **  corners : "YYYY" where first Y: top-left,    2nd Y: top-right, 
 **                           3rd Y: bottom-left; 4th Y: bottom-right 
 **     value can be : "y" : Normal rounded corner (captial Y)
 **                    "s" : Small rounded corner (lowercase Y)
 **                    "n" : Normal square corner
 **
 **/

var RoundedCorners = new Object();
RoundedCorners.reClassName = new RegExp( "(?:^| )roundedCorners(-\\S+)?" );

RoundedCorners.onPageLoad = function()
{
  var p = document.getElementById( "pagecontent" );       if( !p ) return;
  var r = getElementsByClassName ( p, this.reClassName ); if( !r ) return;

  for( var i=0; i < r.length; i++ )
  {
    this.reClassName.test( r[i].className );
    var parms = RegExp.$1.split('-');
    var corners = ( parms[1] ? parms[1]+"nnnn" : "yyyy" ); 
    var color   = ( parms[2] ? parms[2] : "transparent" );
    var borderColor = parms[3] ;

    this.exec([r[i]], corners, color, borderColor );
  }
}

/** Definition of CORNER dimensions 
 ** Normal    Normal+Border  Small  Small+Border
 ** .....+++  .....BBB       ..+++  ..BBB
 ** ...+++++  ...BB+++       .++++  .B+++
 ** ..++++++  ..B+++++       +++++  B++++
 ** .+++++++  .B++++++
 ** .+++++++  .B++++++
 ** ++++++++  B+++++++
 **
 ** Legend: . background, B border, + forground color
 **/
RoundedCorners.NormalTop = [ { margin: "5px", height: "1px", borderTop: "1px", borderSide: "0"   }
                           , { margin: "3px", height: "1px", borderTop: null , borderSide: "2px" }
                           , { margin: "2px", height: "1px", borderTop: null , borderSide: "1px" } 
                           , { margin: "1px", height: "2px", borderTop: null , borderSide: "1px" }
                           ] ;

RoundedCorners.SmallTop =  [ { margin: "2px", height: "1px", borderTop: "1px", borderSide: "0"   }
                           , { margin: "1px", height: "1px", borderTop: null , borderSide: "1px" }
                           ] ;

RoundedCorners.NormalBottom = RoundedCorners.NormalTop.slice(0,4); 
RoundedCorners.NormalBottom.reverse();                          
RoundedCorners.SmallBottom  = RoundedCorners.SmallTop.slice(0,2);
RoundedCorners.SmallBottom.reverse();

RoundedCorners.exec = function( nodes, corners, color, borderColor )
{
  var c = corners.split(''); /* [0]=top-left; [1]=top-right; [2]=bottom-left; [3]=bottom-right; */

  var nodeTop = null;
  var nodeBottom = null; 
  
  if( c[0]+c[1] != "nn" )  //add top rounded corners
  {
    nodeTop = document.createElement("b") ;
    nodeTop.className = "roundedCorners" ;

    if( (c[0] == "y") || (c[1] == "y") ) 
    {
      this.addCorner( nodeTop, this.NormalTop, c[0], c[1], color, borderColor );
    }
    else if( (c[0] == "s") || (c[1] == "s") )
    {
      this.addCorner( nodeTop, this.SmallTop, c[0], c[1], color, borderColor );    
    }
  }

  if( c[2]+c[3] != "nn" ) //add bottom rounded corners
  {
    nodeBottom = document.createElement("b"); 
    nodeBottom.className = "roundedCorners";

    if( (c[2] == "y") || (c[3] == "y") )
    {
      this.addCorner( nodeBottom, this.NormalBottom, c[2], c[3], color, borderColor );
    }
    else if( (c[2] == "s") || (c[3] == "s") ) 
    {
      this.addCorner( nodeBottom, this.SmallBottom, c[2], c[3], color, borderColor );    
    }
  }
  
  if( (!nodeTop) && (!borderColor) && (!nodeBottom) ) return; 
  
  for( var i=0; i<nodes.length; i++)
  {
    this.addBody( nodes[i], color, borderColor );
    if( nodeTop     )  nodes[i].insertBefore( nodeTop.cloneNode(true), nodes[i].firstChild );
    if( nodeBottom  )  nodes[i].appendChild( nodeBottom.cloneNode(true) );
  }

}

    
//
RoundedCorners.addCorner = function( node, arr, left, right, color, borderColor )
{
  //alert(left+" "+right+" "+color+" "+borderColor);

  for( var i=0; i< arr.length; i++ )
  {
    var n =  document.createElement("b");

    //alert(i+" "+arr[i].margin + arr[i].height + arr[i].borderTop + arr[i].borderSide);
    n.style.height = arr[i].height;
    n.style.display = "block";
    n.style.overflow = "hidden";
    n.style.borderWidth = "0";
    n.style.backgroundColor = "#"+color;
 
    if( borderColor ) 
    { 
      n.style.borderColor = "#"+borderColor;
      n.style.borderStyle = "solid";
      if(arr[i].borderTop)
      {
        n.style.borderTopWidth = arr[i].borderTop;
        n.style.height = "0";
      }
    }

    if( left != 'n' ) n.style.marginLeft = arr[i].margin;
    if( right != 'n' ) n.style.marginRight = arr[i].margin;
    if( borderColor ) 
    {
      n.style.borderLeftWidth  = ( left  == 'n' ) ? "1px" : arr[i].borderSide;    
      n.style.borderRightWidth = ( right == 'n' ) ? "1px" : arr[i].borderSide;
    }
    node.appendChild( n );
  }
}


// move all children of the node inside a DIV and set color and bordercolor 
RoundedCorners.addBody = function( node, color, borderColor)
{
  if( node.passed ) return;

  var container = document.createElement("div");
  container.style.padding = "0 4px";
  container.style.backgroundColor = "#"+color;
  if( borderColor )  
  {
    container.style.borderLeft  = "1px solid #" + borderColor;
    container.style.borderRight = "1px solid #" + borderColor;
  }

  while( node.firstChild ) container.appendChild( node.firstChild );
  
  node.appendChild( container );
  node.passed=true;  
}

}}}

----
Back to [BrushedTemplate]


----