Brushed Template Rounded Corners

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

Inspired by Nifty Corners 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

TODO: support rendering of base DIVs from the template.

Usage

%%roundedCorners-<corners>-<color>-<bordercolor>
Here is your text
%%

• corners : defines which corners should be rounded
• color : background color of the box (use hexadecimal html color )
• bordercolor : (optional) border color (use hexadecimal html color )

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)

Blue example, with normal borders

Green example with borders

Several pink blocks with small corners at the top

Mix of corners and size

Combination of two rounded boxes on top of each other.

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;  
}