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
%%
Where:
  • 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)#

BrushedTemplateRoundedCorners/rounded-corners.jpg

Blue example, with normal borders

Here is your text
And some more stuff.

Green example with borders

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

TAB1
TAB2
TAB3

Mix of corners and size

Here is your text

Combination of two rounded boxes on top of each other.

Here is the title of this box
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


Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jpg
rounded-corners.jpg 6.5 kB 1 01-Nov-2005 13:09 DirkFrederickx
« This page (revision-4) was last changed on 08-Jan-2007 03:29 by JimBirch